small changes: reorganize css, etc

6 files changed, 99 insertions, 247 deletions

diff --git a/article.css b/article.css
new file mode 100644
index 0000000..6fe0a37
--- /dev/null
+++ b/article.css
@@ -0,0 +1,83 @@
+@import url('https://static.williamsfam.us.com/prose.css');
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+html, body {
+    background-color: #121212;
+    margin: 0 auto;
+    padding: 0;
+    min-height: 100vh;
+}
+
+body {
+    padding-top: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+article {
+    width: 100%;
+    max-width: 68ch;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sx);
+
+    .header-top {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--sx);
+    }
+
+    .header-logo-link {
+        width: 5.5rem;
+        height: 5.5rem;
+        flex-shrink: 0;
+        background-color: #e6e6e6;
+        mask-image: url("https://static.williamsfam.us.com/Logo.svg");
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+    }
+
+    .header-logo-link:hover {
+        background-color: #49f;
+    }
+
+    .header-info {
+        min-width: 0;
+
+        h1 {
+            line-height: 1;
+            margin: 0;
+        }
+    }
+
+    time {
+        line-height: var(--lh);
+        margin: 0;
+    }
+
+    hr {
+        margin: 0;
+        width: 100%;
+    }
+}
+
+@media (max-width: 1000px) {
+    body {
+        display: block;
+        padding: 1rem 1rem 3rem;
+    }
+
+    .content {
+        padding: 0;
+    }
+}
diff --git a/article.js b/article.js
index 2a495c4..8b0ceba 100644
--- a/article.js
+++ b/article.js
@@ -20,7 +20,7 @@ function addMetadata() {
     // css
     const proseCss = document.createElement("link");
     proseCss.rel = "stylesheet";
-    proseCss.href = "prose.css";
+    proseCss.href = "article.css";
     document.head.appendChild(proseCss);
 }
 
@@ -84,7 +84,10 @@ function addTOC() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    addMetadata()
-    addHeader()
-    addTOC()
+    addMetadata();
+    addHeader();
+    addTOC();
+
+    const article = document.querySelector('article');
+    article.classList.add('markdown-body');
 })
diff --git a/index.html b/index.html
index b3836ad..c14b56e 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Collin Williams</title>
 
