fix: mobile CSS and other mistakes

fix: use proper html tag
fix: theme switcher
2023-08-05 15:19:00 +02:00 · 2023-08-05 15:11:04 +02:00 · 2023-08-05 15:00:50 +02:00 · 2023-08-05 15:00:47 +02:00 · 2023-08-05 15:00:16 +02:00
10 changed files with 71 additions and 86 deletions
--- a/index.html
+++ b/index.html
@@ -15,12 +15,10 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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.
@@ -40,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>
@@ -62,7 +60,6 @@
            alt="SourceCode"></a>
        <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
      </span>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/account.html
+++ b/pages/account.html
@@ -14,12 +14,10 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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>
@@ -29,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>
@@ -49,7 +47,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -14,15 +14,13 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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>
@@ -42,7 +40,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -14,12 +14,10 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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>
@@ -27,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>
@@ -47,7 +45,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/events.html
+++ b/pages/events.html
@@ -14,13 +14,11 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <button id="theme-switcher"></button>
+    <a class="account" href="/pages/account.html">Nalog</a>
  </header>
-  <div id="main">
-    <h1>Dogadjaji</h1>
+  <main>
+    <h1>Događaji</h1>
    <!-- dogadjaji start -->
    <table>
      <tr>
@@ -70,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>
@@ -90,7 +88,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/projects.html
+++ b/pages/projects.html
@@ -14,15 +14,13 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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>
@@ -42,7 +40,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/services.html
+++ b/pages/services.html
@@ -14,12 +14,10 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <button id="theme-switcher"></button>
+    <a class="account" href="/pages/account.html">Nalog</a>
  </header>
-  <div id="main">
+  <main>
    <h1>Servisi</h1>
    <table>
      <tr>
@@ -27,41 +25,40 @@
        <th>Opis</th>
      </tr>
      <tr>
-        <td><a href="">Email</a></td>
-        <td>Email nalog koji mozes koristiti putem na bilo kom
-          email
-          klijentu generalne namene, na primer <a href="https://www.thunderbird.net/">Thunderbird-u</a>. Bolji od
-          Gmail-a. </td>
+        <td><a href="/account.html">Email</a></td>
+        <td>Email nalog koji možeš koristiti sa bilo kojim email
+          klijentom generalne namene (na primer <a href="https://www.thunderbird.net/">Thunderbird-u</a>).</td>
      </tr>
      <tr>
        <td><a href="https://forum.dmz.rs/">Forum</a></td>
-        <td>Forum na kojem obicno organizujemo nase <a href="/pages/events.html">dogadjaje</a>. Bolji od Reddit-a.
+        <td>Forum na kom obično organizujemo naše <a href="/pages/events.html">događaje</a>.
        </td>
      </tr>
      <tr>
        <td>Chat</td>
-        <td>Odrzavamo svoj XMPP server, na kojem mozes napraviti nalog ili ako vec imas nalog mozes nas naci u grupi <a
-            href="decentrala@conference.dmz.rs">decentrala@conference.dmz.rs</a> . Bolji od WhatsApp-a.</td>
+        <td>Održavamo sopstveni XMPP server, na kojem možeš napraviti nalog.
+          Ako već poseduješ nalog možeš nas naći u grupi <a href="decentrala@conference.dmz.rs">decentrala@conference.dmz.rs</a>.
+        </td>
      </tr>
      <tr>
        <td><a href="https://gitea.dmz.rs/">Git</a></td>
-        <td><a href="https://gitea.io/en-us/">Gitea</a> instanca na kojoj drzimo kod kao i ostale resurse za nase <a
-            href="/pages/projects.html">projekte</a>,
-          <a href="/pages/events.html">dogadjaje</a>, kao i neke nase random projekte kao i projekte nasih
-          prijatelja.
-          Ovo moze bit dom tvog sledeceg projekta. Bolji od Github-a.
+        <td><a href="https://gitea.io/en-us/">Gitea</a> instanca na kojoj držimo kod kao i ostale resurse za naše
+          <a href="/pages/projects.html">projekte</a>, <a href="/pages/events.html">dogadjaje</a>, kao i projekte naših prijatelja.
+          Ovo može biti dom tvog sledećeg projekta. Bolji od Github-a.
        </td>
      </tr>
      <tr>
        <td><a href="https://wiki.dmz.rs/">Wiki</a></td>
