small changes: reorganize css, etc

1 files changed, 83 insertions, 0 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;
+    }
+}