[CSS] Fixed top margin, footer elements are now actually footer elements.

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 */

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);

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);

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");
 }