diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..8e59a50 --- /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(--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); +} diff --git a/_sass/_components.scss b/_sass/_components.scss new file mode 100644 index 0000000..9cb27dc --- /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: 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; + } +} diff --git a/_sass/_content.scss b/_sass/_content.scss new file mode 100644 index 0000000..1438c23 --- /dev/null +++ b/_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; + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..8138fdf --- /dev/null +++ b/_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); +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..cd81a86 --- /dev/null +++ b/_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; +} 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";