From 94d3b770ffec6c9ad4887c1d85893d0116e1cab9 Mon Sep 17 00:00:00 2001
From: Sergiotarxz <sergiotarxz@posteo.net>
Date: Sun, 31 Dec 2023 17:18:26 +0100
Subject: [PATCH] Improving the size of ui elements.

---
 public/css/styles.css  |  97 ++++++++++++++-------------
 public/css/styles.scss | 145 +++++++++++++++++++++++------------------
 2 files changed, 135 insertions(+), 107 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 8b3809b..c64660f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -79,9 +79,10 @@ body {
     margin-right: 10px;
     display: flex; }
     body div.search a.search-icon {
-      height: calc(100% - 28px);
+      height: calc(100% - 40px);
       align-self: center;
-      margin: 7px;
+      margin: 20px;
+      margin-left: 7px;
       display: flex;
       background: aliceblue;
       align-items: center;
@@ -210,7 +211,7 @@ body {
     left: 0;
     width: 100%;
     opacity: 40%;
-    top: 60px;
+    top: 80px;
     height: calc(100% - 60px);
     z-index: 250;
     display: none; }
@@ -220,8 +221,8 @@ body {
     visibility: hidden;
     position: fixed;
     left: 100%;
-    width: 70%;
-    top: 60px;
+    width: Min(70%, 600px);
+    top: 80px;
     height: calc(100% - 60px);
     z-index: 500;
     transition: left 0.5s ease-in, visibility 0.5s ease-in;
@@ -268,12 +269,12 @@ body {
     body a.menu-expand:hover .open-menu-icon, body a.menu-expand:focus .open-menu-icon, body a.menu-expand.active .open-menu-icon {
       display: none; }
   body nav > a.menu-expand > img {
-    width: 30px;
-    height: 30px; }
-  body nav > a > img.index-image-menu {
-    vertical-align: middle;
     width: 40px;
     height: 40px; }
+  body nav > a > img.index-image-menu {
+    vertical-align: middle;
+    width: 60px;
+    height: 60px; }
   body nav > a > img.index-image-menu, body div.burguillos-logo-container > img {
     transition-property: transform;
     transition-duration: 2s;
@@ -317,24 +318,38 @@ body {
     align-items: center;
     width: 100%;
     background: blueviolet;
-    height: 60px;
+    height: 80px;
+    justify-content: start;
+    flex-direction: row;
     top: 0%; }
     body nav.mobile-shortcuts a {
       height: 100%;
-      width: 16.6666666667%;
+      width: 80px;
       padding-left: 0;
       padding-top: 0;
       padding-right: 0;
       padding-bottom: 0; }
+    body nav.mobile-shortcuts a.go-to-index {
+      position: absolute;
+      left: 0;
+      top: 0; }
     body nav.mobile-shortcuts div.search {
-      width: calc(100% * 4 / 6 - 20px);
+      position: absolute;
+      left: 80px;
+      top: 10%;
+      width: Min(calc(100% - 90px * 2), 500px);
       height: 80%;
       border-radius: 10px; }
+    body nav.mobile-shortcuts a.menu-expand {
+      position: absolute;
+      left: Min(calc(100% - 80px), 600px);
+      top: 0;
+      align-self: end; }
   body div.page-contents {
     background: #FEFEFA;
     position: fixed;
-    top: 60px;
-    height: calc(80% - 60px);
+    top: 80px;
+    height: calc(80% - 80px);
     width: 100%;
     overflow-y: scroll; }
     body div.page-contents div.child-categories-mobile a {
@@ -507,37 +522,11 @@ body {
   body div.page-contents img {
     max-width: 694px; } }
 
-@media (min-width: 1100px) {
-  body nav.mobile-foldable, body nav.mobile-foldable.show {
-    display: none; }
-  body nav.mobile-shortcuts {
-    display: none; }
-  body div.search-in-page.active {
-    display: none; }
-  body div.page-contents {
-    top: 0%;
-    left: 5%;
-    height: 80%;
-    width: 90%;
-    border: solid 1px black; }
-    body div.page-contents div.description.open-browser-container {
-      margin-left: 0;
-      margin-right: 0; }
-    body div.page-contents div.description {
-      margin-left: 10%;
-      margin-right: 10%; }
-    body div.page-contents nav.desktop {
-      display: block;
-      height: auto;
-      height: 60px; }
-      body div.page-contents nav.desktop a {
-        display: table-cell;
-        height: 60px; }
-        body div.page-contents nav.desktop a img.index-image-menu {
-          height: 40px;
-          width: 40px; }
-  body div.page-contents.no-carousel {
-    height: 100%; } }
+@media (min-width: 700px) {
+  body nav.mobile-foldable {
+    left: -100%; }
+  body nav.mobile-foldable.show {
+    left: 0; } }
 
 @media (min-width: 1333px) {
   body div.page-contents div.description div.articles a {
@@ -548,6 +537,24 @@ body {
     body div.page-contents div.description div.articles a:nth-child(3n+1) {
       margin-left: 0%; } }
 
+@media (min-width: 848px) {
+  body div.page-contents div.description div.articles a {
+    width: 30%;
+    margin-left: 3%; }
+    body div.page-contents div.description div.articles a:nth-child(2n+1) {
+      margin-left: 3%; }
+    body div.page-contents div.description div.articles a:nth-child(3n+1) {
+      margin-left: 0%; } }
+
+@media (min-width: 1333px) {
+  body div.page-contents div.description div.articles a {
+    width: 22%;
+    margin-left: 3%; }
+    body div.page-contents div.description div.articles a:nth-child(3n+1) {
+      margin-left: 3%; }
+    body div.page-contents div.description div.articles a:nth-child(4n+1) {
+      margin-left: 0%; } }
+
 @media (max-width: 200px) {
   body {
     font-size: 20px; } }
diff --git a/public/css/styles.scss b/public/css/styles.scss
index 6e72cf1..aa2427f 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -120,9 +120,10 @@ body {
     display: flex;
 
     a.search-icon {
-      height: calc(100% - 28px);
+      height: calc(100% - 40px);
       align-self: center;
-      margin: 7px;
+      margin: 20px;
+      margin-left: 7px;
       display: flex;
       background: aliceblue;
       align-items: center;
@@ -311,7 +312,7 @@ body {
     left: 0;
     width: 100%;
     opacity: 40%;
-    top: 60px;
+    top: 80px;
     height: calc(100% - 60px);
     z-index: 250;
     display: none;
@@ -325,8 +326,8 @@ body {
     visibility: hidden;
     position: fixed;
     left: 100%;
-    width: 70%;
-    top: 60px;
+    width: Min(70%, 600px);
+    top: 80px;
     height: calc(100% - 60px);
     z-index: 500;
     transition: left 0.5s ease-in, visibility 0.5s ease-in;
@@ -401,14 +402,14 @@ body {
   }
 
   nav > a.menu-expand > img {
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
   }
 
   nav > a > img.index-image-menu {
     vertical-align: middle;
-    width: 40px;
-    height: 40px;
+    width: 60px;
+    height: 60px;
   }
 
   nav > a > img.index-image-menu, div.burguillos-logo-container > img {
@@ -468,30 +469,48 @@ body {
     align-items: center;
     width: 100%;
     background: $background_div;
-    height: 60px;
+    height: 80px;
+    justify-content: start;
+    flex-direction: row;
     top: 0%;
 
     a {
       height: 100%;
-      width: (100% / 6);
+      width: 80px;
       padding-left: 0;
       padding-top: 0;
       padding-right: 0;
       padding-bottom: 0;
     }
 
+    a.go-to-index {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
     div.search {
-      width: calc(100% * 4 / 6 - 20px);
+      position: absolute;
+      left: 80px;
+      top: 10%;
+      width: Min(calc(100% - 90px * 2), 500px);
       height: 80%;
       border-radius: 10px;
     }
+
+    a.menu-expand {
+        position: absolute;
+        left: Min(calc(100% - 80px), 600px);
+        top: 0;
+        align-self: end;
+    }
   }
 
   div.page-contents {
     background: $background-page;
     position: fixed;
-    top: 60px;
-    height: calc(80% - 60px);
+    top: 80px;
+    height: calc(80% - 80px);
     width: 100%;
     overflow-y: scroll;
 
@@ -781,57 +800,14 @@ body {
   }
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 700px) {
   body {
-    nav.mobile-foldable, nav.mobile-foldable.show {
-      display: none;
-    }
-
-    nav.mobile-shortcuts {
-      display: none;
-    }
-
-    div.search-in-page.active {
-      display: none;
-    }
-
-    div.page-contents {
-      div.description.open-browser-container {
-        margin-left: 0;
-        margin-right: 0;
+      nav.mobile-foldable {
+        left: -100%;
       }
-
-      div.description {
-        margin-left: 10%;
-        margin-right: 10%;
+      nav.mobile-foldable.show {
+        left: 0;
       }
-
-      nav.desktop {
-        display: block;
-        height: auto;
-        height: 60px;
-
-        a {
-          display: table-cell;
-          height: 60px;
-
-          img.index-image-menu {
-            height: 40px;
-            width: 40px;
-          }
-        }
-      }
-
-      top: 0%;
-      left: 5%;
-      height: 80%;
-      width: 90%;
-      border: solid 1px black;
-    }
-
-    div.page-contents.no-carousel {
-      height: 100%;
-    }
   }
 }
 
@@ -858,6 +834,51 @@ body {
   }
 }
 
+@media (min-width: 848px) {
+  body {
+    div.page-contents {
+      div.description {
+        div.articles {
+          a {
+            &:nth-child(2n+1) {
+              margin-left: 3%;
+            }
+
+            &:nth-child(3n+1) {
+              margin-left: 0%;
+            }
+
+            width: 30%;
+            margin-left: 3%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 1333px) {
+  body {
+    div.page-contents {
+      div.description {
+        div.articles {
+          a {
+            &:nth-child(3n+1) {
+              margin-left: 3%;
+            }
+
+            &:nth-child(4n+1) {
+              margin-left: 0%;
+            }
+
+            width: 22%;
+            margin-left: 3%;
+          }
+        }
+      }
+    }
+  }
+}
 @media (max-width: 200px) {
   body {
     font-size: 20px;