From 2a37826970c8ef5370707c2d18c084545803f6e5 Mon Sep 17 00:00:00 2001
From: Agil Mammadov <mammadovagil@tutamail.com>
Date: Tue, 21 Apr 2026 13:28:42 +0400
Subject: [PATCH 1/3] refactor: split monoholic.scss into focused partials

---
 _sass/_base.scss       |  43 ++++++++++
 _sass/_components.scss |  45 +++++++++++
 _sass/_content.scss    |  38 +++++++++
 _sass/_layout.scss     |  25 ++++++
 _sass/_variables.scss  |   8 ++
 _sass/monoholic.scss   | 175 ++---------------------------------------
 6 files changed, 164 insertions(+), 170 deletions(-)
 create mode 100644 _sass/_base.scss
 create mode 100644 _sass/_components.scss
 create mode 100644 _sass/_content.scss
 create mode 100644 _sass/_layout.scss
 create mode 100644 _sass/_variables.scss

diff --git a/_sass/_base.scss b/_sass/_base.scss
new file mode 100644
index 0000000..b2d091c
--- /dev/null
+++ b/_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(--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);
+}
diff --git a/_sass/_components.scss b/_sass/_components.scss
new file mode 100644
index 0000000..da0dd05
--- /dev/null
+++ b/_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: 1rem;
+    flex-wrap: wrap; // Mobile safety
+  }
+}
+
+.post-meta {
+  color: var(--meta-color);
+}
+
+.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-content {
+  .post-title {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .post-meta {
+    color: var(--meta-color);
+    display: block;
+  }
+}
diff --git a/_sass/_content.scss b/_sass/_content.scss
new file mode 100644
index 0000000..6eafe9a
--- /dev/null
+++ b/_sass/_content.scss
@@ -0,0 +1,38 @@
+.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;
+  }
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
new file mode 100644
index 0000000..f7ec6c9
--- /dev/null
+++ b/_sass/_layout.scss
@@ -0,0 +1,25 @@
+.wrapper {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+}
+
+.site-header {
+  margin: 3rem 0;
+
+  .site-title {
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+}
+
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+section {
+  margin-bottom: 2rem;
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..0ff01ab
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,8 @@
+:root {
+  --bg-color: #030303;
+  --text-color: #e0e0e0;
+  --meta-color: #888888;
+  --border-color: #222222;
+  --font-family: "JetBrains Mono", monospace;
+  --base-size: 16px;
+}
diff --git a/_sass/monoholic.scss b/_sass/monoholic.scss
index 2067666..228d0ee 100644
--- a/_sass/monoholic.scss
+++ b/_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";

From daf543bd99704abde4638f96d29c4b74d026eb7b Mon Sep 17 00:00:00 2001
From: Agil Mammadov <mammadovagil@tutamail.com>
Date: Tue, 21 Apr 2026 13:31:39 +0400
Subject: [PATCH 2/3] feat: introduce design tokens for spacing, layout, and
 typography

---
 _sass/_base.scss       |  2 +-
 _sass/_components.scss | 10 +++++-----
 _sass/_content.scss    |  8 ++++----
 _sass/_layout.scss     | 14 +++++++-------
 _sass/_variables.scss  | 21 ++++++++++++++++++++-
 5 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index b2d091c..8e59a50 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -6,7 +6,7 @@ body {
   background-color: var(--bg-color);
   color: var(--text-color);
   font-family: var(--font-family);
-  font-size: var(--base-size);
+  font-size: var(--font-size-base);
   line-height: 1.4;
   margin: 0;
   padding: 0;
diff --git a/_sass/_components.scss b/_sass/_components.scss
index da0dd05..9cb27dc 100644
--- a/_sass/_components.scss
+++ b/_sass/_components.scss
@@ -7,7 +7,7 @@
     margin-bottom: 0.75rem;
     display: flex;
     align-items: baseline;
-    gap: 1rem;
+    gap: var(--space-md);
     flex-wrap: wrap; // Mobile safety
   }
 }
@@ -17,8 +17,8 @@
 }
 
 .site-footer {
-  padding-top: 2rem;
-  font-size: 0.85rem;
+  padding-top: var(--space-xl);
+  font-size: var(--font-size-sm);
   color: var(--meta-color);
 
   .footer-col {
@@ -34,8 +34,8 @@
 
 .page-content {
   .post-title {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
+    font-size: var(--font-size-post-title);
+    margin-bottom: var(--space-sm);
   }
 
   .post-meta {
diff --git a/_sass/_content.scss b/_sass/_content.scss
index 6eafe9a..b218f05 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -11,12 +11,12 @@ div.highlighter-rouge code {
 }
 
 pre.highlight {
-  padding: 1rem;
+  padding: var(--space-md);
 }
 
 table {
   width: 100%;
-  margin-bottom: 1rem;
+  margin-bottom: var(--space-md);
 }
 
 table,
@@ -24,13 +24,13 @@ th,
 td {
   border: thin solid var(--meta-color);
   border-collapse: collapse;
-  padding: 0.4rem;
+  padding: var(--space-xs);
 }
 
 blockquote {
   font-style: italic;
   border: thin solid var(--border-color);
-  padding: 1rem;
+  padding: var(--space-md);
 
   p {
     margin: 0;
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index f7ec6c9..8138fdf 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,25 +1,25 @@
 .wrapper {
-  max-width: 680px;
+  max-width: var(--content-width);
   margin: 0 auto;
-  padding: 4rem 2rem;
+  padding: var(--space-3xl) var(--space-xl);
 }
 
 .site-header {
-  margin: 3rem 0;
+  margin: var(--space-2xl) 0;
 
   .site-title {
-    font-size: 2rem;
+    font-size: var(--font-size-site-title);
     font-weight: 700;
     letter-spacing: 0.5px;
   }
 }
 
 .section-title {
-  font-size: 1.1rem;
+  font-size: var(--font-size-section);
   font-weight: 700;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--space-lg);
 }
 
 section {
-  margin-bottom: 2rem;
+  margin-bottom: var(--space-xl);
 }
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index 0ff01ab..cd81a86 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -1,8 +1,27 @@
 :root {
+  // Colors
   --bg-color: #030303;
   --text-color: #e0e0e0;
   --meta-color: #888888;
   --border-color: #222222;
+
+  // Typography
   --font-family: "JetBrains Mono", monospace;
-  --base-size: 16px;
+  --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;
 }

From 1aaa9ec0e2d110cadfc2ff1070f12b500c660465 Mon Sep 17 00:00:00 2001
From: Agil Mammadov <mammadovagil@tutamail.com>
Date: Tue, 21 Apr 2026 13:37:16 +0400
Subject: [PATCH 3/3] style: consolidate and nest content styles in
 _content.scss

---
 _sass/_content.scss | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/_sass/_content.scss b/_sass/_content.scss
index b218f05..1438c23 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -4,27 +4,29 @@ highlight {
   color: var(--bg-color);
 }
 
-div.highlighter-rouge code {
-  display: block;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
+div.highlighter-rouge {
+  code {
+    display: block;
+    overflow-x: auto;
+    white-space: pre-wrap;
+  }
 
-pre.highlight {
-  padding: var(--space-md);
+  pre.highlight {
+    padding: var(--space-md);
+  }
 }
 
 table {
   width: 100%;
   margin-bottom: var(--space-md);
-}
 
-table,
-th,
-td {
-  border: thin solid var(--meta-color);
-  border-collapse: collapse;
-  padding: var(--space-xs);
+  &,
+  th,
+  td {
+    border: thin solid var(--meta-color);
+    border-collapse: collapse;
+    padding: var(--space-xs);
+  }
 }
 
 blockquote {