Initial grid layout

1 files changed, 215 insertions, 185 deletions

diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 81c371a4..648a016c 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -1,3 +1,32 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
+:root {
+    --main-width: 1000px;
+    --main-background-color: #fdfdfe;
+    --background-color: #f8f8f8;
+    --border-color: #eee;
+    --text-background-color: #fff;
+    --text-color: #222;
+    --link-color: #3c77aa;
+    --dimmed-link-color: #88958d;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --main-background-color: #222;
+        --background-color: #333;
+        --text-background-color: #383838;
+        --border-color: #4c4c4c;
+        --text-color: #ccc;
+        --link-color: #c38855;
+        --dimmed-link-color: #88958d;
+    }
+}
+
+* {
+    box-sizing: border-box;
+}
+
 /* #region generic */
 
 html,
@@ -19,10 +48,34 @@ textarea {
     overflow: auto;
 }
 html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    background: var(--main-background-color);
+    text-size-adjust: 100%;
+    word-wrap: break-word;
+    color: var(--text-color);
+    line-height: 1.4;
+    -webkit-overflow-scrolling: touch;
+}
+
+button,
 input,
 textarea {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 12pt;
+    font-size: 1em;
+    background-color: var(--text-background-color);
+    color: var(--text-color);
+}
+
+html,
+input,
+textarea,
+button {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 h1,
 h2 {
@@ -32,7 +85,7 @@ ul {
     list-style-type: none;
 }
 a {
-    color: #069;
+    color: var(--link-color);
     text-decoration: none;
 }
 img,
@@ -40,7 +93,7 @@ hr {
     border: none;
 }
 hr {
-    background: #CCC;
+    background: var(--border-color);
     height: 1px;
     margin: 10px 0;
 }
@@ -67,49 +120,54 @@ pre::-moz-selection {
 
 /* #region overall layout */
 
-html {
-    background: #fdfdfe;
-    color: #222;
+#app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 #wrapper {
-    margin: 0 auto;
-    width: 1000px;
-    margin-top: 52px;
+    display: grid;
+    grid-template-areas: "content" "footer";
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 #column {
-    float: left;
-    margin-left: 10px;
-    overflow: hidden;
-    padding-top: 10px;
-    width: 240px;
+    grid-area: footer;
 }
 #content {
-    float: right;
-    margin: 12px 0 0 0;
-    width: 728px;
+    grid-area: content;
+    margin-top: 0;
+    overflow: auto;
+}
+.content--top {
+    margin-top: 64px !important;
 }
 #minimal_content {
     margin: 0 auto;
     min-width: 310px;
     width: auto;
 }
+.desktop {
+    display: none;
+}
 *::selection {
-    background: #006699;
-    color: #fff;
+    background: var(--link-color);
+    color: var(--main-background-color);
 }
-body > header {
-    background: #fff;
-    border-bottom: 1px solid #eee;
+#header {
+    background: var(--text-background-color);
+    border-bottom: 1px solid var(--border-color);
+    transition: transform 0.2s;
+    z-index: 10;
+    overflow-x: hidden;
     position: fixed;
-    top: 0;
     width: 100%;
-    z-index: 10;
-    transition-duration: 0.5s;
-    transition-property: transform;
+    top: 0;
 }
 #header_wrapper {
-    margin: 0 auto;
-    width: 1000px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -119,40 +177,11 @@ body > header {
     transform: translateY(-100%);
 }
 #footer {
-    background: #f8f8f8;
-    clear: both;
     color: #999;
     font-size: 10pt;
-    margin: 40px;
     padding: 10px 0;
-}
-
-@media screen and (max-width: 850px) {
-    body {
-        text-size-adjust: 100%;
-    }
-    body,
-    #wrapper,
-    #topwrapper,
-    #content,
-    #footer {
-        float: none;
-        margin: 0 auto;
-        min-width: 310px;
-        width: auto;
-    }
-    #wrapper {
-        margin-top: 50px;
-    }
-    body > header {
-        margin-bottom: 15px;
-    }
-    #column {
-        float: none;
-        margin: 0 10px;
-        padding-top: 0;
-        width: auto;
-    }
+    display: flex;
+    flex-direction: column;
 }
 
 /* #endregion */
@@ -178,8 +207,7 @@ body > header {
     display: flex;
 }
 #global a {
