Skip to content

Commit 9ca5e45

Browse files
author
Agil Mammadov
authored
Merge pull request #17 from stiermid/refactor/scss-architecture
refactor: css architecture
2 parents 78f5c77 + 1aaa9ec commit 9ca5e45

6 files changed

Lines changed: 185 additions & 170 deletions

File tree

‎_sass/_base.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: var(--bg-color);
7+
color: var(--text-color);
8+
font-family: var(--font-family);
9+
font-size: var(--font-size-base);
10+
line-height: 1.4;
11+
margin: 0;
12+
padding: 0;
13+
-webkit-font-smoothing: antialiased;
14+
}
15+
16+
h1,
17+
h2,
18+
h3,
19+
h4,
20+
h5,
21+
h6 {
22+
font-weight: 700;
23+
margin-top: 0;
24+
}
25+
26+
p {
27+
margin-top: 0;
28+
}
29+
30+
a {
31+
color: var(--text-color);
32+
text-decoration: underline;
33+
}
34+
35+
img {
36+
max-width: 100%;
37+
display: block;
38+
margin: 0 auto;
39+
}
40+
41+
.m-img img {
42+
filter: grayscale(1);
43+
}

‎_sass/_components.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.post-list {
2+
list-style: none;
3+
padding: 0;
4+
margin: 0;
5+
6+
li {
7+
margin-bottom: 0.75rem;
8+
display: flex;
9+
align-items: baseline;
10+
gap: var(--space-md);
11+
flex-wrap: wrap; // Mobile safety
12+
}
13+
}
14+
15+
.post-meta {
16+
color: var(--meta-color);
17+
}
18+
19+
.site-footer {
20+
padding-top: var(--space-xl);
21+
font-size: var(--font-size-sm);
22+
color: var(--meta-color);
23+
24+
.footer-col {
25+
display: flex;
26+
justify-content: space-between;
27+
width: 100%;
28+
}
29+
30+
p {
31+
margin: 0;
32+
}
33+
}
34+
35+
.page-content {
36+
.post-title {
37+
font-size: var(--font-size-post-title);
38+
margin-bottom: var(--space-sm);
39+
}
40+
41+
.post-meta {
42+
color: var(--meta-color);
43+
display: block;
44+
}
45+
}

‎_sass/_content.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.highlighter-rouge,
2+
highlight {
3+
background-color: var(--text-color);
4+
color: var(--bg-color);
5+
}
6+
7+
div.highlighter-rouge {
8+
code {
9+
display: block;
10+
overflow-x: auto;
11+
white-space: pre-wrap;
12+
}
13+
14+
pre.highlight {
15+
padding: var(--space-md);
16+
}
17+
}
18+
19+
table {
20+
width: 100%;
21+
margin-bottom: var(--space-md);
22+
23+
&,
24+
th,
25+
td {
26+
border: thin solid var(--meta-color);
27+
border-collapse: collapse;
28+
padding: var(--space-xs);
29+
}
30+
}
31+
32+
blockquote {
33+
font-style: italic;
34+
border: thin solid var(--border-color);
35+
padding: var(--space-md);
36+
37+
p {
38+
margin: 0;
39+
}
40+
}

‎_sass/_layout.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.wrapper {
2+
max-width: var(--content-width);
3+
margin: 0 auto;
4+
padding: var(--space-3xl) var(--space-xl);
5+
}
6+
7+
.site-header {
8+
margin: var(--space-2xl) 0;
9+
10+
.site-title {
11+
font-size: var(--font-size-site-title);
12+
font-weight: 700;
13+
letter-spacing: 0.5px;
14+
}
15+
}
16+
17+
.section-title {
18+
font-size: var(--font-size-section);
19+
font-weight: 700;
20+
margin-bottom: var(--space-lg);
21+
}
22+
23+
section {
24+
margin-bottom: var(--space-xl);
25+
}

‎_sass/_variables.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:root {
2+
// Colors
3+
--bg-color: #030303;
4+
--text-color: #e0e0e0;
5+
--meta-color: #888888;
6+
--border-color: #222222;
7+
8+
// Typography
9+
--font-family: "JetBrains Mono", monospace;
10+
--font-size-base: 16px;
11+
--font-size-sm: 0.85rem;
12+
--font-size-section: 1.1rem;
13+
--font-size-post-title: 1.5rem;
14+
--font-size-site-title: 2rem;
15+
16+
// Spacing scale
17+
--space-xs: 0.4rem;
18+
--space-sm: 0.5rem;
19+
--space-md: 1rem;
20+
--space-lg: 1.5rem;
21+
--space-xl: 2rem;
22+
--space-2xl: 3rem;
23+
--space-3xl: 4rem;
24+
25+
// Layout
26+
--content-width: 680px;
27+
}

