complete redesign

assets/script.js

@@ -0,0 +1,42 @@
+if (typeof age !== 'undefined') {
+    const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
+    age.textContent = difference.toFixed(4);
+}
+
+if (typeof arrow !== 'undefined') {
+    arrow.addEventListener('click', () => {
+        window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth'
+        });
+    });
+}
+
+const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
+smoothScrollLinks.forEach(link => {
+    link.addEventListener('click', event => {
+        event.preventDefault();
+        const target = document.querySelector(event.target.hash);
+
+        target.scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+const switchTheme = document.getElementById('switch-theme');
+const theme = localStorage.getItem('theme');
+
+switchTheme.addEventListener('click', () => {
+    if (theme === 'dark') {
+        localStorage.setItem('theme', 'light');
+    } else {
+        localStorage.setItem('theme', 'dark');
+    }
+
+    document.body.classList.toggle('dark');
+});
+
+if (theme === 'dark') {
+    document.body.classList.add('dark');
+}

assets/style.css

@@ -0,0 +1,95 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
+
+@import url('style.mobile.css');
+@import url('style.dark.css');
+
+:root {
+    --font: 'Inconsolata', monospace;
+    --font-size: 16px;
+    --columns: 2;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    font-family: var(--font);
+    font-size: var(--font-size);
+    transition: background-color 0.5s, color 0.5s;
+}
+
+body#centered {
+    display: grid;
+    place-items: center;
+    align-content: center;
+}
+
+body>div {
+    display: grid;
+    overflow-y: auto;
+    place-items: center;
+    align-content: center;
+
+    float: left;
+    height: 100%;
+    width: calc(100% / var(--columns));
+}
+
+body>div:first-child #arrow {
+    bottom: 0;
+    width: 100%;
+    height: 2em;
+    display: none;
+    cursor: pointer;
+
+    color: #fff;
+    text-align: center;
+    background-color: black;
+}
+
+body>div>div#inner {
+    overflow-y: auto;
+    height: 100%;
+}
+
+ul {
+    padding: 0;
+}
+
+ul,
+ol {
+    list-style-type: none;
+}
+
+ul li::before,
+ol li::before {
+    content: "⮑ ";
+}
+
+#age {
+    font-weight: 900;
+}
+
+*[data-deprecated] {
+    text-decoration: line-through;
+}
+
+*[data-deprecated]::after {
+    content: " (deprecated)";
+    color: red;
+}
+
+#contact li:first-child::before {
+    content: "✉ ";
+}
+
+#switch-theme {
+    color: blue;
+    cursor: pointer;
+    text-decoration: underline;
+}

assets/style.dark.css

@@ -0,0 +1,32 @@
+:root {
+    --font: 'Inconsolata', monospace;
+    --font-size: 16px;
+    --columns: 2;
+
+    --background-color: #171616;
+    --color: #fff;
+}
+
+body.dark {
+    background-color: var(--background-color);
+    color: var(--color);
+}
+
+body.dark>div:first-child #arrow {
+    color: #000;
+    text-align: center;
+    background-color: #fff;
+}
+
+body > div:first-child #arrow {
+    background-color: var(--color);
+    color: var(--background-color);
+}
+
+body.dark a {
+    color: var(--color);
+}
+
+body.dark #switch-theme {
+    color: var(--color);
+}

assets/style.mobile.css

@@ -0,0 +1,9 @@
+@media screen and (max-width: 767px) {
+    body > div {
+        width: 100% !important;
+    }
+
+    body > div:first-child #arrow {
+        display: block !important;
+    }
+}