[CSS] Complete re-organization of stylesheets.

public/assets/css/cropperjs/cropper.css

@@ -1,304 +0,0 @@
-/*!
- * Cropper.js v1.5.11
- * https://fengyuanchen.github.io/cropperjs
- *
- * Copyright 2015-present Chen Fengyuan
- * Released under the MIT license
- *
- * Date: 2021-02-17T11:53:21.992Z
- */
-
-.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;
-}
-
-.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%;
-}
-
-.cropper-wrap-box,
-.cropper-canvas,
-.cropper-drag-box,
-.cropper-crop-box,
-.cropper-modal {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.cropper-wrap-box,
-.cropper-canvas {
-    overflow: hidden;
-}
-
-.cropper-drag-box {
-    background-color: #fff;
-    opacity: 0;
-}
-
-.cropper-modal {
-    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%;
-}
-
-.cropper-dashed {
-    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%;
-}
-
-.cropper-dashed.dashed-v {
-    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;
-}
-
-.cropper-center::before,
-.cropper-center::after {
-    background-color: #eee;
-    content: ' ';
-    display: block;
-    position: absolute;
-}
-
-.cropper-center::before {
-    height: 1px;
-    left: -3px;
-    top: 0;
-    width: 7px;
-}
-
-.cropper-center::after {
-    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%;
-}
-
-.cropper-face {
-    background-color: #fff;
-    left: 0;
-    top: 0;
-}
-
-.cropper-line {
-    background-color: #39f;
-}
-
-.cropper-line.line-e {
-    cursor: ew-resize;
-    right: -3px;
-    top: 0;
-    width: 5px;
-}
-
-.cropper-line.line-n {
-    cursor: ns-resize;
-    height: 5px;
-    left: 0;
-    top: -3px;
-}
-
-.cropper-line.line-w {
-    cursor: ew-resize;
-    left: -3px;
-    top: 0;
-    width: 5px;
-}
-
-.cropper-line.line-s {
-    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 {
-        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%;
-}
-
-.cropper-invisible {
-    opacity: 0;
-}
-
-.cropper-bg {
-    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;
-}
-
-.cropper-hidden {
-    display: none !important;
-}
-
-.cropper-move {
-    cursor: move;
-}
-
-.cropper-crop {
-    cursor: crosshair;
-}
-
-.cropper-disabled .cropper-drag-box,
-.cropper-disabled .cropper-face,
-.cropper-disabled .cropper-line,
-.cropper-disabled .cropper-point {
-    cursor: not-allowed;
-}

public/assets/css/network/simple_stream.css

@@ -1,8 +0,0 @@
-.simple-stream .nav-content {
-    border: none;
-    box-shadow: none;
-}
-
-.simple-stream .main-nav li {
-    width: auto;
-}

public/assets/css/base.css → public/assets/default_theme/css/core/base.css

@@ -1,15 +1,11 @@
-@import url("../fonts/poppins/poppins.css");
-@import url("../fonts/opensans/opensans.css");
+@import url("../widgets/buttons.css");
+@import url("../widgets/sections.css");
 
-html {
-    scroll-margin-top: 3rem;
-}
+@import url("../../fonts/poppins/poppins.css");
+@import url("../../fonts/opensans/opensans.css");
 
-*:focus {
-    -webkit-box-shadow: inset 0 0 0 3px var(--bg3);
-    -moz-box-shadow: inset 0 0 0 3px var(--bg3);
-    box-shadow: inset 0 0 0 3px var(--bg3);
-}
+@import url("feed.css");
+@import url("settings.css");
 
 :root {
     /* FONTS */
@@ -26,8 +22,6 @@ html {
     --main-size: 1.62rem;
     --medium-size: 1.3rem;
     --small-size: 1rem;
-    --smaller-size: 0.8rem;
-
 
     /* transitions and animations */
     --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
@@ -52,7 +46,7 @@ html {
 
     .bg {
         background-color: var(--bg1);
-        background-image: url("../images/bg.png");
+        background-image: url("../../images/background_dark.png");
     }
 
     body:after {
@@ -70,7 +64,7 @@ html {
     }
 
     select {
-        background-image: url("../images/drop.png") !important;
+        background-image: url("../../images/select_drop_dark.png") !important;
     }
 }
 
@@ -91,68 +85,41 @@ html {
 
     .bg {
         background-color: var(--bg1);
-        background-image: url(../images/bg-light.png);
+        background-image: url(../../images/background_light.png);
     }
 
     select {
-        background-image: url("../images/drop-light.png") !important;
+        background-image: url("../../images/select_drop_light.png") !important;
     }
 }
 
-.bg {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-}
 
-a,
-a:visited {
-    text-decoration: none;
-    color: var(--white);
-}
-
-a:hover {
-    text-decoration: underline;
-    color: var(--white);
-}
-
-figcaption a:link {
-    font-size: var(--smaller-size);
-    color: var(--white);
-}
-
-hr {
-    all: unset;
-    display: block;
-    height: 1px;
-    background: var(--bg2);
-}
-
-
-/* CHECKERBOARD BACKGROUND FOR TRANSPARENT IMAGES */
-.h-entry img {
-    background: repeating-conic-gradient(
-            #ffffff66 0deg 90deg,
-            #ffffff33 0deg 180deg) 0 0/40px 40px round;
-}
-
-.icon {
-    fill: var(--white);
-    align-self: center;
+html {
+    scroll-margin-top: 3rem;
 }
 
-.active {
-    font-weight: bold;
+*:focus {
+    -webkit-box-shadow: inset 0 0 0 3px var(--bg3);
+    -moz-box-shadow: inset 0 0 0 3px var(--bg3);
+    box-shadow: inset 0 0 0 3px var(--bg3);
 }
 
-/* ACCESSIBILITY MENU */
-.anchor-hidden {
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+.bg {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 }
 
-#accessibility-menu {
+a,
+a:visited {text-decoration: none;color: var(--white);}
+a:hover {text-decoration: underline;color: var(--white);}
+hr {all: unset;display: block;height: 1px;background: var(--bg2);}
+.h-entry img {background: repeating-conic-gradient(#ffffff66 0deg 90deg,#ffffff33 0deg 180deg) 0 0/40px 40px round;}
+.icon {fill: var(--white);align-self: center;}
+.active {font-weight: bold;}
+.anchor-hidden {width: 1px;height: 1px;overflow: hidden;}
+
+.accessibility-menu {
     display: block;
     position: absolute;
     z-index: 999;
@@ -171,18 +138,18 @@ hr {
     box-shadow: var(--shadow);
 }
 
-#accessibility-menu ul {
+.accessibility-menu ul {
     list-style-type: disc;
     margin-left: var(--medium-size);
 }
 
-#accessibility-menu:focus-within:not(:active) {
+.accessibility-menu:focus-within:not(:active) {
     top: var(--unit-size);
     left: var(--unit-size);
 }
 
 /* HEADER AND INSTANCE NAME */
-#header {
+header {
     z-index: 1;
     font-family: var(--display-font);
     font-size: var(--main-size);
@@ -200,7 +167,7 @@ hr {
     box-shadow: var(--shadow);
 }
 
-#instance {
+.header-instance {
     display: flex;
     align-items: center;
 
@@ -208,12 +175,12 @@ hr {
     margin-right: auto;
 }
 
-#instance > * {
+.header-instance > * {
     margin: unset;
 }
 
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
-.container {
+.content-wrapper {
     position: relative;
 
     margin-left: auto;
@@ -263,7 +230,7 @@ hr {
     font-size: var(--main-size);
 }
 
-/* NOTES */
+/* REPLY PAGE */
 #replyform {
     padding: var(--unit-size);
     margin-top: var(--unit-size);
@@ -281,365 +248,8 @@ hr {
     padding: var(--unit-size);
 }
 
-.notes hr {
-    margin-top: 6px;
-}
-
-.note-wrapper {
-    width: 100%;
-    height: inherit;
-}
-
-.note-sidebar {
-    padding: var(--unit-size);
-}
-
-.note-sidebar * {
-    display: flex;
-    flex-direction: column;
-    margin-left: auto;
-    margin-right: auto;
-    max-height: 100%;
-}
-
-.note-sidebar .avatar {
-    width: 3rem;
-    height: auto;
-    background: unset;
-    margin-bottom: var(--unit-size);
-    border-radius: 2px;
-}
-
-.h-entry:not(:first-child) {
-    margin-top: var(--unit-size);
-}
-
-.h-entry .embed {
-    display: flex;
-    flex-direction: column;
-    padding: var(--smaller-size);
-    border: unset;
-    width: max-content;
-}
-
-.h-entry .embed[class*="p-"] {
-    padding: unset !important;
-}
-
-.h-entry a:focus {
-    text-decoration: underline;
-}
-
-.h-entry .embed header img {
-    padding: unset;
-    max-width: min-content;
-    max-height: min-content;
-}
-
-.h-entry {
-    display: flex;
-    background-color: var(--translucent);
-    border-radius: var(--unit-size);
-    border: solid 2px var(--bg2);
-    box-shadow: var(--shadow);
-}
-
-.h-entry figure {
-    margin: unset;
-    object-fit: cover;
-}
-
-.h-entry .replies .h-entry {
-    background-color: unset;
-    padding: 0 var(--unit-size) var(--unit-size) 0;
-    margin-left: var(--medium-size);
-}
-
-.note-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-height: 3rem;
-
-    border-bottom: unset;
-    border-radius: var(--unit-size) var(--unit-size) 0 0;
-
-    background: linear-gradient(to left, var(--translucent), transparent);
-    font-size: var(--medium-size);
-    padding: 6px 10px 6px 0;
-}
-
-.note-author {
-    font-size: var(--small-size);
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    align-self: center;
-}
-
-.note-actions {
-    display: flex;
-    vertical-align: middle;
-}
-
-.note-actions .form-group {
-    all: unset;
-}
-
-.button-container {
-    all: unset;
-    border: none !important;
-
-    background-repeat: no-repeat !important;
-
-    width: 1em !important;
-    height: 1em !important;
-
-    margin-left: var(--unit-size);
-    text-indent: -9999em;
-}
-
-.button-container:hover,
-.button-container:focus {
-    border: none !important;
-    background: var(--bg3) !important;
-}
-
-.favourite-button-container {
-    -webkit-mask-image: url("../icons/heart.svg") !important;
-    -o-mask-image: url("../icons/heart.svg") !important;
-    -moz-mask-image: url("../icons/heart.svg") !important;
-    mask-image: url("../icons/heart.svg") !important;
-}
-
-.reply-button-container {
-    -webkit-mask-image: url("../icons/reply.svg") !important;
-    -o-mask-image: url("../icons/reply.svg") !important;
-    -moz-mask-image: url("../icons/reply.svg") !important;
-    mask-image: url("../icons/reply.svg") !important;
-}
-
-.repeat-button-container {
-    -webkit-mask-image: url("../icons/repeat.svg") !important;
-    -o-mask-image: url("../icons/repeat.svg") !important;
-    -moz-mask-image: url("../icons/repeat.svg") !important;
-    mask-image: url("../icons/repeat.svg") !important;
-}
-
-.note-actions-unset {
-    background: var(--bg2) !important;
-}
-
-.note-actions-set {
-    background: var(--white) !important;
-}
-
-.note-content {
-    display: flex;
-    flex-direction: column;
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    padding: var(--small-size);
-}
-
-.note-text {
-    margin-bottom: var(--unit-size);
-}
-
-.section-attachments {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: max-content;
-
-    border-radius: var(--unit-size);
-    background-color: var(--translucent);
-    padding: var(--smaller-size);
-
-    align-self: flex-start;
-}
-
-.note-attachments:not(:only-child) {
-    margin-right: var(--unit-size);
-}
-
-.note-attachments > figure figcaption {
-    display: flex;
-    word-break: break-all;
-    margin-bottom: var(--unit-size);
-}
-
-/* SECTIONS */
-.section-widget {
-    display: flex;
-    flex-direction: column;
-
-    background-color: var(--translucent);
-    border-radius: var(--unit-size);
-    border: solid 2px var(--bg2);
-    margin-bottom: var(--medium-size);
-
-    box-shadow: var(--shadow);
-    color: var(--white);
-}
-
-.section-widget hr {
-    margin-bottom: var(--unit-size);
-}
-
-.section-widget-padded {
-    padding: var(--unit-size);
-}
-
-.section-title {
-    font-size: var(--medium-size);
-    font-weight: 700;
-    margin: 0;
-}
-
-.section-widget-button-like {
-    border: 2px solid var(--bg2);
-    border-radius: var(--unit-size);
-    background: var(--bg-button);
-    padding: 6px 10px;
-    margin-top: 6px;
-
-    cursor: pointer;
-    float: right;
-    align-self: end;
-
-    font-family: var(--main-font);
-    font-weight: 700;
-}
-
-.section-title-details {
-    font-size: var(--medium-size);
-    font-weight: 700;
-
-    border-radius: var(--unit-size);
-    padding: 6px 10px 6px 10px;
-
-    background-color: var(--translucent);
-    box-shadow: var(--shadow);
-}
-
-.section-title-details[open] svg {
-    transform: rotate(180deg);
-    animation: var(--fade-out)
-}
-
-/* SECTION DETAILS CLOSED */
-.section-title-details:not([open]) svg {
-    transform: initial;
-    animation: var(--fade-in);
-}
-
-.section-title-summary {
-    display: flex;
-    justify-content: space-between;
-}
-
-.section-form {
-    display: flex;
-    flex-direction: column;
-    padding: var(--unit-size);
-}
-
-.section-form-legend {
-    margin-top: unset;
-    margin-bottom: 10px;
-
-    font-weight: bold;
-    font-size: var(--main-size);
-}
-
-.form-group {
-    all: unset;
-
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 6px;
-}
-
-.form-group textarea {
-    height: 7rem;
-    max-height: 100%;
-}
-
-.help-block {
-    margin-bottom: 6px;
-}
-
-.help-text {
-    font-style: italic;
-    font-size: var(--small-size);
-    margin-bottom: 6px;
-}
-
-.help-block > .list-unstyled,
-.alert,
-.alert-danger {
-    display: inline-block;
-
-    border: solid 2px #FF6347;
-    background-color: #FF634733;
-    border-radius: var(--unit-size);
-
-    padding: 2px 6px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-}
-
-/* PROFILE */
-.profile {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-
-    font-family: var(--main-font);
-    background-color: var(--translucent);
-    margin-bottom: var(--unit-size);
-    border-radius: var(--unit-size);
-    padding: var(--unit-size);
-    box-shadow: var(--shadow);
-}
-
-.profile *[class*="profile-info-"] {
-    flex: 1;
-    mix-blend-mode: difference;
-}
-
-.profile-info {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-}
-
-.profile-info-nickname {
-    font-size: var(--medium-size);
-}
-
-.profile-info-tags {
-    margin: unset;
-}
-
-.profile-info-stats strong {
-    margin-right: 5px;
-}
-
-.profile-info-stats {
-    margin-top: var(--unit-size);
-}
-
-.profile-avatar {
-    max-width: 4rem;
-    min-width: 3rem;
-    width: 100%;
-    height: auto;
-    margin-right: 5px;
-    border-radius: 2px;
-}
-
 /* MEDIA QUERIES */
-.container {
+.content-wrapper {
     top: 3rem;
     width: 62vw;
 }
@@ -686,7 +296,7 @@ and (min-width: 1281px) {
 @media only screen
 and (max-width: 1280px) {
     /* content should occupy the entire width at this size */
-    .container {
+    .content-wrapper {
         width: 100%;
     }
 
@@ -714,14 +324,14 @@ and (max-width: 1280px) {
         #panel-left-toggle:checked ~ .panel-content,
         #panel-right-toggle:checked ~ .panel-content,
         a[id|="anchor"]:target ~ .panel-content {
-            background-image: url(../images/bg.png);
+            background-image: url(../../images/background_dark.png);
         }
     }
     @media (prefers-color-scheme: light) {
         #panel-left-toggle:checked ~ .panel-content,
         #panel-right-toggle:checked ~ .panel-content,
         a[id|="anchor"]:target ~ .panel-content {
-            background-image: url(../images/bg-light.png);
+            background-image: url(../../images/background_light.png);
         }
     }
 }

public/assets/default_theme/css/core/feed.css

@@ -0,0 +1,235 @@
+.notes hr {
+    margin-top: 6px;
+}
+
+.note-wrapper {
+    width: 100%;
+    height: inherit;
+}
+
+.note-sidebar {
+    padding: var(--unit-size);
+}
+
+.note-sidebar * {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+}
+
+.note-sidebar .avatar {
+    width: 3rem;
+    height: auto;
+    background: unset;
+    margin-bottom: var(--unit-size);
+    border-radius: 2px;
+}
+
+.h-entry:not(:first-child) {
+    margin-top: var(--unit-size);
+}
+
+.h-entry .embed {
+    display: flex;
+    flex-direction: column;
+    padding: var(--smaller-size);
+    border: unset;
+    width: max-content;
+}
+
+.h-entry .embed[class*="p-"] {
+    padding: unset !important;
+}
+
+.h-entry a:focus {
+    text-decoration: underline;
+}
+
+.h-entry .embed header img {
+    padding: unset;
+    max-width: min-content;
+    max-height: min-content;
+}
+
+.h-entry {
+    display: flex;
+    background-color: var(--translucent);
+    border-radius: var(--unit-size);
+    border: solid 2px var(--bg2);
+    box-shadow: var(--shadow);
+}
+
+.h-entry figure {
+    margin: unset;
+    object-fit: cover;
+}
+
+.h-entry .replies .h-entry {
+    background-color: unset;
+    padding: 0 var(--unit-size) var(--unit-size) 0;
+    margin-left: var(--medium-size);
+}
+
+.note-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-height: 3rem;
+
+    border-bottom: unset;
+    border-radius: var(--unit-size) var(--unit-size) 0 0;
+
+    background: linear-gradient(to left, var(--translucent), transparent);
+    font-size: var(--medium-size);
+    padding: 6px 10px 6px 0;
+}
+
+.note-author {
+    font-size: var(--small-size);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    align-self: center;
+}
+
+.note-actions {
+    display: flex;
+    vertical-align: middle;
+}
+
+.note-actions .form-group {
+    all: unset;
+}
+
+.button-container {
+    all: unset;
+    border: none !important;
+
+    background-repeat: no-repeat !important;
+
+    width: 1em !important;
+    height: 1em !important;
+
+    margin-left: var(--unit-size);
+    text-indent: -9999em;
+}
+
+.button-container:hover,
+.button-container:focus {
+    border: none !important;
+    background: var(--bg3) !important;
+}
+
+.favourite-button-container {
+    -webkit-mask-image: url("../icons/heart.svg") !important;
+    -o-mask-image: url("../icons/heart.svg") !important;
+    -moz-mask-image: url("../icons/heart.svg") !important;
+    mask-image: url("../icons/heart.svg") !important;
+}
+
+.reply-button-container {
+    -webkit-mask-image: url("../icons/reply.svg") !important;
+    -o-mask-image: url("../icons/reply.svg") !important;
+    -moz-mask-image: url("../icons/reply.svg") !important;
+    mask-image: url("../icons/reply.svg") !important;
+}
+
+.repeat-button-container {
+    -webkit-mask-image: url("../icons/repeat.svg") !important;
+    -o-mask-image: url("../icons/repeat.svg") !important;
+    -moz-mask-image: url("../icons/repeat.svg") !important;
+    mask-image: url("../icons/repeat.svg") !important;
+}
+
+.note-actions-unset {
+    background: var(--bg2) !important;
+}
+
+.note-actions-set {
+    background: var(--white) !important;
+}
+
+.note-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    padding: var(--small-size);
+}
+
+.note-text {
+    margin-bottom: var(--unit-size);
+}
+
+.section-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: max-content;
+
+    border-radius: var(--unit-size);
+    background-color: var(--translucent);
+    padding: var(--smaller-size);
+
+    align-self: flex-start;
+}
+
+.note-attachments:not(:only-child) {
+    margin-right: var(--unit-size);
+}
+
+.note-attachments > figure figcaption {
+    display: flex;
+    word-break: break-all;
+    margin-bottom: var(--unit-size);
+}
+
+/* PROFILE */
+.profile {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    font-family: var(--main-font);
+    background-color: var(--translucent);
+    margin-bottom: var(--unit-size);
+    border-radius: var(--unit-size);
+    padding: var(--unit-size);
+    box-shadow: var(--shadow);
+}
+
+.profile *[class*="profile-info-"] {
+    flex: 1;
+    mix-blend-mode: difference;
+}
+
+.profile-info {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+.profile-info-nickname {
+    font-size: var(--medium-size);
+}
+
+.profile-info-tags {
+    margin: unset;
+}
+
+.profile-info-stats strong {
+    margin-right: 5px;
+}
+
+.profile-info-stats {
+    margin-top: var(--unit-size);
+}
+
+.profile-avatar {
+    max-width: 4rem;
+    min-width: 3rem;
+    width: 100%;
+    height: auto;
+    margin-right: 5px;
+    border-radius: 2px;
+}

public/assets/default_theme/css/reset.css

@@ -0,0 +1,148 @@
+/* link underlines tend to make hypertext less readable,
+   because underlines obscure the shapes of the lower halves of words */
+:link, :visited {
+    text-decoration: none
+}
+
+/* no list-markers by default, since lists are used more often for semantics */
+ul, ol {
+    list-style: none
+}
+
+/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
+/* the default spacing on headings does not match nor align with
+   normal interline spacing at all, so let's get rid of it. */
+/* zero out the spacing around pre, form, body, html, p, blockquote as well */
+pre, form, body, html, 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;
+}
+
+/* de-italicize address */
+address {
+    font-style: normal;
+}
+
+/* firefox focus outline */
+:focus {
+    outline: none;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+/* details element arrow */
+details summary > * {
+    margin: unset;
+    padding: unset;
+}
+
+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;
+    }
+}
+
+[hidden] {
+    display: none;
+}
+
+* {
+    box-sizing: border-box !important;
+}
+
+/* TYPOGRAPHY AND GENERAL SELECTORS */
+body,
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    background-attachment: fixed;
+    color: var(--white);
+    font-family: var(--main-font);
+    font-size: var(--small-size);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    all: unset;
+    display: block;
+    font-family: var(--display-font);
+}
+
+h1 {
+    font-size: var(--main-size);
+    font-weight: 700;
+    margin-bottom: 16.2px;
+}
+
+h2 {
+    font-size: var(--medium-size);
+    font-weight: 600;
+    margin-bottom: 13px;
+}
+
+h3 {
+    font-size: var(--small-size);
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+h4, h5 {
+    font-size: var(--small-size);
+    font-weight: 400;
+    margin-bottom: 6.1px;
+}
+
+p {
+    font-family: var(--main-font);
+    font-size: var(--small-size);
+    font-weight: 400;
+    margin: unset;
+}
+
+p:first-line {
+    padding-left: var(--small-size);
+}
+
+p:first-line {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+p:not(:first-line) {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+textarea {
+    font-family: var(--main-font);
+    font-weight: 400;
+}
+
+ul {
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+li {
+    margin: 0;
+    padding: 0;
+}

public/assets/css/reset.css → public/assets/default_theme/css/widgets/buttons.css

@@ -1,152 +1,3 @@
-/* link underlines tend to make hypertext less readable,
-   because underlines obscure the shapes of the lower halves of words */
-:link, :visited {
-    text-decoration: none
-}
-
-/* no list-markers by default, since lists are used more often for semantics */
-ul, ol {
-    list-style: none
-}
-
-/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
-/* the default spacing on headings does not match nor align with
-   normal interline spacing at all, so let's get rid of it. */
-/* zero out the spacing around pre, form, body, html, p, blockquote as well */
-pre, form, body, html, 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;
-}
-
-/* de-italicize address */
-address {
-    font-style: normal;
-}
-
-/* firefox focus outline */
-:focus {
-    outline: none;
-}
-
-::-moz-focus-inner {
-    border: 0;
-}
-
-/* details element arrow */
-details summary > * {
-    margin: unset;
-    padding: unset;
-}
-
-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;
-    }
-}
-
-[hidden] {
-    display: none;
-}
-
-* {
-    box-sizing: border-box !important;
-}
-
-/* TYPOGRAPHY AND GENERAL SELECTORS */
-body,
-html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    background-attachment: fixed;
-    color: var(--white);
-    font-family: var(--main-font);
-    font-size: var(--small-size);
-}
-
-h1, h2, h3, h4, h5, h6 {
-    all: unset;
-    display: block;
-    font-family: var(--display-font);
-}
-
-h1 {
-    font-size: var(--main-size);
-    font-weight: 700;
-    margin-bottom: 16.2px;
-}
-
-h2 {
-    font-size: var(--medium-size);
-    font-weight: 600;
-    margin-bottom: 13px;
-}
-
-h3 {
-    font-size: var(--small-size);
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-
-h4, h5 {
-    font-size: var(--small-size);
-    font-weight: 400;
-    margin-bottom: 6.1px;
-}
-
-p {
-    font-family: var(--main-font);
-    font-size: var(--small-size);
-    font-weight: 400;
-    margin: unset;
-}
-
-p:first-line {
-    padding-left: var(--small-size);
-}
-
-p:first-line {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-p:not(:first-line) {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-textarea {
-    font-family: var(--main-font);
-    font-weight: 400;
-}
-
-ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-li {
-    margin: 0;
-    padding: 0;
-}
-
 /* BUTTONS AND FILEPICKER */
 button {
     cursor: pointer !important;
@@ -276,10 +127,10 @@ input[type=checkbox] {
     background-size: cover;
     margin-right: 2px;
 
-    -webkit-mask-image: url("../icons/check-off.svg") !important;
-    -o-mask-image: url("../icons/check-off.svg") !important;
-    -moz-mask-image: url("../icons/check-off.svg") !important;
-    mask-image: url("../icons/check-off.svg") !important;
+    -webkit-mask-image: url("../../icons/check-off.svg") !important;
+    -o-mask-image: url("../../icons/check-off.svg") !important;
+    -moz-mask-image: url("../../icons/check-off.svg") !important;
+    mask-image: url("../../icons/check-off.svg") !important;
 }
 
 input[type=color] {
@@ -327,10 +178,10 @@ input[type=radio]:checked {
 
 input[type=checkbox]:checked {
     background-color: var(--bg3) !important;
-    -webkit-mask-image: url("../icons/check-on.svg") !important;
-    -o-mask-image: url("../icons/check-on.svg") !important;
-    -moz-mask-image: url("../icons/check-on.svg") !important;
-    mask-image: url("../icons/check-on.svg") !important;
+    -webkit-mask-image: url("../../icons/check-on.svg") !important;
+    -o-mask-image: url("../../icons/check-on.svg") !important;
+    -moz-mask-image: url("../../icons/check-on.svg") !important;
+    mask-image: url("../../icons/check-on.svg") !important;
 }
 
 /* file selector */
@@ -350,47 +201,4 @@ input[type=file] {
     font-family: var(--main-font) !important;
     font-weight: bold !important;
     color: var(--white) !important;
-}
-
-/* ANIMATIONS */
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-
-    100% {
-        opacity: unset;
-        transform: none;
-    }
-}
-
-@keyframes fadeOut {
-    100% {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-
-    0% {
-        opacity: unset;
-        transform: none;
-    }
-}
-
-@keyframes highlight {
-    0% {
-        box-shadow: initial;
-        border-radius: var(--unit-size);
-    }
-
-    50% {
-        border-radius: var(--unit-size);
-        box-shadow: inset 0 20px 40px var(--white);
-        transition: box-shadow 0.3s ease-in-out;
-    }
-
-    100% {
-        box-shadow: initial;
-        border-radius: var(--unit-size);
-    }
 }

public/assets/default_theme/css/widgets/sections.css

@@ -0,0 +1,120 @@
+/* SECTIONS */
+.section-widget {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--translucent);
+    border-radius: var(--unit-size);
+    border: solid 2px var(--bg2);
+    margin-bottom: var(--medium-size);
+
+    box-shadow: var(--shadow);
+    color: var(--white);
+}
+
+.section-widget hr {
+    margin-bottom: var(--unit-size);
+}
+
+.section-widget-padded {
+    padding: var(--unit-size);
+}
+
+.section-title {
+    font-size: var(--medium-size);
+    font-weight: 700;
+    margin: 0;
+}
+
+.section-widget-button-like {
+    border: 2px solid var(--bg2);
+    border-radius: var(--unit-size);
+    background: var(--bg-button);
+    padding: 6px 10px;
+    margin-top: 6px;
+
+    cursor: pointer;
+    float: right;
+    align-self: end;
+
+    font-family: var(--main-font);
+    font-weight: 700;
+}
+
+.section-title-details {
+    font-size: var(--medium-size);
+    font-weight: 700;
+
+    border-radius: var(--unit-size);
+    padding: 6px 10px 6px 10px;
+
+    background-color: var(--translucent);
+    box-shadow: var(--shadow);
+}
+
+.section-title-details[open] svg {
+    transform: rotate(180deg);
+    animation: var(--fade-out)
+}
+
+/* SECTION DETAILS CLOSED */
+.section-title-details:not([open]) svg {
+    transform: initial;
+    animation: var(--fade-in);
+}
+
+.section-title-summary {
+    display: flex;
+    justify-content: space-between;
+}
+
+.section-form {
+    display: flex;
+    flex-direction: column;
+    padding: var(--unit-size);
+}
+
+.section-form-legend {
+    margin-top: unset;
+    margin-bottom: 10px;
+
+    font-weight: bold;
+    font-size: var(--main-size);
+}
+
+.form-group {
+    all: unset;
+
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 6px;
+}
+
+.form-group textarea {
+    height: 7rem;
+    max-height: 100%;
+}
+
+.help-block {
+    margin-bottom: 6px;
+}
+
+.help-text {
+    font-style: italic;
+    font-size: var(--small-size);
+    margin-bottom: 6px;
+}
+
+.help-block > .list-unstyled,
+.alert,
+.alert-danger {
+    display: inline-block;
+
+    border: solid 2px #FF6347;
+    background-color: #FF634733;
+    border-radius: var(--unit-size);
+
+    padding: 2px 6px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+}

public/assets/default_theme/fonts/opensans/opensans.css

@@ -0,0 +1,90 @@
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Italic'), local('OpenSans-Italic'),
+        url('OpenSans-Italic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Light'), local('OpenSans-Light'),
+        url('OpenSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Regular'), local('OpenSans-Regular'),
+        url('OpenSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+        url('OpenSans-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+        url('OpenSans-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
+        url('OpenSans-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Bold'), local('OpenSans-Bold'),
+        url('OpenSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+        url('OpenSans-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Italic'), local('OpenSans-Italic'),
+        url('OpenSans-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+        url('OpenSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+

public/assets/fonts/chivo/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2016 The Chivo Project Authors (omnibus.type@gmail.com)
-
-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/chivo/chivo.css

@@ -1,35 +0,0 @@
-@font-face {
-    font-family: 'Chivo';
-    src: local('Chivo Bold Italic'), local('Chivo-BoldItalic'),
-        url("Chivo-BoldItalic.woff") format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Chivo';
-    src: local('Chivo Bold'), local('Chivo-Bold'),
-    url("Chivo-Bold.woff") format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Chivo';
-    src: local('Chivo Italic'), local('Chivo-Italic'),
-    url("Chivo-Italic.woff") format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Chivo';
-    src: local('Chivo Regular'), local('Chivo-Regular'),
-    url("Chivo-Regular.woff") format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}

public/assets/icons/attach.svg.twig

@@ -1,4 +0,0 @@
-<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>attach</title>
-<path d="M4.703 29.192c-3.652-3.768-3.584-9.844 0.087-13.599l13.11-13.41c2.77-2.833 7.272-2.833 10.042 0 2.743 2.806 2.746 7.333 0 10.142l-13.051 11.381c-2.048 1.659-4.032 1.617-5.243 0.067-1.048-1.407-1.181-3.381 0.454-5.377l8.775-9.424c1.421-1.318 3.019 0.439 1.965 1.644l-8.723 9.548c-0.833 0.91 0.286 2.144 1.163 1.34l11.8-11.976c1.226-1.254 1.226-3.295-0.001-4.55-1.199-1.227-3.122-1.227-4.322 0l-13.11 13.41c-2.303 2.326-1.592 5.802 0.391 7.61 3.605 3.643 7.555 0.332 12.211-3.69 0.386-0.395 5.076-4.978 7.183-6.899 0.901-0.618 1.824 0.244 1.201 1.554l-9.69 11.7c-3.892 4.233-10.565 4.322-14.242 0.528z"></path>
-</svg>

public/assets/icons/person.svg.twig

@@ -1,6 +0,0 @@
-<!-- https://github.com/primer/octicons -->
-<!-- MIT License -->
-<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <title>Profile</title>
-    <path fill-rule="evenodd" d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z"></path>
-</svg>

public/assets/icons/plus-circle.svg.twig

@@ -1,7 +0,0 @@
-<!-- https://github.com/primer/octicons -->
-<!-- MIT License -->
-<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
-    <title>plus-circle</title>
-    <path fill-rule="evenodd"
-          d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path>
-</svg>

templates/base.html.twig

@@ -12,14 +12,14 @@
     </title>
 
     {% block stylesheets %}
-        <link rel="preload" href="{{ asset('assets/css/reset.css') }}" as="style" type="text/css">
-        <link rel="stylesheet" href="{{ asset('assets/css/reset.css') }}">
+        <link rel="preload" href="{{ asset('assets/default_theme/css/reset.css') }}" as="style" type="text/css">
+        <link rel="stylesheet" href="{{ asset('assets/default_theme/css/reset.css') }}">
 
-        <link rel="preload" href="{{ asset('assets/css/base.css') }}" as="style" type="text/css">
-        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}">
+        <link rel="preload" href="{{ asset('assets/default_theme/css/core/base.css') }}" as="style" type="text/css">
+        <link rel="stylesheet" href="{{ asset('assets/default_theme/css/core/base.css') }}">
 
         {% for stylesheet in show_stylesheets() %}
-            <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/' ~ stylesheet) }}">
+            <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/' ~ stylesheet) }}">
         {% endfor %}
     {% endblock %}
 
@@ -33,8 +33,8 @@
 
 <body class="bg">
 
-<aside id="accessibility-menu">
-    <h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
+<aside class="accessibility-menu">
+    <h2 class="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
     <p tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
     <p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
     <br>
@@ -67,22 +67,20 @@
 </aside>
 
 {% block header %}
-    <header id='header' role="banner">
+    <header>
         {{ block("leftpanel", "stdgrid.html.twig") }}
 
-        <a role="navigation" id="anchor-main-page" class="anchor-hidden"
-           title="{{ 'Press tab to access selected region!' | trans }}"></a>
-        <a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0"
-           title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
+        <a id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access instance\'s main page.' | trans }}"></a>
+        <a class="accessibility-target header-instance" href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
             <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
         </a>
 
-        <div>
+        <span>
           {% set extra = handle_event('AddHeaderElements', request) %}
           {% for el in extra %}
             {{ form(el) }}
           {% endfor %}
-        </div>
+        </span>
 
         {% if app.user %}
             {{ block("rightpanel", "stdgrid.html.twig") }}
@@ -90,9 +88,8 @@
     </header>
 {% endblock header %}
 
-<div class="container">
-    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
-       title="{{ 'Press tab to access selected region!' | trans }}"></a>
+<div class="content-wrapper">
+    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access main content.' | trans }}"></a>
     <div class='content accessibility-target'>
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}

templates/left/view.html.twig

@@ -1,5 +1,5 @@
 {% block stylesheets %}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/view.css') }}">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/left.css') }}">
 {% endblock stylesheets %}
 
 {% block leftpanel %}

templates/right/view.html.twig

@@ -1,5 +1,5 @@
 {% block stylesheets %}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/view.css') }}">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/right.css') }}">
 {% endblock stylesheets %}
 
 {% block rightpanel %}