refactor: css architecture

_sass/_base.scss

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: 1.4;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  margin-top: 0;
+}
+
+p {
+  margin-top: 0;
+}
+
+a {
+  color: var(--text-color);
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+.m-img img {
+  filter: grayscale(1);
+}

_sass/_components.scss

@@ -0,0 +1,45 @@
+.post-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+    flex-wrap: wrap; // Mobile safety
+  }
+}
+
+.post-meta {
+  color: var(--meta-color);
+}
+
+.site-footer {
+  padding-top: var(--space-xl);
+  font-size: var(--font-size-sm);
+  color: var(--meta-color);
+
+  .footer-col {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.page-content {
+  .post-title {
+    font-size: var(--font-size-post-title);
+    margin-bottom: var(--space-sm);
+  }
+
+  .post-meta {
+    color: var(--meta-color);
+    display: block;
+  }
+}

_sass/_content.scss

@@ -0,0 +1,40 @@
+.highlighter-rouge,
+highlight {
+  background-color: var(--text-color);
+  color: var(--bg-color);
+}
+
+div.highlighter-rouge {
+  code {
+    display: block;
+    overflow-x: auto;
+    white-space: pre-wrap;
+  }
+
+  pre.highlight {
+    padding: var(--space-md);
+  }
+}
+
+table {
+  width: 100%;
+  margin-bottom: var(--space-md);
+
+  &,
+  th,
+  td {
+    border: thin solid var(--meta-color);
+    border-collapse: collapse;
+    padding: var(--space-xs);
+  }
+}
+
+blockquote {
+  font-style: italic;
+  border: thin solid var(--border-color);
+  padding: var(--space-md);
+
+  p {
+    margin: 0;
+  }
+}

_sass/_layout.scss

@@ -0,0 +1,25 @@
+.wrapper {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: var(--space-3xl) var(--space-xl);
+}
+
+.site-header {
+  margin: var(--space-2xl) 0;
+
+  .site-title {
+    font-size: var(--font-size-site-title);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+}
+
+.section-title {
+  font-size: var(--font-size-section);
+  font-weight: 700;
+  margin-bottom: var(--space-lg);
+}
+
+section {
+  margin-bottom: var(--space-xl);
+}

_sass/_variables.scss

@@ -0,0 +1,27 @@
+:root {
+  // Colors
+  --bg-color: #030303;
+  --text-color: #e0e0e0;
+  --meta-color: #888888;
+  --border-color: #222222;
+
+  // Typography
+  --font-family: "JetBrains Mono", monospace;
+  --font-size-base: 16px;
+  --font-size-sm: 0.85rem;
+  --font-size-section: 1.1rem;
+  --font-size-post-title: 1.5rem;
+  --font-size-site-title: 2rem;
+
+  // Spacing scale
+  --space-xs: 0.4rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+
+  // Layout
+  --content-width: 680px;
+}

_sass/monoholic.scss

@@ -1,171 +1,6 @@
 // monoholic.scss
-
-:root {
-  --bg-color: #030303;
-  --text-color: #e0e0e0;
-  --meta-color: #888888;
-  --border-color: #222222;
-  --font-family: "JetBrains Mono", monospace;
-  --base-size: 16px;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-family: var(--font-family);
-  font-size: var(--base-size);
-  line-height: 1.4;
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 700;
-  margin-top: 0;
-}
-
-p {
-  margin-top: 0;
-}
-
-a {
-  color: var(--text-color);
-  text-decoration: underline;
-}
-
-img {
-  max-width: 100%;
-  display: block;
-  margin: 0 auto;
-}
-
-.m-img img {
-  filter: grayscale(1);
-}
-
-.highlighter-rouge,
-highlight {
-  background-color: var(--text-color);
-  color: var(--bg-color);
-}
-
-div.highlighter-rouge code {
-  display: block;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
-
-pre.highlight {
-  padding: 1rem;
-}
-
-table {
-  width: 100%;
-  margin-bottom: 1rem;
-}
-
-table,
-th,
-td {
-  border: thin solid var(--meta-color);
-  border-collapse: collapse;
-  padding: 0.4rem;
-}
-
-blockquote {
-  font-style: italic;
-  border: thin solid var(--border-color);
-  padding: 1rem;
-
-  p {
-    margin: 0;
-  }
-}
-
-.wrapper {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 4rem 2rem;
-}
-
-// Header
-.site-header {
-  margin: 3rem 0;
-
-  .site-title {
-    font-size: 2rem;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-  }
-}
-
-// Typography / Sections
-.section-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-}
-
-// Section
-section {
-  margin-bottom: 2rem;
-}
-
-// Posts Section
-.post-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    margin-bottom: 0.75rem;
-    display: flex;
-    align-items: baseline;
-    gap: 1rem;
-    flex-wrap: wrap; // Mobile safety
-  }
-}
-
-.post-meta {
-  color: var(--meta-color);
-}
-
-// Footer
-.site-footer {
-  padding-top: 2rem;
-  font-size: 0.85rem;
-  color: var(--meta-color);
-
-  .footer-col {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  p {
-    margin: 0;
-  }
-}
-
-// Page Layout Styles (For standard pages/posts if they have content)
-.page-content {
-  .post-title {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .post-meta {
-    color: var(--meta-color);
-    display: block;
-  }
-}
+@import "variables";
+@import "base";
+@import "content";
+@import "layout";
+@import "components";