comments.css (1135B)
1 2 .pfp { 3 width: 60px; 4 height: 60px; 5 margin: 0 15px 0 15px; 6 border-radius: 50%; 7 } 8 9 .comment { 10 display: flex; 11 font-family: system-ui, sans; 12 margin-bottom: 20px; 13 flex-wrap: wrap; 14 align-items: center; 15 } 16 17 .comment p { 18 background-color: rgba(255.0,255.0,255.0,0.1); 19 padding: 10px; 20 border-radius: 8px; 21 margin: 0; 22 width: 55%; 23 } 24 25 .comment .info { 26 text-align: right; 27 width: 18%; 28 line-height: 0.8em; 29 } 30 31 .quote { 32 border-left: 2px solid white; 33 margin-left: 10px; 34 padding: 10px; 35 background-color: rgba(255.0,255.0,255.0,0.1); 36 display: block; 37 } 38 39 .comment .info span { 40 font-size: 11px; 41 color: rgba(255.0,255.0,255.0,0.7); 42 } 43 44 @media (max-width: 800px){ 45 /* Reverse the order of elements in the user comments, 46 so that the avatar and info appear after the text. */ 47 .comment .info { 48 order: 2; 49 width: 50%; 50 text-align: left; 51 } 52 53 .pfp { 54 order: 1; 55 margin: 0 15px 0 0; 56 } 57 58 .comment { 59 padding: 10px; 60 border-radius: 8px; 61 background-color: rgba(255.0,255.0,255.0,0.1); 62 } 63 64 .comment p { 65 order: 3; 66 margin-top: 10px; 67 width: 100%; 68 } 69 }