diff options
Diffstat (limited to '_css')
-rw-r--r-- | _css/style.css | 76 |
1 files changed, 32 insertions, 44 deletions
diff --git a/_css/style.css b/_css/style.css index b2d724b..369bc2c 100644 --- a/_css/style.css +++ b/_css/style.css @@ -39,20 +39,13 @@ html { background-color: var(--text-bg); box-sizing: border-box; color: var(--text-fg); + font-size: min(max(100%, 2vw), 24px); margin: auto; max-width: 72ch; - padding: 1ch; scrollbar-color: var(--fade-fg) var(--block-bg); } -/* Keep minimum font size to the usual default of 16px */ -@media (min-width: 800px) { - html { - font-size: min(23px, 2vw); - margin-left: auto; - margin-right: auto; - } -} +body { margin: 0 1rem } .franklin-content .row { display: block } @@ -76,18 +69,6 @@ html { } /* Titles */ -.franklin-content h1 { - padding-bottom: 0.5rem; - border-bottom: 0.15rem solid var(--fade-fg); - margin-top: 2rem; -} - -.franklin-content h2 { - padding-bottom: 0.3rem; - border-bottom: 0.08rem solid var(--fade-fg); - margin-top: 2rem; -} - .franklin-content h1 a, .franklin-content h2 a, .franklin-content h3 a, @@ -110,18 +91,8 @@ html { list-style-type: lower-alpha; } -.franklin-content blockquote { - background: var(--block-bg); - border-left: 0.25rem solid var(--fade-fg); - font-style: italic; - margin: 0; - padding: 1ch 1ch; -} - -.franklin-content blockquote p { display: inline } - /* General formatting */ -/* Spacing between bullet points. */ +.franklin-content ol, .franklin-content ul { margin: 1ch 0 } .franklin-content li p { margin: 1ch 0 } .franklin-content a { @@ -178,15 +149,29 @@ html { */ /* Boxes */ +.franklin-content blockquote, .note { + margin: 0 -1rem; + padding-bottom: 1ex; + padding-left: 0.75rem; + padding-right: 1rem; + padding-top: 1ex; +} + +.franklin-content blockquote p, .note p { display: inline } + +.franklin-content blockquote { + background: var(--block-bg); + border-left: 0.25rem solid var(--fade-fg); +} + .note { background-color: #51affe25; border-left: 0.25rem solid var(--blue); - padding: 0.1rem 1rem; } /* Header */ header { - margin: 1rem -0.5rem; + margin: 1.5rem -0.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -203,22 +188,25 @@ header a { } header a:hover { color: var(--text-fg) } -/* Footer */ -.franklin-content .page-foot a { +/* Metadata */ +.metadata, .page-foot { color: var(--fade-fg); - text-decoration: underline; + font-size: 80%; +} + +.metadata { + margin-top: -1rem; + margin-bottom: 1rem; } .page-foot { - color: var(--fade-fg); - font-size: 80%; - margin: 1.5rem 0; + margin-top: 1.5rem; + margin-bottom: 2rem; } -/* Balance the horizontal margin with extra vertical ones. */ -@media (min-width: 576px) { - header { margin-top: 2rem } - .page-foot { margin-bottom: 3rem } +.metadata a, .franklin-content .page-foot a { + color: var(--fade-fg); + text-decoration: underline; } nav, nav li { display: inline-block } |