diff --git a/css/default.css b/css/default.css
index f0a0560..7e2d3fe 100644
--- a/css/default.css
+++ b/css/default.css
@@ -1,35 +1,32 @@
-body {
-    background-color: #1c1c1c/* #1d2228 */;
-    color: #eeeeee;
-}
-
-header {
-    margin: 1em 0 2em 0;
-}
 header nav {
-    width: 87.5%;
+  width: 87.5%;
+  max-width: 1400px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 2rem 0 0 0;
 }
+
+header nav div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+}
+
 header nav a {
-    display: inline-block;
-    font-size: 1.4rem;
-    font-weight: bold;
-    font-variant-caps: small-caps;
-    margin: 0 0.5rem;
-    padding: 0 0;
-}
-header nav a:first-child { margin-left: 0; }
-header nav a:last-child { margin-right: 0; }
-
-footer {
-    margin-top: 3rem;
-    padding: .5rem 0;
-    border-top: 0.1rem solid #000;
-    color: #555;
+  font-size: 1.4rem;
+  font-weight: bold;
+  text-decoration-line: none;
 }
 
-article .header {
-    font-style: italic;
-    color: #555;
+header nav a:hover {
+  text-decoration-line: underline;
+}
+
+blockquote {
+  border-left: 2px solid #808080;
+  padding-left: 1rem;
 }
 
 /* .sourceCode { */
@@ -40,62 +37,66 @@ article .header {
 /*     background: #eee; */
 /* } */
 
-blockquote {
-    border-left: 2px solid #808080;
-    padding-left: 1rem;
+.definition,
+.proposition,
+.theorem {
+  width: 55%;
+  display: block;
+  border-left: 2px solid #808080;
+  padding-left: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
-.definition, .proposition, .theorem {
-    width: 55%;
-    display: block;
-    border-left: 2px solid #808080;
-    padding-left: 1rem;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+.proposition,
+.theorem {
+  font-style: italic;
 }
 
-.proposition, .theorem {
-    font-style: italic;
+.definition p:first-child,
+.proposition p:first-child,
+.theorem p:first-child,
+.proof p:first-child {
+  display: inline;
 }
 
-.definition p:first-child, .proposition p:first-child, .theorem p:first-child, .proof p:first-child {
-    display: inline;
-}
-
-.definition p, .proposition p, .theorem p, .proof p {
-    margin-top: 0.4rem;
-    margin-bottom: 0.4rem;
-    padding-left: 1rem;
+.definition p,
+.proposition p,
+.theorem p,
+.proof p {
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+  padding-left: 1rem;
 }
 
 .theorem:before {
-    content: "Theorem.";
-    font-weight: bold;
-    font-style: normal;
+  content: "Theorem.";
+  font-weight: bold;
+  font-style: normal;
 }
 
 .proposition:before {
-    content: "Proposition.";
-    font-weight: bold;
-    font-style: normal;
+  content: "Proposition.";
+  font-weight: bold;
+  font-style: normal;
 }
 
 .definition:before {
-    content: "Definition.";
-    font-weight: bold;
-    font-style: normal;
+  content: "Definition.";
+  font-weight: bold;
+  font-style: normal;
 }
 
 .proof {
-    width: 55%;
+  width: 55%;
 }
 
 .proof:before {
-    content: "Proof.";
-    font-style: italic;
+  content: "Proof.";
+  font-style: italic;
 }
 
 .proof:after {
-    content: "\220E";
-    float: right;
+  content: "\220E";
+  float: right;
 }
diff --git a/css/tufte.css b/css/tufte.css
index 91f52c4..c9b2528 100644
--- a/css/tufte.css
+++ b/css/tufte.css
@@ -41,7 +41,7 @@
 
 /* Tufte CSS styles */
 html {
-    font-size: 15px; 
+    font-size: 15px;
 }
 
 body {
@@ -53,7 +53,15 @@ body {
     background-color: #fffff8;
     color: #111;
     max-width: 1400px;
-    counter-reset: sidenote-counter; 
+    counter-reset: sidenote-counter;
+}
+
+/* Adds dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #151515;
+        color: #ddd;
+    }
 }
 
 h1 {
@@ -61,7 +69,7 @@ h1 {
     margin-top: 4rem;
     margin-bottom: 1.5rem;
     font-size: 3.2rem;
-    line-height: 1; 
+    line-height: 1;
 }
 
 h2 {
@@ -70,7 +78,7 @@ h2 {
     margin-top: 2.1rem;
     margin-bottom: 1.4rem;
     font-size: 2.2rem;
-    line-height: 1; 
+    line-height: 1;
 }
 
 h3 {
@@ -79,7 +87,7 @@ h3 {
     font-size: 1.7rem;
     margin-top: 2rem;
     margin-bottom: 1.4rem;
-    line-height: 1; 
+    line-height: 1;
 }
 
 hr {
@@ -89,7 +97,7 @@ hr {
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
-    padding: 0; 
+    padding: 0;
 }
 
 p.subtitle {
@@ -98,94 +106,97 @@ p.subtitle {
     margin-bottom: 1rem;
     font-size: 1.8rem;
     display: block;
-    line-height: 1; 
+    line-height: 1;
 }
 
 .numeral {
-    font-family: et-book-roman-old-style; 
+    font-family: et-book-roman-old-style;
 }
 
 .danger {
-    color: red; 
+    color: red;
 }
 
 article {
-    padding: 5rem 0rem; 
+    padding: 5rem 0rem;
 }
 
 section {
     padding-top: 1rem;
-    padding-bottom: 1rem; 
+    padding-bottom: 1rem;
 }
 
 p,
+dl,
 ol,
 ul {
     font-size: 1.4rem;
-    line-height: 2rem; 
+    line-height: 2rem;
 }
 
 p {
     margin-top: 1.4rem;
     margin-bottom: 1.4rem;
     padding-right: 0;
-    vertical-align: baseline; 
+    vertical-align: baseline;
 }
 
 /* Chapter Epigraphs */
 div.epigraph {
-    margin: 5em 0; 
+    margin: 5em 0;
 }
 
 div.epigraph > blockquote {
     margin-top: 3em;
-    margin-bottom: 3em; 
+    margin-bottom: 3em;
 }
 
 div.epigraph > blockquote,
 div.epigraph > blockquote > p {
-    font-style: italic; 
+    font-style: italic;
 }
 
 div.epigraph > blockquote > footer {
-    font-style: normal; 
+    font-style: normal;
 }
 
 div.epigraph > blockquote > footer > cite {
-    font-style: italic; 
+    font-style: italic;
 }
 /* end chapter epigraphs styles */
 
 blockquote {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
 }
 
 blockquote p {
     width: 55%;
-    margin-right: 40px; 
+    margin-right: 40px;
 }
 
 blockquote footer {
     width: 55%;
     font-size: 1.1rem;
-    text-align: right; 
+    text-align: right;
 }
 
 section > p,
 section > footer,
 section > table {
-    width: 55%; 
+    width: 55%;
 }
 
 /* 50 + 5 == 55, to be the same width as paragraph */
+section > dl,
 section > ol,
 section > ul {
     width: 50%;
-    -webkit-padding-start: 5%; 
+    -webkit-padding-start: 5%;
 }
 
+dt:not(:first-child),
 li:not(:first-child) {
-    margin-top: 0.25rem; 
+    margin-top: 0.25rem;
 }
 
 figure {
@@ -197,7 +208,7 @@ figure {
     max-width: 55%;
     -webkit-margin-start: 0;
     -webkit-margin-end: 0;
-    margin: 0 0 3em 0; 
+    margin: 0 0 3em 0;
 }
 
 figcaption {
@@ -209,51 +220,23 @@ figcaption {
     line-height: 1.6;
     vertical-align: baseline;
     position: relative;
-    max-width: 40%; 
+    max-width: 40%;
 }
 
 figure.fullwidth figcaption {
-    margin-right: 24%; 
+    margin-right: 24%;
 }
 
-/* Links: replicate underline that clears descenders */
 a:link,
 a:visited {
-    color: inherit; 
+    color: inherit;
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 0.05em;
 }
 
-.no-tufte-underline:link {
-    background: unset;
-    text-shadow: unset;
-}
-
-/* a:link, .tufte-underline, .hover-tufte-underline:hover { */
-/*     text-decoration: none; */
-/*     background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor); */
-/*     background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor); */
-/*     -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; */
-/*     -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; */
-/*     background-size: 0.05em 1px, 0.05em 1px, 1px 1px; */
-/*     background-repeat: no-repeat, no-repeat, repeat-x; */
-/*     text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8; */
-/*     background-position: 0% 93%, 100% 93%, 0% 93%;  */
-/* } */
-
-/* @media screen and (-webkit-min-device-pixel-ratio: 0) { */
-/*     a:link, .tufte-underline, .hover-tufte-underline:hover { */
-/*         background-position-y: 87%, 87%, 87%; */
-/*     } */
-/* } */
-
-/* a:link::selection, */
-/* a:link::-moz-selection { */
-/*     text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; */
-/*     background: #b4d5fe; */
-/* } */
-
 /* Sidenotes, margin notes, figures, captions */
 img {
-    max-width: 100%; 
+    max-width: 100%;
 }
 
 .sidenote,
@@ -262,58 +245,58 @@ img {
     clear: right;
     margin-right: -60%;
     width: 50%;
-    margin-top: 0;
+    margin-top: 0.3rem;
     margin-bottom: 0;
     font-size: 1.1rem;
     line-height: 1.3;
     vertical-align: baseline;
-    position: relative; 
+    position: relative;
 }
 
 .sidenote-number {
-    counter-increment: sidenote-counter; 
+    counter-increment: sidenote-counter;
 }
 
 .sidenote-number:after,
 .sidenote:before {
     font-family: et-book-roman-old-style;
     position: relative;
-    vertical-align: baseline; 
+    vertical-align: baseline;
 }
 
 .sidenote-number:after {
     content: counter(sidenote-counter);
     font-size: 1rem;
     top: -0.5rem;
-    left: 0.1rem; 
+    left: 0.1rem;
 }
 
 .sidenote:before {
     content: counter(sidenote-counter) " ";
     font-size: 1rem;
-    top: -0.5rem; 
+    top: -0.5rem;
 }
 
 blockquote .sidenote,
 blockquote .marginnote {
     margin-right: -82%;
     min-width: 59%;
-    text-align: left; 
+    text-align: left;
 }
 
 div.fullwidth,
 table.fullwidth {
-    width: 100%; 
+    width: 100%;
 }
 
 div.table-wrapper {
     overflow-x: auto;
-    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; 
+    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
 }
 
 .sans {
     font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
-    letter-spacing: .03em; 
+    letter-spacing: .03em;
 }
 
 code, pre > code {
@@ -324,18 +307,18 @@ code, pre > code {
 }
 
 .sans > code {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
 }
 
 h1 > code,
 h2 > code,
 h3 > code {
-    font-size: 0.80em; 
+    font-size: 0.80em;
 }
 
 .marginnote > code,
 .sidenote > code {
-    font-size: 1rem; 
+    font-size: 1rem;
 }
 
 pre > code {
@@ -347,36 +330,37 @@ pre > code {
 }
 
 pre.fullwidth > code {
-    width: 90%; 
+    width: 90%;
 }
 
 .fullwidth {
     max-width: 90%;
-    clear:both; 
+    clear:both;
 }
 
 span.newthought {
     font-variant: small-caps;
-    font-size: 1.2em; 
+    font-size: 1.2em;
 }
 
 input.margin-toggle {
-    display: none; 
+    display: none;
 }
 
 label.sidenote-number {
-    display: inline; 
+    display: inline-block;
+    max-height: 2rem; /* should be less than or equal to paragraph line-height */
 }
 
 label.margin-toggle:not(.sidenote-number) {
-    display: none; 
+    display: none;
 }
 
 .iframe-wrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     padding-top: 25px;
-    height: 0; 
+    height: 0;
 }
 
 .iframe-wrapper iframe {
@@ -384,64 +368,62 @@ label.margin-toggle:not(.sidenote-number) {
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%; 
+    height: 100%;
 }
 
 @media (max-width: 760px) {
     body {
         width: 84%;
         padding-left: 8%;
-        padding-right: 8%; 
+        padding-right: 8%;
     }
-    
+
     hr,
     section > p,
     section > footer,
     section > table {
-        width: 100%; 
+        width: 100%;
     }
-    
+
     pre > code {
-        width: 97%; 
-    }
-
-    section > ol {
-        width: 90%; 
+        width: 97%;
     }
 
+    section > dl,
+    section > ol,
     section > ul {
-        width: 90%; 
+        width: 90%;
     }
 
     figure {
-        max-width: 90%; 
+        max-width: 90%;
     }
-    
+
     figcaption,
     figure.fullwidth figcaption {
         margin-right: 0%;
-        max-width: none; 
+        max-width: none;
     }
-    
+
     blockquote {
         margin-left: 1.5em;
-        margin-right: 0em; 
+        margin-right: 0em;
     }
 
     blockquote p,
     blockquote footer {
-        width: 100%; 
+        width: 100%;
     }
-    
+
     label.margin-toggle:not(.sidenote-number) {
-        display: inline; 
+        display: inline;
     }
 
     .sidenote,
     .marginnote {
-        display: none; 
+        display: none;
     }
-    
+
     .margin-toggle:checked + .sidenote,
     .margin-toggle:checked + .marginnote {
         display: block;
@@ -451,19 +433,19 @@ label.margin-toggle:not(.sidenote-number) {
         width: 95%;
         margin: 1rem 2.5%;
         vertical-align: baseline;
-        position: relative; 
+        position: relative;
     }
 
     label {
-        cursor: pointer; 
+        cursor: pointer;
     }
 
     div.table-wrapper,
     table {
-        width: 85%; 
+        width: 85%;
     }
-    
+
     img {
         width: 100%;
-    } 
+    }
 }
diff --git a/images/dimitri_resized.jpg b/images/dimitri_resized.jpg
new file mode 100644
index 0000000..5f5c6f8
Binary files /dev/null and b/images/dimitri_resized.jpg differ
diff --git a/index.html b/index.html
index 967fedb..b250dcf 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,15 @@
 ---
-title: Dimitri Lozeve
+title: Welcome!
 ---
 
 <img
-  src="/images/portrait_small.jpg"
-  style="
-    width: 25%;
-    float: right;
-    margin-left: 10px;
-    margin-bottom: 10px;
-    margin-right: 50px;
-    margin-top: -100px;
-  "
+  src="/images/dimitri_resized.jpg"
+  style="max-width: 15rem; width: 25%; float: left; padding: 0 20px 10px 0"
   alt="Dimitri Lozeve portrait"
 />
 
 <p>
-  Hi! I am an Engineering Manager at
+  I am an Engineering Manager at
   <a href="https://www.doctrine.fr/">Doctrine</a>, where we develop productivity
   tools to help lawyers analyze and write their private documents.
 </p>
@@ -30,8 +23,7 @@ title: Dimitri Lozeve
 </p>
 
 <p>
-  Before that, I was a Data Scientist at
-  <a href="https://www.mindsay.com/">Mindsay</a>, working on natural language
+  Before that, I was a Data Scientist at Mindsay, working on natural language
   understanding for chatbots.
 </p>
 
@@ -47,7 +39,7 @@ title: Dimitri Lozeve
   I do on <a href="https://github.com/dlozeve/">GitHub</a>.
 </p>
 
-<h2>Recent Posts</h2>
+<h2 style="clear: both">Recent Posts</h2>
 <p>
   Get notified of new posts via <a href="/rss.xml">RSS</a> or
   <a href="/atom.xml">Atom</a> feeds!
diff --git a/templates/default.html b/templates/default.html
index 044fb2c..8b1b1e6 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -51,16 +51,20 @@
     ></script>
   </head>
   <body>
-    <article>
-      <header>
-        <nav>
-          <a href="/">Home</a>
+    <header>
+      <nav>
+        <a href="/">Dimitri Lozeve</a>
+        <div>
           <a href="/archive.html">Posts</a>
           <a href="/projects.html">Projects</a>
           <a href="/cv.html">CV</a>
           <a href="/contact.html">Contact</a>
-        </nav>
+        </div>
+      </nav>
+    </header>
 
+    <article>
+      <header>
         $if(title)$
         <h1 class="title">$title$</h1>
         $if(subtitle)$
@@ -76,10 +80,5 @@
 
       $body$
     </article>
-
-    <footer>
-      Site proudly generated by
-      <a href="http://jaspervdj.be/hakyll">Hakyll</a>
-    </footer>
   </body>
 </html>