-    color: #88958d;
-    display: inline-block;
+    color: var(--dimmed-link-color);
     padding: 14px;
     border-bottom: 2px solid transparent;
 }
@@ -191,7 +219,7 @@ body > header {
     border-bottom: 2px solid transparent;
 }
 #header_wrapper a.active {
-    background: #f8f8f8;
+    background: var(--text-background-color);
     border-bottom: 2px solid #ff339a;
     pointer-events: none;
 }
@@ -202,8 +230,8 @@ body > header {
     cursor: pointer;
 }
 #search input {
-    background: #FFF;
-    border: 1px solid #ccc;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     outline: none !important;
     padding: 4px;
     -webkit-appearance: none;
@@ -216,11 +244,13 @@ body > header {
 
 .toolbar {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: space-around;
 }
 
+#global a,
 .toolbar a {
+    display: flex;
     padding: 14px;
     color: #88959d;
     align-items: center;
@@ -228,7 +258,7 @@ body > header {
     border-right: 2px solid transparent;
 }
 .toolbar > a:hover {
-    background-color: #f8f8f8;
+    background-color: var(--background-color);
     cursor: pointer;
     border-right: 2px solid #ff339a;
 }
@@ -243,22 +273,20 @@ body > header {
 }
 
 #column .tags {
-    background: #fff;
-    border: 1px solid #eee;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     padding: 6px;
     text-align: justify;
 }
 #column .inp {
-    background: #fff;
-    border: 1px solid #ddddd5;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     outline: none !important;
     padding: 4px;
     width: 222px;
 }
 #column .tags h4 {
-    background: #eee;
-    border: 1px solid #eee;
     color: #88958d;
     display: block;
     text-align: center;
@@ -314,11 +342,12 @@ body > header {
 /* #region article, message internals */
 
 article {
-    background: #fff;
-    border: 1px solid #eee;
+    background: var(--text-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     margin-bottom: 10px;
     padding: 20px;
+    overflow: auto;
 }
 article time {
     color: #88958d;
@@ -336,7 +365,7 @@ article .ir img {
 }
 article > nav.l,
 .msg-cont > nav.l {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -396,8 +425,8 @@ article .tags > a::before,
     max-width: 48px;
 }
 .msg-cont {
-    background: #FFF;
-    border: 1px solid #eee;
+    background: var(--text-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     margin-bottom: 12px;
     padding: 20px;
@@ -463,17 +492,6 @@ article .tags > a::before,
 .attach-photo-active {
     color: green;
 }
-.msg-comment input {
-    align-self: flex-start;
-    background: #EEE;
-    border: 1px solid #CCC;
-    color: #999;
-    margin: 0 0 0 6px;
-    position: sticky;
-    top: 70px;
-    vertical-align: top;
-    width: 50px;
-}
 .msg-recomms {
     color: #AAA;
     font-size: small;
@@ -486,7 +504,7 @@ article .tags > a::before,
     margin: 0;
 }
 .title2 {
-    background: #fff;
+    background: var(--text-background-color);
     margin: 20px 0;
     padding: 10px 20px;
     width: 640px;
@@ -500,73 +518,6 @@ article .tags > a::before,
     margin: 0;
 }
 
-@media screen and (max-width: 850px) {
-    #header_wrapper {
-        width: auto;
-    }
-    #global {
-        justify-content: space-around;
-        flex-grow: 1;
-    }
-    #search {
-        padding: 4px;
-    }
-    article {
-        overflow: auto;
-    }
-    article p {
-        margin: 10px 0 8px 0;
-    }
-    .msg,
-    .msg-cont {
-        min-width: 280px;
-        width: auto;
-    }
-    .msg-cont {
-        margin: 8px 0;
-    }
-    .msg-media {
-        overflow: auto;
-    }
-    .title2 h2 {
-        font-size: large;
-    }
-    .msg-comment {
-        flex-direction: column;
-    }
-    .msg-comment input {
-        align-self: flex-end;
-        margin: 6px 0 0 0;
-        width: 100px;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    #search {
-        display: none;
-    }
-    .msg-cont > nav.l,
-    article > nav.l {
-        font-size: 9pt;
-    }
-    .msg-txt {
-        padding-top: 5px;
-    }
-    .title2 {
-        font-size: 11pt;
-        width: auto;
-    }
-    #content .title2 h2 {
-        font-size: 11pt;
-    }
-    .title2-right {
-        line-height: initial;
-    }
-    .icon-title {
-        display: none;
-    }
-}
-
 /* #endregion */
 
 /* #region user-generated texts */
@@ -687,7 +638,7 @@ blockquote {
 /* #region popup dialog (lightbox) */
 
 #dialogb {
-    background: #222;
+    background: var(--text-color);
     height: 100%;
     left: 0;
     opacity: 0.6;
@@ -741,7 +692,7 @@ blockquote {
     padding-right: 6px;
 }
 .dialoglogin {
-    background: #fff;
+    background: var(--text-background-color);
     padding: 25px;
     width: 300px;
 }
@@ -765,24 +716,24 @@ blockquote {
 }
 .signinput,
 .signsubmit {
-    border: 1px solid #CCC;
+    border: 1px solid var(--border-color);
     margin: 3px 0;
     padding: 3px;
 }
 .signinput {
-    width: 292px;
+    width: 100%;
 }
 .signsubmit {
     width: 70px;
 }
 .dialogshare {
-    background: #fff;
+    background: var(--text-background-color);
     min-width: 300px;
     overflow: auto;
     padding: 20px;
 }
 .dialogl {
-    background: #fff;
+    background: var(--text-background-color);
     border: 1px solid #DDD;
     margin: 3px 0 20px;
     padding: 5px;
@@ -795,7 +746,7 @@ blockquote {
     display: block;
 }
 .dialogtxt {
-    background: #fff;
+    background: var(--text-background-color);
     padding: 20px;
 }
 
@@ -842,37 +793,17 @@ blockquote {
 
 /* #region footer internals */
 
-#footer-social {
-    float: left;
-}
 #footer-social a {
     border: 0;
     display: inline-block;
 }
-#footer-left {
-    margin-left: 286px;
-    margin-right: 350px;
-}
-#footer-right {
-    float: right;
-}
-
-@media screen and (max-width: 850px) {
-    #footer {
-        margin: 0 10px;
-    }
-    #footer div {
-        float: none;
-        margin: 10px 0;
-    }
-}
 
 /* #endregion */
 
 /* #region settings */
 
 fieldset {
-    border: 1px dotted #ccc;
+    border: 1px dotted var(--border-color);
     margin-top: 25px;
 }
 
