[CSS] Base CSS polish, reset CSS additions for better cross-browser compatibility.

public/assets/css/base.css

@@ -30,129 +30,12 @@
     --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
-/* TYPOGRAPHY */
-h1 {
-    font-family: var(--display-font);
-    font-size: var(--main-size);
-    font-weight: 900;
-    opacity: 1.00;
-    letter-spacing: -0.40px;
-    word-spacing: 4.00px;
-}
-
-h2 {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    font-weight: 800;
-    letter-spacing: -0.75px;
-    word-spacing: 3.00px;
-    text-transform: none;
-}
-
-h3 {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    font-weight: 600;
-    line-height: 1.00;
-    letter-spacing: -0.20px;
-    word-spacing: 1.00px;
-    text-transform: none;
-}
-
-p {
-    font-family: var(--main-font);
-    font-size: var(--medium-size);
-    font-weight: 400;
-    letter-spacing: -0.30px;
-    word-spacing: -0.10px;
-    margin-bottom: var(--small-size) !important;
-    text-transform: none;
-}
-
-ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-li {
-    margin: 0;
-    padding: 0;
-}
-
-a:link {
-    text-decoration: none;
-    color: var(--white);
-    outline: 0;
-}
-
-a:visited {
-    text-decoration: none;
-    color: var(--white);
-    outline: 0;
-    margin: 0;
-    padding: 0;
-}
-
-a:focus,
-a:hover {
-    border-radius: var(--unit-size) !important;
-    background: var(--white) !important;
-    color: var(--bg1) !important;
-    padding: 0 var(--unit-size) 0 var(--unit-size) !important;
-    transition: var(--cubic-transition);
-}
-
-
-button,
-input[type=file]::file-selector-button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    padding: .2em .4em;
-
-    border-radius: var(--unit-size);
-    border: 2px solid var(--bg2);
-
-    background-color: var(--translucent);
-    color: var(--white);
-    transition: var(--cubic-transition);
-}
-
-input[type=file]::file-selector-button:hover,
-button:hover {
-    border: 2px solid var(--white) !important;
-    background-color: var(--white) !important;
-    color: var(--bg2) !important;
-}
-
-button {
-    align-self: flex-end;
-}
-
 #instance:focus svg,
 #instance:hover svg {
     fill: var(--bg1);
-    transition: all 400ms ease;
-}
-
-summary:hover > svg,
-summary:focus > svg {
-    border-radius: var(--unit-size);
-    background-color: var(--white);
-    fill: var(--bg1) !important;
-    stroke: var(--bg1) !important;
-    border: unset !important;
     transition: var(--cubic-transition);
 }
 
