[TWIG][CSS] Base template structural refactoring to accommodate true canons of page construction. CSS WIP to reflect these changes.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -1,20 +1,20 @@
 :root {
       /* fonts */
-      --head-font: 'Montserrat', sans-serif;
-      --main-font: 'Open Sans', sans-serif;
+      --display-font:   'Manrope-ExtraBold', sans-serif;
+      --main-font:      'Inter', sans-serif;
 
       /* font and margin sizes */
-      --main-size: 1.15em;
-      --medium-size: 0.75em;
-      --small-size: 0.65em;
-      --unit-size: 1em;
-      --side-margin: 2em;
-      --nav-size: 15em;
+      --unit-size-h:    calc(100vh / 9);
+      --unit-size-w:    calc(100vw / 9);
+      --main-size:      1.5rem;
+      --medium-size:    1.125rem;
+      --small-size:     1rem;
 
       /* colours and shadows */
       --fg:             #eceff4;
       --accent:         #81a1c1;
       --accent-low:     #81a1c160;
+      --bg-translucent: rgba(46, 52, 64, 0.6);
       --bg1:            #2e3440;
       --bg2:            #3b4252;
       --bg3:            #434c5e;
@@ -23,17 +23,62 @@
       --shadow:  0px 0px 20px 0px rgba(46,52,64,0.95);
 }
 
+/* TYPOGRAPHY */
+html {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+      font-family: var(--display-font);
+      font-size: var(--main-size);
+      font-weight: 900;
+      opacity: 1.00;
+      letter-spacing: -0.40px;
+      word-spacing: 4.00px;
+}
+
+h2 {
+      font-family: var(--display-font);
+      font-size: var(--medium-size);
+      font-weight: 800;
+      letter-spacing: -0.75px;
+      word-spacing: 3.00px;
+      text-transform: none;
+}
+
+h3 {
+      font-family: var(--display-font);
+      font-size: var(--medium-size);
+      font-weight: 600;
+      line-height: 1.00;
+      letter-spacing: -0.20px;
+      word-spacing: 1.00px;
+      text-transform: none;
+}
+
+p {
+      font-family: var(--main-font);
+      font-size: var(--small-size);
+      font-weight: 400;
+      letter-spacing: -0.30px;
+      word-spacing: -0.10px;
+      text-transform: none;
+}
+
 /* DEFAULTS */
 body,
 html {
-      background: var(--bg1);
-      background-attachment: fixed;
-      background-size: cover;
+      height: 100%;
+      width: auto;
       color: var(--fg);
-      font-family: var(--main-font);
-      font-size: var(--main-size);
-      margin: 0;
-      padding: 0;
+      background-image:
+              linear-gradient(
+                      135deg,
+                      var(--bg1) 0%,
+                      var(--bg1) 100%
+              ), url(data:image/png;base64,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);
+      background-blend-mode: exclusion;
 }
 
 hr {
@@ -73,67 +118,71 @@ a:focus {
       transition: all 0.8s ease;
 }
 
-b {
-      font-family: var(--head-font);
-      font-weight: 800;
-}
-
 /* HEADER */
 #header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
-      background-color: var(--accent);
-      padding: var(--main-size);
-      height: var(--main-size);
+      height: 100vh;
 }
 
 #top {
       display: flex;
-      justify-content: space-around;
-      align-items: center;
-      flex-wrap: wrap;
-      width: 100%;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      height: 100%;
+      width: auto;
 }
 
 .icon-menu {
       margin: 0;
       padding: 0;
       display: none;
-      width: var(--unit-size);
-      height: var(--unit-size);
-      stroke-width: 0;
+      width: var(--main-size);
+      height: var(--main-size);
       stroke: currentColor;
       fill: currentColor;
 }
 
 #instance {
-      order: 2;
+      order: 1;
+      font-size: var(--main-size);
+      display: flex;
+      justify-content: center;
+
+      height: calc(var(--unit-size-h) / 2);
+      width: 100%;
+      padding: 0;
+      box-sizing: border-box;
+
+      background-color: var(--accent);
 }
 
-#instance b {
-      margin: 0;
-      padding: 0;
-      vertical-align: middle;
-      margin-left: calc(0.2 * var(--unit-size));
+#instance a {
+      font-family: var(--display-font);
+      font-size: var(--main-size);
+      display: inline-flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      align-self: center;
       color: var(--bg1);
 }
 
 .icon-logo {
-      margin: 0;
-      padding: 0;
-      display: inline-block;
-      width: var(--unit-size);
-      height: var(--unit-size);
+      margin-right: 5px;
       stroke-width: 0;
       stroke: currentColor;
       fill: var(--bg1);
       vertical-align: middle;
 }
 
