[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 · b899c9fb2a
commit b899c9fb2a
parent 2084ae350e
18 changed files with 850 additions and 741 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/cover/cover.css
+++ b/public/assets/css/cover/cover.css
@ -1,26 +1,26 @@

-.cover{
+.cover {
    width: 100%;
    height: 100%;
    position: absolute;
-    top:0;
+    top: 0;
    left: 0;
    z-index: -1;
 }

-.cover-img{
+.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

-.no-cover{
+.no-cover {
    width: 100%;
    height: 100%;
    background-color: var(--bg2);
 }

-.profile{
-    position:relative;
+.profile {
+    position: relative;
    background-color: transparent !important;
 }
--- a/public/assets/css/cropperjs/cropper.css
+++ b/public/assets/css/cropperjs/cropper.css
@ -9,27 +9,27 @@
 */

 .cropper-container {
-  direction: ltr;
-  font-size: 0;
-  line-height: 0;
-  position: relative;
-  -ms-touch-action: none;
-  touch-action: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    direction: ltr;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    -ms-touch-action: none;
+    touch-action: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

 .cropper-container img {
-  display: block;
-  height: 100%;
-  image-orientation: 0deg;
-  max-height: none !important;
-  max-width: none !important;
-  min-height: 0 !important;
-  min-width: 0 !important;
-  width: 100%;
+    display: block;
+    height: 100%;
+    image-orientation: 0deg;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
 }

 .cropper-wrap-box,
@ -37,268 +37,268 @@
 .cropper-drag-box,
 .cropper-crop-box,
 .cropper-modal {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
 }

 .cropper-wrap-box,
 .cropper-canvas {
-  overflow: hidden;
+    overflow: hidden;
 }

 .cropper-drag-box {
-  background-color: #fff;
-  opacity: 0;
+    background-color: #fff;
+    opacity: 0;
 }

 .cropper-modal {
-  background-color: #000;
-  opacity: 0.5;
+    background-color: #000;
+    opacity: 0.5;
 }

 .cropper-view-box {
-  display: block;
-  height: 100%;
-  outline: 1px solid #39f;
-  outline-color: rgba(51, 153, 255, 0.75);
-  overflow: hidden;
-  width: 100%;
+    display: block;
+    height: 100%;
+    outline: 1px solid #39f;
+    outline-color: rgba(51, 153, 255, 0.75);
+    overflow: hidden;
+    width: 100%;
 }

 .cropper-dashed {
-  border: 0 dashed #eee;
-  display: block;
-  opacity: 0.5;
-  position: absolute;
+    border: 0 dashed #eee;
+    display: block;
+    opacity: 0.5;
+    position: absolute;
 }

 .cropper-dashed.dashed-h {
-  border-bottom-width: 1px;
-  border-top-width: 1px;
-  height: calc(100% / 3);
-  left: 0;
-  top: calc(100% / 3);
-  width: 100%;
+    border-bottom-width: 1px;
+    border-top-width: 1px;
+    height: calc(100% / 3);
+    left: 0;
+    top: calc(100% / 3);
+    width: 100%;
 }

 .cropper-dashed.dashed-v {
-  border-left-width: 1px;
-  border-right-width: 1px;
-  height: 100%;
-  left: calc(100% / 3);
-  top: 0;
-  width: calc(100% / 3);
+    border-left-width: 1px;
+    border-right-width: 1px;
+    height: 100%;
+    left: calc(100% / 3);
+    top: 0;
+    width: calc(100% / 3);
 }

 .cropper-center {
-  display: block;
-  height: 0;
-  left: 50%;
-  opacity: 0.75;
-  position: absolute;
-  top: 50%;
-  width: 0;
+    display: block;
+    height: 0;
+    left: 50%;
+    opacity: 0.75;
+    position: absolute;
+    top: 50%;
+    width: 0;
 }

 .cropper-center::before,
 .cropper-center::after {
-  background-color: #eee;
-  content: ' ';
-  display: block;
-  position: absolute;
+    background-color: #eee;
+    content: ' ';
+    display: block;
+    position: absolute;
 }

 .cropper-center::before {
-  height: 1px;
-  left: -3px;
-  top: 0;
-  width: 7px;
+    height: 1px;
+    left: -3px;
+    top: 0;
+    width: 7px;
 }

 .cropper-center::after {
-  height: 7px;
-  left: 0;
-  top: -3px;
-  width: 1px;
+    height: 7px;
+    left: 0;
+    top: -3px;
+    width: 1px;
 }

 .cropper-face,
 .cropper-line,
 .cropper-point {
-  display: block;
-  height: 100%;
-  opacity: 0.1;
-  position: absolute;
-  width: 100%;
+    display: block;
+    height: 100%;
+    opacity: 0.1;
+    position: absolute;
+    width: 100%;
 }

 .cropper-face {
-  background-color: #fff;
-  left: 0;
-  top: 0;
+    background-color: #fff;
+    left: 0;
+    top: 0;
 }

 .cropper-line {
-  background-color: #39f;
+    background-color: #39f;
 }

 .cropper-line.line-e {
-  cursor: ew-resize;
-  right: -3px;
-  top: 0;
-  width: 5px;
+    cursor: ew-resize;
+    right: -3px;
+    top: 0;
+    width: 5px;
 }

 .cropper-line.line-n {
-  cursor: ns-resize;
-  height: 5px;
-  left: 0;
-  top: -3px;
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+    top: -3px;
 }

 .cropper-line.line-w {
-  cursor: ew-resize;
-  left: -3px;
-  top: 0;
-  width: 5px;
+    cursor: ew-resize;
+    left: -3px;
+    top: 0;
+    width: 5px;
 }

 .cropper-line.line-s {
-  bottom: -3px;
-  cursor: ns-resize;
-  height: 5px;
-  left: 0;
+    bottom: -3px;
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
 }

 .cropper-point {
-  background-color: #39f;
-  height: 5px;
-  opacity: 0.75;
-  width: 5px;
-}
-
-.cropper-point.point-e {
-  cursor: ew-resize;
-  margin-top: -3px;
-  right: -3px;
-  top: 50%;
-}
-
-.cropper-point.point-n {
-  cursor: ns-resize;
-  left: 50%;
-  margin-left: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-w {
-  cursor: ew-resize;
-  left: -3px;
-  margin-top: -3px;
-  top: 50%;
-}
-
-.cropper-point.point-s {
-  bottom: -3px;
-  cursor: s-resize;
-  left: 50%;
-  margin-left: -3px;
-}
-
-.cropper-point.point-ne {
-  cursor: nesw-resize;
-  right: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-nw {
-  cursor: nwse-resize;
-  left: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-sw {
-  bottom: -3px;
-  cursor: nesw-resize;
-  left: -3px;
-}
-
-.cropper-point.point-se {
-  bottom: -3px;
-  cursor: nwse-resize;
-  height: 20px;
-  opacity: 1;
-  right: -3px;
-  width: 20px;
-}
-
-@media (min-width: 768px) {
-  .cropper-point.point-se {
-    height: 15px;
-    width: 15px;
-  }
-}
-
-@media (min-width: 992px) {
-  .cropper-point.point-se {
-    height: 10px;
-    width: 10px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .cropper-point.point-se {
+    background-color: #39f;
    height: 5px;
    opacity: 0.75;
    width: 5px;
-  }
+}
+
+.cropper-point.point-e {
+    cursor: ew-resize;
+    margin-top: -3px;
+    right: -3px;
+    top: 50%;
+}
+
+.cropper-point.point-n {
+    cursor: ns-resize;
+    left: 50%;
+    margin-left: -3px;
+    top: -3px;
+}
+
+.cropper-point.point-w {
+    cursor: ew-resize;
+    left: -3px;
+    margin-top: -3px;
+    top: 50%;
+}
+
+.cropper-point.point-s {
+    bottom: -3px;
+    cursor: s-resize;
+    left: 50%;
+    margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+    cursor: nesw-resize;
+    right: -3px;
+    top: -3px;
+}
+
+.cropper-point.point-nw {
+    cursor: nwse-resize;
+    left: -3px;
+    top: -3px;
+}
+
+.cropper-point.point-sw {
+    bottom: -3px;
+    cursor: nesw-resize;
+    left: -3px;
+}
+
+.cropper-point.point-se {
+    bottom: -3px;
+    cursor: nwse-resize;
+    height: 20px;
+    opacity: 1;
+    right: -3px;
+    width: 20px;
+}
+
+@media (min-width: 768px) {
+    .cropper-point.point-se {
+        height: 15px;
+        width: 15px;
+    }
+}
+
+@media (min-width: 992px) {
+    .cropper-point.point-se {
+        height: 10px;
+        width: 10px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .cropper-point.point-se {
+        height: 5px;
+        opacity: 0.75;
+        width: 5px;
+    }
 }

 .cropper-point.point-se::before {
-  background-color: #39f;
-  bottom: -50%;
-  content: ' ';
-  display: block;
-  height: 200%;
-  opacity: 0;
-  position: absolute;
-  right: -50%;
-  width: 200%;
+    background-color: #39f;
+    bottom: -50%;
+    content: ' ';
+    display: block;
+    height: 200%;
+    opacity: 0;
+    position: absolute;
+    right: -50%;
+    width: 200%;
 }

 .cropper-invisible {
-  opacity: 0;
+    opacity: 0;
 }

 .cropper-bg {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
 }

 .cropper-hide {
-  display: block;
-  height: 0;
-  position: absolute;
-  width: 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    width: 0;
 }

 .cropper-hidden {
-  display: none !important;
+    display: none !important;
 }

 .cropper-move {
-  cursor: move;
+    cursor: move;
 }

 .cropper-crop {
-  cursor: crosshair;
+    cursor: crosshair;
 }

 .cropper-disabled .cropper-drag-box,
 .cropper-disabled .cropper-face,
 .cropper-disabled .cropper-line,
 .cropper-disabled .cropper-point {
-  cursor: not-allowed;
+    cursor: not-allowed;
 }
--- 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/doc/doc.css
+++ b/public/assets/css/doc/doc.css
@ -1,86 +1,89 @@
 .content {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: calc(4 * var(--main-size));
-      justify-content: center;
-      align-items: center;
-      margin-left: calc(var(--nav-size) + var(--unit-size));
-      margin-right: calc(var(--nav-size) + var(--unit-size));
-      margin-bottom: var(--unit-size);
-      border: solid 2px var(--accent-low);
-      border-radius: var(--small-size);
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(4 * var(--main-size));
+    justify-content: center;
+    align-items: center;
+    margin-left: calc(var(--nav-size) + var(--unit-size));
+    margin-right: calc(var(--nav-size) + var(--unit-size));
+    margin-bottom: var(--unit-size);
+    border: solid 2px var(--accent-low);
+    border-radius: var(--small-size);
 }

 .faq-nav {
-      order: 1;
-      display: flex;
-      justify-content: space-evenly;
-      flex-wrap: wrap;
-      flex: 1;
-      background-color: var(--bg1);
-      padding: var(--medium-size);
-      font-size: var(--medium-size);
-      font-family: var(--head-font);
-      border-radius: var(--small-size) var(--small-size) 0 0;
+    order: 1;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex: 1;
+    background-color: var(--bg1);
+    padding: var(--medium-size);
+    font-size: var(--medium-size);
+    font-family: var(--head-font);
+    border-radius: var(--small-size) var(--small-size) 0 0;
 }

 .faq-nav ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: calc(2 * var(--side-margin));
-      margin-right: calc(2 * var(--side-margin));
-      padding: 0;
+    display: flex;
+    align-items: stretch;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-left: calc(2 * var(--side-margin));
+    margin-right: calc(2 * var(--side-margin));
+    padding: 0;
 }

 .faq-nav li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+    font-weight: 700;
 }

 .active {
-      color: #F6F6F6 !important;
-      font-weight: 700;
+    color: #F6F6F6 !important;
+    font-weight: 700;
 }

 .faq-nav a {
-      color: #91B9D0;
+    color: #91B9D0;
 }
+
 .faq-nav a:hover {
-      color: #F6F6F6;
-      transition: all 0.8s ease;
+    color: #F6F6F6;
+    transition: all 0.8s ease;
 }
+
 .faq-nav a:focus {
-      color: #F6F6F6;
-      transition: all 0.8s ease;
+    color: #F6F6F6;
+    transition: all 0.8s ease;
 }

 .markd {
-      order: 2;
-      background-color: var(--bg2);
-      font-size: var(--medium-size);
-      padding: calc(3*var(--unit-size));
-      padding-top: var(--unit-size);
-      border-radius: 0 0 var(--small-size) var(--small-size);
+    order: 2;
+    background-color: var(--bg2);
+    font-size: var(--medium-size);
+    padding: calc(3 * var(--unit-size));
+    padding-top: var(--unit-size);
+    border-radius: 0 0 var(--small-size) var(--small-size);
 }
+
 .markd-single {
-      border-radius: var(--small-size) !important;
+    border-radius: var(--small-size) !important;
 }

 .markd h2 {
-      margin-top: var(--unit-size);
+    margin-top: var(--unit-size);
 }

 .markd p {
-      margin-top: var(--unit-size);
-      margin-left: calc(0.5 * var(--unit-size));
+    margin-top: var(--unit-size);
+    margin-left: calc(0.5 * var(--unit-size));
 }

 .markd ul {
-      list-style-type: disc;
-      margin-left: calc(2 * var(--unit-size));
-      margin-top: var(--unit-size);
+    list-style-type: disc;
+    margin-left: calc(2 * var(--unit-size));
+    margin-top: var(--unit-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/poll/poll.css
+++ b/public/assets/css/poll/poll.css
@ -1,36 +1,36 @@
-.poll .poll-question{
+.poll .poll-question {
    font-weight: 700;
 }

-.poll #pollresponse_Options{
-    display:flex;
+.poll #pollresponse_Options {
+    display: flex;
    flex-direction: column;
 }

-#pollresponse > * > label{
-    vertical-align:top;
+#pollresponse > * > label {
+    vertical-align: top;
    display: none;
 }


-.poll .form-single ,
-.create-poll-notice .form-single{
+.poll .form-single,
+.create-poll-notice .form-single {
    height: 100%;
    width: 100%;
    border-radius: var(--small-size);
 }

-.poll .result{
-    display:flex;
-    padding-top: var(--unit-size) ;
+.poll .result {
+    display: flex;
+    padding-top: var(--unit-size);
 }

-.poll .result-vote{
+.poll .result-vote {
    font-weight: 650;
    padding-left: var(--unit-size);
 }

-.create-poll-notice{
+.create-poll-notice {
    padding: var(--unit-size);
    width: 100%;
 }
@ -40,27 +40,26 @@
    color: var(--fg);
 }

-#post_poll_visibility > *{
+#post_poll_visibility > * {
    padding-right: var(--unit-size);
 }


-#post_poll > *{
+#post_poll > * {
    padding: calc(var(--unit-size) * 0.2);
 }


-
 /* FORMS ------------------------------*/
 .poll label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
-    padding: 0.5em  0.1em;
+    padding: 0.5em 0.1em;
 }

 .poll input[type=text],
-.create-poll-notice input[type=text]{
+.create-poll-notice input[type=text] {
    margin-top: calc(var(--unit-size) * 0.5);
    width: calc(100% - var(--unit-size));
    background-color: var(--bg2);
@ -74,8 +73,8 @@
 }


-.poll button[type=submit] ,
-.create-poll-notice button[type=submit]{
+.poll button[type=submit],
+.create-poll-notice button[type=submit] {
    background: var(--bg1);
    padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
    color: var(--fg);
--- a/public/assets/css/profilecolor/profilecolor.css
+++ b/public/assets/css/profilecolor/profilecolor.css
@ -1,13 +1,13 @@
-.pcolor{
+.pcolor {
    width: 100%;
    height: 100%;
    position: absolute;
-    top:0;
+    top: 0;
    left: 0;
    z-index: -1;
 }

-.profile-color{
+.profile-color {
    width: 100%;
    height: 100%;
    background-color: transparent;
--- a/public/assets/css/replies/replies.css
+++ b/public/assets/css/replies/replies.css
@ -1,22 +1,27 @@
 .main {
-      font-size: var(--medium-size);
-      border: none !important;
+    font-size: var(--medium-size);
+    border: none !important;
 }
+
 .note {
-      margin-bottom: 0 !important;
+    margin-bottom: 0 !important;
 }
+
 #save {
-      display: flex;
+    display: flex;
 }
+
 #save div:nth-of-type(1) {
-      padding: var(--unit-size);
+    padding: var(--unit-size);
 }
+
 #save div:nth-of-type(1) textarea {
-      padding: var(--unit-size);
-      border-radius: var(--unit-size);
-      background-color: var(--bg1);
-      font-size: var(--unit-size);
-      width: 100%;
-      box-sizing: border-box;
+    padding: var(--unit-size);
+    border-radius: var(--unit-size);
+    background-color: var(--bg1);
+    font-size: var(--unit-size);
+    width: 100%;
+    box-sizing: border-box;
 }
+
 #save div:nth-of-type(2)
--- 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
@ -8,6 +8,7 @@
    margin-right: 1%;
    margin-bottom: 1%;
 }
+
 form {
    font-size: var(--medium-size);
    background-color: var(--bg2);
@ -15,18 +16,20 @@ form {
    border-radius: var(--unit-size);
    border: solid 2px var(--accent-low);
 }
+
 label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    width: 100%;
 }
+
 button {
    margin-top: var(--unit-size);
 }
+
 input[type=text],
 input[type=password],
-input[type=email]
-{
+input[type=email] {
    margin-top: calc(var(--unit-size) * 0.5);
    background-color: var(--bg1);
    color: var(--fg);
@ -37,16 +40,20 @@ input[type=email]
    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;
@ -58,6 +65,7 @@ form button[type=submit] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
 }
+
 form button[type=submit]:focus,
 form button[type=submit]:hover {
    border-radius: var(--unit-size);
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@ -1,294 +1,307 @@
 .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);
+    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);
 }

 .main {
-      width: 100%;
-      margin-left: var(--unit-size);
-      margin-right: var(--unit-size);
-      box-shadow: var(--shadow);
-      border-radius: var(--small-size);
-      border: solid 2px var(--accent-low);
-      background-color: var(--bg3);
+    width: 100%;
+    margin-left: var(--unit-size);
+    margin-right: var(--unit-size);
+    box-shadow: var(--shadow);
+    border-radius: var(--small-size);
+    border: solid 2px var(--accent-low);
+    background-color: var(--bg3);
 }

 .set-nav {
-      order: 1;
-      display: flex;
-      justify-content: space-evenly;
-      flex-wrap: wrap;
-      flex: 1;
-      background-color: var(--bg1);
-      padding: var(--medium-size);
-      font-size: var(--medium-size);
-      font-family: var(--head-font);
-      border-radius: var(--small-size) var(--small-size) 0 0;
+    order: 1;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex: 1;
+    background-color: var(--bg1);
+    padding: var(--medium-size);
+    font-size: var(--medium-size);
+    font-family: var(--head-font);
+    border-radius: var(--small-size) var(--small-size) 0 0;
 }

 .set-nav ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: calc(2 * var(--side-margin));
-      margin-right: calc(2 * var(--side-margin));
-      padding: 0;
+    display: flex;
+    align-items: stretch;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-left: calc(2 * var(--side-margin));
+    margin-right: calc(2 * var(--side-margin));
+    padding: 0;
 }

 .set-nav li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+    font-weight: 700;
 }

 .set-nav a {
-      color: var(--accent);
+    color: var(--accent);
 }

 .set-nav a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
+    color: var(--fg);
+    transition: all 0.8s ease;
 }

 .active {
-      color: var(--fg) !important;
-      font-weight: 700;
+    color: var(--fg) !important;
+    font-weight: 700;
 }

 .secondary {
-      display: flex;
-      flex-wrap: wrap;
-      background-color: var(--bg3);
-      margin: var(--unit-size);
-      border: solid 2px var(--accent-low);
-      border-radius: var(--small-size);
-      box-shadow: var(--shadow);
+    display: flex;
+    flex-wrap: wrap;
+    background-color: var(--bg3);
+    margin: var(--unit-size);
+    border: solid 2px var(--accent-low);
+    border-radius: var(--small-size);
+    box-shadow: var(--shadow);
 }

 .form {
-      order: 3;
-      padding: calc(2*var(--unit-size));
-      height: 100%;
-      width: 100%;
-      border-radius: 0 0 var(--small-size) var(--small-size);
+    order: 3;
+    padding: calc(2 * var(--unit-size));
+    height: 100%;
+    width: 100%;
+    border-radius: 0 0 var(--small-size) var(--small-size);
 }
+
 .form-single {
-      order: 2;
-      padding: calc(2*var(--unit-size));
-      height: 100%;
-      width: 100%;
-      border-radius: var(--small-size);
+    order: 2;
+    padding: calc(2 * var(--unit-size));
+    height: 100%;
+    width: 100%;
+    border-radius: var(--small-size);
 }
+
 .form label,
 .form-single label {
-      font-size: var(--medium-size);
+    font-size: var(--medium-size);
 }

 /* FORMS ------------------------------*/
 label {
-      display: inline-block;
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 700;
-      width: 100%;
+    display: inline-block;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+    width: 100%;
 }

 input[type=text] {
-      margin-top: calc(var(--unit-size) * 0.5);
-      width: calc(100% - var(--unit-size));
-      background-color: var(--bg2);
-      box-shadow: var(--shadow);
-      border: solid 2px var(--accent-low);
-      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-      color: var(--fg);
-      border-radius: calc(var(--unit-size) * 0.5);
-      font-size: var(--medium-size);
+    margin-top: calc(var(--unit-size) * 0.5);
+    width: calc(100% - var(--unit-size));
+    background-color: var(--bg2);
+    box-shadow: var(--shadow);
+    border: solid 2px var(--accent-low);
+    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    color: var(--fg);
+    border-radius: calc(var(--unit-size) * 0.5);
+    font-size: var(--medium-size);
 }

 .form input[type=checkbox] {
-      float: left;
-      margin-right: calc(var(--unit-size) * 0.5);
-      margin-top: calc(var(--unit-size) * 0.2);
+    float: left;
+    margin-right: calc(var(--unit-size) * 0.5);
+    margin-top: calc(var(--unit-size) * 0.2);
 }

 button[type=submit] {
-      background: var(--bg1);
-      padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
-      color: var(--fg);
-      border-style: solid;
-      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;
+    background: var(--bg1);
+    padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
+    color: var(--fg);
+    border-style: solid;
+    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;
 }

 #save_bio {
-      margin-top: calc(var(--unit-size) * 0.5);
-      width: calc(100% - var(--unit-size));
-      height: calc(10 * var(--unit-size));
-      box-shadow: var(--shadow);
-      background-color: var(--bg2);
-      border: solid 2px var(--accent-low);
-      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-      color: var(--fg);
-      border-radius: calc(var(--unit-size) * 0.5);
-      font-size: var(--medium-size);
-      word-wrap: break-word;
-      resize: vertical;
+    margin-top: calc(var(--unit-size) * 0.5);
+    width: calc(100% - var(--unit-size));
+    height: calc(10 * var(--unit-size));
+    box-shadow: var(--shadow);
+    background-color: var(--bg2);
+    border: solid 2px var(--accent-low);
+    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    color: var(--fg);
+    border-radius: calc(var(--unit-size) * 0.5);
+    font-size: var(--medium-size);
+    word-wrap: break-word;
+    resize: vertical;
 }

 #save_phone_number {
-      margin-top: calc(var(--unit-size) * 0.5);
-      width: calc(100% - var(--unit-size));
-      background-color: var(--bg2);
-      box-shadow: var(--shadow);
-      border: solid 2px var(--accent-low);
-      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-      color: var(--fg);
-      border-radius: calc(var(--unit-size) * 0.5);
-      font-size: var(--medium-size);
+    margin-top: calc(var(--unit-size) * 0.5);
+    width: calc(100% - var(--unit-size));
+    background-color: var(--bg2);
+    box-shadow: var(--shadow);
+    border: solid 2px var(--accent-low);
+    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    color: var(--fg);
+    border-radius: calc(var(--unit-size) * 0.5);
+    font-size: var(--medium-size);
 }

-#save_language{
-      margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg2);
-      box-shadow: var(--shadow);
-      border: solid 2px var(--accent-low);
-      padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-      color: var(--fg);
-      border-radius: calc(var(--unit-size) * 0.5);
-      font-size: var(--medium-size);
+#save_language {
+    margin-top: calc(var(--unit-size) * 0.5);
+    background-color: var(--bg2);
+    box-shadow: var(--shadow);
+    border: solid 2px var(--accent-low);
+    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    color: var(--fg);
+    border-radius: calc(var(--unit-size) * 0.5);
+    font-size: var(--medium-size);
 }
+
 select {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background-image: url("../../icons/drop.svg");
-      background-size: var(--main-size);
-      background-position: 95% 50%;
-      background-repeat: no-repeat;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("../../icons/drop.svg");
+    background-size: var(--main-size);
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
 }

 .help-text {
-      font-size: var(--medium-size);
-      font-style: italic;
-      color: var(--fg);
-      margin-bottom: var(--unit-size);
+    font-size: var(--medium-size);
+    font-style: italic;
+    color: var(--fg);
+    margin-bottom: var(--unit-size);
 }

 .form-single input[type=checkbox] {
-      margin-left: var(--unit-size);
+    margin-left: var(--unit-size);
 }

 /* JS CROPPING */
 #img-cropped {
-      display: block;
-      max-width: 100%;
+    display: block;
+    max-width: 100%;
 }
+
 #img-container {
-      margin: var(--main-size) auto;
-      max-width: 60%;
+    margin: var(--main-size) auto;
+    max-width: 60%;
 }
+
 .cropper-view-box,
 .cropper-face {
-      border-radius: 50%;
+    border-radius: 50%;
 }

 /* NOTIFICATIONS TABS */
 /* visual feedback */
 ul input[type=radio] + label {
-      color: var(--accent);
+    color: var(--accent);
 }
+
 ul input[type=radio]:checked + label {
-      color: var(--fg);
+    color: var(--fg);
 }
+
 ul input[type=radio]:focus + label {
-      color: var(--fg);
+    color: var(--fg);
 }

 /* show/hide each tab */
 ul input[type=radio]:not(:checked) + label + div {
-      display: none;
+    display: none;
 }
+
 ul input[type=radio]:checked + label + div {
-      display: flex;
+    display: flex;
 }

 /* hide radio buttons */
 input[type=radio] {
-      position: absolute;
-      z-index: 1;
-      height: 1px;
-      width: 1px;
-      overflow: hidden;
-      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-      clip: rect(1px, 1px, 1px, 1px);
+    position: absolute;
+    z-index: 1;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
 }

 #form-tabs {
-      order: 2;
-      width: 100%;
-      font-size: var(--medium-size);
+    order: 2;
+    width: 100%;
+    font-size: var(--medium-size);
 }
+
 #form-tabs ul {
-      display: flex;
-      flex-wrap: wrap;
-      border-radius: 0 0 var(--unit-size) var(--unit-size);
-      background-color: var(--bg1);
-      justify-content: space-evenly;
-      width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    background-color: var(--bg1);
+    justify-content: space-evenly;
+    width: 100%;
 }
