Prerelase changes 2.0

sass/global.scss

@@ -5,13 +5,23 @@
 }
 
 body {
-  font-family: 'coolvetica', sans-serif;
+  font-family: 'Kanit', sans-serif;
   font-weight: 500;
   font-style: normal;
   color: var(--clr-Murrey);
   background-color: var(--clr-Lavender);
 }
 
-main {
+footer {
-  margin: 0 var(--container-size);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin: .5rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 300;
+  a, p {
+    color: var(--clr-Murrey);
+  }
 }

sass/header.scss

@@ -1,62 +1,38 @@
 nav {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--clr-Melon);
+  padding: 1rem var(--container-size);
+  font-family: 'coolvetica';
+
+  .nav-right, .nav-left {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
-    background-color: var(--clr-Melon);
+    gap: 2rem;
-    padding: 1rem var(--container-size);
+  }
 
-    .nav-right, .nav-left {
+  .nav-right > a {
-        display: flex;
+    display: flex;
-        align-items: center;
+  }
-        gap: 2rem;
-    }
 
-    .nav-right > a {
+  .nav-btn {
-        display: flex;
+    display: none;
-    }
+  }
 
-    .nav-btn {
+  a {
-        display: none;
+    text-decoration: none;
-    }
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-size: normal;
+    color: var(--clr-Murrey);
+  }
 
-    a {
+  img {
-        text-decoration: none;
+    height: 2rem;
-        font-size: 1.5rem;
+  }
-        font-weight: 700;
-        font-size: normal;
-        color: var(--clr-Murrey);
-    }
 
-    img {
+  .nav-left img {
-        height: 2rem;
+    height: 4rem;
-    }
+  }
-
-    .nav-left img {
-        height: 4rem;
-    }
 }
 
-@media only screen and (max-width: 768px) {
-    nav {
-        flex-wrap: wrap;
-    }
-    .nav-right {
-        display: none !important;
-    }
-    .mobile-visible {
-        display: flex !important;
-        flex-direction: column;
-        justify-content: center;
-        width: 100%;
-        margin-top: 2rem;
-    }
-
-    .nav-btn {
-        display: flex !important;
-        align-items: center;
-
-        img {
-            height: 3rem;
-            cursor: pointer;
-        }
-    }
-}

sass/main.scss