-#left-panel {
-      order: 1;
+#panels {
+      order: 2;
+      display: flex;
+      width: var(--unit-size-w);
+      font-size: var(--medium-size);
+      background-color: var(--bg-translucent);
 }
 
 /* left panel z-index fix */
@@ -218,9 +267,6 @@ b {
       border-color: var(--accent);
       border-radius: var(--unit-size);
       border-width: 2px;
-      font-family: 'Montserrat', sans-serif;
-      font-size: var(--small-size);
-      font-weight: 700;
 }
 .create-notice button[type=submit]:focus,
 .create-notice button[type=submit]:hover {

public/assets/css/base_mid.css

@@ -1,6 +1,6 @@
 :root {
       /* fonts */
-      --head-font: 'Montserrat', sans-serif;
+      --main-font: 'Montserrat', sans-serif;
       --main-font: 'Open Sans', sans-serif;
 
       /* font and margin sizes */
@@ -71,7 +71,7 @@ a:focus {
 }
 
 b {
-      font-family: var(--head-font);
+      font-family: var(--main-font);
       font-weight: 800;
 }
 

public/assets/css/base_small.css

@@ -1,6 +1,6 @@
 :root {
       /* fonts */
-      --head-font: 'Montserrat', sans-serif;
+      --main-font: 'Montserrat', sans-serif;
       --main-font: 'Open Sans', sans-serif;
 
       /* font and margin sizes */
@@ -70,7 +70,7 @@ a:focus {
 }
 
 b {
-      font-family: var(--head-font);
+      font-family: var(--main-font);
       font-weight: 800;
 }
 

public/assets/css/left/left.css

@@ -1,56 +1,4 @@
-.navbar {
-      display: flex;
-      flex-direction: column;
-      width: var(--nav-size);
-      height: calc(100vh - (3 * var(--unit-size)));
-      position: fixed;
-      background-color: var(--bg1);
-      margin-top: calc(3 * var(--main-size));
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-      border-right: solid 1px var(--accent-low);
-}
-/* left navigation */
-.navbar .left-nav {
-      flex: 1;
-      overflow-y: auto;
-}
-.navbar .left-nav > a {
-      display: block;
-      color: var(--accent);
-      font-size: var(--medium-size);
-      margin-bottom: var(--unit-size);
-      margin-left: var(--unit-size);
-}
-.navbar .left-nav > a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-.navbar .left-nav > a:last-child {
-      margin-bottom: 0;
-}
-.navbar .left-nav > a:hover,
-.navbar .left-nav > a:focus {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
-/* footer static pages links */
-.navbar .footer {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      justify-content: space-evenly;
-      font-size: var(--medium-size);
-      padding: var(--unit-size);
-      margin-bottom: var(--unit-size);
-}
-.navbar .footer a {
-      margin-right: var(--unit-size);
-      color: var(--accent);
-      font-size: var(--medium-size);
-}
-
-/* checkbox trick remnants */
+/* CHECKBOX TRICK */
 .icon-menu label {
       opacity: 0;
       cursor: pointer
@@ -68,48 +16,11 @@
       transition: 0.3s ease;
 }
 
-/* profile stats */
-.profile {
+#left-panel {
       display: flex;
-      flex-wrap: wrap;
-      background-color: var(--bg2);
-      padding: var(--unit-size);
-      font-size: var(--small-size);
-      margin-bottom: var(--unit-size);
-      vertical-align: middle;
-}
+      flex-direction: column;
+      position: fixed;
 
-.icon-avatar {
-      order: 1;
-      height: calc(5 * var(--unit-size));
-      width: calc(5 * var(--unit-size));
-      margin-right: var(--small-size);
-      border-radius: 50%;
-}
-
-.info {
-      order: 2;
-}
-.info #nick {
-      order: 1;
-      margin-bottom: var(--small-size);
-}
-.info .tags {
-      order: 2;
-      margin-bottom: var(--small-size);
-}
-.info .stats {
-      order: 3;
-}
-.info .stats span:last-child {
-      margin-left: var(--small-size);
-}
-.info .tags i {
-      color: var(--accent);
-}
-.info .tags i:first-child {
-      margin-left: 0 !important;
-}
-.info .tags i:last-child {
-      margin-left: var(--small-size);
+      left: 0;
+      flex-basis: border-box;
 }

public/assets/css/network/public.css

@@ -1,34 +1,32 @@
 .content {
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(4 * var(--main-size));
     justify-content: center;
     align-items: center;
-    margin-left: var(--nav-size);
-    margin-right: var(--nav-size);
-    margin-bottom: var(--unit-size);
 }
 .content .main {
-    width: 100%;
-    margin-left: 4%;
-    margin-right: 4%;
-    margin-top: var(--unit-size);
-    border-radius: var(--unit-size);
-    background-color: var(--bg3);
-    border: solid 2px var(--accent-low);
+    width: calc(5 * var(--unit-size-w));
+    margin-top: var(--unit-size-h);
+
+    background-image:
+            linear-gradient(
+                    135deg,
+                    var(--bg2) 0%,
+                    var(--bg4) 100%
+            ), url(data:image/png;base64,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);
+    background-blend-mode: exclusion;
+    border-radius: 1rem;
+    padding: var(--small-size);
 }
 
 .main-nav {
     order: 1;
+
     display: flex;
-    justify-content: space-evenly;
     flex-wrap: wrap;
     flex: 1;
-    background-color: var(--bg1);
-    padding: var(--medium-size);
-    font-family: var(--head-font);
-    border-radius: var(--unit-size) var(--unit-size) 0 0;
-    border-bottom: solid 2px var(--accent-low);
+    justify-content: space-evenly;
+    font-size: var(--medium-size);
 }
 
 .main-nav ul {
@@ -36,29 +34,23 @@
     align-items: stretch;
     justify-content: space-evenly;
     text-align: center;
+
     width: 100%;
-    font-size: var(--medium-size);
-    margin-left: calc(2 * var(--side-margin));
-    margin-right: calc(2 * var(--side-margin));
-    padding: 0;
 }
 .main-nav li {
-    display: block;
-    flex: 0 1 auto;
+    display: inline-flex;
     list-style-type: none;
-    font-weight: 700;
-    width: 10%;
-}
-.notes-wrap .main-nav ul {
-    font-size: var(--unit-size);
+    font-family: var(--main-font);
 }
 
 .active {
     color: var(--fg) !important;
-    font-weight: 700;
 }
 
 .main-nav a {
+    font-family: var(--main-font);
+    font-size: var(--medium-size);
+    font-weight: 900;
     color: var(--accent);
 }
 
@@ -83,12 +75,9 @@
     width: 100%;
 }
 .notes-wrap .timeline .notes > div {
-    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
-    border-radius: var(--unit-size);
     width: 100%;
 }
 .notes-wrap .timeline .notes > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
 }
 .notes-wrap .main-nav {
     width: 100%;
@@ -99,45 +88,32 @@
 .note {
     display: flex;
     flex-wrap: wrap;
-    border: solid 2px var(--accent-low);
-    border-radius: var(--unit-size);
     box-shadow: var(--shadow);
-    margin-bottom: var(--unit-size);
 }
 .note > .replies > .note {
     border: none;
 }
 .notes > h1 {
-    padding: var(--unit-size);
 }
 .note-info {
     order: 1;
     background-color: var(--bg1);
     box-sizing: border-box;
-    padding: 5px 10px 5px 10px;
-    border-radius: var(--unit-size) 0 0 0;
     display: flex;
     align-items: center;
     flex-grow: 1;
     flex-shrink: 0;
     width: 50%;
 }
-.note-info b {
-    margin-left: var(--small-size);
-}
-.note-info a {
-    height: calc(2 * var(--unit-size));
-}
 .note-info a img {
-    width: calc(2 * var(--unit-size));
-    height: calc(2 * var(--unit-size));
+    width: var(--unit-size);
+    height: auto;
 }
 
 .note-content {
     order: 3;
     word-break: break-word;
     padding: var(--small-size);
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
     width: 100%;
 }
 .note-attachments {
@@ -165,10 +141,8 @@
     order: 2;
     width: 50%;
     justify-content: flex-end;
-    border-radius: 0 var(--unit-size) 0 0;
     background-color: var(--bg1);
     box-sizing: border-box;
-    padding: 5px 10px 5px 10px;
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -176,7 +150,6 @@
 }
 .note-actions a {
     height: var(--main-size);
-    margin-left: var(--unit-size);
 }
 .note-actions a svg {
     width: var(--main-size);
@@ -190,7 +163,6 @@
     width: var(--main-size);
     height: var(--main-size);
     display: flex;
-    margin-left: var(--unit-size);
 }
 #repeat_repeat,
 #reply_reply,
@@ -219,81 +191,60 @@
 .replies {
     order: 4;
     width: 100%;
-    box-sizing: content-box;
-    padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
+    box-sizing: border-box;
 }
 
 /* POSTING */
 .content > form {
     display: flex;
-    flex: max-content;
-    width: -webkit-fill-available;
+    flex: 1;
 }
 .create-notice {
     display: flex;
     flex-wrap: wrap;
-    flex: max-content;
-    width: -webkit-fill-available;
-    margin-left: 4%;
-    margin-right: 4%;
-    border-radius: var(--unit-size);
-    border: solid 2px var(--accent-low);
+    flex: 1;
     background-color: var(--bg3);
 }
 .create-right {
     order: 2;
-    width: 90%;
-    border-radius: 0 var(--unit-size) var(--unit-size) 0;
     background-color: var(--bg3);
 }
 
 /* target multi-select */
 .target {
     order: 1;
-    width: 10%;
     background-color: var(--bg1);
-    border-radius: var(--unit-size) 0 0 var(--unit-size);
 }
 .target-top {
-    padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
     font-size: var(--medium-size);
 }
 .target-bot {
-    padding-left: var(--unit-size);
-    padding-bottom: var(--unit-size);
     font-size: var(--medium-size);
 }
 .target .required {
-    font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--display-font);
+    font-weight: 900;
 }
 .target #post_to {
-    font-weight: 400;
     font-family: var(--main-font);
 }
