summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorThomas Voss <mail@thomasvoss.com> 2023-07-30 20:37:00 +0200
committerThomas Voss <mail@thomasvoss.com> 2023-07-30 20:37:00 +0200
commit2a46bed1fca23a5498ad9ffee7bd6fc67bc4938b (patch)
treebfe581dfa2e9f425ef5d7b361b08589b626c80f1
parent0afa726fe223c898490c8a90c7c49bca23f46845 (diff)
Improve the site on mobile
-rw-r--r--src/style.css112
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; }
+}