Reserve slider layout space to eliminate CLS

assets/css/style-home.css

@@ -44,12 +44,14 @@ body {
     color: var(--color-text);
     background-color: var(--color-background);
     line-height: 1.7;
+    font-size-adjust: 0.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 /* Ta blok je bil odstranjen, ker je preprečeval drsenje.
    Nova, boljša logika je v datoteki pages/_homepage.css */
+
 /* SOURCE: assets/css/base/_typography.css */
 /* /assets/css/base/_typography.css */
 
@@ -59,6 +61,7 @@ h1, h2, h3 {
     line-height: 1.2;
     margin-bottom: var(--spacing-m);
     color: var(--color-primary-accent); /* SPREMEMBA: Vsi naslovi so sedaj v primarni barvi */
+    font-size-adjust: 0.45;
 }
 
 p {
@@ -80,6 +83,7 @@ a:hover {
     color: var(--color-primary-accent);
     text-transform: uppercase;
 }
+
 /* SOURCE: assets/css/layout/_structure.css */
 /* /assets/css/layout/_structure.css */
 
@@ -276,72 +280,6 @@ a:hover {
         align-self: start; /* Zagotovi pravilno poravnavo znotraj grid celice */
     }
 }
-/* SOURCE: assets/css/layout/_grids.css */
-/* /assets/css/layout/_grids.css */
-
-.about-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-l);
-    align-items: flex-start;
-}
-
-.image-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-l);
-    margin-bottom: var(--spacing-xl);
-}
-
-.services-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-l);
-}
-
-.blog-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-l);
-}
-
-.contact-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-xl);
-}
-
-
-/* --- MEDIA QUERIES --- */
-
-@media (max-width: 768px) {
-    .image-grid, .services-grid, .blog-grid, .contact-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (min-width: 768px) {
-    /* Stili za večje tablice */
-    .image-grid { grid-template-columns: 1fr 1fr; }
-    .services-grid { grid-template-columns: repeat(2, 1fr); }
-    .blog-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (min-width: 992px) {
-    /* Stili za namizje */
-    .about-grid {
-        grid-template-columns: 1fr 2fr;
-        gap: var(--spacing-xl);
-    }
-    .services-grid, .blog-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: var(--spacing-xl);
-    }
-    .contact-grid {
-        grid-template-columns: 1fr 1fr;
-        align-items: flex-start;
-    }
-}
 /* SOURCE: assets/css/components/_header.css */
 /* /assets/css/components/_header.css */
 

index.html

@@ -22,9 +22,12 @@
       margin: 2rem auto;
       background: #ffffff;
       padding: 2rem;
+      min-height: 630px;
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
     }
     .slide { display: none; }
     .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; }
@@ -36,11 +39,13 @@
       display: flex;
       align-items: center;
       gap: 4rem;
+      width: 100%;
     }
-    .slide-image { flex: 1 1 50%; }
+    .slide-image { flex: 1 1 50%; aspect-ratio: 1 / 1; display: flex; }
     .slide-image img {
       width: 100%;
-      height: auto;
+      height: 100%;
+      object-fit: cover;
       display: block;
       border-radius: 0.5rem;
     }
@@ -74,11 +79,12 @@
         gap: 1.5rem;
       }
       .slide-portrait {
-        float: none;
+      float: none;
-        margin: 0 auto 2rem auto;
+      margin: 0 auto 2rem auto;
-        width: 200px;
+      width: 200px;
-        height: 200px;
+      height: 200px;
-      }
+    }
+    .slide-content { gap: 2rem; }
     }
   </style>
 <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>