-.target #post_to label {
-    margin-left: 0.2em;
-}
-
 
 /* top right */
 .create-top-right{
     display: flex;
     justify-content: space-between;
-    color: var(--fg);
-    background-color: var(--bg1);
-    border-radius: 0 var(--unit-size) 0 0;
     width: 100%;
     box-sizing: border-box;
+    color: var(--fg);
+    background-color: var(--bg1);
 }
 
 /* tabs */
 
 .tabs{
-    padding: var(--unit-size);
+    padding: var(--small-size);
 }
 
-
 /* scope options */
 .scope {
     display: flex;
@@ -306,20 +257,18 @@
     display: inline;
     vertical-align: middle;
     flex: 1;
+    padding: var(--small-size);
+
     font-size: var(--medium-size);
     color: var(--fg);
-    padding: var(--unit-size);
 }
 .scope .required {
     order: 1;
-    font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--main-font);
+    font-weight: 900;
 }
 #post_visibility .required {
     font-family: var(--main-font);
-    font-weight: 400;
-    margin-left: 0.1em;
-    margin-right: 1em;
 }
 .scope #post_scope {
     order: 2;
@@ -348,7 +297,7 @@
     font-family: var(--main-font);
     width: 100%;
     box-sizing: border-box;
-    height: calc(8 * var(--unit-size));
+    height: calc(8 * var(--medium-size));
     resize: vertical;
 }
 
