[TWIG][CSS] Panels are now animated when shown, main content width as well as panel's is now correctly configured. WIP: displaying side panels by default when space is available, "details" element state cannot be manipulated through CSS only, need a better solution.

2021-07-20 19:30:49 +01:00 · 2021-07-20 19:30:49 +01:00 · 9519891b92
parent 95c81cc741
commit 9519891b92
11 changed files with 427 additions and 331 deletions
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@ -1,176 +1,210 @@
 :root {
-      /* FONTS */
-      --display-font:   'Manrope-ExtraBold', sans-serif;
-      --main-font:      'Inter', sans-serif;
+    /* FONTS */
+    --display-font: 'Manrope-ExtraBold', sans-serif;
+    --main-font: 'Inter', sans-serif;

-      /* UNITS
-       * unit size      - every element should be a multiplier of this
-       * main size      - used for headers and icons
-       * medium size    - same as above, except that the element in question is contained in something else
-       * small size     - used in common text, borders
-       */
-      --unit-size:      0.5rem;
-      --main-size:      1.5rem;
-      --medium-size:    1.125rem;
-      --small-size:     1rem;
+    /* UNITS
+     * unit size      - every element should be a multiplier of this
+     * main size      - used for headers and icons
+     * medium size    - same as above, except that the element in question is contained in something else
+     * small size     - used in common text, borders
+     */
+    --unit-size: 0.5rem;
+    --main-size: 1.5rem;
+    --medium-size: 1.125rem;
+    --small-size: 1rem;

-      /* colours and shadows */
-      --black:           #040506;
-      --bg1:             #383E51;
-      --bg2:             #434A60;
-      --bg3:             #5C6684;
-      --white:           #EEDFD4;
+    /* colours and shadows */
+    --black: #040506;
+    --bg1: #383E51;
+    --bg2: #434A60;
+    --bg3: #5C6684;
+    --white: #EEDFD4;

-      --accent-blue:    #8E8DBE;
-      --accent-red:     #FF6666;
-      --accent-green:   #2EC4B6;
+    --accent-blue: #8E8DBE;
+    --accent-red: #FF6666;
+    --accent-green: #2EC4B6;

-      --shadow:         0px 0px 16px 0px #383E51;
+    --shadow: 0px 0px 16px 0px #383E51;
 }

 /* TYPOGRAPHY */
 html {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
+    -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;
+    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;
+    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;
+    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;
+    font-family: var(--main-font);
+    font-size: var(--small-size);
+    font-weight: 400;
+    letter-spacing: -0.30px;
+    word-spacing: -0.10px;
+    text-transform: none;
 }

 ul {
-      text-decoration: none;
-      margin: 0;
-      padding: 0;
-      list-style: none;
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }

 li {
-      margin: 0;
-      padding: 0;
+    margin: 0;
+    padding: 0;
 }

 a:link {
-      text-decoration: none;
-      outline: 0;
-      color: var(--bg3);
+    text-decoration: none;
+    outline: 0;
+    color: var(--bg3);
 }
+
 a:visited {
-      outline: 0;
-      color: var(--bg3);
-      margin: 0;
-      padding: 0;
+    outline: 0;
+    color: var(--bg3);
+    margin: 0;
+    padding: 0;
 }
+
 a:hover {
-      color: var(--accent-blue);
-      transition: all 0.8s ease;
+    color: var(--accent-blue);
+    transition: all 0.8s ease;
 }
+
 a:focus {
-      color: var(--accent-blue);
-      transition: all 0.8s ease;
+    color: var(--accent-blue);
+    transition: all 0.8s ease;
 }

 /* DEFAULTS */
 body,
 html {
-      height: 100%;
-      width: auto;
-      color: var(--white);
+    height: 100%;
+    width: auto;
+    color: var(--white);

-      /* BLENDING BANDING IN FIREFOX */
-      background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)),
-      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
-      background-blend-mode: multiply;
-      background-attachment: fixed;
+    /* BLENDING BANDING IN FIREFOX */
+    background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    background-blend-mode: multiply;
+    background-attachment: fixed;

 }

 #header {