‎_sass/monoholic.scss‎

Lines changed: 5 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,6 @@
11
// monoholic.scss
2-
3-
:root {
4-
--bg-color: #030303;
5-
--text-color: #e0e0e0;
6-
--meta-color: #888888;
7-
--border-color: #222222;
8-
--font-family: "JetBrains Mono", monospace;
9-
--base-size: 16px;
10-
}
11-
12-
* {
13-
box-sizing: border-box;
14-
}
15-
16-
body {
17-
background-color: var(--bg-color);
18-
color: var(--text-color);
19-
font-family: var(--font-family);
20-
font-size: var(--base-size);
21-
line-height: 1.4;
22-
margin: 0;
23-
padding: 0;
24-
-webkit-font-smoothing: antialiased;
25-
}
26-
27-
h1,
28-
h2,
29-
h3,
30-
h4,
31-
h5,
32-
h6 {
33-
font-weight: 700;
34-
margin-top: 0;
35-
}
36-
37-
p {
38-
margin-top: 0;
39-
}
40-
41-
a {
42-
color: var(--text-color);
43-
text-decoration: underline;
44-
}
45-
46-
img {
47-
max-width: 100%;
48-
display: block;
49-
margin: 0 auto;
50-
}
51-
52-
.m-img img {
53-
filter: grayscale(1);
54-
}
55-
56-
.highlighter-rouge,
57-
highlight {
58-
background-color: var(--text-color);
59-
color: var(--bg-color);
60-
}
61-
62-
div.highlighter-rouge code {
63-
display: block;
64-
overflow-x: auto;
65-
white-space: pre-wrap;
66-
}
67-
68-
pre.highlight {
69-
padding: 1rem;
70-
}
71-
72-
table {
73-
width: 100%;
74-
margin-bottom: 1rem;
75-
}
76-
77-
table,
78-
th,
79-
td {
80-
border: thin solid var(--meta-color);
81-
border-collapse: collapse;
82-
padding: 0.4rem;
83-
}
84-
85-
blockquote {
86-
font-style: italic;
87-
border: thin solid var(--border-color);
88-
padding: 1rem;
89-
90-
p {
91-
margin: 0;
92-
}
93-
}
94-
95-
.wrapper {
96-
max-width: 680px;
97-
margin: 0 auto;
98-
padding: 4rem 2rem;
99-
}
100-
101-
// Header
102-
.site-header {
103-
margin: 3rem 0;
104-
105-
.site-title {
106-
font-size: 2rem;
107-
font-weight: 700;
108-
letter-spacing: 0.5px;
109-
}
110-
}
111-
112-
// Typography / Sections
113-
.section-title {
114-
font-size: 1.1rem;
115-
font-weight: 700;
116-
margin-bottom: 1.5rem;
117-
}
118-
119-
// Section
120-
section {
121-
margin-bottom: 2rem;
122-
}
123-
124-
// Posts Section
125-
.post-list {
126-
list-style: none;
127-
padding: 0;
128-
margin: 0;
129-
130-
li {
131-
margin-bottom: 0.75rem;
132-
display: flex;
133-
align-items: baseline;
134-
gap: 1rem;
135-
flex-wrap: wrap; // Mobile safety
136-
}
137-
}
138-
139-
.post-meta {
140-
color: var(--meta-color);
141-
}
142-
143-
// Footer
144-
.site-footer {
145-
padding-top: 2rem;
146-
font-size: 0.85rem;
147-
color: var(--meta-color);
148-
149-
.footer-col {
150-
display: flex;
151-
justify-content: space-between;
152-
width: 100%;
153-
}
154-
155-
p {
156-
margin: 0;
157-
}
158-
}
159-
160-
// Page Layout Styles (For standard pages/posts if they have content)
161-
.page-content {
162-
.post-title {
163-
font-size: 1.5rem;
164-
margin-bottom: 0.5rem;
165-
}
166-
167-
.post-meta {
168-
color: var(--meta-color);
169-
display: block;
170-
}
171-
}
2+
@import "variables";
3+
@import "base";
4+
@import "content";
5+
@import "layout";
6+
@import "components";

0 commit comments

Comments
 (0)