@@ -3,17 +3,12 @@ main {
   gap: 2rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  margin-left: 20vw;
+  padding: 0 var(--container-size);
-  margin-right: 20vw;
 
-  .news-wrapper {
+  .aside-wrapper {
-    max-width: 80vw;
+      min-width: 20vw;
   }
 
-.aside-wrapper {
-    min-width: 20vw;
-
-  }
   aside{
     display: flex;
     flex-direction: column;
@@ -29,6 +24,7 @@ main {
       width: 100%;
       margin-bottom: 2rem;
     }
+
     a.vstupenky {
       width: 80%;
       background-color: var(--clr-Melon);
@@ -42,8 +38,16 @@ main {
       border-radius: 15px;
       border-style: solid;
       border-width: 3px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .vstupenky:hover span{
+      transform: translateX(0.5rem);
+    }
+    .vstupenky span {
+      transition: 300ms ease;
     }
-
     .infotable {
       display: flex;
       flex-direction: column;
@@ -54,7 +58,7 @@ main {
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 4rem;
+      gap: 2rem;
       color: var(--clr-Murrey);
       text-align: left;
 
@@ -62,6 +66,7 @@ main {
         h3 {
           font-weight: 900;
         }
+
         p {
           font-weight: 500;
         }
@@ -77,81 +82,5 @@ main {
       text-align: right;
     }
   }
-
-  footer {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    margin: .5rem;
-    font-size: 1rem;
-    font-weight: 300;
-    a, p {
-      color: var(--clr-Murrey);
-    }
-  }
 }
 
-@media only screen and (max-width: 500px) {
-  #vstupenky-wrapper {
-  }
-  .vstupenky {
-    font-size: 1.5rem !important;
-  }
-
-}
- /* Extra small devices (phones, 600px and down) */
-@media only screen and (max-width: 600px) {
- 
-}
-
-/* Small devices (portrait tablets and large phones, 600px and up) */
-@media only screen and (min-width: 600px) and (max-width: 768px) {
-
-}
-
-
-/* Medium devices (landscape tablets, 768px and up) */
-@media only screen and (min-width: 768px) and (max-width: 992px) {
-}
-
-/* Large devices (laptops/desktops, 992px and up) */
-@media only screen and (max-width: 992px) {
-  main {
-      flex-direction: column;
-      align-items: center;
-      margin-left: 2vw !important;
-      margin-right: 2vw !important;
-    }
-    .aside-wrapper {
-      order: -1;
-    }
-  .info-wrapper {
-    gap: 1rem !important;
-  }
-}
-
-/* Extra large devices (large laptops and desktops, 1200px and up) */
-@media only screen and (max-width: 1500px) {
-  main {
-    margin-left: 10vw;
-    margin-right: 10vw;
-  }
-  .aside-wrapper {
-    min-width: 40vw !important;
-  }
-  .news-wrapper {
-    max-width: 70vw !important;
-  }
-
-}
-
-@media only screen and (min-width: 1500px) and (max-width: 2000px) {
-  main {
-    margin-left: 15vw;
-    margin-right: 15vw;
-  }
-  .aside-wrapper {
-    min-width: 35vw !important;
-  }
-}

sass/responsivity.scss

@@ -0,0 +1,122 @@
+@media only screen and (min-width: 0px) and (max-width: 954px) {
+  nav {
+    flex-wrap: wrap;
+    position: absolute;
+    top: 0;
+    width: 100vw;
+  }
+  .nav-right {
+    display: none !important;
+  }
+  .mobile-visible {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    gap: 0rem !important;
+  }
+  .mobile-visible > *:first-child{
+    border-top: 1px solid var(--clr-Murrey);
+
+  }
+  .mobile-visible > * {
+    display: grid;
+    place-content: center;
+    width: 100%;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--clr-Murrey);
+  }
+
+  .nav-btn {
+    display: flex !important;
+    align-items: center;
+
+    img {
+      height: 3rem;
+      cursor: pointer;
+    }
+  }
+
+  .vstupenky {
+    font-size: 1.5rem !important;
+    width: 70vw !important;
+  }
+  main {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 8rem !important;
+  }
+  main aside .info-wrapper img {
+    width: 50px;
+  }
+  .aside-wrapper {
+    order: -1;
+  }
+  .info-wrapper {
+    gap: 1rem !important;
+  }
+
+  footer:not(.footer-mobile) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 955px) and (max-width: 1090px) {
+.vstupenky {
+    font-size: 1.5rem !important;
+  }
+  main {
+      flex-direction: column;
+      align-items: center;
+  }
+  .aside-wrapper {
+    order: -1;
+  }
+  .info-wrapper {
+    gap: 1rem !important;
+  }
+  :root {
+    --container-size: 20vw;
+  }
+  footer:not(.footer-mobile) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 1091px) and (max-width: 1499px) {
+  :root {
+    --container-size: 10vw;
+  }
+  .aside-wrapper {
+    min-width: 40vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1500px) and (max-width: 1999px) {
+  :root {
+    --container-size: 15vw;
+  }
+  .aside-wrapper {
+    min-width: 35vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+
+@media only screen and (min-width: 2000px) {
+  :root {
+    --container-size: 25vw;
+  }
+  .aside-wrapper {
+    min-width: 25vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+

sass/vars.scss

@@ -7,7 +7,7 @@
     --clr-Blush: #cf6379;
     --clr-Melon: #ffadad;
     --clr-cards: #e4e3ff;
-    --container-size: 10vw;
+    --container-size: 5vw;
 }
 
 

static/svg/menu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#792a4c" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

templates/base.html

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="/header.css">
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/news.css">
+  <link rel="stylesheet" href="/responsivity.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;800&amp;display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.typekit.net/yqq2dbq.css">
 </head>
 
@@ -20,11 +24,11 @@
     <div class="nav-btn">
       <img src="/svg/menu.svg" alt="menu icon">
     </div>
-    <div class="nav-right mobile-visible">
+    <div class="nav-right NOmobile-visible">
       <a href="https://www.facebook.com/events/823114292589147/?active_tab=discussion" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></a>
       <a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></a>
       <a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></a>
-      <a href="/galerie">galerie</a>
+      <!--<a href="/galerie">galerie</a>-->
     </div>
   </nav>
 
@@ -32,9 +36,14 @@
     {% block main %} {% endblock main %}
   </main>
 
+  <footer class="footer-mobile">
+    <p>Nadační fond maléDivy • <a href="https://www.kulturaturnov.cz" target="_blank">Kulturní centrum Turnov</a> • <a href="https://www.facebook.com/bigbandturnov" target="_blank">Big Band ZUŠ Turnov</a></p>
+    <p>&copy; <a href="https://fofrweb.com/" target="_blank">Fofrweb</a> + PKM</p>
+  </footer>
+
   <script>
     const navBtn = document.querySelector(".nav-btn img")
-    let navVisible = false
+    let navVisible = true
     navBtn.addEventListener("click", () => {
       if(navVisible) {
         document.querySelector(".nav-right").classList.add("mobile-visible")
@@ -44,19 +53,6 @@
 
       navVisible = !navVisible
     })
-
-    window.addEventListener("resize", () => {
-      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-      console.log(width)
-
-      if(width <= "992") {
-        document.querySelector("main").appendChild(document.querySelector("footer"))
-      } else {
-        document.querySelector("aside".appendChild(document.querySelector("footer")))
-      }
-    })
-    
-
   </script>
 </body>
 

templates/index.html

@@ -6,7 +6,7 @@
 <section class="aside-wrapper">
   <aside>
     <section id="vstupenky-wrapper">
-      <a href="#" class="vstupenky">VSTUPENKY &gt;&gt;</a>
+      <a href="#" class="vstupenky">VSTUPENKY<span>&nbsp;&gt;&gt;</span></a>
     </section>
 
     <section class="infotable">
@@ -24,8 +24,7 @@
         <div class="text">
           <h3>Kvalitní muzika</h3>
           <p>
-      “Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám <b>BigBand ZUŠ
+            “Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám <b>BigBand ZUŠ Turnov</b>, kterej do toho umí hrábnout.
-        Turnov</b>, kterej do toho umí hrábnout.
           </p>
         </div>
       </div>
@@ -50,9 +49,9 @@
       <div class="info-wrapper">
         <img src="/svg/dancing.svg" alt="ikonka" />
         <div class="text">
-          <h3>Beer pong</h3>
+          <h3>Unikátní program</h3>
           <p>
-            Zahraj si o super ceny v týhle obdobě americkýho fenoménu.
+            V tomhle se musí najít úplně každej. Brikulí jsme si pro Tebe s kámošema připravili tolik, že by to měl i tvůj matikář problém spočítat.
           </p>
         </div>
       </div>