-      display: flex;
-      justify-content: center;
-      position: fixed;
-      pointer-events: none;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    pointer-events: none;

-      width: 100%;
-      height: calc(5 * var(--unit-size));
-      padding: var(--small-size);
+    width: 100%;
+    height: calc(5 * var(--unit-size));
+    padding: var(--small-size);

-      background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)),
-      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
-      background-blend-mode: multiply;
-      background-attachment: fixed;
-      box-shadow: var(--shadow);
+    background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    background-blend-mode: multiply;
+    background-attachment: fixed;
+    box-shadow: var(--shadow);
 }

 #instance {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
 }
+
 #instance a {
-      display: flex;
-      color: var(--white);
-      font-size: var(--main-size);
+    display: flex;
+    color: var(--white);
+    font-size: var(--main-size);
 }

 .icon-logo {
-      margin-right: var(--small-size);
-      fill: var(--white);
+    margin-right: var(--small-size);
+    fill: var(--white);
 }

 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
-      padding-top: calc(3 * var(--small-size) + var(--main-size));
-      display: flex;
-      justify-content: center;
+    padding-top: calc(3 * var(--small-size) + var(--main-size));
+    display: flex;
 }
+
 /* THE FOCUSED (middle) DIV */
 .content {
-      order: 2;
-      flex-grow: 5;
-      max-width: calc(100vw/2);
+    order: 2;
+    max-width: calc(100vw / 2);
+    margin-left: auto;
+    margin-right: auto;
 }

 /* EVERY SIDE PANEL DETAIL ELEMENT */
+.panel {
+    all: unset;
+}
+
 .panel[open] {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      padding: var(--small-size);
-      box-sizing: border-box;
+    width: calc((100vw / 4) - var(--small-size));
+    display: flex;
+    flex-direction: column;
+    padding: var(--small-size);
+    box-sizing: border-box;
+}
+
+/*
+[data-foo]::before {
+      open: attr(data-foo) "close";
+}
+*/
+.content {
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+}
+
+details[open] > div {
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    100% {
+        opacity: unset;
+        transform: none;
+    }
 }
--- a/public/assets/css/directory/actors.css
+++ b/public/assets/css/directory/actors.css
@ -1,19 +1,20 @@
 /*actors stream*/
-.actors{
+.actors {
    display: flex;
    flex-wrap: wrap;
 }

 .nav-content .timeline .actors > div {
-    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
+    margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
    border-radius: var(--unit-size);
    width: 100%;
 }
+
 .nav-content .timeline .actors > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
+    margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
 }

