diff --git a/components/cz/header.html b/components/cz/header.html
index 8daad3e..78661a1 100644
--- a/components/cz/header.html
+++ b/components/cz/header.html
@@ -1,6 +1,10 @@
-
-
- 
-
+
+
+
+
+
diff --git a/components/cz/nav.html b/components/cz/nav.html
index 6ecb7b1..469dc19 100644
--- a/components/cz/nav.html
+++ b/components/cz/nav.html
@@ -1,8 +1,10 @@
diff --git a/components/en/header.html b/components/en/header.html
index 6d8b35f..a732c17 100644
--- a/components/en/header.html
+++ b/components/en/header.html
@@ -1,6 +1,10 @@
-
-
-
-
+
+
+
+
+
diff --git a/components/en/nav.html b/components/en/nav.html
index 55a1f7f..978b759 100644
--- a/components/en/nav.html
+++ b/components/en/nav.html
@@ -1,8 +1,10 @@
diff --git a/styles.css b/styles.css
index ae79a67..0ba46f9 100644
--- a/styles.css
+++ b/styles.css
@@ -1,21 +1,19 @@
:root {
--light-fg-color: black;
--light-bg-color: white;
- --light-outer-shadow-color: #BBBBBB;
- --light-outer-bg-color: #E4E4E4;
--light-alt-bg-color: #FFFFD0;
--light-field-hover-bg-color: #F0F0F0;
--light-field-active-bg-color: #E0E0E0;
- --light-link-idle-color: blue;
+ --light-link-idle-color: darkred;
+ --light-sep-color: gainsboro;
--dark-fg-color: white;
--dark-bg-color: #202020;
- --dark-outer-shadow-color: #000000;
- --dark-outer-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
- --dark-link-idle-color: lightblue;
+ --dark-link-idle-color: #ff8e8e;
+ --dark-sep-color: #2e2e2e;
}
:root {
@@ -24,15 +22,13 @@
--nav-fg-color: white;
--nav-bg-color: darkred;
--nav-bg-color-selected: #C00000;
- --sep-color: gray;
+ --text-subtle-color: gray;
}
@media (prefers-color-scheme: light) {
:root {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
- --outer-shadow-color: var(--light-outer-shadow-color);
- --outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
@@ -43,13 +39,13 @@
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
+
+ --sep-color: var(--light-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
- --outer-shadow-color: var(--dark-outer-shadow-color);
- --outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -60,6 +56,8 @@
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
+
+ --sep-color: var(--dark-sep-color);
}
}
@@ -67,8 +65,6 @@
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
- --outer-shadow-color: var(--dark-outer-shadow-color);
- --outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -79,13 +75,13 @@
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
+
+ --sep-color: var(--dark-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
- --outer-shadow-color: var(--light-outer-shadow-color);
- --outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
@@ -96,6 +92,8 @@
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
+
+ --sep-color: var(--light-sep-color);
}
}
@@ -108,9 +106,9 @@
}
html {
- margin: 0;
- background-color: var(--outer-bg-color);
+ background-color: var(--bg-color);
min-height: calc(100% - 32px);
+ margin: 0;
}
body {
@@ -120,27 +118,37 @@ body {
flex-direction: column;
color: var(--fg-color);
background-color: var(--bg-color);
+ margin: 0;
}
header {
- padding: calc(16px - 8px) 16px;
+ display: flex;
+ padding: 1.5em 0;
position: relative;
background-color: var(--bg-color);
+ align-items: center;
+ justify-content: space-between;
+ width: min(90%, 50em);
+ margin: auto;
+}
+
+[data-layout="wide"] header {
+ width: 90%;
+}
+
+header .buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.light-dark-switch {
- position: absolute;
- top: 16px;
- right: 16px;
cursor: pointer;
content: var(--theme-switch-icon);
width: 20px;
}
.layout-switch {
- position: absolute;
- top: 48px;
- right: 16px;
cursor: pointer;
content: var(--layout-switch-icon);
width: 20px;
@@ -155,11 +163,13 @@ header * {
}
.header-title {
- font-size: 32px;
+ font-size: 2em;
+ font-weight: bold;
}
.header-subtitle {
- font-size: 24px;
+ color: var(--text-subtle-color);
+ font-size: 1.3em;
}
.full-width {
@@ -203,9 +213,24 @@ nav {
user-select: none;
}
+nav div {
+ width: min(90%, 50em);
+ margin: auto;
+}
+
+[data-layout="wide"] nav div {
+ width: 90%;
+}
+
main {
flex-grow: 1;
padding: 16px;
+ width: min(90%, 50em);
+ margin: auto;
+}
+
+[data-layout="wide"] main {
+ width: 90%;
}
.gnu-head {
@@ -213,8 +238,9 @@ main {
}
footer {
- border-top: 2px solid var(--sep-color);
- padding: calc(16px - 8px) 16px;
+ border-top: 1px solid var(--sep-color);
+ color: gray;
+ padding: 1em;
text-align: center;
}
@@ -223,15 +249,15 @@ footer>* {
}
h1 {
- font-size: 32px;
+ font-size: 1.5em;
}
h2 {
- font-size: 26px;
+ font-size: 1.25em;
}
h3 {
- font-size: 20px;
+ font-size: 1em;
}
table {
@@ -275,35 +301,38 @@ nav ul {
height: 100%;
display: flex;
flex-direction: row;
+ justify-content: center;
+ align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
}
-@media (width < 750px) {
+[data-layout="wide"] nav ul {
+ justify-content: left;
+ margin-left: -1em;
+}
+
+@media (width < 50rem) {
nav ul {
flex-direction: column;
}
}
nav ul li {
- flex-grow: 1;
- flex-basis: 0;
- display: flex;
margin: 0;
}
nav ul li a {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ display: block;
- flex-grow: 1;
- padding: 8px 16px;
+ padding: .5em 1em;
text-align: center;
text-decoration: none;
color: var(--nav-fg-color);
+
+ font-weight: bold;
transition: background-color .3s;
}
@@ -321,15 +350,9 @@ nav ul li a:visited {
color: var(--nav-fg-color);
}
-@media (width >= 900px) {
- html:not([data-layout="wide"]) {
- padding: 16px 0;
- }
-
+@media (width >= 50rem) {
:not([data-layout="wide"]) body {
margin: 0 auto;
- max-width: 800px;
- box-shadow: 0 0 5px 5px var(--outer-shadow-color);
}
[data-layout="wide"] body {
@@ -337,7 +360,7 @@ nav ul li a:visited {
}
}
-@media (width < 900px) {
+@media (width < 50rem) {
body {
margin: 0;
}