styles.scss (7635B)
1 @import "variables"; 2 @import "fonts"; 3 @import "content"; 4 5 html { 6 @include themify($themes) { 7 background-color: themed('color-background'); 8 color: themed('color-text'); 9 font-weight: themed('font-weight'); 10 } 11 font-family: $font-text; 12 letter-spacing: 0.025rem; 13 line-height: 1.6; 14 text-rendering: optimizeLegibility; 15 font-size: 16px; 16 } 17 18 @media (max-width: 599px) { 19 html { 20 font-size: 15px; 21 } 22 body { 23 padding: 0 1.5em; 24 margin: 0; 25 } 26 } 27 28 strong { 29 @include themify($themes) { 30 font-weight: themed('font-weight-bold'); 31 } 32 } 33 34 body { 35 @include themify($themes) { 36 background-color: themed('color-background'); 37 color: themed('color-text'); 38 } 39 max-width: 600px; 40 margin: 0 auto; 41 } 42 43 [hidden] { 44 display: none; 45 } 46 47 pre { 48 overflow: auto; 49 padding: 0.5rem; 50 } 51 52 :not(pre) > code { 53 @include themify($themes) { 54 background-color: themed('color-background-hover'); 55 } 56 } 57 58 hr { 59 border: 0; 60 height: 0; 61 @include themify($themes) { 62 border-top: 1px solid themed('color-text'); 63 } 64 &.list__subtitle { 65 margin-bottom: 2rem; 66 } 67 } 68 69 code { 70 padding: 0.1rem; 71 font-family: $font-mono; 72 font-size: 0.9rem; 73 &.language-bash { 74 &:before { 75 content: "$ "; 76 } 77 } 78 } 79 80 h1, h2, h3, h4, h5 { 81 @include themify($themes) { 82 color: themed('color-green'); 83 font-weight: themed('font-weight'); 84 } 85 font-family: $font-text; 86 line-height: 1.3; 87 position: relative; 88 a { 89 font-family: $font-mono; 90 } 91 } 92 93 h1:not(.header__title) { 94 font-size: 2.2rem; 95 } 96 97 a { 98 text-decoration: none; 99 @include themify($themes) { 100 color: themed('color-blue'); 101 &.link-white, .link-white { 102 color: themed('color-text'); 103 } 104 } 105 &#active { 106 cursor: default; 107 } 108 &:hover:not(.wm-avatar):not(.no-hover), &#active { 109 @include themify($themes) { 110 background-color: themed('color-background-hover'); 111 color: themed('color-red'); 112 } 113 &:not(.no-outline):not(.footnote-ref) { 114 outline-style: solid; 115 outline-width: 0.3rem; 116 @include themify($themes) { 117 outline-color: themed('color-background-hover'); 118 background-color: themed('color-background-hover'); 119 } 120 } 121 } 122 &.button { 123 display: inline-block; 124 padding: 0.3rem 0.7rem; 125 @media(max-width: 360px) { 126 padding: 0.3rem; 127 } 128 } 129 } 130 131 blockquote { 132 margin: inherit auto; 133 margin-left: 0; 134 padding: 0 1em; 135 border-left: 2px solid; 136 @include themify($themes) { 137 border-color: themed('color-red'); 138 } 139 p { 140 font-size: 0.9rem; 141 } 142 } 143 144 time { 145 @include themify($themes) { 146 color: themed('color-red'); 147 } 148 font-family: $font-mono; 149 &[title] { 150 cursor: help; 151 } 152 } 153 154 .listing { 155 &__post { 156 width: 100%; 157 display: inline-block; 158 padding: 0.5rem 0 0.7rem; 159 @media (max-width: 599px) { 160 padding: 0.3em 0 1.3em 0; 161 } 162 &__title { 163 margin: 0.01rem; 164 } 165 &__description { 166 margin: 0; 167 margin-top: 0.8em; 168 } 169 } 170 } 171 172 .header { 173 margin-top: 1em; 174 @media (min-width: 600px) { 175 &__title:not(h1) { 176 margin-top: 1.4em; 177 } 178 } 179 @media (max-width: 599px) { 180 &__title { 181 font-size: 1.4rem; 182 margin: 1rem 0; 183 } 184 } 185 @media (max-width: 360px) { 186 &__title { 187 font-size: 1.2em; 188 } 189 } 190 191 &__menu { 192 margin: 0 0 10px; 193 display: flex; 194 justify-content: flex-start; 195 &__list { 196 padding: 0; 197 margin: 0; 198 display: flex; 199 flex-grow: 1; 200 flex-wrap: nowrap; 201 @media (max-width: 599px) { 202 justify-content: space-between; 203 } 204 &__item { 205 &:first-child { 206 margin-left: 0; 207 } 208 margin: 0 0.4rem; 209 border-style: solid; 210 border-width: 1px; 211 @media (max-width: 599px) { 212 margin: 0 0.1rem; 213 font-size: 0.9rem; 214 } 215 @media (max-width: 360px) { 216 font-size: 0.8rem; 217 } 218 } 219 220 &__toggler { 221 &__off { 222 display: none; 223 } 224 font-size: 1.5rem; 225 padding: 0 0.3em; 226 background-color: transparent; 227 background-repeat: no-repeat; 228 border: none; 229 cursor: pointer; 230 overflow: hidden; 231 outline: none; 232 @media (min-width: 600px) { 233 margin-left: 20px; 234 } 235 &:hover { 236 @include themify($themes) { 237 background-color: themed('color-background-hover'); 238 } 239 } 240 } 241 } 242 } 243 } 244 245 .main { 246 &__more { 247 padding: 1em 0 0; 248 margin-bottom: 0; 249 margin-right: 0.3em; 250 text-align: right; 251 } 252 } 253 254 .summary { 255 margin: 1.5em 0; 256 p { 257 margin: 0em 0 0.4em; 258 } 259 &__title { 260 margin-bottom: 0; 261 } 262 } 263 264 .pagination { 265 padding: 1em 0; 266 display: flex; 267 &__left { 268 text-align: left; 269 margin-left: 0.3rem; 270 } 271 &__center { 272 flex: 1; 273 text-align: center; 274 } 275 &__right { 276 text-align: right; 277 margin-right: 0.3rem; 278 } 279 } 280 281 .tagitem { 282 font-family: $font-mono; 283 margin: 0 0.4rem; 284 } 285 286 .footer { 287 &__separator { 288 margin: 0.5rem auto 1.4rem; 289 } 290 291 &__nav { 292 display: flex; 293 flex-direction: row; 294 justify-content: space-between; 295 margin-bottom: 1.5em; 296 & > p { 297 margin: 0; 298 } 299 &__left { 300 text-align: left; 301 } 302 &__right { 303 text-align: right; 304 a { 305 padding: 0 0.2rem; 306 margin: 0 0.2rem; 307 } 308 } 309 @media (max-width: 599px) { 310 font-size: 0.9rem; 311 display: flex; 312 flex-direction: column; 313 &__left { 314 text-align: center; 315 padding-bottom: 0.5em; 316 margin: 0; 317 } 318 &__right { 319 text-align: center; 320 margin-top: 0; 321 a { 322 line-height: 2rem; 323 } 324 } 325 } 326 @media (max-width: 400px) { 327 &__right { 328 a { 329 padding: 0 0.15rem; 330 margin: 0 0.15rem; 331 } 332 } 333 } 334 } 335 336 &__analytic { 337 font-size: 0.8em; 338 } 339 340 .hcard { 341 max-width: 19rem; 342 font-size: 0.8rem; 343 margin: 2rem auto 0.5rem; 344 padding: 1rem 1rem 0.8rem; 345 position: relative; 346 @include themify($themes) { 347 border: solid 1px themed('color-border'); 348 } 349 &__description { 350 top: -0.7rem; 351 left: 0.8rem; 352 padding: 0 0.4rem; 353 position: absolute; 354 @include themify($themes) { 355 background-color: themed('color-background'); 356 } 357 & > p { 358 margin: 0; 359 } 360 } 361 .h-card { 362 position: relative; 363 img { 364 position: absolute; 365 width: 3.8rem; 366 height: 3.8rem; 367 } 368 & > a { 369 margin-left: 5rem; 370 } 371 & > .p-locality { 372 margin-left: 5rem; 373 } 374 } 375 } 376 377 .web-ring { 378 font-size: 0.8rem; 379 margin: 0 0 1.5rem; 380 } 381 382 &__license { 383 margin: 0.7rem 0 1rem; 384 font-size: 0.7rem; 385 } 386 } 387 388 .footnotes { 389 hr { 390 margin-top: 3rem; 391 margin-bottom: 0.2rem; 392 } 393 &__text { 394 margin: 0; 395 } 396 } 397 .footnote-ref { 398 &:before { 399 content: '['; 400 } 401 &:after { 402 content: ']'; 403 } 404 } 405 406 .bottom-hcard-container { 407 margin: 4rem 0 1rem; 408 } 409 .hcard-top { 410 margin: 0 0 0.8rem; 411 font-size: 0.9rem; 412 } 413 .hcard-tags { 414 margin: 0.8rem 0 0.7rem; 415 } 416 .hcard-bottom { 417 margin: 0; 418 font-size: 0.9rem; 419 } 420 421 .wm-hr { 422 margin-bottom: 0.2rem; 423 } 424 .wm-div { 425 margin-bottom: 3rem; 426 } 427 428 .wm-title { 429 margin: 0 0 0.7rem; 430 } 431 .wm-subtitle { 432 margin: 0.7rem 0 0.3rem; 433 font-size: 0.8rem; 434 } 435 436 a.wm-avatar { 437 width: 2rem; 438 height: 2rem; 439 font-size: 0.6rem; 440 margin-right: 0.4rem; 441 } 442 img.wm-avatar { 443 width: 2rem; 444 height: 2rem; 445 border-radius: 1rem; 446 } 447 448 .wm-reply { 449 margin-bottom: 1rem; 450 padding-left: 1rem; 451 } 452 .wm-reply-head { 453 display: flex; 454 align-items: center; 455 } 456 .wm-reply-content { 457 margin-top: 0.4rem; 458 font-size: 0.9rem; 459 }