diff options
Diffstat (limited to 'scss')
-rw-r--r-- | scss/style.scss | 127 |
1 files changed, 62 insertions, 65 deletions
diff --git a/scss/style.scss b/scss/style.scss index 0c787e2..ff443b9 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -15,12 +15,31 @@ $mute-text: #5a5a5a; body { background-color: white; color: black; - line-height: 1.6; - margin: 0; + line-height: 1.3; + + max-width: 1024px; + margin: 1rem auto; + padding: 0 1rem; + + font-family: $font-sans; + font-size: 1.3rem; +} + +body.frontpage { + header { font-size: larger; } + + nav ul { + list-style: none; + padding: 0; + } + + hr { + border: none; + border-top: 3px double darkgrey; + } } h1 { - font-family: $font-serif; font-size: 3.5rem; font-weight: normal; margin: 0; @@ -34,7 +53,6 @@ code { pre { background-color: $canary; color: $canary-text; - line-height: 1.3; overflow: auto; padding: .7rem; } @@ -61,71 +79,50 @@ blockquote > p { margin: 0; } -.frontpage { - background-color: $yellow; - font-family: $font-serif; - font-size: 4rem; -} +nav li > article { + display: flex; + flex-direction: column; -.post { - font-family: $font-sans; - font-size: 1.3rem; + margin-bottom: 1.5rem; - header { - font-size: 1.5rem; + font-size: 2.7rem; + line-height: 1.2; + + a { + text-decoration: none; } -} -nav.main ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - list-style: none; - margin: .5rem; - padding: 0; -} + a:hover { + text-decoration: underline; + } -nav.main li a { - background-color: white; - border: 4px solid black; - box-shadow: 10px 10px 0 black; - color: black; - display: block; - margin: .8rem .8rem; - padding: 0 .8rem; - text-decoration: none; -} + time { + display: flex; -nav.main li a:hover { - background-color: black; - color: white; -} + font-size: 60%; + color: $mute-text; + } -nav.main li a:focus { - background-color: black; - color: white; + a { align-self: flex-start; } } -article { - margin: 1rem auto; - max-width: 1024px; - padding: 0 1rem; +header.post { + font-size: 1.5rem; + border-bottom: 1px solid darkgrey; - header { - border-bottom: 1px solid darkgrey; + a { + background-color: white; + font-weight: bold; + text-decoration: none; + } - a { - background-color: white; - font-weight: bold; - text-decoration: none; - } + time { font-size: smaller; } - address { - display: none; - } + address { display: none; } +} - time { font-size: smaller; } - } +section.post { + line-height: 1.6; img { display: block; @@ -152,16 +149,16 @@ article { sup > a { text-decoration: none; } -} -figure { - figcaption { - color: $mute-text; - text-align: center; - font-size: smaller; + figure { + figcaption { + color: $mute-text; + text-align: center; + font-size: smaller; - padding-top: .5em; - } + padding-top: .5em; + } - > img.round { border-radius: 5px; } + > img.round { border-radius: 5px; } + } } |