pomanjsani gumb 2 da preprecim overlap v mobile do 600px

index.html

@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -20,6 +21,9 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
+        <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
+            <i class="fa-solid fa-bars"></i>
+        </a>
     </nav>
 </header>
     <main class="home_page">

jedilnik.html

@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -20,6 +21,9 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a href="o_nas.html">	<i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
+        <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
+            <i class="fa-solid fa-bars"></i>
+        </a>
     </nav>
 </header>
 <main class="jedilnik_page">
@@ -29,6 +33,7 @@
     </section>
     <section class="jedilnik_kategorija">
         <h2>Predjedi</h2>
+        <div class="tabela_scroll">
         <table>
             <caption>Predjedi</caption>
             <thead>
@@ -90,9 +95,11 @@
                 </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Glavne jedi</h2>
+    <div class="tabela_scroll">
         <table>
             <caption>Glavne jedi</caption>
             <thead>
@@ -160,10 +167,12 @@
             </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Priloge</h2>
     <p><b>Prilagodi si svoj krožnik! </b>Prilogo ob glavni jedi lahko zamenjate brez doplačila. Za dodatne priloge pa veljajo cene po ceniku.</p>
+    <div class="tabela_scroll">
         <table>
             <caption>Priloge</caption>
             <thead>
@@ -201,9 +210,11 @@
             </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Sladice</h2>
+    <div class="tabela_scroll">
         <table>
             <caption>Sladice</caption>
             <thead>
@@ -265,6 +276,7 @@
             </tr>
             </tbody>
         </table>
+        </div>
         </section>
         <br><br>
     </main>

o_nas.html

@@ -11,7 +11,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -21,6 +22,9 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a class="active" href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
+        <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
+            <i class="fa-solid fa-bars"></i>
+        </a>
     </nav>
 </header>
     <main class="o_nas_page">

recepti.html

@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -20,6 +21,9 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a href="o_nas.html">	<i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
+        <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
+            <i class="fa-solid fa-bars"></i>
+        </a>
     </nav>
 </header>
 <main class="recepti_page">

rezervacija.html

@@ -2,6 +2,7 @@
 <html lang="sl">
 <head>
     <link rel="stylesheet" href="stylesheet.css">
+    <script src="java_script.js"></script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rezervacija | Za prste obliznit</title>
@@ -10,7 +11,8 @@
     <header class="site_header">
         <nav class="nav_bar">
             <a class="logo" href="index.html">
-                <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+                <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+                <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
                 <span>Za prste obliznit</span>
             </a>
             <ul class="main_menu">
@@ -20,6 +22,9 @@
                 <li><a class="active" href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
                 <li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
             </ul>
+            <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
+                <i class="fa-solid fa-bars"></i>
+            </a>
         </nav>
     </header>
     <main class="rezervacija_page">

stylesheet.css

@@ -123,6 +123,11 @@ footer .fa-solid  {
     padding: 0.5rem 1rem;
 }
 
