[Style] scroll fix

site/deconference.html

@@ -45,6 +45,7 @@
     <a class="lang" hreflang="en" href="/en/deconference">EN</a>
   </header>
   <main>
+    <div class="page-wrap">
     <div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1>
 
 <h2 id="program"><a href="#program">Program</a></h2>
@@ -81,6 +82,7 @@
 
 <p>Decentrala prihvata donacije isključivo od fizičkih lica.</p>
 
+    </div>
   </main>
   <footer>
     <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>

site/styles/style.css

@@ -13,7 +13,7 @@
 
 @font-face {
   font-family: "Iosevka";
-  src: url('/font/iosevka-regular.woff') format('woff');
+  src: url("/font/iosevka-regular.woff") format("woff");
 }
 
 * {
@@ -39,7 +39,7 @@ body {
     "footer" 4rem
     / 1fr;
   gap: 0;
-  font-family: 'Iosevka';
+  font-family: "Iosevka";
 }
 
 header,
@@ -65,32 +65,31 @@ main {
   padding: 3rem;
   font-size: 1.3rem;
   line-height: 2rem;
-  max-width: 120ch;
   overflow: auto;
-  margin: 0 auto;
-}
-
-main h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-  font-size: 1.5em;
-  font-variant-caps: small-caps;
+  .page-wrap {
+    margin: 0 auto;
+    max-width: 1152px;
+    h1 {
+      margin-bottom: 2rem;
+      font-weight: normal;
+      font-size: 1.5em;
+      font-variant-caps: small-caps;
+    }
+    a {
+      text-decoration: underline;
+    }
+  }
 }
 
 a,
 a:visited {
   text-decoration: none;
   color: var(--text);
-}
-
-main a {
-  text-decoration: underline;
-}
-
-a:hover,
-a:focus {
-  background-color: var(--hightlight);
-  text-decoration: line-through var(--text);
+  &:hover,
+  &:focus {
+    background-color: var(--hightlight);
+    text-decoration: line-through var(--text);
+  }
 }
 
 #logo {
@@ -100,10 +99,9 @@ a:focus {
   font-size: 2.5rem;
   font-weight: bold;
   font-variant: small-caps;
-}
-
-#logo img {
-  width: 3rem;
+  img {
+    width: 3rem;
+  }
 }
 
 #theme-switcher {
@@ -112,12 +110,24 @@ a:focus {
   height: 1.5rem;
   border-radius: 3rem;
   margin-left: auto;
-  background: linear-gradient(90deg, var(--border) 0%, var(--border) 50%, var(--bg) 51%, var(--bg) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--border) 0%,
+    var(--border) 50%,
+    var(--bg) 51%,
+    var(--bg) 100%
+  );
 }
 
 #theme-switcher:hover {
   border-color: var(--hightlight);
-  background: linear-gradient(90deg, var(--hightlight) 0%, var(--hightlight) 50%, var(--bg) 51%, var(--bg) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--hightlight) 0%,
+    var(--hightlight) 50%,
+    var(--bg) 51%,
+    var(--bg) 100%
+  );
 }
 
 .lang {
@@ -135,14 +145,12 @@ a:focus {
 .links {
   display: flex;
   gap: 2rem;
-}
-
-.links>a {
-  border-radius: 100%;
-}
-
-.links>a>img {
-  display: block;
+  & > a {
+    border-radius: 100%;
+    & > img {
+      display: block;
+    }
+  }
 }
 
 #sections-button {
@@ -171,8 +179,7 @@ button {
   margin-bottom: 3rem;
 }
 
-@media screen and (max-height: 860px),
-screen and (max-width: 1500px) {
+@media screen and (max-height: 860px), screen and (max-width: 1500px) {
   #mesh {
     display: none;
   }
@@ -209,10 +216,10 @@ screen and (max-width: 1500px) {
 
   .links {
     gap: 1.2rem;
-  }
 
-  .links a {
-    width: 1.5rem;
+    a {
+      width: 1.5rem;
+    }
   }
 
   header,