diff options
-rw-r--r-- | src/style.css | 112 |
1 files changed, 66 insertions, 46 deletions
diff --git a/src/style.css b/src/style.css index 45ac7df..fd2468b 100644 --- a/src/style.css +++ b/src/style.css @@ -15,9 +15,7 @@ body { font-family: var(--serif); - font-size: 1.2rem; font-variant-numeric: lining-nums; - line-height: 1.5; text-align: justify; color: var(--fg); background-color: var(--bg); @@ -28,18 +26,18 @@ body > * { grid-column: 2; } pre, code, kbd, samp { font-family: var(--mono); - font-size: 1rem; + font-size: 0.8rem; color: var(--accent); + overflow-wrap: none; } -pre > code { color: var(--fg); } + pre > code { color: var(--fg); } +:not(pre) > code { white-space: nowrap; } h1 { - font-size: 3rem; + font-size: 1.8rem; margin-bottom: 0; } -h2 { font-size: 2.5rem; } - -h1, h2, p { overflow-wrap: break-word; } +h2 { font-size: 1.2rem; } a { color: var(--accent); } a:hover { text-decoration: none; } @@ -53,7 +51,7 @@ blockquote, blockquote + figcaption { font-style: italic; } .quote { border-left: 4px solid var(--accent); padding: .4rem .8rem; - margin-inline: 2rem 0; + margin-inline: 1rem 0; margin-block: 2rem; } @@ -92,43 +90,6 @@ x-ref { font-size: .8rem; } -aside > p::before { - content: attr(data-ref); - position: absolute; - left: -1.5ch; -} - -abbr { - cursor: help; - position: relative; - text-decoration-line: underline; - text-decoration-style: dotted; -} - -abbr:hover::before { - opacity: 1; - pointer-events: inherit; -} - -abbr::before { - opacity: 0; - position: absolute; - bottom: 100%; - transition: .15s ease opacity; - white-space: nowrap; - padding: .15em .25em; - border: 1px solid var(--fg); - border-radius: 2px; - background: var(--bg-accent); - pointer-events: none; -} - -abbr.cpu::before { content: 'Central Processing Unit'; } -abbr.ec::before { content: 'Embedded Controller'; } -abbr.html::before { content: 'Hypertext Markup Language'; } -abbr.led::before { content: 'Light-Emitting Diode'; } -abbr.rgb::before { content: 'Red Green Blue'; } - figure > pre { margin-left: 4ch; overflow-x: scroll; } figure > pre > code { counter-increment: line; } figure > pre > code::before { @@ -171,3 +132,62 @@ header > div li { list-style: none; } .diff-del { color: var(--red); } .diff-loc { color: var(--lesser); } .diff-meta { font-weight: bold; } + +@media (min-width: 40em) { + body { + font-size: 1.2rem; + line-height: 1.5; + } + pre, code, kbd, samp { font-size: 1rem; } + h1 { font-size: 3rem; } + h2 { font-size: 2.5rem; } + + .quote { margin-inline: 2rem 0; } + + aside > p::before { + content: attr(data-ref); + position: absolute; + left: -1.5ch; + } + + abbr { + cursor: help; + position: relative; + text-decoration-line: underline; + text-decoration-style: dotted; + } + + abbr:hover::before { + opacity: 1; + pointer-events: inherit; + } + + abbr::before { + opacity: 0; + position: absolute; + bottom: 100%; + transition: .15s ease opacity; + white-space: nowrap; + padding: .15em .25em; + border: 1px solid var(--fg); + border-radius: 2px; + background: var(--bg-accent); + pointer-events: none; + } + + abbr.cpu::before { content: 'Central Processing Unit'; } + abbr.ec::before { content: 'Embedded Controller'; } + abbr.html::before { content: 'Hypertext Markup Language'; } + abbr.led::before { content: 'Light-Emitting Diode'; } + abbr.rgb::before { content: 'Red Green Blue'; } +} + +@media (max-width: 40em) { + body { tab-size: 4; } + main { margin-block-end: 2rem; } + h1, h2, p { overflow-wrap: break-word; hyphens: auto; } + figure { margin-inline: 0; } + header > div { display: block; } + ul, menu { padding-inline-start: 0; } + :where(ul, menu) > li:not(:last-of-type) { margin-block-end: .3rem; } +} |