Merge branch 'improvements' into 'master'

A lot of reworks

See merge request Syndamia/syndamiadotcom!10

1 files changed, 49 insertions, 39 deletions

diff --git a/src/styles.css b/src/styles.css
index 04425e0..a4b1b9d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -62,7 +62,7 @@
   --bg-selection-color:      #338fff;
   --blockquote-color:        #6a737d;
   --blockquote-border-color: #dfe2e5;
-  --body-bg:                 #dbdbdb;
+  --body-bg:                 #ebe3d2;
   --border-color:            black;
   --code-bg-color:           var(--hi-bg);
   --em-color:                black;
@@ -109,14 +109,19 @@
 
 /* Global */
 
+@font-face {
+  font-family: 'Tabler';
+  src: url('/font/tabler-icons-subset.ttf') format('truetype');
+}
+
 body {
     background-color: var(--body-bg);
     border-color: var(--border-color);
     color: var(--fg-color);
     min-height: calc(100vh - 16px);
   }
-  nav, article     { background-color: var(--bg-color); }
-  body, td, th { font: 18px sans-serif; }
+  nav, article { background-color: var(--bg-color); }
+  body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
   *            { line-height: 1.3em; }
 
 img {
@@ -131,8 +136,17 @@ img {
   .file-icon        { min-width: 1.3em; vertical-align: text-bottom; }
   .borderless, .oldschool-badge, .file-icon { border: none; }
 
-  .setting-btn { border: none; vertical-align: middle; }
+  .btn, .h-anchor {
+      /* Thanks https://stackoverflow.com/a/4407335/12036073 */
+      -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -khtml-user-select: none; /* Konqueror HTML */
+      -moz-user-select: none; /* Old versions of Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+      user-select: none;
+    }
   .btn:hover   { cursor: pointer; }
+  .btn:active  { transform: scale(0.9); }
 
   /* image-show.js */
   .clicked-image {
@@ -181,18 +195,13 @@ h1, h2, h3, h4, h5, h6 {
   h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }
   h2 { margin-top: 2.5em; }
   h3 { margin-top: 2em; }
-
-  .h-anchor { border: none !important; display: inline; }
-    .h-anchor img { border: none; height: 1.3em; vertical-align: text-bottom; }
-  .h-anchor img, .icon, .file-icon, .file-wrapper > summary {
-      /* Since link images are made for dark mode, and have a white-ish
-       * foreground, this filter makes them black (when in light mode)
-       */
-      filter: invert(1) brightness(0);
-    }
   h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
       margin-top: 0;
     }
+  .h-anchor { color: var(--fg-color); border: none; }
+    /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */
+    h2 + .h-anchor { font-size: 1.4em; }
+    h3 + .h-anchor { font-size: 1.1em; }
 
 /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 code, pre {
@@ -219,8 +228,8 @@ code, pre {
       word-wrap: normal;
     }
   pre > code {
-      white-space: pre;
-      word-break: normal;
+      white-space: pre-wrap;
+      word-break: break-all;
       padding-right: 0.9em;
     }
   table code {
@@ -311,7 +320,6 @@ dt, dd {
     #sidebar > :not(:first-child) { margin-top: 1.5rem; }
     #sidebar a                    { border: none; }
 
-    #header, #footer { font-family: Arial; }
     #header {
         border-right: none;
         font-size: 1.5em;
@@ -325,7 +333,16 @@ dt, dd {
         border-bottom: none;
         margin: 0.58em 0 1em 0;
         font-size: 1.2em;
+        line-height: 1em;
       }
+      .setting-btn {
+          text-align: center;
+          display: inline-block;
+          line-height: 1em;
+          border: 1px solid var(--border-color);
+          padding: 0.2em 0.3em 0.4em;
+        }
+        #settingsWrapper > .setting-btn { font-size: 0.5em; }
     #footer {
         font-size: 0.7em;
         overflow-x: hidden;
@@ -335,7 +352,7 @@ dt, dd {
     #footer > * { white-space: nowrap; }
 
     /* expand-navbar.js */
-    #expandNavbarBtn                { float: right; margin: 0.25em 0 0 1em; }
+    #expandNavbarBtn                { float: right; margin-left: 1em; }
     .sidebar-hidden                 { min-height: auto; position: absolute; }
     .sidebar-hidden > :not(#header) { display: none; }
     .sidebar-hidden + .noMaxWidth   { margin-top: 6em; }
@@ -359,19 +376,18 @@ dt, dd {
           font-size: 0.8em;
           margin: 0 0 3rem 2rem;
         }
-        #pagenav > * {
-            white-space: nowrap;
-          }
+        #pagenav > * { white-space: nowrap; }
+        #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
       /* back-to-top.js */
       #scrollBtn {
-        background-color: transparent;
-        bottom: 1em;
+        background-color: var(--bg-color);
+        bottom: 1rem;
         border: 1px solid;
         display: none;
-        font-size: 1rem;
+        font-size: 1.66rem;
         position: fixed;
-        padding: 0.3em;
-        right: 1em;
+        padding: 0 0.15em;
+        right: 1rem;
         transition-duration: 0.5s;
         z-index: 1;
       }
@@ -404,12 +420,13 @@ dt, dd {
 #about-image {
     float: right;
     margin-right: 1em;
+    margin-top: 2em;
     max-width: 7.6em;
   }
 
 /* Small screen support */
 
-@media screen and (max-width: 610px) {
+@media screen and ((max-width: 610px) or (max-height: 610px)) {
   article {
       border-top: none;
       max-width: calc(100vw - 16px - 3px);
@@ -418,6 +435,7 @@ dt, dd {
 
   #about-image { max-width: 4.38em; }
 
+  #content-wrapper { flex-direction: column; }
   #sidebar {
       max-width: initial;
       margin: 0;
@@ -445,6 +463,7 @@ dt, dd {
       }
 
   pre, code { white-space: pre-wrap !important; }
+  .slide, .absolute-slide { transform: none !important; margin: 0; }
 }
 
 /* presentation.js */
@@ -452,19 +471,10 @@ dt, dd {
 
 /* File tables */
 .file-wrapper { margin: 0.5em 0; }
-  .file-wrapper > summary {
-      background: url('/img/folder-plus.svg') no-repeat left top;
-      list-style: none;
-      padding-left: 1.5em;
-      user-select: none;
-      -webkit-user-select: none;  
-      -moz-user-select: none;    
-      -ms-user-select: none;      
-    }
-  .file-wrapper[open] > summary {
-      background: url('/img/folder-minus.svg') no-repeat left top;
-    }
-  .file-wrapper > summary:hover { cursor: pointer; }
+  .file-wrapper > summary               { list-style: none; }
+  .file-wrapper > summary::before       { content: '\FF0B'; }
+  .file-wrapper[open] > summary::before { content: '\FF0D'; }
+  .file-wrapper > summary:hover         { cursor: pointer; }
 
   .file-wrapper > .file-list { margin-left: 1.5em; }
   .file-list {