From c6574fb93dad33addb791ba577a950f2a757c645 Mon Sep 17 00:00:00 2001
From: eline <eline@ljudi.org>
Date: Sat, 6 May 2023 23:04:59 +0200
Subject: [PATCH] Added a menu for smaller screens (still not finished tho).
 Also, more fixes.

---
 README.md                     |  9 ++++--
 img/strelica-closed-dark.svg  | 43 +++++++++++++++++++++++++++++
 img/strelica-closed-light.svg | 21 ++++++++++++++
 img/strelica-opened-dark.svg  | 43 +++++++++++++++++++++++++++++
 img/strelica-opened-light.svg | 21 ++++++++++++++
 index.html                    | 10 ++++++-
 pages/account.html            | 10 ++++++-
 pages/blog.html               | 10 ++++++-
 pages/contact.html            | 12 +++++++-
 pages/events.html             | 10 ++++++-
 pages/projects.html           | 10 ++++++-
 pages/services.html           | 10 ++++++-
 scripts/main.js               | 44 ++++++++++++++++++++++++++++-
 styles/style.css              | 52 ++++++++++++++++++++++++++++++-----
 14 files changed, 287 insertions(+), 18 deletions(-)
 create mode 100644 img/strelica-closed-dark.svg
 create mode 100644 img/strelica-closed-light.svg
 create mode 100644 img/strelica-opened-dark.svg
 create mode 100644 img/strelica-opened-light.svg

diff --git a/README.md b/README.md
index 199c8483..1718614a 100644
--- a/README.md
+++ b/README.md
@@ -15,10 +15,13 @@ Redisign of dmz.rs .
 - update projects section
 - create blogging system
 - create xmpp bot that connects to events section.
-- make responsive
+- [ ] make responsive
   - create menus for smaller screens
-  - adjust the mesh depending on the screen size
-  - tweak other random issues with layout 
+    - [x] created one menu
+      - this might be enough
+  - [x] adjust the mesh depending on the screen size
+    - no mesh on small screens
+  - tweak other random issues with layout
 - make webring system
 - make english version (localisation)
 
diff --git a/img/strelica-closed-dark.svg b/img/strelica-closed-dark.svg
new file mode 100644
index 00000000..d21efcd3
--- /dev/null
+++ b/img/strelica-closed-dark.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10 10"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="strelica-closed-dark.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="20.975"
+     inkscape:cx="20"
+     inkscape:cy="20"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       id="rect288"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.33575"
+       d="M 6.6790613,2.3644017 5.5703043,2.9415772 4.4615473,3.5187527 4.988667,3.8545649 2.7938191,7.299786 3.8480584,7.9714105 6.0429063,4.5261894 l 0.5271196,0.3358123 0.054518,-1.2488 z" />
+  </g>
+</svg>
diff --git a/img/strelica-closed-light.svg b/img/strelica-closed-light.svg
new file mode 100644
index 00000000..3f3f5bc6
--- /dev/null
+++ b/img/strelica-closed-light.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10 10"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       id="rect288"
+       style="fill:#181715;fill-opacity:1;stroke-width:0.33575"
+       d="M 6.6790613,2.3644017 5.5703043,2.9415772 4.4615473,3.5187527 4.988667,3.8545649 2.7938191,7.299786 3.8480584,7.9714105 6.0429063,4.5261894 l 0.5271196,0.3358123 0.054518,-1.2488 z" />
+  </g>
+</svg>
diff --git a/img/strelica-opened-dark.svg b/img/strelica-opened-dark.svg
new file mode 100644
index 00000000..1c26c540
--- /dev/null
+++ b/img/strelica-opened-dark.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10 10"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="strelica-opened-dark.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="20.975"
+     inkscape:cx="20"
+     inkscape:cy="20"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       id="rect288"
+       style="fill:#ffffff;stroke-width:0.33575;fill-opacity:1"
+       d="M 5 1.875 L 4.375 2.9575195 L 3.75 4.0400391 L 4.375 4.0400391 L 4.375 8.125 L 5.625 8.125 L 5.625 4.0400391 L 6.25 4.0400391 L 5.625 2.9575195 L 5 1.875 z " />
+  </g>
+</svg>
diff --git a/img/strelica-opened-light.svg b/img/strelica-opened-light.svg
new file mode 100644
index 00000000..e12b4b31
--- /dev/null
+++ b/img/strelica-opened-light.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40"
+   height="40"
+   viewBox="0 0 10 10"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       id="rect288"
+       style="fill:#181715;stroke-width:0.33575;fill-opacity:1"
+       d="M 5 1.875 L 4.375 2.9575195 L 3.75 4.0400391 L 4.375 4.0400391 L 4.375 8.125 L 5.625 8.125 L 5.625 4.0400391 L 6.25 4.0400391 L 5.625 2.9575195 L 5 1.875 z " />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 290442f2..7dffe967 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     <h1>Dobrodosli!</h1>
     <p>
       Mi smo <em>Decentrala</em> - grupa entuzijasta okupljena oko ideja decentralizacije i slobodnog sirenja znanja.
