feat: update website ui to be modern

Author: JoshuaBrest

theme/css/chrome.css

@@ -9,7 +9,6 @@
 }
 
 html {
-    font-family: "Open Sans", sans-serif;
     color: var(--fg);
     background-color: var(--bg);
     text-size-adjust: none;
@@ -39,26 +38,45 @@ main {
 }
 
 /* Don't change font size in headers. */
-h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
     font-size: unset;
 }
 
-.left { float: left; }
-.right { float: right; }
-.boring { opacity: 0.6; }
-.hide-boring .boring { display: none; }
-.hidden { display: none !important; }
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.boring {
+    opacity: 0.6;
+}
 
-h1 > a {
+.hide-boring .boring {
+    display: none;
+}
+
+.hidden {
+    display: none !important;
+}
+
+h1>a {
     background-image: linear-gradient(to right, rgb(245 158 11) 0%, rgb(239 68 68) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent !important;
 }
 
-.header + .header h3,
-.header + .header h4,
-.header + .header h5 {
+.header+.header h3,
+.header+.header h4,
+.header+.header h5 {
     margin-block-start: 1em;
 }
 
@@ -86,39 +104,56 @@ h6:target::before {
 .page {
     outline: 0;
     padding: 0 var(--page-padding);
-    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    margin-block-start: calc(0px - var(--menu-bar-height));
+    /* Compensate for the #menu-bar-hover-placeholder */
 }
+
 .page-wrapper {
     box-sizing: border-box;
     background-color: var(--bg);
 }
-.no-js .page-wrapper,
-.js:not(.sidebar-resizing) .page-wrapper {
-    transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
-}
-[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
-    transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
-}
 
 .content {
     overflow-y: auto;
     padding: 0 5px 50px 5px;
 }
+
 .content main {
     margin-inline-start: auto;
     margin-inline-end: auto;
     max-width: var(--content-max-width);
 }
-.content p { line-height: 1.45em; }
-.content ol { line-height: 1.45em; }
-.content ul { line-height: 1.45em; }
-.content a { text-decoration: none; }
-.content a:hover { text-decoration: underline; }
-.content img, .content video { max-width: 100%; }
+
+.content p {
+    line-height: 1.45em;
+}
+
+.content ol {
+    line-height: 1.45em;
+}
+
+.content ul {
+    line-height: 1.45em;
+}
+
+.content a {
+    text-decoration: none;
+}
+
+.content a:hover {
+    text-decoration: underline;
+}
+
+.content img,
+.content video {
+    max-width: 100%;
+}
+
 .content .header:link,
 .content .header:visited {
     color: var(--fg);
 }
+
 .content .header:link,
 .content .header:visited:hover {
     text-decoration: none;
@@ -128,29 +163,34 @@ table {
     margin: 0 auto;
     border-collapse: collapse;
 }
+
 table td {
-    padding: 3px 20px;
+    padding: 1rem 2rem;
     border: 1px var(--table-border-color) solid;
 }
+
 table thead {
     background: var(--table-header-bg);
 }
+
 table thead td {
     font-weight: 700;
     border: none;
 }
+
 table thead th {
-    padding: 3px 20px;
+    padding: 1rem 2rem;
 }
+
 table thead tr {
     border: 1px var(--table-header-bg) solid;
 }
+
 /* Alternate background colors for rows */
 table tbody tr:nth-child(2n) {
     background: var(--table-alternate-bg);
 }
 
-
 blockquote {
     margin: 20px 0;
     padding: 0 20px;
@@ -196,14 +236,16 @@ kbd {
     vertical-align: middle;
 }
 
-:not(.footnote-definition) + .footnote-definition,
-.footnote-definition + :not(.footnote-definition) {
+:not(.footnote-definition)+.footnote-definition,
+.footnote-definition+ :not(.footnote-definition) {
     margin-block-start: 2em;
 }
+
 .footnote-definition {
     font-size: 0.9em;
     margin: 0.5em 0;
 }
+
 .footnote-definition p {
     display: inline;
 }
@@ -213,8 +255,10 @@ kbd {
     visibility: hidden;
     color: #fff;
     background-color: #333;
-    transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
-    left: -8px; /* Half of the width of the icon */
+    transform: translateX(-50%);
+    /* Center by moving tooltip 50% of its width left */
+    left: -8px;
+    /* Half of the width of the icon */
     top: -35px;
     font-size: 0.8em;
     text-align: center;
@@ -223,6 +267,7 @@ kbd {
     margin: 5px;
     z-index: 1000;
 }
+
 .tooltipped .tooltiptext {
     visibility: visible;
 }

theme/css/general.css

@@ -6,7 +6,9 @@
     --content-max-width: 750px;
     --menu-bar-height: 50px;
     --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
-    --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */
+    --code-font-size: 0.875em
+        /* please adjust the ace font size accordingly in editor.js */
+    ;
 }
 
 .hljs {

theme/css/variables.css

@@ -0,0 +1,98 @@
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Light.ttf) format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Light.ttf) format('truetype');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Regular.ttf) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Regular.ttf) format('truetype');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Medium.ttf) format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Medium.ttf) format('truetype');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-SemiBold.ttf) format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-SemiBold.ttf) format('truetype');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Bold.ttf) format('truetype');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Bold.ttf) format('truetype');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-ExtraBold.ttf) format('truetype');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-ExtraBold.ttf) format('truetype');
+    font-weight: 800;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Black.ttf) format('truetype');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Rubik';
+    src: url(/fonts/Rubik-Black.ttf) format('truetype');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}