diff options
| -rw-r--r-- | article.css | 83 | ||||
| -rw-r--r-- | article.js | 11 | ||||
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | prose.css | 236 | ||||
| -rw-r--r-- | reversible.html | 4 | ||||
| -rw-r--r-- | writing.html | 7 |
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; + } +} @@ -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'); }) @@ -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> |