-.actor{
+.actor {
    display: flex;
    flex-wrap: wrap;
    border: solid 2px var(--accent-low);
@ -33,13 +34,13 @@
    justify-content: space-between;
 }

-.actor-info{
+.actor-info {
    order: 3;
    display: flex;
    flex-wrap: wrap;
 }

-.actor-bio{
+.actor-bio {
    order: 3;
    word-break: break-word;
    padding: var(--small-size);
--- a/public/assets/css/directory/groups.css
+++ b/public/assets/css/directory/groups.css
@ -1,5 +1,5 @@
 /*groups stream*/
-.groups{
+.groups {
    display: flex;
    flex-wrap: wrap;
 }
@ -9,15 +9,16 @@
 }

 .nav-content .timeline .groups > div {
-    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
+    margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
    border-radius: var(--unit-size);
    width: 100%;
 }
+
 .nav-content .timeline .groups > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
+    margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
 }

-.group{
+.group {
    display: flex;
    flex-wrap: wrap;
    border: solid 2px var(--accent-low);
@ -37,13 +38,13 @@
    justify-content: space-between;
 }

-.group-info{
+.group-info {
    order: 3;
    display: flex;
    flex-wrap: wrap;
 }

-.group-description{
+.group-description {
    order: 3;
    word-break: break-word;
    padding: var(--small-size);
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@ -11,23 +11,23 @@
    stroke-width: 0;
    vertical-align: middle;
 }
+
 .icon-avatar {
    width: var(--main-size);
    height: auto;
 }

-#left-container > div {
-    opacity: 0;
-}
 #left-container[open] > div {
    opacity: 100%;
 }
+
 #left-container[open] {
    order: 1;
    border-right: solid 1px var(--bg2);
 }

 #left-panel {
+    position: fixed;
    display: flex;
    flex-direction: column;
 }
--- a/public/assets/css/network/simple_stream.css
+++ b/public/assets/css/network/simple_stream.css
@ -1,8 +1,8 @@
-.simple-stream .nav-content{
+.simple-stream .nav-content {
    border: none;
    box-shadow: none;
 }

-.simple-stream .main-nav li{
+.simple-stream .main-nav li {
    width: auto;
 }
--- a/public/assets/css/reset.css
+++ b/public/assets/css/reset.css
@ -1,13 +1,19 @@
 /* link underlines tend to make hypertext less readable,
   because underlines obscure the shapes of the lower halves of words */
-:link,:visited { text-decoration:none }
+:link, :visited {
+    text-decoration: none
+}

 /* no list-markers by default, since lists are used more often for semantics */
-ul,ol { list-style:none }
+ul, ol {
+    list-style: none
+}

 /* avoid browser default inconsistent heading font-sizes */
 /* and pre/code too */
-h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
+h1, h2, h3, h4, h5, h6, pre, code {
+    font-size: 1em;
+}

 /* remove the inconsistent (among browsers) default ul,ol padding or margin  */
 /* the default spacing on headings does not match nor align with 
@ -15,23 +21,48 @@ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
 /* zero out the spacing around pre, form, body, html, p, blockquote as well */
 /* form elements are oddly inconsistent, and not quite CSS emulatable. */
 /*  nonetheless strip their margin and padding as well */
-ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,textarea
-{ margin:0; padding:0; border:none; }
+ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
+    margin: 0;
+    padding: 0;
+    border: none;
+}

 /* whoever thought blue linked image borders were a good idea? */
-a img,:link img,:visited img { border:none }
+a img, :link img, :visited img {
+    border: none
+}

 /* de-italicize address */
-address { font-style:normal }
+address {
+    font-style: normal
+}

 /* firefox focus outline */
-:focus {outline:none;}
-::-moz-focus-inner {border:0;}
+:focus {
+    outline: none;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}

 /* details element arrow */
 details > summary {
    list-style: none;
 }
+
 details > summary::-webkit-details-marker {
    display: none;
+}
+
+/* have IE ignore the detail elements altogether */
+@supports not (-ms-ime-align: auto) {
+
+    details summary {
+        cursor: pointer;
+    }
+
+    details summary > * {
+        display: inline;
+    }
 }
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@ -15,15 +15,18 @@
 #right-container > div {
    opacity: 0;
 }
+
 #right-container[open] > div {
    opacity: 100%;
 }
+
 #right-container[open] {
    order: 3;
    border-left: solid 1px var(--bg2);
 }

 #right-panel {
+    position: fixed;
    display: flex;
    flex-direction: column;
 }