-hr {
-    all: unset;
-    display: block;
-    height: 2px;
-    background: var(--translucent);
-}
-
 /* DEFAULTS */
 .bg {
     background-color: var(--bg3);
@@ -160,18 +43,6 @@ hr {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    min-height: 100%;
-}
-
-body,
-html {
-    height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    background-attachment: fixed;
-    color: var(--white);
-    font-family: var(--main-font);
 }
 
 #header {
@@ -183,9 +54,7 @@ html {
     background-color: var(--bg1);
 
     padding: var(--unit-size);
-    box-sizing: border-box;
+    width: 100%;
-    width: 100vw;
-    max-width: 100%;
     align-items: center;
 
     box-shadow: var(--shadow);
@@ -207,7 +76,7 @@ html {
     flex-wrap: wrap;
     justify-content: space-around;
     /*margin-top: calc(3 * var(--small-size) + var(--main-size));*/
-    margin-top: 4.3rem;
+    margin-top: 3.3rem;
 }
 
 /* THE FOCUSED (middle) DIV */
@@ -216,7 +85,7 @@ html {
     flex-direction: column;
     margin-left: 20%;
     margin-right: 20%;
-    padding: var(--small-size);
+    padding: 0 var(--unit-size) 0 var(--unit-size);
 
     width: 100%;
     max-width: 60%;
@@ -289,11 +158,6 @@ html {
     height: auto;
 }
 
-figcaption a:link {
-    font-size: var(--small-size);
-    color: var(--white);
-}
-
 /* SIDE PANELS */
 .panel {
     font-size: var(--main-size);
@@ -318,27 +182,30 @@ figcaption a:link {
     margin-top: auto;
 }
 
+.icon {
+    fill: var(--white);
+    vertical-align: middle;
+}
 .icon-left,
 .icon-right {
     display: none;
 }
 
-
 /* MEDIA RESIZE */
 @media (max-width: 1200px) {
     .icon-left,
     .icon-right {
         display: flex;
-        padding: var(--unit-size);
     }
 
     .content {
         margin: unset;
-        max-width: 100% !important;
+        max-width: 100%;
     }
 
     .panel aside {
         display: none;
+        cursor: default;
     }
 
     .panel[open] {
@@ -353,7 +220,7 @@ figcaption a:link {
     }
 
     .panel aside {
-        display: none !important;
+        display: none;
     }
 
     .panel[open] aside {

public/assets/css/left/left.css

@@ -2,14 +2,6 @@
     left: 0;
 }
 
-.icon-left {
-    width: var(--main-size);
-    height: auto;
-
-    fill: var(--white);
-    vertical-align: middle;
-}
-
 /* PROFILE */
 .profile-nav {
     font-family: var(--display-font);
@@ -83,7 +75,10 @@
 .timeline-nav h1 {
     display: flex;
 }
-
+.timeline-nav hr {
+    flex: 1;
+    background: linear-gradient(90deg, var(--bg3), transparent);
+}
 .timeline-nav a {
     color: var(--white);
 }

public/assets/css/reset.css

@@ -12,7 +12,7 @@ ul, ol {
 /* avoid browser default inconsistent heading font-sizes */
 /* and pre/code too */
 h1, h2, h3, h4, h5, h6, pre, code {
-    font-size: 1em;
+    font-size: 1rem;
 }
 
 /* remove the inconsistent (among browsers) default ul,ol padding or margin  */
@@ -29,12 +29,12 @@ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fields
 
 /* whoever thought blue linked image borders were a good idea? */
 a img, :link img, :visited img {
-    border: none
+    border: none;
 }
 
 /* de-italicize address */
 address {
-    font-style: normal
+    font-style: normal;
 }
 
 /* firefox focus outline */
@@ -65,3 +65,380 @@ details > summary::-webkit-details-marker {
         cursor: pointer;
     }
 }
+
+abbr[title] {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+}
+
+code,
+kbd,
+samp,
+pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    line-height: inherit;
+    border: unset;
+}
+
+button {
+    overflow: visible;
+    text-transform: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+    -webkit-appearance: button;
+    padding: 1px 6px;
+}
+
+input {
+    overflow: visible;
+}
+
+input,
+textarea {
+    padding: 1px;
+}
+
+fieldset {
+    border: 1px solid currentColor;
+    margin: 0 2px;
+}
+
+legend {
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    white-space: normal;
+}
+
+progress {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+select {
+    text-transform: none;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+[type=color] {
+    background: inherit;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+
+::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.5;
+}
+
+::-webkit-search-decoration,
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    color: inherit;
+    overflow: visible;
+}
+
+dl,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+ol ol,
+ol ul,
+ol dl,
+ul ol,
+ul ul,
+ul dl,
+dl ol,
+dl ul,
+dl dl {
+    margin: 0;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+audio,
+video {
+    display: inline-block;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+img {
+    border: 0;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+table {
+    text-indent: 0;
+    border-color: inherit;
+}
+
+details {
+    display: block;
+}
+
+dialog {
+    background-color: inherit;
+    border: solid;
+    color: inherit;
+    display: block;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    left: 0;
+    margin: auto;
+    padding: 1em;
+    position: absolute;
+    right: 0;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+}
+
+dialog:not([open]) {
+    display: none;
+}
+
+summary {
+    display: list-item;
+}
+
+canvas {
+    display: inline-block;
+}
+
+template {
+    display: none;
+}
+
+[hidden] {
+    display: none;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* 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);
+}
+
+h1 {
+    font-family: var(--display-font);
+    font-size: var(--main-size);
+    font-weight: 900;
+    opacity: 1.00;
+    letter-spacing: -0.40px;
+    word-spacing: 4.00px;
+}
+
+h2 {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    font-weight: 800;
+    letter-spacing: -0.75px;
+    word-spacing: 3.00px;
+    text-transform: none;
+}
+
+h3 {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    font-weight: 600;
+    line-height: 1.00;
+    letter-spacing: -0.20px;
+    word-spacing: 1.00px;
+    text-transform: none;
+}
+
+p {
+    font-family: var(--main-font);
+    font-size: var(--medium-size);
+    font-weight: 400;
+    letter-spacing: -0.30px;
+    word-spacing: -0.10px;
+    margin-bottom: var(--small-size);
+    text-transform: none;
+}
+
+ul {
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+li {
+    margin: 0;
+    padding: 0;
+}
+
+a:link {
+    text-decoration: none;
+    color: var(--white);
+    outline: 0;
+}
+
+a:visited {
+    text-decoration: none;
+    color: var(--white);
+    outline: 0;
+    margin: 0;
+    padding: 0;
+}
+
+a:focus,
+a:hover {
+    border-radius: var(--unit-size);
+    background: var(--white);
+    color: var(--bg1) !important;
+    padding: 0 var(--unit-size) 0 var(--unit-size);
+    transition: var(--cubic-transition);
+}
+
+figcaption a:link {
+    font-size: var(--small-size);
+    color: var(--white);
+}
+
+button,
+input[type=file]::file-selector-button {
+    font-family: var(--display-font) ;
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg2);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: var(--cubic-transition);
+    cursor: pointer;
+}
+input[type=file]::-ms-browse,
+input[type=file]::-webkit-file-upload-button {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg2);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: var(--cubic-transition);
+}
+button:hover,
+input[type=file]::file-selector-button:hover
+{
+    border: 2px solid var(--white) !important;
+    background-color: var(--white) !important;
+    color: var(--bg2) !important;
+}
+input[type=file]::-webkit-file-upload-button:hover,
+input[type=file]::-ms-browse:hover {
+    border: 2px solid var(--white);
+    background-color: var(--white);
+    color: var(--bg2);
+}
+
+button {
+    align-self: flex-end;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    cursor: pointer;
+}
+
+summary:hover > svg,
+summary:focus > svg {
+    border-radius: var(--unit-size);
+    background-color: var(--white);
+    fill: var(--bg1);
+    border: 2px solid var(--white);
+    transition: var(--cubic-transition);
+}
+
+hr {
+    all: unset;
+    display: block;
+    height: 2px;
+    background: var(--translucent);
+}

public/assets/css/right/right.css

@@ -1,12 +1,3 @@
-.icon-right {
-    width: var(--main-size);
-    height: auto;
-
-    fill: var(--white);
-    stroke-width: 0;
-    vertical-align: middle;
-}
-
 #right-panel {
     right: 0;
 }
@@ -151,9 +142,3 @@
 .attachments {
     flex: 1;
 }
-
-.create-notice details {
-    font-family: var(--display-font);
-    box-sizing: border-box;
-    cursor: pointer;
-}

public/assets/css/settings/settings.css

@@ -1,4 +1,5 @@
 .main-nav {
+    background-color: var(--translucent);
     margin-bottom: var(--unit-size);
     font-size: var(--main-size);
     border-radius: var(--unit-size);
@@ -31,9 +32,6 @@
 .main-nav ul li {
     font-size: var(--medium-size);
     border-radius: var(--unit-size);
-    box-sizing: border-box;
-
-    padding: var(--unit-size);
 }
 
 .form {
@@ -48,7 +46,7 @@
     all: unset;
     display: flex;
     width: 2px;
-    background-image: linear-gradient(to bottom, var(--bg3), transparent 90%);
+    background-image: linear-gradient(to bottom, var(--bg2), transparent 90%);
     margin-right: var(--unit-size);
 }
 
@@ -109,10 +107,11 @@
 
 .section-title-settings summary:focus,
 .section-title-settings summary:hover {
-    border-radius: var(--unit-size) !important;
+    border-radius: var(--unit-size);
-    background: var(--white) !important;
+    background: var(--white);
-    color: var(--bg1) !important;
+    color: var(--bg1);
-    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
+    padding-left: var(--unit-size);
+    padding-right: var(--unit-size);
     transition: var(--cubic-transition);
 }