@@ -48,6 +48,14 @@
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/account.html b/pages/account.html
index 9219a0de..e4bb85de 100644
--- a/pages/account.html
+++ b/pages/account.html
@@ -19,11 +19,19 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     Ova stranica je trenutno u izradi...
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/blog.html b/pages/blog.html
index abac5ece..9072c239 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -19,11 +19,19 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     Ova stranica je trenutno u izradi...
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/contact.html b/pages/contact.html
index cd86fdb5..ddf4317d 100644
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -19,14 +19,24 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     <h1>Kontakt</h1>
     <p>Mozes nam poslati mail na <a href="mailto:dmz@dmz.rs">dmz@dmz.rs</a> ili se mozes pridruziti nasem <a
         href="https://forum.dmz.rs">Forumu</a>.</p>
     <p>Takodje smo i na <a href="https://balkan.fedive.rs/@decentrala">Fediversu!</a></p>
+    <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>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/events.html b/pages/events.html
index cf1346a3..f60af1c2 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -19,7 +19,7 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     <h1>Dogadjaji</h1>
     <!-- dogadjaji start -->
     <table>
@@ -72,6 +72,14 @@
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/projects.html b/pages/projects.html
index 2dafe5fc..1fbf38f7 100644
--- a/pages/projects.html
+++ b/pages/projects.html
@@ -19,11 +19,19 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     Ova stranica je trenutno u izradi...
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/pages/services.html b/pages/services.html
index 5b099256..1065f6c3 100644
--- a/pages/services.html
+++ b/pages/services.html
@@ -19,7 +19,7 @@
       <a class="account" href="/pages/account.html">Nalog</a>
     </span>
   </header>
-  <div class="main">
+  <div id="main">
     <h1>Servisi</h1>
     <table>
       <tr>
@@ -65,6 +65,14 @@
     <img id="mesh" src="/img/mesh-light.svg">
   </div>
   <footer>
+    <div id="sections-menu">
+      <a href="/pages/events.html">Dogadjaji</a>
+      <a href="/pages/projects.html">Projekti</a>
+      <a href="/pages/blog.html">Blog</a>
+      <a href="/pages/services.html">Servisi</a>
+      <a href="/pages/contact.html">Kontakt</a>
+    </div>
+    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
     <span class="sections">
       <a href="/pages/events.html">Dogadjaji</a>
       <a href="/pages/projects.html">Projekti</a>
diff --git a/scripts/main.js b/scripts/main.js
index 1323c5b2..c83be5db 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,5 +1,8 @@
 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");
 
 let theme = window.localStorage.getItem("theme");
 
@@ -48,6 +51,45 @@ function changeToLightTheme() {
   }
 }
 
-// DEBUG
+function closeMenu() {
+  sections_button.setAttribute("opened", "false");
+  sections_button.children[0].src = sections_button.children[0].src.replace(
+    "opened",
+    "closed",
+  );
+  sections_menu.style.display = "none";
+}
+
+function openMenu() {
+  sections_button.setAttribute("opened", "true");
+  sections_button.children[0].src = sections_button.children[0].src.replace(
+    "closed",
+    "opened",
+  );
+  sections_menu.style.display = "flex";
+  sections_menu.style.flexDirection = "column";
+}
+
+sections_button.addEventListener("click", () => {
+  if (sections_button.getAttribute("opened") === "false") {
+    openMenu();
+  } else {
+    closeMenu();
+  }
+});
+
+window.addEventListener("resize", () => {
+  if (sections_button.getAttribute("opened") === "true") {
+    closeMenu();
+  }
+});
+
+main.addEventListener("click", (event) => {
+  if (sections_button.getAttribute("opened") === "true") {
+    closeMenu();
+  }
+});
+
+DEBUG;
 console.log(window.innerWidth);
 console.log(window.innerHeight);
diff --git a/styles/style.css b/styles/style.css
index 6df82609..53924b83 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -59,13 +59,13 @@ footer {
   border-top: 2px solid var(--border);
 }
 
-.main {
+#main {
   grid-area: 2 / 1 / 3 / 2;
   padding: 3rem 3rem 3rem 3rem;
   font-size: 1.3rem;
   line-height: 2rem;
   max-width: 120ch;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 a,
@@ -74,8 +74,7 @@ a:visited {
   color: var(--text);
 }
 
-.main a {
-  /* link offset */
+#main a {
   position: relative;
   top: 0.2rem;
 }
@@ -92,8 +91,9 @@ a:focus {
 }
 
 .account,
-.sections {
-  font-size: 2rem
+.sections,
+#sections-menu {
+  font-size: 2rem;
 }
 
 #mesh {
@@ -104,6 +104,44 @@ a:focus {
   pointer-events: none;
 }
 
+@media screen and (max-height: 860px),
+screen and (max-width: 1500px) {
+  #mesh {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1160px) {
+  .sections {
+    display: none;
+  }
+
+  #sections-button {
+    display: block !important;
+  }
+}
+
+#sections-button {
+  display: none;
+}
+
+#sections-menu a {
+  margin-bottom: 1rem;
+}
+
+#sections-menu {
+  border: 2px solid var(--border);
+  background-color: var(--bg);
+  position: absolute;
+  bottom: calc(5rem - 2px);
+  left: 0;
+  align-items: center;
+  padding: 2rem 3rem;
+  display: none;
+}
+
+
+
 .copyleft a,
 .sections a {
   margin: 0 1rem 0 0;
@@ -126,5 +164,5 @@ button {
   border: none;
   background: var(--bg);
   color: var(--text);
-  margin: 0 4rem 0 0;
+  margin: 0 2rem 0 0;
 }
\ No newline at end of file