fix: mobile CSS and other mistakes

index.html

@@ -18,7 +18,7 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <h1>Dobrodošao!</h1>
     <p>
       Mi smo <em>Decentrala</em> - grupa entuzijasta okupljena oko ideja decentralizacije i slobodnog širenja znanja.
@@ -38,7 +38,7 @@
       Ako želiš prvo da vidiš kako to sve izgleda u realnosti, možeš doći na neki od naših <a href="/pages/events.html">događaja</a>, i tu nas upoznati!
     </p>
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/account.html

@@ -17,7 +17,7 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <p> Ako ste napravili nalog na dmz.rs mozete koristi nas xmpp i email server i ostale servise koji podrzavaju LDAP login. <p>
     <p> Za vise o XMPP pogledajte <a href="https://wiki.dmz.rs/en/tutorial/conversations">tutorial</a>. <p>
     <p> Za primer podesavanja na <a href="https://thunderbird.org">Thundebird</a> mail klijentu mozete pogledati <a href="/img/mailsettings.png">sliku</a>. <p>
@@ -27,7 +27,7 @@
     <p><a href="/account/changepassword/">Promeni lozinku</a><p>
 
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/blog.html

@@ -17,10 +17,10 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     Ova stranica je trenutno u izradi...
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/contact.html

@@ -17,7 +17,7 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <h1>Kontakt</h1>
     <p>Možeš nam poslati mail na <a href="mailto:dmz@dmz.rs">dmz@dmz.rs</a> ili se mozes pridružiti našem <a
         href="https://forum.dmz.rs">Forumu</a>.</p>
@@ -25,7 +25,7 @@
     <p style="position: relative; top: 5rem;">U slucaju da nadjete <em>bug</em> na sajtu, bili bismo jako zahvalni
       ako bi mogli da nam ga prijavite (npr. putem emaila).</p>
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/events.html

@@ -17,7 +17,7 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <h1>Događaji</h1>
     <!-- dogadjaji start -->
     <table>
@@ -68,7 +68,7 @@
     </table>
     <!-- dogadjaji end -->
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Dogadjaji</a>

pages/projects.html

@@ -17,10 +17,10 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     Ova stranica je trenutno u izradi...
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/services.html

@@ -17,7 +17,7 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <h1>Servisi</h1>
     <table>
       <tr>
@@ -76,7 +76,7 @@
       registovati na svaki servis posebno, a možeš i napraviti jedinstveni <a href="/pages/account.html">nalog</a> na nasem
       serveru i koristiti sve servise sa istim nalogom.</p>
     <img id="mesh" src="/img/mesh-light.svg">
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

pages/webring.html

@@ -17,11 +17,11 @@
     <button id="theme-switcher"></button>
     <a class="account" href="/pages/account.html">Nalog</a>
   </header>
-  <div id="main">
+  <main>
     <list>
     <li> <a href="https://tilde.zone/explore">Tilde Zone</a> </li>
     </list>
-  </div>
+  </main>
   <footer>
     <div id="sections-menu">
       <a href="/pages/events.html">Događaji</a>

scripts/main.js

@@ -2,7 +2,7 @@ const theme_switcher = document.getElementById("theme-switcher");
 const imgs = document.getElementsByTagName("img");
 const sections_button = document.getElementById("sections-button");
 const sections_menu = document.getElementById("sections-menu");
-const main = document.getElementById("main");
+const main = document.getElementsByTagName("main")[0];
 
 let theme = window.localStorage.getItem("theme");
 

styles/style.css

@@ -50,18 +50,18 @@ footer {
 }
 
 header {
-  grid-area: "header";
+  grid-area: header;
   border-bottom: 2px solid var(--border);
 }
 
 footer {
-  grid-area: "footer";
+  grid-area: footer;
   border-top: 2px solid var(--border);
 }
 
-#main {
+main {
-  grid-area: "main";
+  grid-area: main;
-  padding: 3rem 3rem 3rem 3rem;
+  padding: 3rem;
   font-size: 1.3rem;
   line-height: 2rem;
   max-width: 120ch;
@@ -74,7 +74,7 @@ a:visited {
   color: var(--text);
 }
 
-#main a {
+main a {
   position: relative;
   top: 0.2rem;
 }
@@ -104,6 +104,7 @@ a:focus {
   border-color: var(--hightlight);
   background: linear-gradient(90deg, var(--hightlight) 0%, var(--hightlight) 50%, var(--bg) 51%, var(--bg) 100%);
 }
+
 .account,
 .sections,
 #sections-menu {
@@ -189,6 +190,10 @@ screen and (max-width: 1500px) {
     font-size: 2.2rem;
   }
 
+  main {
+    padding: 1rem;
+  }
+
   .links {
     display: none;
   }
@@ -197,4 +202,8 @@ screen and (max-width: 1500px) {
   footer {
     padding: 0 1rem;
   }
+
+  #theme-switcher {
+    margin-right: 1rem;
+  }
 }