+.hamburger_meni {
+    display: none;
+    text-decoration: none;
+}
+
 .logo {
     display: flex;
     align-items: center;
@@ -135,6 +140,10 @@ footer .fa-solid  {
     text-decoration: none;
 }
 
+.logo_dark {
+    display: none !important;
+}
+
 .logo br {
     display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */
 }
@@ -368,61 +377,14 @@ footer p {
     font-weight: 700;
 }
 
-/* prilagotitev telefonom */
 
-@media (max-width: 1000px) {
-    .nav_bar {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .main_menu {
-        justify-content: center;
-    }
-
-    .home_page .jedi_grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .home_page .hero h1 {
-        font-size: 2.6rem;
-    }
-}
-
-@media (max-width: 600px) {
-    .main_menu {
-        gap: 0.15rem;
-    }
-
-    .main_menu a {
-        padding: 0.45rem;
-        font-size: 0.8rem;
-    }
-
-    .home_page .jedi_grid {
-        grid-template-columns: 1fr; /*da bojo v bistvu vsak v svoji vrst */
-    }
-
-    .home_page .hero {
-        min-height: 60vh;
-        padding: 2rem 1rem;
-    }
-
-    .home_page .hero h1 {
-        font-size: 2.2rem;
-    }
-
-    h2 {
-        font-size: 1.7rem;
-    }
-}
 
 /*jedilnik*/
 .jedilnik_page {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
-    padding: 3rem, 1.5rem, 5rem;
+    padding: 3rem 1.5rem 5rem;
 }
 
 /*uvod */
@@ -454,6 +416,27 @@ footer p {
     box-shadow: var(--barva-senca);
 }
 
+/* Preprečimo, da bi vsebina raztegnila stran */
+.jedilnik_page,
+.jedilnik_kategorija {
+    min-width: 0;
+    max-width: 100%;
+}
+
+/* Samo ta element omogoča vodoravno drsenje */
+.tabela_scroll {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+}
+
+/* Tabela je lahko širša od svojega vsebnika */
+.jedilnik_page .tabela_scroll table {
+    width: 100%;
+    min-width: 550px;
+}
+
 
 .jedilnik_page caption {
     display: none;
@@ -666,6 +649,7 @@ footer p {
     height: 2rem;
     padding:0.5rem;
     font-family: "Montserrat", sans-serif;
+    border: 0.1rem solid var(--barva-besedilo);
 }
 
 .field_rezervacija textarea {
@@ -688,6 +672,8 @@ footer p {
     display: flex ;
     flex-direction: row;
     justify-content: space-between;
+    flex-wrap: wrap; /*da se ne raztezajo izven polja */
+    gap: 1rem;
 }
 
 .opcije_radio,
@@ -729,7 +715,7 @@ footer p {
     font-family: "Montserrat", sans-serif;
     font-weight: 700;
     text-decoration: none;
-
+    border: none;
 
     transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
 }
@@ -763,8 +749,7 @@ footer p {
 }
 
 .nasa_zgodba_grid img {
-    position: center;
-    padding:0,5rem;
+    padding:0.5rem;
     border-radius: var(--zaobljenost);
 }
 
@@ -797,3 +782,177 @@ footer p {
     background-color: var(--barva-dodatna3);
     font-weight: 700;
 }
+
+/* tablica 600px do 1000px */
+@media (min-width: 600px) and (max-width: 1000px) {
+    /* Navigacija ostane vidna in se po potrebi prelomi. */
+    .nav_bar { 
+        flex-wrap: wrap;
+        justify-content: center; 
+        }
+
+    .main_menu {
+        display: flex; 
+        flex-wrap: wrap; 
+        justify-content: center;
+    }
+    .hamburger_meni { 
+        display: none; 
+    }
+    .home_page .jedi_grid { 
+        grid-template-columns: repeat(2, minmax(0, 1fr)); /*jedi samo v 2 stolpcih */
+    }
+    .home_page .hero h1 {
+         font-size: 2.6rem; 
+        }
+    .seznam_receptov { 
+        flex-wrap: wrap; 
+        gap: 1rem; padding: 0; 
+    }
+}
+
+/* telefon do 600px */
+@media (max-width: 599px) {
+
+    main { 
+        padding: 1.5rem 1rem 3rem; 
+    }
+    h1 { 
+        font-size: 2rem; 
+    }
+    h2 {
+         font-size: 1.7rem; 
+        }
+
+    /* Logo in hamburger sta v prvi vrstici navigacija je pa pod njima */
+    .nav_bar { 
+        flex-wrap: wrap; 
+        gap: 0.5rem; 
+    }
+    .logo { 
+        min-width: 0; 
+        font-size: 1rem; 
+    }
+    .logo img {
+         width: 3.5rem; 
+        }
+    .hamburger_meni {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: auto;
+        padding: 0.6rem;
+        border: 0;
+        border-radius: 0.4rem;
+        background-color: var(--barva-poudarek);
+        color: var(--barva-besedilo-na-temnem);
+        cursor: pointer;
+    }
+    .hamburger_meni .fa-solid { 
+        color: inherit; 
+        padding: 0; 
+    }
+    /* JavaScript bo ob kliku dodal ali odstranil razred odprt. */
+    .main_menu {
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+        gap: 0.25rem;
+    }
+    .main_menu.odprt { 
+        display: flex; 
+    }
+    .main_menu li, 
+    .main_menu a { 
+        width: 100%; 
+    }
+
+    /* Jpriljubljene jedi kartice ena pod drugo. */
+    .home_page .jedi_grid { 
+        grid-template-columns: 1fr; 
+    }
+    .home_page .hero { 
+        min-height: 60vh; padding: 2rem 1rem; 
+    }
+    .home_page .hero h1 {
+         font-size: 2.2rem; 
+        }
+
+    /* ena kolona, oznaka nad poljem za vnos */
+    .field_rezervacija { 
+        grid-template-columns: minmax(0, 1fr); 
+        padding: 1rem; 
+    }
+    .opcije { 
+        justify-content: flex-start; 
+    }
+    .opcije_radio, 
+    .opcije_checkbox, 
+    .pogoji_uporabe { 
+        gap: 0.5rem; 
+    }
+
+    /*gumbi za navigiranje pri receptih, da se ne overlappajo*/
+
+    .gumb_2 {
+            padding: 0.5rem 1.0rem;
+    }
+
+    /* Recept: slika, podatki/sestavine, nato priprava. */
+    .recepti_grid,
+    .nasa_zgodba_grid {
+         grid-template-columns: minmax(0, 1fr); 
+        }
+    .recepti_jedi { 
+        margin: 1rem 0; 
+        padding: 1rem; 
+    }
+    .recepti_slika { 
+        min-height: 0; 
+    }
+    .recepti_slika img {
+        height: auto; 
+        }
+    .seznam_receptov { 
+        flex-wrap: wrap; 
+        gap: 1rem; padding: 0; 
+    }
+}
+
+/* dark mode, samo spremenjene spremenljivke css */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --barva-ozadje: #211c18;
+        --barva-besedilo: #f4e9db;
+        --barva-poudarek: #514b36;
+        --barva-dodatna: #d6a56a;
+        --barva-dodatna2: #44372b;
+        --barva-dodatna3: #342c25;
+        --barva-kartice: #302821;
+        --barva-besedilo-na-temnem: #f4e9db;
+        --barva-hero-prekrivna: rgba(15, 12, 10, 0.72);
+        --barva-senca: rgba(0, 0, 0, 0.45);
+        --senca-kartice: 0 0.25rem 0.8rem var(--barva-senca);
+        --zaobljenost: 0.75rem;
+    }
+    /* Skrijemo logotip za svetlo ozadje */
+    .logo_light {
+        display: none !important;
+    }
+
+    /* Prikažemo logotip za temno ozadje */
+    .logo_dark {
+        display: block !important;
+    }
+}
+
+/* omejeno gibanje: ni smooth scrolla in drugih animaciji */
+@media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+        animation: none !important;
+        transition: none !important;
+    }
+    .home_page .jedi_card:hover { transform: none; }
+}