@@ -358,13 +307,10 @@
     display: inline-flex;
     width: 100%;
     box-sizing: border-box;
-    padding: 1%;
     background-color: var(--bg3);
-    border-radius: 0 0 var(--unit-size) 0;
 }
 .post {
     order: 2;
-    width: calc(100% - var(--main-size));
 }
 .post div {
     float: right;
@@ -393,18 +339,11 @@
     font-size: var(--medium-size);
     fill: var(--fg);
     background-color: var(--bg1);
-    padding: 0.3em 1em;
-    border-style: solid;
-    border-color: var(--accent);
-    border-radius: var(--unit-size);
-    border-width: 2px;
-    margin-bottom: -0.5em;
     cursor: pointer;
-    z-index: 0;
 }
 
 #replyform {
-    margin: var(--main-size);
+    margin: var(--small-size);
 }
 #replyform div {
     display: inline-flex;

public/assets/css/network/public_mid.css

@@ -26,7 +26,7 @@
     flex: 1;
     background-color: var(--bg1);
     padding: var(--medium-size);
-    font-family: var(--head-font);
+    font-family: var(--main-font);
     border-radius: var(--unit-size) var(--unit-size) 0 0;
     border-bottom: solid 2px var(--accent-low);
 }
@@ -263,7 +263,7 @@
 }
 .target .required {
     font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--main-font);
 }
 .target #post_to {
     font-weight: 400;
