summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Logo.svg18
-rw-r--r--article.js20
-rw-r--r--fonts.css37
-rw-r--r--fonts/FiraCode-VF.woff2bin113088 -> 0 bytes
-rw-r--r--fonts/FiraMath-Regular.woff2bin99332 -> 0 bytes
-rw-r--r--fonts/gelasio-latin-italic.woff2bin40068 -> 0 bytes
-rw-r--r--fonts/gelasio-latin.woff2bin34832 -> 0 bytes
-rw-r--r--index.html2
-rw-r--r--net.html (renamed from minimalnetworkinglaptop.html)0
-rw-r--r--prose.css79
-rw-r--r--style.css2
-rw-r--r--writing.html12
12 files changed, 69 insertions, 101 deletions
diff --git a/Logo.svg b/Logo.svg
deleted file mode 100644
index 77eb306..0000000
--- a/Logo.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg version="1.1"
- viewBox="0 0 960 960"
- fill="none"
- xmlns="http://www.w3.org/2000/svg">
-
- <rect
- x="1"
- y="1"
- width="958"
- height="958"
- fill="none"
- stroke="#e6e6e6"
- stroke-width="40"/>
-
- <path
- fill="#e6e6e6"
- d="m311.93704 145.0l0 52.28067l120.27191 0l0 5.2159424c-26.282684 7.439789 -46.328003 19.367706 -60.135956 35.783752c-13.7127075 16.33519 -20.569061 36.18811 -20.569061 59.558716c0 29.839996 8.332367 53.69586 24.997131 71.567505c16.664764 17.871643 42.56656 30.527374 77.70538 37.967163l0 3.0325317c-42.18564 4.447693 -75.13425 18.235565 -98.845825 41.363586c-23.616333 23.04715 -35.4245 50.986816 -35.4245 83.81888c0 29.273987 5.856476 53.736267 17.569397 73.387024c11.712952 19.650757 30.710785 36.066833 56.99347 49.24817c26.282715 13.100464 61.659607 24.38147 106.13071 33.842896l66.706604 14.192261l-29.853699 94.614624l66.706665 14.1922l26.425537 -83.454956c1.1427002 -4.5286255 2.1425781 -8.895447 2.9996338 -13.100525c0.85705566 -4.205078 1.2855835 -8.046265 1.2855835 -11.52356c0 -12.938721 -4.6661377 -24.219727 -13.998413 -33.842957c-9.332275 -9.704041 -24.23529 -16.820374 -44.709167 -21.348938l-66.706635 -14.919983c-26.94928 -5.9033203 -48.756317 -13.1813965 -65.42105 -21.834167c-16.664764 -8.733704 -28.949066 -19.165527 -36.852936 -31.295654c-7.903839 -12.2109375 -11.855774 -26.524414 -11.855774 -42.94049l0 -10.431885c0 -19.89331 4.23761 -36.794586 12.71283 -50.703735c8.47522 -13.90918 22.235535 -24.583649 41.280975 -32.023438c19.04544 -7.4397583 43.756897 -11.159668 74.13434 -11.159668l76.41986 0l0 -52.159363l-76.41986 0c-30.948822 0 -54.803223 -7.075897 -71.5632 -21.227661c-16.664764 -14.2326355 -24.997131 -34.247253 -24.997131 -60.043915l0 -10.431885c0 -20.37854 4.380432 -37.643692 13.141357 -51.795456c8.85611 -14.151764 20.99759 -24.94754 36.424377 -32.38733c15.522034 -7.439789 33.805664 -11.159683 54.85086 -11.159683l116.84375 0l0 -52.28067z"/>
-</svg> \ No newline at end of file
diff --git a/article.js b/article.js
index 292d61c..2a495c4 100644
--- a/article.js
+++ b/article.js
@@ -2,7 +2,7 @@ function addMetadata() {
// Favicon
const favicon = document.createElement("link");
favicon.rel = "icon";
- favicon.href = "/Logo.svg";
+ favicon.href = "https://static.williamsfam.us.com/Logo.svg";
favicon.type = "image/svg+xml";
document.head.appendChild(favicon);
@@ -27,20 +27,19 @@ function addMetadata() {
function addHeader() {
const header = document.querySelector("header");
- // Logo
+ const headerTop = document.createElement("div");
+ headerTop.classList.add("header-top");
+
const logoLink = document.createElement("a");
- logoLink.href = "/writing.html";
+ logoLink.href = "writing";
logoLink.classList.add("header-logo-link");
- header.appendChild(logoLink);
+ headerTop.appendChild(logoLink);
- // Right-side content
const info = document.createElement("div");
info.classList.add("header-info");
-
const h1 = document.createElement("h1");
h1.textContent = document.title;
info.appendChild(h1);
-
const time = document.createElement("time");
const metaDate = document.querySelector('meta[property="article:published_time"]');
const dateString = metaDate.getAttribute("content");
@@ -50,12 +49,11 @@ function addHeader() {
year: "numeric",
timeZone: "UTC"
});
-
time.setAttribute("datetime", dateString);
time.textContent = `Published ${displayDate}`;
info.appendChild(time);
-
- header.appendChild(info);
+ headerTop.appendChild(info);
+ header.appendChild(headerTop);
const hr = document.createElement("hr");
header.appendChild(hr);
@@ -89,4 +87,4 @@ document.addEventListener("DOMContentLoaded", () => {
addMetadata()
addHeader()
addTOC()
-}) \ No newline at end of file
+})
diff --git a/fonts.css b/fonts.css
deleted file mode 100644
index 7ce76d4..0000000
--- a/fonts.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@font-face {
- font-family: "Gelasio";
- font-style: normal;
- font-weight: 400 700;
- font-display: swap;
- src: url("/fonts/gelasio-latin.woff2") format("woff2");
-}
-
-@font-face {
- font-family: "Gelasio";
- font-style: italic;
- font-weight: 400 700;
- font-display: swap;
- src: url("/fonts/gelasio-latin-italic.woff2") format("woff2");
-}
-
-@font-face {
- font-family: "Fira Math";
- src: url("/fonts/FiraMath-Regular.woff2") format("woff2");
- font-weight: 400;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: "Fira Code";
- src: url("/fonts/FiraCode-VF.woff2") format("woff2");
- font-style: normal;
- font-weight: 300 700;
- font-display: swap;
-}
-
-:root {
- --fontSerif: 'Gelasio', serif;
- --fontMono: 'Fira Code', monospace;
- --fontMath: 'Fira Math', serif;
-} \ No newline at end of file
diff --git a/fonts/FiraCode-VF.woff2 b/fonts/FiraCode-VF.woff2
deleted file mode 100644
index e755a9d..0000000
--- a/fonts/FiraCode-VF.woff2
+++ /dev/null
Binary files differ
diff --git a/fonts/FiraMath-Regular.woff2 b/fonts/FiraMath-Regular.woff2
deleted file mode 100644
index fd08e65..0000000
--- a/fonts/FiraMath-Regular.woff2
+++ /dev/null
Binary files differ
diff --git a/fonts/gelasio-latin-italic.woff2 b/fonts/gelasio-latin-italic.woff2
deleted file mode 100644
index 7f95e1d..0000000
--- a/fonts/gelasio-latin-italic.woff2
+++ /dev/null
Binary files differ
diff --git a/fonts/gelasio-latin.woff2 b/fonts/gelasio-latin.woff2
deleted file mode 100644
index fe18998..0000000
--- a/fonts/gelasio-latin.woff2
+++ /dev/null
Binary files differ
diff --git a/index.html b/index.html
index f12f9fd..b3836ad 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
<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="./writing.html">Writing</a>
+ <a class="card" href="./writing">Writing</a>
</div>
</div>
</body>
diff --git a/minimalnetworkinglaptop.html b/net.html
index bc07c9b..bc07c9b 100644
--- a/minimalnetworkinglaptop.html
+++ b/net.html
diff --git a/prose.css b/prose.css
index 3a053c5..5e1819a 100644
--- a/prose.css
+++ b/prose.css
@@ -6,9 +6,14 @@
--lh: 1.5;
}
+body {
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
article {
width: 100%;
- max-width: 75ch;
+ max-width: 68ch;
margin: 0 auto;
position: relative;
z-index: 1;
@@ -20,6 +25,7 @@ p {
line-height: var(--lh);
font-size: 1.1rem;
margin: var(--sx) 0;
+ text-wrap: pretty;
}
sup {
@@ -37,6 +43,10 @@ a {
&:hover {
text-decoration: underline;
}
+ &:focus-visible {
+ outline: 2px solid #49f;
+ outline-offset: 2px;
+ }
}
li {
@@ -57,6 +67,19 @@ h1, h2, h3 {
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 {
@@ -83,7 +106,6 @@ time {
display: block;
padding: 1rem 1rem 3rem;
}
-
.content {
padding: 0;
}
@@ -103,9 +125,9 @@ table {
--tsx_y: calc(var(--sx) / 1.5);
font-family: var(--fontSerif);
- margin: var(--sx) 0;
-
+ margin: var(--sx) auto;
border-collapse: collapse;
+
th {
color: #e6e6e6;
text-align: center;
@@ -117,16 +139,17 @@ table {
border-width: 0 1px 0 0;
}
}
+
td {
- color: #6e7;
+ color: #e6e6e6;
text-align: center;
padding: var(--tsx_x) var(--tsx_y);
+ font-variant-numeric: tabular-nums;
}
}
-
math {
font-family: var(--fontMath);
- font-size: 1.2rem;
+ font-size: 1em;
transform: translateZ(0);
msub > :nth-child(2) {
@@ -134,7 +157,6 @@ math {
font-size: 0.8rem;
}
}
-
/* CODEBLOCKS */
code {
font-size: 0.95rem;
@@ -153,32 +175,37 @@ code {
mod { color: #bcd; }
id { color: inherit; }
}
-
pre {
- max-width: 100%;
- overflow-x: auto;
- overflow-y: hidden;
- box-sizing: border-box;
-
margin: var(--sx) 0;
line-height: var(--lh);
}
-/* HEADER */
+@media (max-width: 1000px) {
+ pre {
+ max-width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ box-sizing: border-box;
+ }
+}
+
header {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr);
- grid-template-rows: auto auto;
+ display: flex;
+ flex-direction: column;
gap: var(--sx);
- .header-logo-link {
- display: block;
- height: 100%;
- aspect-ratio: 1;
+ .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("/Logo.svg");
+ mask-image: url("https://static.williamsfam.us.com/Logo.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
@@ -190,7 +217,6 @@ header {
.header-info {
min-width: 0;
- align-self: center;
h1 {
line-height: 1;
@@ -205,7 +231,6 @@ header {
hr {
margin: 0;
- grid-column: 1 / -1;
width: 100%;
}
-} \ No newline at end of file
+}
diff --git a/style.css b/style.css
index 23162b3..d815d65 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-@import url('fonts.css');
+@import url('https://static.williamsfam.us.com/fonts.css');
*, *::before, *::after {
box-sizing: border-box;
diff --git a/writing.html b/writing.html
index e04ebb3..126055c 100644
--- a/writing.html
+++ b/writing.html
@@ -18,12 +18,12 @@
<article>
<h1>My Writing</h1>
<ul>
- <li><a href="./minimalnetworkinglaptop.html">Minimal Laptop Networking with NixOS</a></li>
- <li><a href="./reversible.html">Reversible Programming Blew my Mind (Reversible Part 1)</a></li>
- <li><a href="./fib.html">I accidentally derived a formula for the Fibonacci Sequence</a></li>
- <li><a href="./no_ai.html">Taking a Break</a></li>
- <li><a href="./soplt.html">Summer of PLT</a></li>
- <li><a href="./forgejno.html">You Don't Need Forgejo</a></li>
+ <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="./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>
+ <li><a href="./forgejno">You Don't Need Forgejo</a></li>
</ul>
</article>
</body>