Improve the site on mobile

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; }
+}