--- a/public/assets/css/security/security.css
+++ b/public/assets/css/security/security.css
@ -1,66 +1,81 @@
-form {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-
-    padding: var(--main-size);
-    background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
-    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
-    background-blend-mode: multiply;
-    border-radius: var(--unit-size);
-}
-
-fieldset {
+.content {
    display: flex;
-    flex-direction: column;
-
-    font-family: var(--display-font);
-    font-size: var(--main-size);
+    flex-wrap: wrap;
+    margin-top: calc(4 * var(--main-size));
+    justify-content: center;
+    align-items: center;
+    margin-left: 1%;
+    margin-right: 1%;
+    margin-bottom: 1%;
 }

-fieldset legend {
-    margin-bottom: var(--main-size);
-}
-
-br {
-    margin-bottom: var(--unit-size);
+form {
+    font-size: var(--medium-size);
+    background-color: var(--bg2);
+    padding: calc(2 * var(--unit-size));
+    border-radius: var(--unit-size);
+    border: solid 2px var(--accent-low);
 }

 label {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-}
-
-input[type="text"]:hover,
-input[type="password"]:hover,
-input[type="email"]:hover,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus {
-    background: var(--white) !important;
-    color: var(--bg1) !important;
-    transition: all 0.4s ease;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="email"] {
-    all: unset;
-    background: var(--translucent);
-    padding: var(--unit-size) var(--small-size);
-    box-sizing: border-box;
-    border-radius: var(--unit-size);
-    font-size: var(--medium-size);
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
    width: 100%;
 }

 button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    align-self: flex-end;
-    padding: var(--unit-size) var(--small-size);
+    margin-top: var(--unit-size);
 }

-fieldset div:last-child {
-    text-align: end;
-}
+input[type=text],
+input[type=password],
+input[type=email] {
+    margin-top: calc(var(--unit-size) * 0.5);
+    background-color: var(--bg1);
+    color: var(--fg);
+    border-style: none;
+    padding: calc(var(--unit-size) * 0.5);
+    border-radius: calc(var(--unit-size) * 0.5);
+    font-size: var(--unit-size);
+    margin-bottom: var(--unit-size);
+    width: calc(100% - var(--unit-size));
+}
+
+.active {
+    color: var(--fg) !important;
+    font-weight: 700;
+}
+
+input {
+    filter: none;
+}
+
+form input[type="checkbox"] {
+    position: unset !important;
+}
+
+form button[type=submit] {
+    background: var(--bg1);
+    padding: 0.3em 1em;
+    color: var(--fg);
+    border-style: solid;
+    border-color: var(--accent);
+    border-radius: var(--unit-size);
+    border-width: 2px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+}
+
+form button[type=submit]:focus,
+form button[type=submit]:hover {
+    border-radius: var(--unit-size);
+    box-shadow: 0 0 8px var(--accent);
+}
+
+#login-notes {
+    margin: 0;
+}
+
+#login-main {
+    border: 0;
+}
--- a/public/assets/fonts/inter/inter.css
+++ b/public/assets/fonts/inter/inter.css
@ -1,154 +1,163 @@
@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-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:  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-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: 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-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:  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-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: 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-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:  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-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: 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-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:  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-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: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
-       url("Inter-Black.woff?v=3.19") format("woff");
+    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: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+    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");
 }

 /* -------------------------------------------------------
@ -161,20 +170,21 @@ Usage:
  }
 */
@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-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");
+    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");
 }


@ -192,9 +202,9 @@ explicitly, e.g.

 */
@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");
+    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");
 }
--- a/public/assets/fonts/manrope/manrope.css
+++ b/public/assets/fonts/manrope/manrope.css
@ -1,13 +1,13 @@
@font-face {
    font-family: 'Manrope';
-    font-style:  normal;
+    font-style: normal;
    src: url(Manrope-Regular.woff2),
    url(Manrope-Regular.woff);
 }

@font-face {
    font-family: 'Manrope-ExtraBold';
-    font-style:  normal;
+    font-style: normal;
    src: url(Manrope-ExtraBold.woff2),
    url(Manrope-ExtraBold.woff2);
 }
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@ -1,4 +1,5 @@
 <details class="panel" id="left-container">
+
    <summary>{{ icon('menu', 'icon icon-left') | raw }}</summary>
    {% if app.user %}
        <div id='left-panel'>