up style

templates/styles/style_general.css

@@ -5,6 +5,9 @@
   margin: 0;
   padding: 0;
 }
+*::before, *::after {
+  box-sizing: border-box;
+}
 
 html {
   font-size: 1rem;
@@ -17,6 +20,8 @@ body {
   line-height: 1.5em;
   color: #000;
   background: #fff;
+  -webkit-font-smoothing: antialiased;
+  padding-bottom: 2rem;
 }
 
 nav,
@@ -34,10 +39,13 @@ h4,
 h5,
 h6 {
   font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
-  margin-top: 1em;
+  margin-top: 1rem;
   margin-bottom: 2rem;
   color: #333;
   text-decoration: none !important;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+  line-height: 1.3em;
 }
 
 hr + h1 {
@@ -48,24 +56,25 @@ h1:first-letter {
   text-transform: uppercase;
 }
 
-/* 1. Use a more-intuitive box-sizing model */
-* {
-  box-sizing: border-box;
-}
-*::before, *::after {
-  box-sizing: border-box;
+h1 {
+  color: #221d30;
+  font-size: 2.5rem;
+  text-decoration: underline;
 }
 
-body {
-  -webkit-font-smoothing: antialiased;
-  font-family: Helvetica, Arial, sans-serif;
-  padding-bottom: 20vh;
-  padding-bottom: 2rem;
+h2 {
+  font-size: 2rem;
+  text-decoration: underline;
+}
+
+h3 {
+  font-size: 1.5rem;
+  text-decoration: underline;
 }
 
-/*  Improve media defaults */
 .content {
   font-size: 1.2rem;
+  min-height: 15rem;
 }
 .content img,
 .content picture,
@@ -76,7 +85,7 @@ body {
   display: block;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  max-width: 100%;
+  max-width: 100vw;
 }
 
 pre,
@@ -99,7 +108,7 @@ main a:hover h2 {
   color: rgb(0, 123, 255);
 }
 .nav a, .page__index a {
-  padding: 0.55rem 2rem;
+  padding: 0.5rem 2rem;
   display: block;
   margin-right: 1rem;
   margin-bottom: 1rem;
@@ -131,59 +140,25 @@ p {
   margin-bottom: 1rem;
 }
 
-h1 {
-  color: #221d30;
-  font-size: 2.5rem;
-  text-decoration: underline;
-}
-
-h2 {
-  font-size: 2rem;
-  text-decoration: underline;
-}
-
-h3 {
-  font-size: 1.5rem;
-  text-decoration: underline;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-  text-wrap: balance;
-  line-height: 1.3em;
-}
-
 #root,
 #__next {
   isolation: isolate;
 }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
 ul {
   padding-left: 4ch;
   padding-right: 4ch;
 }
 
 li {
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 #tags_page li {
   display: inline;
 }
 li a {
   display: inline-block;
-  margin-right: 1em;
+  margin-right: 1rem;
 }
 
 #title-block-header {
@@ -258,14 +233,8 @@ li a {
   border-radius: 1rem;
   margin-top: 7rem;
 }
-
-.content {
-  min-height: 15rem;
-}
-
-.after-article {
-  border-top: 1px solid #dedede;
-  padding: 1rem;
+.body-wrap .site-header {
+  display: none;
 }
 
 .site-footer {
@@ -275,8 +244,14 @@ li a {
   color: #dedede;
 }
 
-.body-wrap .site-header {
-  display: none;
+article {
+  width: 75ch;
+  max-width: calc(100vw - 6rem);
+}
+
+.after-article {
+  border-top: 1px solid #dedede;
+  padding: 1rem;
 }
 
 .article-navigation {