blog v kartice

assets/css/main.css

@@ -23,4 +23,5 @@
 @import url('pages/_article.css');
 @import url('pages/_storitve.css');
 @import url('pages/_homepage.css');
+@import url('pages/_blog.css');
 @import url('pages/_cenik.css'); /* SPREMEMBA: Uvoz nove datoteke za cenik */

assets/css/pages/_blog.css

@@ -0,0 +1,103 @@
+/* /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;
+}