_content.scss (4191B)
1 .content { 2 flex: 1; 3 display: flex; 4 margin-top: 1.6rem; 5 margin-bottom: 3.2rem; 6 @media only screen and (max-width: 768px) { 7 margin-top: 1rem; 8 margin-bottom: 1.6rem; 9 } 10 11 header { 12 margin-top: 6.4rem; 13 margin-bottom: 3.2rem; 14 15 h1 { 16 font-size: 4.2rem; 17 line-height: 4.6rem; 18 margin: 0; 19 20 @media only screen and (max-width: 768px) { 21 font-size: 4rem; 22 line-height: 4.4rem; 23 } 24 } 25 } 26 27 article { 28 a:where(.external-link):not(:has(img)):after { 29 @extend %fa-icon; 30 @extend .fa-solid; 31 content: fa-content($fa-var-external-link); 32 padding-left: 0.5em; 33 font-size: 0.75em; 34 display: inline; 35 } 36 37 details { 38 summary { 39 cursor: pointer; 40 } 41 } 42 43 footer { 44 margin-top: 4rem; 45 46 .see-also { 47 margin: 3.2rem 0; 48 49 h3 { 50 margin: 3.2rem 0; 51 } 52 } 53 } 54 55 p { 56 text-align: justify; 57 text-justify: auto; 58 -ms-hyphens: auto; 59 -webkit-hyphens: auto; 60 hyphens: auto; 61 } 62 } 63 64 .post { 65 .post-title { 66 margin-bottom: 0.75em; 67 } 68 69 .post-meta { 70 i { 71 text-align: center; 72 width: 1.6rem; 73 margin-left: 0; 74 margin-right: 0.5rem; 75 } 76 77 .date { 78 .posted-on { 79 margin-left: 0; 80 margin-right: 1.5rem; 81 } 82 } 83 84 .tags { 85 .tag { 86 display: inline-block; 87 padding: 0.3rem 0.6rem; 88 background-color: $alt-bg-color; 89 border-radius: 0.6rem; 90 line-height: 1.5em; 91 92 a { 93 color: $fg-color; 94 } 95 96 a:active { 97 color: $fg-color; 98 } 99 } 100 } 101 } 102 } 103 104 figure { 105 margin: 0; 106 padding: 0; 107 } 108 109 figcaption p { 110 text-align: center; 111 font-style: italic; 112 font-size: 1.6rem; 113 margin: 0; 114 } 115 } 116 117 .avatar img { 118 width: 20rem; 119 height: auto; 120 border-radius: 50%; 121 122 @media only screen and (max-width: 768px) { 123 width: 17rem; 124 } 125 } 126 127 .list { 128 ul { 129 margin: 3.2rem 0 3.2rem 0; 130 list-style: none; 131 padding: 0; 132 133 li { 134 font-size: 1.8rem; 135 136 @media only screen and (max-width: 768px) { 137 margin: 1.6rem 0 1.6rem 0; 138 } 139 140 .date { 141 display: inline-block; 142 flex: 1; 143 width: 20rem; 144 text-align: right; 145 margin-right: 3rem; 146 147 @media only screen and (max-width: 768px) { 148 display: block; 149 text-align: left; 150 } 151 } 152 153 .title { 154 font-size: 1.8rem; 155 flex: 2; 156 color: $fg-color; 157 font-family: $font-family; 158 font-weight: 700; 159 160 &:hover, 161 &:focus { 162 color: $link-color; 163 } 164 } 165 } 166 } 167 168 ul:not(.pagination) { 169 li { 170 @media only screen and (min-width: 768.1px) { 171 display: flex; 172 } 173 } 174 } 175 } 176 177 .centered { 178 display: flex; 179 align-items: center; 180 justify-content: center; 181 182 .about { 183 text-align: center; 184 185 h1 { 186 margin-top: 2rem; 187 margin-bottom: 0.5rem; 188 } 189 190 h2 { 191 margin-top: 1rem; 192 margin-bottom: 0.5rem; 193 font-size: 2.4rem; 194 195 @media only screen and (max-width: 768px) { 196 font-size: 2rem; 197 } 198 } 199 200 ul { 201 list-style: none; 202 margin: 3rem 0 1rem 0; 203 padding: 0; 204 cursor: pointer; 205 206 li { 207 display: inline-block; 208 position: relative; 209 210 a { 211 color: $fg-color; 212 text-transform: uppercase; 213 margin-left: 1rem; 214 margin-right: 1rem; 215 font-size: 1.6rem; 216 217 &:hover, 218 &:focus { 219 color: $link-color; 220 } 221 222 @media only screen and (max-width: 768px) { 223 font-size: 1.5rem; 224 } 225 } 226 } 227 } 228 } 229 230 .error { 231 text-align: center; 232 233 h1 { 234 margin-top: 2rem; 235 margin-bottom: 0.5rem; 236 font-size: 4.6rem; 237 238 @media only screen and (max-width: 768px) { 239 font-size: 3.2rem; 240 } 241 } 242 243 h2 { 244 margin-top: 2rem; 245 margin-bottom: 3.2rem; 246 font-size: 3.2rem; 247 248 @media only screen and (max-width: 768px) { 249 font-size: 2.8rem; 250 } 251 } 252 } 253 }