Skip to content

Commit 61619a1

Browse files
BuddySirJavaBuddySirJava
authored
Refactor layout and styles: replace global CSS with modular styles, update article no-results handling, and enhance homepage and articles page state management. (#20)
1 parent 45ed75e commit 61619a1

15 files changed

Lines changed: 1380 additions & 1065 deletions

File tree

‎src/layouts/BaseLayout.astro‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
---
22
import Header from "@components/page/Header.astro";
33
import Footer from "@components/page/Footer.astro";
4-
import "@styles/inter.css"
54
const { pageTitle } = Astro.props;
65
const siteTitle = "گنوم فارسی";
76
8-
import "@styles/global.css";
7+
import "@styles/variables.css";
8+
import "@styles/base.css";
9+
import "@styles/components.css";
10+
import "@styles/layout.css";
11+
import "@styles/specific-components.css";
12+
import "@styles/utilities.css";
13+
import "@styles/responsive.css";
14+
import "@styles/animations.css";
15+
import "@styles/accessibility.css";
916
---
1017

11-
<html lang="fa">
18+
<html lang="fa" dir="rtl">
1219
<head>
1320
<meta charset="utf-8" />
1421
<meta name="viewport" content="width=device-width" />

‎src/pages/articles/index.astro‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,14 @@ const dateOptions = {
5555
{articles.map(article => (<ArticleCard key={article.slug} article={article} dateOptions={dateOptions} />))}
5656
</div>
5757

58-
<!-- No Results -->
59-
<div x-show="!loading && visibleArticles.length === 0" class="text-center mt-xl">
60-
<p>مقاله‌ای یافت نشد.</p>
61-
<button @click="searchQuery = ''; selectedTag = ''; filterArticles()" class="btn btn-secondary mt-md">
62-
پاک کردن فیلترها
63-
</button>
64-
</div>
58+
<!-- No Results (SSR) -->
59+
{articles.length === 0 && (
60+
<div class="text-center mt-xl">
61+
<p>مقاله‌ای یافت نشد.</p>
62+
<button @click="searchQuery = ''; selectedTag = ''; filterArticles()" class="btn btn-secondary mt-md">
63+
پاک کردن فیلترها
64+
</button>
65+
</div>
66+
)}
6567
</main>
6668
</BaseLayout>

‎src/styles/accessibility.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Accessibility Features */
2+
3+
.skip-link {
4+
position: absolute;
5+
top: -40px;
6+
left: 6px;
7+
background: var(--brand-primary);
8+
color: var(--text-on-brand);
9+
padding: 8px;
10+
text-decoration: none;
11+
border-radius: var(--radius-sm);
12+
z-index: 1000;
13+
transition: top 0.3s;
14+
}
15+
16+
.skip-link:focus {
17+
top: 6px;
18+
}
19+
20+
/* Reduced Motion Support */
21+
@media (prefers-reduced-motion: reduce) {
22+
.header,
23+
.nav-link,
24+
.logo,
25+
.theme-toggle,
26+
.mobile-menu-btn {
27+
transition: none;
28+
}
29+
30+
.nav-link:hover,
31+
.logo:hover,
32+
.theme-toggle:hover,
33+
.mobile-menu-btn:hover {
34+
transform: none;
35+
}
36+
}
37+
38+
@media (forced-colors: active) {
39+
.nav-link {
40+
border: 1px solid var(--text-primary);
41+
}
42+
43+
.nav-link:hover,
44+
.nav-link.active {
45+
background: var(--text-primary);
46+
color: var(--bg-primary);
47+
}
48+
}
49+
50+
/* Screen Reader Only */
51+
.sr-only {
52+
position: absolute;
53+
width: 1px;
54+
height: 1px;
55+
padding: 0;
56+
margin: -1px;
57+
overflow: hidden;
58+
clip: rect(0, 0, 0, 0);
59+
white-space: nowrap;
60+
border: 0;
61+
}

‎src/styles/animations.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@keyframes fadeIn {
2+
from {
3+
opacity: 0;
4+
transform: translateY(20px);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: translateY(0);
9+
}
10+
}
11+
12+
@keyframes slideUp {
13+
from {
14+
opacity: 0;
15+
transform: translateY(40px);
16+
}
17+
to {
18+
opacity: 1;
19+
transform: translateY(0);
20+
}
21+
}
22+
23+
.fade-in {
24+
animation: fadeIn 0.4s ease-out forwards;
25+
}
26+
27+
.slide-up {
28+
animation: slideUp 0.8s ease-out forwards;
29+
}

‎src/styles/base.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
2+
3+
/* Inter Font */
4+
@font-face {
5+
font-family: InterVariable;
6+
font-style: normal;
7+
font-weight: 100 900;
8+
font-display: swap;
9+
src: url("https://static.gnome.org/fonts/InterVariable.woff2") format("woff2");
10+
}
11+
12+
@font-face {
13+
font-family: InterVariable;
14+
font-style: italic;
15+
font-weight: 100 900;
16+
font-display: swap;
17+
src: url("https://static.gnome.org/fonts/InterVariable-Italic.woff2") format("woff2");
18+
}
19+
20+
@font-feature-values InterVariable {
21+
@character-variant {
22+
cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
23+
cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
24+
alt-1: 1; /* Alternate one */
25+
alt-3: 9; /* Flat-top three */
26+
open-4: 2; /* Open four */
27+
open-6: 3; /* Open six */
28+
open-9: 4; /* Open nine */
29+
lc-l-with-tail: 5; /* Lower-case L with tail */
30+
simplified-u: 6; /* Simplified u */
31+
alt-double-s: 7; /* Alternate German double s */
32+
uc-i-with-serif: 8; /* Upper-case i with serif */
33+
uc-g-with-spur: 10; /* Capital G with spur */
34+
single-story-a: 11; /* Single-story a */
35+
compact-lc-f: 12; /* Compact f */
36+
compact-lc-t: 13; /* Compact t */
37+
}
38+
@styleset {
39+
ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
40+
open-digits: 1; /* Open digits */
41+
disambiguation: 2; /* Disambiguation (with zero) */
42+
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
43+
round-quotes-and-commas: 3; /* Round quotes &amp; commas */
44+
square-punctuation: 7; /* Square punctuation */
45+
square-quotes: 8; /* Square quotes */
46+
circled-characters: 5; /* Circled characters */
47+
squared-characters: 6; /* Squared characters */
48+
}
49+
}
50+
51+
* {
52+
box-sizing: border-box;
53+
margin: 0;
54+
padding: 0;
55+
}
56+
57+
html {
58+
font-size: 16px;
59+
scroll-behavior: smooth;
60+
}
61+
62+
:root {
63+
direction: rtl;
64+
}
65+
66+
body {
67+
font-family: var(--font-family), serif;
68+
font-size: var(--font-size-base);
69+
line-height: var(--line-height-normal);
70+
color: var(--text-primary);
71+
background-color: var(--bg-primary);
72+
text-align: right;
73+
overflow-x: hidden;
74+
font-feature-settings: 'liga' 1, 'calt' 1, 'cv05' 1; /* Inter features */
75+
}
76+
77+
/* Typography */
78+
h1, h2, h3, h4, h5, h6 {
79+
font-weight: 700;
80+
line-height: var(--line-height-tight);
81+
margin-bottom: var(--spacing-sm);
82+
}
83+
84+
h1 { font-size: var(--font-size-4xl); }
85+
h2 { font-size: var(--font-size-3xl); }
86+
h3 { font-size: var(--font-size-2xl); }
87+
h4 { font-size: var(--font-size-xl); }
88+
h5 { font-size: var(--font-size-lg); }
89+
h6 { font-size: var(--font-size-base); }
90+
91+
p {
92+
margin-bottom: var(--spacing-sm);
93+
line-height: var(--line-height-relaxed);
94+
}
95+
96+
a {
97+
color: var(--color-link);
98+
text-decoration: none;
99+
transition: color 0.2s ease;
100+
}
101+
102+
a:hover {
103+
color: var(--brand-secondary);
104+
}
105+
106+
/* Lists */
107+
ul, ol {
108+
padding-right: var(--spacing-md);
109+
margin-bottom: var(--spacing-sm);
110+
}
111+
112+
li {
113+
margin-bottom: var(--spacing-xs);
114+
}
115+
116+
/* Blockquote */
117+
blockquote {
118+
margin: var(--spacing-lg) 0;
119+
padding: var(--spacing-md) var(--spacing-lg);
120+
border-right: 4px solid var(--brand-primary);
121+
background-color: var(--bg-secondary);
122+
border-radius: var(--radius-sm);
123+
position: relative;
124+
font-style: italic;
125+
}
126+
127+
blockquote::before {
128+
content: '"';
129+
font-size: var(--font-size-4xl);
130+
color: var(--brand-primary);
131+
position: absolute;
132+
top: -0.5rem;
133+
right: var(--spacing-sm);
134+
font-family: serif;
135+
opacity: 0.5;
136+
}
137+
138+
blockquote p {
139+
margin: 0;
140+
color: var(--text-secondary);
141+
line-height: var(--line-height-relaxed);
142+
}
143+
144+
blockquote p:not(:last-child) {
145+
margin-bottom: var(--spacing-sm);
146+
}
147+
148+
blockquote code,
149+
blockquote em,
150+
blockquote strong {
151+
direction: ltr;
152+
text-align: left;
153+
display: inline-block;
154+
}
155+
156+
/* Code */
157+
code {
158+
background-color: var(--bg-muted);
159+
padding: 0.2em 0.4em;
160+
border-radius: var(--radius-sm);
161+
font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
162+
font-size: 0.9em;
163+
direction: ltr;
164+
text-align: left;
165+
}
166+
167+
pre {
168+
background-color: var(--bg-muted);
169+
padding: var(--spacing-md);
170+
border-radius: var(--radius-sm);
171+
overflow-x: auto;
172+
margin: var(--spacing-md) 0;
173+
direction: ltr;
174+
text-align: left;
175+
}
176+
177+
pre code {
178+
background: none;
179+
padding: 0;
180+
}
181+
182+
pre.astro-code {
183+
direction: ltr;
184+
text-align: left;
185+
}
186+
187+
pre.astro-code .line {
188+
direction: ltr;
189+
padding-left: 5px;
190+
}

0 commit comments

Comments
 (0)