mark
/
hermina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimizirano za mobile
Deploy to Development and Production / deploy (push) Successful in 4s Details

This commit is contained in:
Mark Poljanšek 2025-09-18 00:43:34 -05:00
parent 10b2fc866d
commit 9f421888ec
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/pages/_blog.css
View File

@ -15,26 +15,17 @@
--blog-card-border-4: #C2A370; --blog-card-border-4: #C2A370;
} }
/* --- Prilagoditev mreže za blog stran --- */ /* --- Stili za nove, pastelne blog kartice (Mobile First) --- */
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
align-items: stretch;
}
}
/* --- Stili za nove, pastelne blog kartice --- */
.blog-feature-card { .blog-feature-card {
/* Osnovna struktura in pozicioniranje */ /* Osnovna struktura in pozicioniranje */
position: relative; /* Nujno za absolutno pozicioniranje gumba */ position: relative;
display: flex; display: flex;
align-items: center; /* Vertikalno centrira vsebinski blok (besedilo) */ align-items: center;
text-align: center; text-align: center;
min-height: 480px; /* Povečana višina za daljše besedilo */ min-height: 420px; /* Manjša višina za mobilne naprave */
/* Povečan notranji odmik, posebej na dnu, da se besedilo ne prekriva z gumbom */ /* Povečan odmik na dnu (8rem), da se besedilo ne prekriva z gumbom */
padding: var(--spacing-l) 1.5rem 6rem 1.5rem; padding: var(--spacing-l) 1.5rem 8rem 1.5rem;
border-radius: 10px; border-radius: 10px;
@ -67,19 +58,19 @@
.blog-feature-card .blog-card-title { .blog-feature-card .blog-card-title {
color: var(--color-text); color: var(--color-text);
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.25rem; font-size: 1.15rem; /* Prilagojena velikost za mobilne naprave */
font-weight: 500; font-weight: 500;
line-height: 1.6; line-height: 1.6;
margin: 0; /* Odstranimo vse odmike, ker za poravnavo skrbi flexbox */ margin: 0;
} }
/* Link "Preberi več" je absolutno pozicioniran */ /* Link "Preberi več" je absolutno pozicioniran */
.blog-feature-card .blog-card-link { .blog-feature-card .blog-card-link {
/* Pozicioniranje */ /* Pozicioniranje */
position: absolute; position: absolute;
bottom: var(--spacing-l); /* Fiksni odmik od dna kartice */ bottom: var(--spacing-l);
left: 50%; left: 50%;
transform: translateX(-50%); /* Horizontalno centriranje */ transform: translateX(-50%);
/* Videz */ /* Videz */
color: var(--color-text); color: var(--color-text);
@ -100,4 +91,22 @@
/* Odstranimo podčrtovanje, ki ga je imel stari stil */ /* Odstranimo podčrtovanje, ki ga je imel stari stil */
.blog-feature-card .blog-card-link::after { .blog-feature-card .blog-card-link::after {
display: none; display: none;
}
/* --- Prilagoditve za tablice in večje zaslone --- */
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
align-items: stretch;
}
.blog-feature-card {
min-height: 480px; /* Povečana višina za večje zaslone */
}
.blog-feature-card .blog-card-title {
font-size: 1.25rem; /* Nekoliko večja pisava na večjih zaslonih */
}
} }