@@ -310,7 +310,7 @@
 .scope .required {
     order: 1;
     font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--main-font);
 }
 #post_visibility .required {
     font-family: var(--main-font);

public/assets/css/network/public_small.css

@@ -26,7 +26,7 @@
     flex: 1;
     background-color: var(--bg1);
     padding: var(--medium-size);
-    font-family: var(--head-font);
+    font-family: var(--main-font);
     border-radius: var(--unit-size) var(--unit-size) 0 0;
     border-bottom: solid 2px var(--accent-low);
 }
@@ -263,7 +263,7 @@
 }
 .target .required {
     font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--main-font);
 }
 .target #post_to {
     font-weight: 400;
@@ -309,7 +309,7 @@
 .scope .required {
     order: 1;
     font-weight: 800;
-    font-family: var(--head-font);
+    font-family: var(--main-font);
 }
 #post_visibility .required {
     font-family: var(--main-font);

public/assets/css/right/right.css

@@ -1,7 +1,3 @@
-#right-panel {
-    order: 3;
-}
-
 .arrow {
     border: solid var(--fg);
     border-width: 0 3px 3px 0;
@@ -13,24 +9,17 @@
     -webkit-transform: rotate(135deg);
 }
 
-#right-container {
+#right-panel {
     display: flex;
     flex-direction: column;
-    width: var(--nav-size);
-    height: calc(100vh - (3 * var(--unit-size)));
     position: fixed;
-    background-color: var(--bg1);
-    margin-top: calc(3 * var(--main-size));
-    z-index: 0;
-    border-left: solid 1px var(--accent-low);
+
+    right: 0;
+    top: var(--unit-size);
+    margin: 0;
 }
 
-input.larger {
-    width: var(--main-size);
-    height: calc( 2 * var(--main-size));
-}
-
-/* untoggled */
+/* UNTOGGLED */
 #right-container {
     right: 0;
     top: 0;
@@ -51,7 +40,7 @@ input.larger {
     transition: 0.3s ease;
 }
 
-/* toggled */
+/* TOGGLED */
 #toggle-right:checked~#right-container {
     display: flex;
     right: 0;

public/assets/fonts/inter/LICENSE.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2016-2020 The Inter Project Authors.
+"Inter" is trademark of Rasmus Andersson.
+https://github.com/rsms/inter
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/inter/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
+       url("Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
+       url("Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
+       url("Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.19") format("woff2");
+}

public/assets/fonts/manrope/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2018 The Manrope Project Authors (https://github.com/sharanda/manrope)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/manrope/manrope.css

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: 'Manrope';
+    font-style:  normal;
+    src: url(Manrope-Regular.woff2),
+    url(Manrope-Regular.woff);
+}
+
+@font-face {
+    font-family: 'Manrope-ExtraBold';
+    font-style:  normal;
+    src: url(Manrope-ExtraBold.woff2),
+    url(Manrope-ExtraBold.woff2);
+}

templates/base.html.twig

@@ -9,14 +9,15 @@
         {% block title %}{% endblock %}
     </title>
     {% block stylesheets %}
-        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans&display=swap"
-              rel="stylesheet">
+        <link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/inter/inter.css') }}">
+        <link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/manrope/manrope.css') }}">
         <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}"
               media="screen and (min-width: 1300px)">
-        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_mid.css') }}"
-              media="screen and (max-width: 1300px)">
-        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_small.css') }}"
-              media="screen and (max-width: 750px)">
+
+{#        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_mid.css') }}"#}
+{#              media="screen and (max-width: 1300px)">#}
+{#        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_small.css') }}"#}
+{#              media="screen and (max-width: 750px)">#}
         <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/reset.css') }}">
         {% for stylesheet in show_stylesheets() %}
             <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/' ~ stylesheet) }}">
@@ -35,17 +36,20 @@
     {% block header %}
         <div id='header'>
             <div id='top'>
-                {% block leftpanel %}
-                {% endblock leftpanel %}
                 <nav id='instance'>
                     <a href="{{ path('main_public') }}">
                         {{ icon('logo', 'icon icon-logo') | raw }}
-                        <b> {{ config('site', 'name') }} </b>
+                        <h1> {{ config('site', 'name') }} </h1>
                     </a>
                 </nav>
+                <div id="panels">
+                    {% block leftpanel %}
+                    {% endblock leftpanel %}
                     {% block rightpanel %}
                     {% endblock rightpanel %}
                 </div>
+
+            </div>
         </div>
     {% endblock header %}