@@ -937,3 +868,102 @@ article.nsfw .ir img:hover {
 }
 
 /* #endregion */
+
+article p {
+    margin: 10px 0 8px 0;
+}
+.msg,
+.msg-cont {
+    min-width: 280px;
+    width: auto;
+}
+.msg-cont {
+    margin: 8px 0;
+}
+.msg-media {
+    overflow: auto;
+}
+.title2 h2 {
+    font-size: large;
+}
+.msg-comment {
+    flex-direction: column;
+}
+.msg-comment input {
+    align-self: flex-end;
+    margin: 6px 0 0 0;
+    background: #EEE;
+    border: 1px solid #CCC;
+    color: #999;
+    position: sticky;
+    top: 70px;
+    vertical-align: top;
+    width: 50px;
+}
+
+@media (--viewport-mobile) {
+    #content {
+        margin-bottom: 12px;
+    }
+    #sidebar {
+        background: var(--text-background-color);
+    }
+}
+
+@media (--viewport-desktop) {
+    #app {
+        overflow: initial;
+    }
+    #wrapper {
+        grid-template-areas: ". footer content .";
+        grid-template-columns: auto 240px 760px auto;
+        overflow: initial;
+    }
+    #header_wrapper,
+    .footer_container {
+        margin: 0 auto;
+        width: var(--main-width);
+    }
+    .desktop {
+        display: block;
+    }
+    .mobile {
+        display: none;
+    }
+    #content {
+        margin-bottom: 12px;
+        overflow: initial;
+    }
+    .toolbar {
+        flex-direction: column;
+        justify-content: initial;
+        border-top: initial;
+        margin-top: 64px;
+    }
+    .toolbar a,
+    .l a {
+        border-right: 2px solid transparent;
+    }
+    #sidebar > a:hover {
+        border-top: initial;
+        border-right: 2px solid #ff339a;
+    }
+}
+::-webkit-scrollbar {
+    width: 12px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+    background-color: var(--main-background-color);
+} /* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+    background-color: #ff339a;
+} /* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+    background-color: var(--border-color);
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+    background-color: black;
+}