+		<link rel="icon" href="https://static.williamsfam.us.com/Logo.svg" type="image/svg+xml">
 		<link rel="stylesheet" href="style.css">
 		<style>
 			body {
@@ -14,6 +15,7 @@
 			.content {
 				width: 47ch;
 				z-index: 2;
+				margin: 0 auto !important;
 			}
 
 			.cards {
@@ -41,8 +43,7 @@
 		<div class="content">
 			<h1 style="text-align: center;">Collin Williams</h1>
 			<div class="cards">
-				<a class="card" href="https://bsky.app/profile/cwilliams1221.bsky.social">Bluesky</a>
-				<a class="card" href="https://tangled.org/cwilliams1221.bsky.social">Tangled</a>
+				<a class="card" href="https://git.collin.williamsfam.us.com">Projects</a>
 				<a class="card" href="./writing">Writing</a>
 			</div>
 		</div>
diff --git a/prose.css b/prose.css
deleted file mode 100644
index 5e1819a..0000000
--- a/prose.css
+++ /dev/null
@@ -1,236 +0,0 @@
-@import url('style.css');
-
-:root {
-    --sx: 1rem;
-    --lx: 3rem;
-    --lh: 1.5;
-}
-
-body {
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-}
-
-article {
-    width: 100%;
-    max-width: 68ch;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-}
-
-p {
-    color: #e6e6e6;
-    font-family: var(--fontSerif);
-    line-height: var(--lh);
-    font-size: 1.1rem;
-    margin: var(--sx) 0;
-    text-wrap: pretty;
-}
-
-sup {
-    font-size: 0.8em;
-    line-height: 0;
-    vertical-align: baseline;
-    position: relative;
-    top: -0.5em;
-}
-
-a {
-    color: #49f;
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-    &:focus-visible {
-        outline: 2px solid #49f;
-        outline-offset: 2px;
-    }
-}
-
-li {
-    color: #e6e6e6;
-    font-family: var(--fontSerif);
-    line-height: var(--lh);
-    font-size: 1.1rem;
-
-    &::marker {
-        color: #e6e6e6;
-    }
-}
-
-h1, h2, h3 {
-    color: #e6e6e6;
-    margin-top: var(--lx);
-    margin-bottom: var(--sx);
-    font-family: var(--fontSerif);
-    line-height: var(--lh);
-    font-weight: 600;
-    text-wrap: balance;
-}
-
-h1 {
-    font-size: 2rem;
-}
-
-h2 {
-    font-size: 1.5rem;
-}
-
-h3 {
-    font-size: 1.25rem;
-}
-
-.comment {
-    color: #888;
-}
-
-hr {
-  display: block;
-  height: 2px;
-  border: 0;
-  border-top: 2px solid #888;
-  margin: var(--sx) 0;
-  padding: 0;
-}
-
-time {
-    display: block;
-    font-family: var(--fontSerif);
-    color: #888;
-}
-
-@media (max-width: 1000px) {
-    body {
-        display: block;
-        padding: 1rem 1rem 3rem;
-    }
-    .content {
-        padding: 0;
-    }
-}
-
-details {
-    font-family: var(--fontSerif);
-    color: #888;
-
-    summary::marker {
-        color: #888;
-    }
-}
-
-table {
-    --tsx_x: calc(var(--sx) / 3);
-    --tsx_y: calc(var(--sx) / 1.5);
-
-    font-family: var(--fontSerif);
-    margin: var(--sx) auto;
-    border-collapse: collapse;
-
-    th {
-        color: #e6e6e6;
-        text-align: center;
-        border: solid;
-        padding: var(--tsx_x) var(--tsx_y);
-        border-width: 0 0 1px 0;
-
-        &[scope="row"] {
-            border-width: 0 1px 0 0;
-        }
-    }
-
-    td {
-        color: #e6e6e6;
-        text-align: center;
-        padding: var(--tsx_x) var(--tsx_y);
-        font-variant-numeric: tabular-nums;
-    }
-}
-math {
-    font-family: var(--fontMath);
-    font-size: 1em;
-    transform: translateZ(0);
-
-    msub > :nth-child(2) {
-        transform: translateY(-0.2em);
-        font-size: 0.8rem;
-    }
-}
-/* CODEBLOCKS */
-code {
-    font-size: 0.95rem;
-    color: #e6e6e6;
-    white-space: pre;
-    font-family: 'Fira Code', monospace;
-
-    kw   { color: #49f; }
-    ty   { color: #4d9; }
-    fn   { color: #7bf; }
-    mac  { color: #d69; }
-    str  { color: #6e7; }
-    num  { color: #9c9; }
-    com  { color: #888; }
-    prop { color: #8cf; }
-    mod  { color: #bcd; }
-    id   { color: inherit; }
-}
-pre {
-    margin: var(--sx) 0;
-    line-height: var(--lh);
-}
-
-@media (max-width: 1000px) {
-    pre {
-        max-width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-        box-sizing: border-box;
-    }
-}
-
-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sx);
-
-    .header-top {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--sx);
-    }
-
-    .header-logo-link {
-        width: 5.5rem;
-        height: 5.5rem;
-        flex-shrink: 0;
-        background-color: #e6e6e6;
-        mask-image: url("https://static.williamsfam.us.com/Logo.svg");
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        mask-position: center;
-    }
-
-    .header-logo-link:hover {
-        background-color: #49f;
-    }
-
-    .header-info {
-        min-width: 0;
-
-        h1 {
-            line-height: 1;
-            margin: 0;
-        }
-    }
-
-    time {
-        line-height: var(--lh);
-        margin: 0;
-    }
-
-    hr {
-        margin: 0;
-        width: 100%;
-    }
-}
diff --git a/reversible.html b/reversible.html
index 24b5b87..893b73a 100644
--- a/reversible.html
+++ b/reversible.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>Reversible Programming Blew my Mind (Reversible Part 1)</title>
+    <title>Reversible Programming is cool (Reversible Part 1)</title>
     <meta property="article:published_time" content="2026-07-05">
     <script src="./article.js"></script>
 </head>
@@ -239,4 +239,4 @@
     </article>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/writing.html b/writing.html
index 126055c..bf1de2e 100644
--- a/writing.html
+++ b/writing.html
@@ -5,7 +5,8 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Writing</title>
 
-		<link rel="stylesheet" href="prose.css">
+		<link rel="icon" href="https://static.williamsfam.us.com/Logo.svg" type="image/svg+xml">
+		<link rel="stylesheet" href="article.css">
 		<script src="stars.js"></script>
 		<style>
 			article {
@@ -15,11 +16,11 @@
 		</style>
 	</head>
 	<body>
-		<article>
+		<article class="markdown-body">
 			<h1>My Writing</h1>
 			<ul>
 				<li><a href="./net">Minimal Laptop Networking with NixOS</a></li>
-				<li><a href="./reversible">Reversible Programming Blew my Mind (Reversible Part 1)</a></li>
+				<li><a href="./reversible">Reversible Programming is cool (Reversible Part 1)</a></li>
 				<li><a href="./fib">I accidentally derived a formula for the Fibonacci Sequence</a></li>
 				<li><a href="./no_ai">Taking a Break</a></li>
 				<li><a href="./soplt">Summer of PLT</a></li>