From 1962a004aa1aa8a398ce3617198d8eead35bdfd8 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 10 Aug 2021 18:36:52 +0100
Subject: [PATCH] [CSS] Fixed top margin, footer elements are now actually
 footer elements.

---
 public/assets/css/base.css              | 35 +++++++++++++++----------
 public/assets/css/left/left.css         |  9 +++----
 public/assets/css/reset.css             | 12 ++++++++-
 public/assets/fonts/manrope/manrope.css |  8 +++---
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 41adb0f70f..f3a74d41be 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -1,7 +1,7 @@
 :root {
     /* FONTS */
-    --display-font: 'Manrope-ExtraBold', sans-serif;
-    --main-font: 'Inter', sans-serif;
+    --display-font: 'Manrope', sans-serif;
+    --main-font: 'Inter var', sans-serif;
 
     /* UNITS
      * unit size      - every element should be a multiplier of this
@@ -49,6 +49,7 @@
 #header {
     z-index: 1;
 
+    height: 3rem;
     font-size: var(--main-size);
     display: flex;
     justify-content: space-between;
@@ -62,6 +63,9 @@
 
     box-shadow: var(--shadow);
 }
+#header + * {
+    margin-top: 3rem;
+}
 
 #instance {
     display: flex;
@@ -85,8 +89,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    /*margin-top: calc(3 * var(--small-size) + var(--main-size));*/
-    margin-top: 4.3rem;
+    padding: var(--unit-size);
 }
 
 /* THE FOCUSED (middle) DIV */
@@ -95,7 +98,6 @@
     flex-direction: column;
     margin-left: 20%;
     margin-right: 20%;
-    padding: 0 var(--unit-size) 0 var(--unit-size);
 
     width: 100%;
     max-width: 60%;
@@ -130,12 +132,6 @@
 }
 
 /* NOTES */
-.h-feed,
-.notes {
-    margin-top: var(--main-size);
-}
-
-.h-feed,
 .notes hr {
     margin-top: var(--unit-size);
     margin-bottom: var(--main-size);
@@ -198,6 +194,7 @@
 }
 
 /* SIDE PANELS */
+
 .panel {
     font-size: var(--main-size);
 }
@@ -210,15 +207,21 @@
     box-sizing: border-box;
     width: 20%;
 
-    display: flex;
-    flex-direction: column;
+    display: block;
 
     position: absolute;
     top: 100%;
 }
 
 .panel aside .footer {
-    margin-top: auto;
+    max-width: 20%;
+
+    display: inline-block;
+    position: fixed;
+
+    bottom: var(--unit-size);
+    left: var(--unit-size);
+    font-size: var(--small-size);
 }
 
 .icon {
@@ -276,6 +279,10 @@
 
         display: block !important;
     }
+
+    .panel[open] aside .footer {
+        max-width: 100%;
+    }
 }
 
 /* ANIMATIONS */
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 2d2897e7bd..460a95df9e 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -66,17 +66,14 @@
     padding-left: var(--unit-size);
 }
 
-.footer {
-    font-size: var(--small-size);
-    margin-top: auto;
-    padding: var(--unit-size);
-}
-
 /* TIMELINE NAVIGATION / PLUGINS */
 .timeline-nav a,
 .timeline-nav h1 {
     display: flex;
 }
+.timeline-nav h1 {
+    padding-left: var(--unit-size);
+}
 .timeline-nav hr {
     flex: 1;
     background: linear-gradient(90deg, var(--bg3), transparent);
diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css
index 468ba18434..47ca4920b5 100644
--- a/public/assets/css/reset.css
+++ b/public/assets/css/reset.css
@@ -205,17 +205,27 @@ input:not([type=text]) {
     padding: 6px 12px;
 }
 
+textarea:hover,
+textarea:focus {
+    border: solid 2px var(--bg3) !important;
+}
+
 *|*::-moz-button-content {
     all: unset;
 }
 
 /* TODO: hover and focus feedback, checkbox */
+input[type=radio]:hover,
+input[type=radio]:focus {
+    border: solid 5px var(--bg3) !important;
+}
+
 input[type=radio] {
     all: unset;
     display: inline-block;
     width: var(--unit-size);
     height: var(--unit-size);
-    border: solid 5px var(--bg2) !important;
+    border: solid 5px var(--bg2);
     border-radius: 50%;
     margin: 3px 3px 0px 5px;
     background-color: var(--bg1);
diff --git a/public/assets/fonts/manrope/manrope.css b/public/assets/fonts/manrope/manrope.css
index 3a45583087..597dadab71 100644
--- a/public/assets/fonts/manrope/manrope.css
+++ b/public/assets/fonts/manrope/manrope.css
@@ -1,13 +1,15 @@
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
+    font-weight: 400;
     src: url(Manrope-Regular.woff2),
     url(Manrope-Regular.woff);
 }
 
 @font-face {
-    font-family: 'Manrope-ExtraBold';
+    font-family: 'Manrope';
     font-style: normal;
-    src: url(Manrope-ExtraBold.woff2),
-    url(Manrope-ExtraBold.woff2);
+    font-weight: 900;
+    src: url(Manrope-ExtraBold.woff2) format("woff2"),
+    url(Manrope-ExtraBold.woff) format("woff");
 }
\ No newline at end of file