103 lines
3.8 KiB
CSS
103 lines
3.8 KiB
CSS
/* /assets/css/pages/_blog.css */
|
|
|
|
/* --- Spremenljivke za pastelne barve kartic na blog strani --- */
|
|
:root {
|
|
--blog-card-bg-1: #eaf0f4; /* Svetlo modra */
|
|
--blog-card-border-1: #6A8DAA;
|
|
|
|
--blog-card-bg-2: #f8eaf0; /* Svetlo roza/vijolična */
|
|
--blog-card-border-2: #B46A8E;
|
|
|
|
--blog-card-bg-3: #eaf3f1; /* Svetlo zelena */
|
|
--blog-card-border-3: #5E8B7E;
|
|
|
|
--blog-card-bg-4: #f9f5ea; /* Svetlo bež/rumena */
|
|
--blog-card-border-4: #C2A370;
|
|
}
|
|
|
|
/* --- Prilagoditev mreže za blog stran --- */
|
|
@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 {
|
|
/* Osnovna struktura in pozicioniranje */
|
|
position: relative; /* Nujno za absolutno pozicioniranje gumba */
|
|
display: flex;
|
|
align-items: center; /* Vertikalno centrira vsebinski blok (besedilo) */
|
|
text-align: center;
|
|
min-height: 480px; /* Povečana višina za daljše besedilo */
|
|
|
|
/* Povečan notranji odmik, posebej na dnu, da se besedilo ne prekriva z gumbom */
|
|
padding: var(--spacing-l) 1.5rem 6rem 1.5rem;
|
|
|
|
border-radius: 10px;
|
|
|
|
/* Videz */
|
|
color: var(--color-text);
|
|
box-shadow: var(--shadow-light);
|
|
border-top: 5px solid;
|
|
|
|
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.blog-feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
/* Specifične barve ozadja in zgornjega roba za vsako kartico */
|
|
.blog-feature-card.card-color-1 { background-color: var(--blog-card-bg-1); border-color: var(--blog-card-border-1); }
|
|
.blog-feature-card.card-color-2 { background-color: var(--blog-card-bg-2); border-color: var(--blog-card-border-2); }
|
|
.blog-feature-card.card-color-3 { background-color: var(--blog-card-bg-3); border-color: var(--blog-card-border-3); }
|
|
.blog-feature-card.card-color-4 { background-color: var(--blog-card-bg-4); border-color: var(--blog-card-border-4); }
|
|
|
|
/* Ovojni link znotraj kartice - sedaj samo za besedilo */
|
|
.blog-feature-card .card-link-wrapper {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Naslov znotraj kartice, ki deluje kot glavni tekstovni blok */
|
|
.blog-feature-card .blog-card-title {
|
|
color: var(--color-text);
|
|
font-family: var(--font-heading);
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
margin: 0; /* Odstranimo vse odmike, ker za poravnavo skrbi flexbox */
|
|
}
|
|
|
|
/* Link "Preberi več" je absolutno pozicioniran */
|
|
.blog-feature-card .blog-card-link {
|
|
/* Pozicioniranje */
|
|
position: absolute;
|
|
bottom: var(--spacing-l); /* Fiksni odmik od dna kartice */
|
|
left: 50%;
|
|
transform: translateX(-50%); /* Horizontalno centriranje */
|
|
|
|
/* Videz */
|
|
color: var(--color-text);
|
|
font-weight: 600;
|
|
padding: var(--spacing-s) var(--spacing-l);
|
|
border: 2px solid var(--color-text);
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
/* Hover efekt, ki se ujema z barvo zgornjega roba kartice */
|
|
.blog-feature-card.card-color-1 .blog-card-link:hover { background-color: var(--blog-card-border-1); color: var(--color-white); border-color: var(--blog-card-border-1); }
|
|
.blog-feature-card.card-color-2 .blog-card-link:hover { background-color: var(--blog-card-border-2); color: var(--color-white); border-color: var(--blog-card-border-2); }
|
|
.blog-feature-card.card-color-3 .blog-card-link:hover { background-color: var(--blog-card-border-3); color: var(--color-white); border-color: var(--blog-card-border-3); }
|
|
.blog-feature-card.card-color-4 .blog-card-link:hover { background-color: var(--blog-card-border-4); color: var(--color-white); border-color: var(--blog-card-border-4); }
|
|
|
|
/* Odstranimo podčrtovanje, ki ga je imel stari stil */
|
|
.blog-feature-card .blog-card-link::after {
|
|
display: none;
|
|
} |