Some small stylesheet tweaks.

site/index.md

@@ -6,9 +6,7 @@ Hello!
 I'm Dan Ott. 
 This is my website. 
 That's why I am hosting it at `danott.website`.
-
-You can subscribe to [Dan Ott's Website RSS Feed](/feed.xml) if you're into syndication.
-
+You can subscribe to [Dan Ott's Website RSS Feed](/feed.xml).
 Here's a list of posts I've written in reverse chronological order.
 
 <!--Include::Index-->

site/style.css

@@ -1,5 +1,99 @@
 /* @format */
 
+/* CSS Rest from https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+/* Begin my styles */
+
 :root {
   --color-background: #eaeaea;
   --color-text: #303030;
@@ -16,7 +110,7 @@
 
 @media (min-width: 40rem) {
   :root {
-    font-size: 125%;
+    font-size: 140%;
   }
 }
 
@@ -33,20 +127,32 @@ body {
   margin: 0 auto;
   max-width: 40rem;
   padding: 4rem 1rem;
+  /* -webkit-font-smoothing: antialiased; */
 }
 
 a {
   color: var(--color-link);
   text-decoration: underline;
+  text-underline-offset: 0.15em;
+  text-decoration-thickness: 0.05em;
+}
+
+h1 {
+  margin: 6rem 0;
+}
+
+hr {
+  margin: 2rem 0;
+  border: none;
+  border-top: 0.1rem solid var(--color-text);
 }
 
 h1,
 h2,
 h3 {
-  line-height: 1.2;
+  line-height: 1.3;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+pre.highlight {
+  overflow-x: scroll;
 }