diff --git a/css/global/layout/global-layout.css b/css/global/layout/global-layout.css index 8790d67..75d59f5 100644 --- a/css/global/layout/global-layout.css +++ b/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); -} - - .navbar.blank { - position: relative; - flex-shrink: 0; - opacity: 0;} + padding: calc(var(--gap) / 2);} .navbar.top { flex-direction: column; justify-content: space-around; align-items: center; width: var(--side-bar-width); - height: 100%; - --max-width: var(--max-percentage-width-navar); - } + height: calc(100% - 20px); + --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; - width: 100%;} + align-content: center;} .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% */ diff --git a/css/global/styling/global-styling.css b/css/global/styling/global-styling.css index c5a0d87..cc9e131 100644 --- a/css/global/styling/global-styling.css +++ b/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); @@ -27,7 +27,7 @@ html { body { background-image: url('graphgreen.gif'); } -/* ----------------- Others -------------------- */ +/* ----------------- Others -------------------- */ * { scrollbar-width: thin;} @@ -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'; @@ -171,4 +177,9 @@ a:hover { .logo a { color: white; text-decoration: none; - } \ No newline at end of file + } + +@media only all and (max-width:700px) { + .navbar.bot { margin-top: 0px; } + .navbar.top { margin-bottom: 0px; } +} \ No newline at end of file diff --git a/css/main/layouts/desktop-slim.css b/css/main/layouts/desktop-slim.css index 3370b23..9a51adb 100644 --- a/css/main/layouts/desktop-slim.css +++ b/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; } diff --git a/css/main/layouts/mobile.css b/css/main/layouts/mobile.css index e1a03ca..eb822eb 100644 --- a/css/main/layouts/mobile.css +++ b/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;} diff --git a/img/ui/border-1.png b/img/ui/border-1.png index f8624d5..bc6fe04 100644 Binary files a/img/ui/border-1.png and b/img/ui/border-1.png differ diff --git a/pages/articles/diy-calculator.php b/pages/articles/diy-calculator.php index 4e7f181..1e5a5dc 100644 --- a/pages/articles/diy-calculator.php +++ b/pages/articles/diy-calculator.php @@ -22,7 +22,7 @@
-

+