Skip to content

Commit 57e0a55

Browse files
meroxdotdevmeroxdotdev
committed
chore: rework home.scss
1 parent c9d7425 commit 57e0a55

File tree

1 file changed

+35
-131
lines changed

1 file changed

+35
-131
lines changed

‎_sass/pages/_home.scss‎

Lines changed: 35 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
@use '../abstracts/placeholders';
44

55
#post-list {
6-
margin-top: 3rem;
6+
margin-top: 2rem;
77

88
@include bp.lg {
9-
margin-top: 4rem;
9+
margin-top: 2.5rem;
1010
}
1111

1212
.card-wrapper {
@@ -35,11 +35,7 @@
3535
}
3636

3737
&:not(:last-child) {
38-
margin-bottom: 2rem;
39-
40-
@include bp.lg {
41-
margin-bottom: 2.5rem;
42-
}
38+
margin-bottom: 1.25rem;
4339
}
4440
}
4541

@@ -70,9 +66,9 @@
7066

7167
%img-radius {
7268
border-radius: v.$radius-lg v.$radius-lg 0 0;
73-
69+
7470
@include bp.md {
75-
border-radius: v.$radius-lg 0 0 v.$radius-lg;
71+
border-radius: 0 v.$radius-lg v.$radius-lg 0;
7672
}
7773
}
7874

@@ -105,28 +101,23 @@
105101

