base.css: base styles

src/_assets/css/base.css

@@ -5,6 +5,8 @@ html, body {
 
 body {
   overflow-y: scroll;
+  font-size: 20px;
+  line-height: 1.6;
 }
 
 /* */
@@ -19,10 +21,98 @@ body {
   outline-offset: calc(0.5 * var(--step));
 }
 
-/* */
+/* Links */
-h1 {
+
-  font-family: Xecut, sans-sefif;
+a {
-  font-weight: normal;
+  color: inherit;
-  font-size: calc(9 * var(--step));
+  text-decoration: none;
-  margin-block-start: 0;
+  border-bottom: calc(0.5 * var(--step)) solid;
+}
+
+/* Typography */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Xecut, sans-serif;
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+
+h1 { font-size: calc(9 * var(--step)); }
+h2 { font-size: calc(7 * var(--step)); }
+h3 { font-size: calc(6 * var(--step)); }
+h4 { font-size: calc(5 * var(--step)); }
+h5 { font-size: calc(4 * var(--step)); }
+h6 { font-size: calc(3 * var(--step)); }
+
+h1 {
+  line-height: inherit;
+  margin-block-start: 0;
+  margin-block-end: calc(3 * var(--step));
+}
+h2 { margin-block: calc(3 * var(--step)); }
+h3 { margin-block: calc(3 * var(--step)); }
+h4 { margin-block: calc(2 * var(--step)); }
+h5 { margin-block: calc(2 * var(--step)); }
+h6 { margin-block: calc(2 * var(--step)); }
+
+/* Code and quotes*/
+
+pre, blockquote {
+  border-inline-start: calc(0.75 * var(--step)) solid;
+  border-color: var(--color-fg);
+  margin-inline-start: 0;
+  padding-inline-start: calc(2 * var(--step));
+}
+
+pre {
+  background-color: var(--color-inactive);
+  padding-block: calc(1 * var(--step));
+  padding-inline: calc(2 * var(--step));
+  overflow-x: auto;
+}
+
+pre > code {
+  background-color: unset;
+  padding: 0;
+}
+
+code {
+  /* font-family: 'Fira Code', monospace; */
+  background-color: var(--color-inactive);
+  padding: calc(0.5 * var(--step)) calc(1 * var(--step));
+}
+
+/* Lists */
+
+ul {
+  list-style: square;
+}
+
+/* Tables */
+
+table {
+  margin: 0;
+  margin-block-end: calc(4 * var(--step));
+  padding: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  text-align: start;
+  border-block-end: calc(0.25 * var(--step)) solid;
+  border-color: var(--color-inactive);
+  padding-inline: calc(2 * var(--step));
+  padding-block-start: calc(2 * var(--step));
+  padding-block-end: calc(1.75 * var(--step));
+}
+
+/* Separators */
+
+hr {
+  border-width: calc(0.25 * var(--step));
+  border-color: var(--color-inactive);
+  border-style: solid;
+  margin-block: calc(5 * var(--step));
 }

src/_assets/css/menu.css

@@ -24,6 +24,7 @@ header.menu a {
   color: var(--color-fg);
   text-decoration: none;
   transition: opacity .2s ease;
+  border-bottom: 0;
 }
 
 header.menu a:hover {

src/_assets/css/variables.css

@@ -3,5 +3,5 @@ body {
 
   --color-bg: #ffffff;
   --color-fg: #000000;
-  --color-inactive: #cdcdcd;
+  --color-inactive: #dddddd;
 }