-        <td><a href="https://js.wiki/">Wiki.js</a> instanca koju koristimo da dokumentujemo nase <a
-            href="/pages/projects.html">projekte</a> kao i
-          ostale <a href="/pages/events.html">dogadjaje</a>. </td>
+        <td><a href="https://js.wiki/">Wiki.js</a> instanca koju koristimo da dokumentujemo naše
+            <a href="/pages/projects.html">projekte</a> kao i
+            ostale <a href="/pages/events.html">događaje</a>.
+        </td>
      </tr>
      <tr>
        <td><a href="https://search.dmz.rs/">Search</a></td>
-        <td><a href="https://github.com/hnhx/librex/">LibreX</a> instanca koju koristimo da pretrazujemo Internet. Bolji od Google-a.
-          </td>
+        <td><a href="https://github.com/hnhx/librex/">LibreX</a> instanca koju koristimo za pretraživanje Interneta.
+            Bolji od Google-a.
+        </td>
      </tr>
      <tr>
        <td><a href="https://pastebin.dmz.rs/">Pastebin</a></td>
@@ -70,15 +67,16 @@
      </tr>
      <tr>
        <td><a href="ssh://soft.dmz.rs:2222/">Soft Serve</a></td>
-        <td><a href="https://github.com/charmbracelet/soft-serve">Soft Serve</a> instanca koju koristimo kao zamenu za Gitea koja radi potpuno iz terminala
+        <td><a href="https://github.com/charmbracelet/soft-serve">Soft Serve</a> instanca koju koristimo kao zamenu za Gitea servis.
+          Soft Serve radi potpuno iz terminala
          </td>
      </tr>
    </table>
-    <p>Ovo su neki od servisa koje trenutno odrzavamo na nasim serverima. Da bi koristio ove servise, <em>mozes</em> se
-      registrujes za svaki servis posebno, ali mozes i da da napravis <a href="/pages/account.html">nalog</a> na nasem
-      serveru i koristis sve servis sa istim nalogom.</p>
+    <p>Ovo su neki od servisa koje trenutno održavamo na našim serverima. Da bi koristio ove servise, <em>možes</em> se
+      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>
@@ -98,7 +96,6 @@
      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/pages/webring.html
+++ b/pages/webring.html
@@ -14,16 +14,14 @@
 <body>
  <header>
    <a id="logo" href="/index.html">Decentrala</a>
-    <span>
-      <button id="theme-switcher"></button>
-      <a class="account" href="/pages/account.html">Nalog</a>
-    </span>
+    <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>
@@ -43,7 +41,6 @@
      <a href="https://gitea.dmz.rs/eline/decentrala-website-static-new"><img src="/img/git-light.svg"
          alt="SourceCode"></a>
      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-      <span>Decentrala &copy; 2023</span>
    </span>
  </footer>
 </body>
--- a/scripts/main.js
+++ b/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");

--- a/styles/style.css
+++ b/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 {
-  grid-area: "main";
-  padding: 3rem 3rem 3rem 3rem;
+main {
+  grid-area: main;
+  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;
+  }
 }
Author	SHA1	Message	Date
Nikola Ubavic	31feb6aa18	fix: mobile CSS and other mistakes	2023-08-05 15:19:00 +02:00
Nikola Ubavic	54d643844a	fix: use proper html tag	2023-08-05 15:11:04 +02:00
Hugo	cdf3849322	fix: theme switcher	2023-08-05 15:00:50 +02:00
Hugo	fa65e7c508	Remove copyright	2023-08-05 15:00:47 +02:00
Hugo	fde9f2341c	fix: wording	2023-08-05 15:00:16 +02:00