106102
.card-body {
107103
height: 100%;
108-
padding: 1.5rem;
104+
padding: 1rem;
109105
position: relative;
110106
z-index: 2;
111-
107+
112108
@include bp.md {
113-
padding: 2rem 2rem 1.75rem;
109+
padding: 1.75rem 1.75rem 1.25rem;
114110
}
115111

116112
.card-title {
117113
@extend %text-clip;
118114

119115
color: var(--heading-color) !important;
120-
font-size: 1.375rem;
116+
font-size: 1.25rem;
121117
font-weight: 600;
122118
line-height: 1.3;
123-
margin-bottom: 0.75rem;
124119
transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
125120
letter-spacing: -0.01em;
126-
127-
@include bp.lg {
128-
font-size: 1.5rem;
129-
}
130121
}
131122

132123
%muted {
@@ -138,18 +129,15 @@
138129
@include bp.md {
139130
display: inherit !important;
140131
}
141-
132+
142133
&.content {
143134
@extend %muted;
144-
145-
margin-bottom: 1.25rem;
146-
135+
147136
p {
148137
@extend %text-clip;
149138

150-
line-height: 1.6;
139+
line-height: 1.5;
151140
margin: 0;
152-
font-size: 0.95rem;
153141
font-weight: 400;
154142
}
155143
}
@@ -158,17 +146,10 @@
158146
.post-meta {
159147
@extend %muted;
160148

161-
font-size: 0.875rem;
162149
font-weight: 500;
163150
display: flex;
164151
align-items: center;
165-
margin-top: auto; // Push to bottom of card
166-
padding-top: 1rem; // Add breathing space from content
167152

168-
@include bp.md {
169-
padding-top: 1.25rem;
170-
}
171-
172153
i {
173154
opacity: 0.8;
174155
transition: opacity 0.3s ease;
@@ -179,27 +160,9 @@
179160
opacity: 1;
180161
}
181162

182-
// Calendar icon spacing
183-
&.far.fa-calendar-alt,
184-
&.fas.fa-calendar-alt {
185-
margin-right: 0.4rem;
186-
}
187-
188-
// Folder icon spacing
189-
&.far.fa-folder-open,
190-
&.fas.fa-folder-open {
191-
margin-right: 0.3rem;
192-
}
193-
194-
// General spacing for other icons
195-
&:not(.fa-calendar-alt):not(.fa-folder-open) {
196-
margin-right: 0.4rem;
197-
}
198-
199-
// Space between different meta groups
200163
&:not(:first-child) {
201164
margin-left: 1.5rem;
202-
165+
203166
@include bp.md {
204167
margin-left: 1.75rem;
205168
}
@@ -214,6 +177,8 @@
214177
}
215178

216179
> div:first-child {
180+
display: block;
181+
217182
@extend %text-ellipsis;
218183
}
219184
}
@@ -223,123 +188,66 @@
223188

224189
.pagination {
225190
color: var(--text-color);
226-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
227-
justify-content: center;
228-
margin-top: 4rem;
229-
padding: 2rem 0;
191+
font-family: Lato, sans-serif;
192+
justify-content: space-evenly;
230193

231194
@include bp.lg {
232-
font-size: 0.9rem;
233-
margin-top: 5rem;
195+
font-size: 0.85rem;
196+
justify-content: center;
234197
}
235198

236199
a:hover {
237200
text-decoration: none;
238201
}
239202

240203
.page-item {
241-
margin: 0 0.25rem;
242-
243204
@include bp.lt(bp.get(lg)) {
244205
&:not(:first-child):not(:last-child) {
245206
display: none;
246207
}
247208
}
209+
210+
@include bp.lg {
211+
&:not(:last-child) {
212+
margin-right: 0.7rem;
213+
}
214+
}
248215

249216
.page-link {
250217
color: var(--btn-patinator-text-color);
251-
padding: 0.75rem 1rem;
252-
min-width: 44px;
253-
min-height: 44px;
254-
display: flex;
255-
align-items: center;
256-
justify-content: center;
257-
border-radius: 12px;
258-
background-color: var(--card-bg);
259-
backdrop-filter: blur(20px) saturate(180%);
260-
-webkit-backdrop-filter: blur(20px) saturate(180%);
261-
border: 1px solid rgb(255 255 255 / 6%);
262-
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
263-
font-weight: 500;
264-
position: relative;
265-
overflow: hidden;
266-
267-
// Subtle shine effect
268-
&::before {
269-
content: '';
270-
position: absolute;
271-
top: 0;
272-
left: -100%;
273-
width: 100%;
274-
height: 100%;
275-
background: linear-gradient(
276-
90deg,
277-
transparent 0%,
278-
rgb(255 255 255 / 10%) 50%,
279-
transparent 100%
280-
);
281-
transition: left 0.5s ease;
282-
}
283-
284-
&:hover::before {
285-
left: 100%;
286-
}
218+
padding: 0 0.6rem;
219+
display: -webkit-box;
220+
-webkit-box-pack: center;
221+
-webkit-box-align: center;
222+
border-radius: 0.5rem;
223+
border: 0;
224+
background-color: inherit;
287225
}
288226

289227
&.active {
290228
.page-link {
291-
background: linear-gradient(
292-
135deg,
293-
var(--link-color) 0%,
294-
color-mix(in srgb, var(--link-color) 80%, #000000) 100%
295-
);
296-
color: white;
297-
border-color: var(--link-color);
298-
box-shadow:
299-
0 4px 12px rgb(var(--link-color-rgb), 0.3),
300-
0 2px 4px rgb(0 0 0 / 10%);
301-
transform: translateY(-1px);
229+
background-color: var(--btn-paginator-hover-color);
302230
}
303231
}
304232

305233
&:not(.active) {
306234
.page-link {
307235
&:hover {
308-
background-color: var(--btn-paginator-hover-color);
309-
border-color: rgb(255 255 255 / 12%);
310-
transform: translateY(-2px);
311-
box-shadow:
312-
0 8px 25px rgb(0 0 0 / 10%),
313-
0 4px 10px rgb(0 0 0 / 6%);
236+
box-shadow: inset var(--btn-border-color) 0 0 0 1px;
314237
}
315238
}
316239
}
317240

318241
&.disabled {
319242
cursor: not-allowed;
320-
opacity: 0.5;
321-
243+
322244
.page-link {
323245
color: rgb(108 117 125 / 57%);
324-
325-
&:hover {
326-
transform: none;
327-
box-shadow: none;
328-
background-color: var(--card-bg);
329-
}
330246
}
331247
}
332248
} /* .page-item */
333249

334250
.page-index {
335-
font-weight: 600;
336-
padding: 0.75rem 1.5rem;
337-
background: var(--card-bg);
338-
border-radius: 12px;
339-
border: 1px solid rgb(255 255 255 / 6%);
340-
backdrop-filter: blur(20px) saturate(180%);
341-
-webkit-backdrop-filter: blur(20px) saturate(180%);
342-
343251
@include bp.lg {
344252
display: none;
345253
}
@@ -371,8 +279,4 @@
371279
background: rgb(28 28 30 / 80%);
372280
border-color: rgb(255 255 255 / 6%);
373281
}
374-
375-
.pagination .page-link {
376-
background: rgb(28 28 30 / 80%);
377-
}
378282
}

0 commit comments

Comments
 (0)