From 8bff04dae18918b2b7d010a4d9fa57c02816693f Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Wed, 21 Jul 2021 23:13:20 +0100
Subject: [PATCH] [CSS] Fixed incorrect Chromium based browsers improper main
 content view. Flex item order (shouldn't be a problem, but it was) and
 padding for the container class was the root issue.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/base.css        | 22 +++++++++++++---------
 public/assets/css/left/left.css   |  6 +-----
 public/assets/css/right/right.css |  5 +----
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 8cbdf0fa81..52562eebf8 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -108,8 +108,11 @@ a:active {
 }
 
 hr {
-    color: var(--bg3) !important;
-    border-radius: var(--main-size);
+    all: unset;
+    display: block;
+    height: 1px;
+    background-image: linear-gradient(var(--bg1), var(--bg2));
+    margin-top: var(--unit-size);
     margin-bottom: var(--main-size);
 }
 
@@ -132,7 +135,6 @@ html {
 }
 
 #header {
-    order: 1;
     display: flex;
     justify-content: center;
     position: fixed;
@@ -170,18 +172,18 @@ html {
 
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
+    order: 2;
     display: flex;
     justify-content: space-evenly;
     width: 100%;
+    margin-top: calc(3 * var(--small-size) + var(--main-size));
 }
 
 /* THE FOCUSED (middle) DIV */
 .content {
-    order: 2;
     display: flex;
     flex-direction: column;
     width: calc(3 * (100%/5));
-    padding: calc(2 * var(--main-size)) var(--small-size) var(--small-size) var(--small-size);
 }
 
 /* NAVIGATION */
@@ -193,7 +195,6 @@ html {
 }
 .navigation nav {
     padding: var(--small-size);
-    background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 35%);
 }
 .navigation a {
     font-family: var(--display-font);
@@ -203,12 +204,15 @@ html {
 .active {
     color: var(--white) !important;
 }
-
+.main-nav {
+    background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 30%);
+}
+.sec-nav {
+    background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 50%);
+}
 .sec-nav ul {
     display: flex;
     justify-content: space-around;
-    padding-left: 20%;
-    padding-right: 20%;
 }
 .sec-nav a {
     font-size: var(--medium-size);
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 35922b6bc3..41667f246c 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -17,18 +17,14 @@
     height: auto;
 }
 
-#right-container {
-    order: 1;
-}
-
 #left-container[open] > div {
     opacity: 100%;
 }
 
 #left-container[open] {
-    order: 1;
     width: calc(100vw / 4);
     border-right: solid 1px var(--bg2);
+    margin-right: var(--main-size);
 }
 
 #left-container[open] > #left-panel {
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index 24e9757ae9..fca8295e61 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -12,10 +12,6 @@
     vertical-align: middle;
 }
 
-#right-container {
-    order: 3;
-}
-
 #right-container[open] > div {
     opacity: 100%;
 }
@@ -23,6 +19,7 @@
 #right-container[open] {
     width: calc(100vw / 4);
     border-left: solid 1px var(--bg2);
+    margin-left: var(--main-size);
 }
 
 #right-panel {