+
 #form-tabs ul label {
-      order: 1;
-      flex: 0;
+    order: 1;
+    flex: 0;
 }

 #tabs {
-      padding: var(--medium-size);
-      text-transform: capitalize;
+    padding: var(--medium-size);
+    text-transform: capitalize;
 }

 #form-tabs ul .form {
-      order: 2;
-      padding: calc(2*var(--unit-size));
-      background-color: var(--bg3) !important;
-      height: 100%;
-      margin-left: 0;
-      margin-right: 0;
-      margin-top: 0;
-      box-shadow: none;
-      border-radius: 0 0 var(--unit-size) var(--unit-size);
-      font-size: var(--unit-size);
+    order: 2;
+    padding: calc(2 * var(--unit-size));
+    background-color: var(--bg3) !important;
+    height: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    box-shadow: none;
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    font-size: var(--unit-size);
 }
-#form-tabs ul .form form{
-      width: 100%;
+
+#form-tabs ul .form form {
+    width: 100%;
 }
+
 #form-tabs ul .form form div label {
-      margin-bottom: calc(var(--unit-size) * 0.5);
+    margin-bottom: calc(var(--unit-size) * 0.5);
 }

 .secondary button[type=submit] {
-      background: var(--bg1);
-      padding: 0.6em 1.2em;
-      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;
+    background: var(--bg1);
+    padding: 0.6em 1.2em;
+    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;
 }
+
 .secondary button[type=submit]:focus,
 .secondary button[type=submit]:hover {
-      border-radius: var(--unit-size);
-      box-shadow: 0 0 8px var(--accent);
+    border-radius: var(--unit-size);
+    box-shadow: 0 0 8px var(--accent);
 }
--- 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'>