css/global/layout/global-layout.css

@@ -31,30 +31,28 @@ body {
     display:                flex;
     flex-direction:         row;
     height:                 100%;
-    overflow:               hidden;
+    overflow:               hidden;}
-}
 
 .navbar {
     position:               fixed;
     z-index:                999;
     display:                flex;
     gap:                    var(--gap);
-    padding:                var(--gap);
+    padding:                calc(var(--gap) / 2);}
-}
-
-    .navbar.blank {
-        position:               relative;
-        flex-shrink:            0;
-        opacity:                0;}
 
     .navbar.top {
         flex-direction:         column;
         justify-content:        space-around;
         align-items:            center;
         width:                  var(--side-bar-width);
-        height:                 100%;
+        height:                 calc(100% - 20px);
-        --max-width:            var(--max-percentage-width-navar);
+        --max-width:            var(--max-percentage-width-navar);}
-    }
+
+        .navbar.blank {
+        position:               relative;
+        flex-shrink:            0;
+        opacity:                0;
+        height:                 calc(100% - (10px * 2) - 5px);}
 
         .links { 
             flex-grow:              1;
@@ -102,6 +100,10 @@ body {
 
 @media only all and (max-width:700px) {
 
+    /* -- Display -- */
+
+    .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
+
     /* -- Ordering -- */
     .about                  { order: 1; }
     .logo                   { order: 2; }
@@ -123,13 +125,19 @@ body {
         overflow:           auto;
         position:           relative;}
 
+    .navbar.bot.blank, .navbar.top.blank { height: calc(var(--mobile-topnavbar-height) - 5px); } /* Adjustment, shrink divs for main navbar to overlay*/
+
+    .navbar.top, .navbar.bot { 
+        width:              calc(100% - (10px * 2)); 
+        padding-top:        0px;
+        padding-bottom:     0px;}
+
     .navbar.top {
         flex-direction:     row;
         justify-content:    space-around;
         align-items:        center;
         height:             var(--mobile-topnavbar-height);
         gap:                var(--gap);
-        width:              100%;
         --max-width:        80%;}
 
     .navbar.top > .links    { display: none; }
@@ -147,8 +155,7 @@ body {
         height:             var(--mobile-botnavbar-height);
         flex-direction:     column;
         justify-content:    center;
-        align-content:      center;
+        align-content:      center;}
-        width:              100%;}
 
         .navbar.bot > div { flex-direction: row; }
 
@@ -162,7 +169,7 @@ body {
             /* Ordering */
             justify-content:    flex-start;
             clip-path:          content-box;
-            align-items:        flex-start;
+            align-items:        center;
             flex-direction:     column;}
 
             .links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */

css/global/styling/global-styling.css

@@ -15,7 +15,7 @@ html {
     --input-background-hover:   rgb(216, 222, 227);
     --input-highlight:          rgb(86, 176, 255);
     --navvar-background:        rgb(179, 200, 218);
-    --navbar-buttons-bg:        var(--accent-color-light);
+    --navbar-buttons-bg:        white;
     --navbar-buttons-hover:     var(--input-background-hover);
     --input-border-radius:      var(--border-radius);
     --link-color:               var(--accent-color-dark);
@@ -76,7 +76,6 @@ img { image-rendering: pixelated;}
 body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
 
 /* ----------------- Color -------------------- */
-.navbar { background-color: var(--navvar-background); }
 
 .panel {
     position:               relative;
@@ -99,12 +98,19 @@ body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-ser
 /* ------------- Navbars stiling ------------------- */
 .about, .links > div, .lang-picker { 
     border:                     5px groove rgb(214, 236, 255);
-    background:                 var(--navbar-buttons-bg);}
+    background-color:           var(--navbar-buttons-bg);}
 
 .about:hover, .links > div:hover, .lang-picker:hover { 
     background-color:           var(--navbar-buttons-hover);
     transition:                 background-color 0.1s;}
 
+.navbar {
+    border-style:               solid;
+    border-width:               20px;
+    border-image:               url('../../../img/ui/border-1.png') 9 10 fill round;
+    margin:                     10px;
+    image-rendering:            pixelated;}
+
 /* ------------- Inputs & links ----------------- */
 button, .button {
     font-family:                'special elite';
@@ -172,3 +178,8 @@ a:hover {
         color:              white;
         text-decoration:    none;
     }
+
+@media only all and (max-width:700px) {
+    .navbar.bot { margin-top: 0px; }
+    .navbar.top { margin-bottom: 0px; }
+}

css/main/layouts/desktop-slim.css

@@ -1,6 +1,6 @@
 /* RESPONSIVE DESIGN, LAPTOP SLIM */
 
-@media only all and (max-width:1175px){
+@media only all and (max-width:1225px){
     /* ------------- Order ------------- */
     .blinkies.one   { order: 1; }
     .articles       { order: 4; }

css/main/layouts/mobile.css

@@ -13,8 +13,6 @@
     .verticalscroll         { display: flex;  }
     .scroll_below-clip-box  { display: block; }
 
-    .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
-
     /* Decoration */
 
     #try_hovering--blinkie  { display: none;     }
@@ -41,7 +39,7 @@
         right:              0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
         margin:             var(--gap);
         justify-content:    center;
-        height:             calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2);
+        height:             calc(100% - (var(--mobile-botnavbar-height) + 5px) - (var(--mobile-topnavbar-height) + 5px) - var(--gap) * 2);
         width:              var(--scrolls-height);
         overflow:           hidden;}
 

pages/articles/diy-calculator.php

@@ -22,7 +22,7 @@
     <div class="primary">
         <div>
             <div class="calc panel">
-            <h1><?php echo $tr[$lang]["calc.h1"]; ?></h1>
+            <h1><?php echo $tr[$lang]["calc.title"]; ?></h1>
             <div class="viewing panel">
                 <span id="output"></span>
             </div>