summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/about.css21
-rw-r--r--css/colour/lines.css25
-rw-r--r--css/custom.css10
-rw-r--r--css/dark.css335
-rw-r--r--css/elements.css240
-rw-r--r--css/guestbook.css134
-rw-r--r--css/header.css27
-rw-r--r--css/layout.css51
-rw-r--r--css/lines.css423
9 files changed, 1266 insertions, 0 deletions
diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..1796618
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,21 @@
+.aside__social-links {
+ position: fixed;
+}
+
+.aside__social-links li {
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-align: left;
+ padding-left: 0px;
+ margin-top: 10px;
+ border-bottom: 1px solid var(--white);
+}
+
+.aside__social-links li::marker {
+ content: none;
+}
+
+.aside__social-links a {
+ padding: 2px;
+ text-decoration: none;
+}
diff --git a/css/colour/lines.css b/css/colour/lines.css
new file mode 100644
index 0000000..11af0c3
--- /dev/null
+++ b/css/colour/lines.css
@@ -0,0 +1,25 @@
+:root {
+ --bg: #100f0e;
+ --dark-bg: #100f0e;
+ --bright-bg: #100f0e;
+
+ --fg: #CDCED6;
+ --bright-fg: #e5e5e8;
+
+ --white: #CDCED6;
+ --bright-white: #e5e5e8;
+
+ --skin: #e5cdab;
+
+ --orange: #d27e3b;
+ --light-orange: #fdb64e;
+
+ --yellow: #fecf41;
+
+ --gray: #a0a0a2;
+ --dark-gray: #7C838F;
+ --light-gray: #B8BAC5;
+
+ --green: #98971a;
+ --bright-green: #b8bb26;
+}
diff --git a/css/custom.css b/css/custom.css
new file mode 100644
index 0000000..26cb020
--- /dev/null
+++ b/css/custom.css
@@ -0,0 +1,10 @@
+/* Override this file to customise the theme's CSS for your site */
+
+.content__body a {
+ color: var(--orange);
+}
+
+.content__body a:hover,
+.content__body a:visited {
+ color: var(--yellow);
+}
diff --git a/css/dark.css b/css/dark.css
new file mode 100644
index 0000000..13506e9
--- /dev/null
+++ b/css/dark.css
@@ -0,0 +1,335 @@
+:root {
+ --bg: #100f0e;
+ --dark-bg: #100f0e;
+ --bright-bg: #100f0e;
+
+ --fg: #CDCED6;
+ --bright-fg: #e5e5e8;
+
+ --white: #CDCED6;
+ --bright-white: #e5e5e8;
+
+ --skin: #e5cdab;
+
+ --orange: #e56800;
+ --light-orange: #fdb64e;
+
+ --yellow: #fecf41;
+
+ --gray: #a0a0a2;
+ --dark-gray: #7C838F;
+ --light-gray: #B8BAC5;
+}
+
+@font-face {
+ font-family: 'Iosevka';
+ src: url('/fonts/iosevka-regular.woff2') format('woff2');
+ font-display: swap;
+}
+
+
+html {
+ font-family: Iosevka, monospace;
+ background-image: url("/images/blacktile.jpg");
+ color: white;
+ font-size: 13px;
+}
+
+.asciiboxes {
+ position: relative;
+ left: 14px;
+ color: white;
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 1em 0;
+}
+
+h1 {
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: 2.2rem;
+ margin: 1.5rem 0;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: 1.7rem;
+ margin: 1.5rem 0;
+}
+
+blockquote {
+ margin: 0;
+ border-left: 2px double gray;
+ font-style: italic;
+ font-size: 14px;
+ background: #0b0b0b !important;
+ padding: 0 5px 0 10px;
+}
+
+.wrapper__flex {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.block1 {
+ width: 65%;
+}
+
+.block2 {
+ box-shadow: -1px 0px white;
+ background-image: url("/images/stars5.gif");
+ padding: 20px 0;
+ text-align: center;
+ font-size: 60px;
+ width: 35%;
+}
+
+.block2 a {
+ text-decoration: none;
+}
+
+.block3 {
+ border-bottom: 1px solid white;
+ border-top: 1px solid white;
+ width: 50%;
+}
+
+.block4 {
+ border-top: 1px solid white;
+ border-bottom: 1px solid white;
+ width: 50%;
+}
+
+.block4 li::marker {
+ content: "";
+}
+
+.block5{
+ border-bottom: 1px solid white;
+ width: 100%;
+}
+
+.foot li::marker {
+ content: "";
+}
+
+.block5 li::marker {
+ content: "";
+}
+
+.block5 a {
+ color: var(--light-orange);
+ text-decoration: none;
+}
+
+section {
+ border: 1px solid white;
+ background: rgba(0, 0, 0, 0.4);
+ max-width: 64rem;
+ margin: 1rem auto;
+}
+
+.page__footer {
+ text-align: center;
+ border: none;
+ margin: auto;
+ max-width: 64rem;
+}
+
+.page__footer ul {
+ padding: 0;
+}
+
+.page__footer li::marker {
+ content: "";
+}
+
+.page__footer li {
+ display: inline;
+}
+
+/* Paragraphs */
+p {
+ text-indent: 6px;
+ letter-spacing: 0.2px;
+ margin: 0 0 1.5rem 0;
+}
+
+/* Links */
+a:link, a:visited {
+ color: #fff;
+}
+
+a:hover, a:active {
+ color: var(--light-orange);
+}
+
+/* Lists */
+ul {
+ padding-left: 3rem;
+}
+
+ol {
+ padding-left: 3rem;
+}
+
+ol li {
+ margin-bottom: 10px;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+ margin: 0;
+}
+
+ul li::marker {
+ font-size: 0.8rem;
+ content: '\2500\ ';
+ color: var(--yellow);
+}
+
+ol li::marker {
+ color: var(--yellow);
+}
+
+dt {
+ margin: 0;
+ font-weight: bold;
+}
+
+dd {
+ margin: 0 0 0 1.5rem;
+ font-style: italic;
+}
+
+dd + dt {
+ margin-top: 1.5rem;
+}
+
+dl {
+ margin: 0 0 1.5rem 0;
+}
+
+
+table {
+ margin: 0 0 0 0;
+ overflow-wrap: anywhere;
+}
+
+th, td {
+ color: white;
+ border-bottom: 1px solid var(--dark-gray);
+ vertical-align: top;
+ padding: 4px;
+}
+th:first-child, td:first-child {
+ padding-left: 0px;
+}
+th {
+ text-align: center;
+}
+
+/* Code */
+pre {
+ border: 1px solid var(--white);
+ background: black;
+ border-radius: 4px;
+}
+
+pre,
+code,
+kbd,
+samp {
+ font-family:
+ /* Iosevka */ Iosevka,
+ /* macOS 10.10+ */ Menlo,
+ /* Windows 6+ */ Consolas,
+ /* Android 4+ */ Roboto Mono,
+ /* Ubuntu 10.10+ */ Ubuntu Monospace,
+ /* KDE Plasma 5+ */ Noto Mono,
+ /* KDE Plasma 4+ */ Oxygen Mono,
+ /* Linux/OpenOffice fallback */ Liberation Mono,
+ /* fallback */ monospace;
+ font-size: 12px;
+ color: white;
+ letter-spacing: 0;
+}
+
+pre {
+ overflow-x: auto;
+ padding: 1.5rem;
+ margin: 0 0 1.5rem 0;
+}
+
+hr {
+ color: white;
+}
+
+/* Content */
+.content__body {
+ font-family: none;
+ letter-spacing: 0.3px;
+ padding-left: 20px;
+ padding-right: 20px;
+ border: none;
+}
+
+.content__header h1 {
+ font-size: 2rem;
+ padding-left: 20px;
+}
+
+.content__header hr {
+ padding-left: 0px;
+}
+
+.content__header h1 {
+ font-family: sans-serif;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+}
+
+.content__body a:link {
+ color: var(--light-orange);
+}
+
+.content__body a:hover,
+.content__body a:visited {
+ color: var(--yellow);
+}
+
+.home {
+ float: right;
+ margin-right: 10px;
+ font-size: 18px;
+ font-family: none;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+ html{font-size: 10px;}
+ .asciititle{font-size: 10px;}
+}
+
+@media (max-width: 768px) {
+ .block1 {width: 100%;}
+ .block2 {display: none;}
+}
+
+@media (max-width: 1200px) {
+ html {
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+ word-wrap: break-word;
+ }
+}
diff --git a/css/elements.css b/css/elements.css
new file mode 100644
index 0000000..9d84573
--- /dev/null
+++ b/css/elements.css
@@ -0,0 +1,240 @@
+/* Fonts */
+
+html {
+ font-family:
+ system-ui,
+ /* macOS 10.11-10.12 */ -apple-system,
+ /* Windows 6+ */ Segoe UI,
+ /* Android 4+ */ Roboto,
+ /* Ubuntu 10.10+ */ Ubuntu,
+ /* Gnome 3+ */ Cantarell,
+ /* KDE Plasma 5+ */ Noto Sans,
+ /* fallback */ sans-serif,
+ /* macOS emoji */ "Apple Color Emoji",
+ /* Windows emoji */ "Segoe UI Emoji",
+ /* Windows emoji */ "Segoe UI Symbol",
+ /* Linux emoji */ "Noto Color Emoji";
+}
+
+
+body {
+ font-size: 16px;
+ line-height: 1.5rem;
+ letter-spacing: 0.2px;
+}
+
+/* Headings */
+h1 {
+ font-size: 2rem;
+ margin: 1.5rem 0;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 1.5rem;
+ margin: 1.5rem 0;
+}
+
+h1+h2,
+h1+h3,
+h1+h4,
+h1+h5,
+h1+h6,
+h2+h3,
+h2+h4,
+h2+h5,
+h2+h6,
+h3+h4,
+h3+h5,
+h3+h6,
+h4+h5,
+h4+h6,
+h5+h6 {
+ margin: 1;
+}
+
+h1:before { content: "\003E"; }
+h2:before { content: "\003E\003E"; }
+h3:before { content: "\003E\003E\003E"; }
+h4:before { content: "\003E\003E\003E\003E"; }
+h5:before { content: "\003E\003E\003E\003E\003E"; }
+h6:before { content: "\003E\003E\003E\003E\003E\003E"; }
+
+h1:before,
+h2:before,
+h3:before,
+h4:before,
+h5:before,
+h6:before {
+ color: var(--yellow);
+ font-weight: 300;
+}
+
+h1:first-child {
+ margin-top: 0;
+}
+
+/* Paragraphs */
+p {
+ margin: 0 0 1.5rem 0;
+}
+
+/* Links */
+
+a:link, a:visited {
+ color: var(--fg);
+}
+
+a:hover, a:active {
+ color: var(--light-orange);
+}
+
+/* Lists */
+ul {
+ margin: 0 0 0 0;
+ padding-left: 1.25rem;
+}
+
+ol {
+ margin: 0 0 0 0;
+ padding-left: 1.75rem;
+}
+
+ol li {
+ margin-bottom: 10px;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+ margin: 0;
+}
+
+ul li::marker {
+ font-size: 0.8rem;
+ content: '\2500\ ';
+ color: var(--yellow);
+}
+
+ol li::marker {
+ color: var(--yellow);
+}
+
+dt {
+ margin: 0;
+ font-weight: bold;
+}
+
+dd {
+ margin: 0 0 0 1.5rem;
+ font-style: italic;
+}
+
+dd + dt {
+ margin-top: 1.5rem;
+}
+
+dl {
+ margin: 0 0 1.5rem 0;
+}
+
+/* Blockquotes */
+blockquote {
+ margin: 0;
+ border-left: 2px double var(--dark-gray);
+ font-style: italic;
+ font-size: 14px;
+ background: #0b0b0b !important;
+ padding: 0 5px 0 10px;
+}
+
+/* Code */
+pre {
+ border: 1px solid var(--yellow);
+ border-radius: 4px;
+}
+
+pre,
+code,
+kbd,
+samp {
+ font-family:
+ /* Iosevka */ Iosevka,
+ /* macOS 10.10+ */ Menlo,
+ /* Windows 6+ */ Consolas,
+ /* Android 4+ */ Roboto Mono,
+ /* Ubuntu 10.10+ */ Ubuntu Monospace,
+ /* KDE Plasma 5+ */ Noto Mono,
+ /* KDE Plasma 4+ */ Oxygen Mono,
+ /* Linux/OpenOffice fallback */ Liberation Mono,
+ /* fallback */ monospace;
+ background: #0b0b0b !important;
+ font-size: 14px;
+ color: var(--yellow);
+ letter-spacing: 0;
+}
+
+pre {
+ overflow-x: auto;
+ padding: 1.5rem;
+ margin: 0 0 1.5rem 0;
+}
+
+/* Emphasis */
+b,
+strong {
+ font-weight: 600;
+}
+
+/* Highlighting */
+::selection,
+mark {
+ background-color: var(--yellow);
+ color: var(--bg);
+}
+
+/* Other typographic elements */
+hr {
+ border: 0;
+ margin-bottom: 1.5rem;
+}
+
+hr:after {
+ content: '---';
+ color: var(--yellow);
+}
+
+
+/* Prevent super/sub from affecting line height */
+sup, sub {
+ vertical-align: baseline;
+ position: relative;
+ top: -0.25rem;
+ font-size: unset;
+}
+sub {
+ top: 0.25rem;
+}
+
+/* Tables */
+table {
+ margin: 0 0 0 0;
+ overflow-wrap: anywhere;
+}
+
+th, td {
+ color: var(--light-gray);
+ border-bottom: 1px solid var(--dark-gray);
+ vertical-align: top;
+ padding: 4px;
+}
+th:first-child, td:first-child {
+ padding-left: 0px;
+}
+th {
+ text-align: center;
+}
diff --git a/css/guestbook.css b/css/guestbook.css
new file mode 100644
index 0000000..6964092
--- /dev/null
+++ b/css/guestbook.css
@@ -0,0 +1,134 @@
+:root {
+ --skin: #e5cdab;
+ --bg: #100f03;
+
+ --orange: #e56800;
+ --light-orange: #fdb64e;
+
+ --yellow: #fecf41;
+}
+
+@font-face {
+ font-family: 'Iosevka';
+ src: url('../fonts/iosevka-regular.woff2') format('woff2');
+ font-display: swap;
+}
+
+@media (min-width: 55rem) {
+ body {
+ max-width: 780px;
+ padding-top: 20px;
+ }
+
+ main {
+ margin: auto;
+ }
+
+}
+
+@media (max-width: 55rem) {
+ main {
+ margin: auto;
+ max-width: 92%;
+ }
+}
+
+body {
+ color: white;
+ margin: auto;
+}
+
+h1 {
+ font-size: 36px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ margin-bottom: 30px;
+}
+
+header {
+ text-align: center;
+}
+
+a {
+ text-decoration: none;
+ color: var(--light-orange);
+}
+
+a:hover {
+ color: var(--yellow);
+}
+
+html {
+ font-family: Iosevka;
+ min-height: 100%;
+ padding-top: 10px;
+ padding-bottom: 5em;
+ background: url("/images/blacktile.jpg");
+ background-repeat: repeat;
+}
+
+article {
+ background: rgba(0, 0, 0, 0.4);
+ border: 1px solid white;
+}
+
+div {
+ padding: 10px;
+}
+
+p {
+ font-size: 1rem;
+}
+
+p img {
+ border: 2px solid white;
+}
+
+b {
+ letter-spacing: 2px;
+ color: var(--yellow);
+}
+
+footer {
+ display: flex;
+ justify-content: center;
+}
+
+footer img {
+ width: 69px;
+ height: auto;
+ padding: 6px;
+}
+
+textarea {resize: none}
+input {max-height: 2em}
+
+hr {
+ color: white;
+}
+
+input {
+ font-family: inherit;
+ margin-bottom: 6px;
+ background: var(--bg);
+ color: white !important;
+ border: 1px solid white;
+}
+
+input:focus {
+ outline: none;
+ border: 1px solid var(--yellow);
+}
+
+textarea {
+ border: 1px solid white;
+ font-family: inherit;
+ background: var(--bg);
+ color: white !important;
+}
+
+textarea:focus {
+ outline: none;
+ border: 1px solid var(--yellow);
+}
+
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..5f272b3
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,27 @@
+/* Main menu */
+.main-nav ul {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 0.25rem 0;
+}
+
+.main-nav li {
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-right: 1rem;
+ text-transform: uppercase;
+ text-align: center;
+ border-bottom: 1px solid var(--white);
+ border-top: 1px solid var(--white);
+ padding: 10px;
+}
+
+.main-nav li, a {
+ text-decoration: none;
+}
+
+.main-nav li::marker {
+ content: "";
+}
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..0b100ca
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,51 @@
+/* 1rem = 16px by default */
+
+.page {
+ max-width: 64rem;
+ margin: 1rem auto;
+ display: grid;
+ grid-template-areas:
+ "header"
+ "body"
+ "aside";
+ grid-template-columns: minmax(0, 1fr);
+ grid-row-gap: 2rem;
+}
+
+@media (min-width: 45rem) {
+ .page {
+ grid-template-areas:
+ "header header"
+ "body aside";
+ grid-template-columns: minmax(0, 1fr) 15rem;
+ grid-column-gap: 2rem;
+ }
+}
+
+/* Header */
+.page__header {
+ grid-area: header;
+ display: flex;
+}
+
+.page__logo {
+ flex-shrink: 0;
+}
+
+.page__nav {
+ flex-grow: 1;
+}
+
+/* Body + aside */
+.page__body {
+ padding: 20px;
+ border: 0.5px solid white;
+ grid-area: body;
+ background-color: rgba(0, 0, 0, 0.4);
+ overflow-wrap: break-word;
+}
+
+.page__aside {
+ grid-area: aside;
+ color: var(--bright-bg);
+}
diff --git a/css/lines.css b/css/lines.css
new file mode 100644
index 0000000..26416af
--- /dev/null
+++ b/css/lines.css
@@ -0,0 +1,423 @@
+/* Color */
+
+:root {
+ --bg: #100f0e;
+ --dark-bg: #100f0e;
+ --bright-bg: #100f0e;
+
+ --fg: #CDCED6;
+ --bright-fg: #e5e5e8;
+
+ --white: #CDCED6;
+ --bright-white: #e5e5e8;
+
+ --skin: #e5cdab;
+
+ --orange: #e56800;
+ --light-orange: #fdb64e;
+
+ --yellow: #fecf41;
+
+ --gray: #a0a0a2;
+ --dark-gray: #7C838F;
+ --light-gray: #B8BAC5;
+
+ --green: #98971a;
+ --bright-green: #b8bb26;
+}
+
+body {
+ background: url("/images/drainerdomain_bg.webp") no-repeat fixed;
+ color: var(--fg);
+}
+
+/* Main menu */
+
+.main-nav ul {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 0.25rem 0;
+}
+
+.main-nav li {
+ font-size: 1.15rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ text-align: center;
+ margin-right: 1.5rem;
+ padding: 0.3rem;
+}
+
+.main-nav li::before {
+ content: "[";
+}
+
+.main-nav li::after {
+ content: "]";
+}
+
+.main-nav li, a {
+ text-decoration: none;
+}
+
+.main-nav li::marker {
+ content: "";
+}
+
+.aside__social-links {
+ position: fixed;
+}
+
+.aside__social-links li {
+ font-size: 0.7rem;
+ font-weight: 400;
+ text-align: left;
+ padding-left: 0px;
+ margin-top: 10px;
+}
+
+.aside__social-links li::marker {
+ content: none;
+}
+
+.aside__social-links a {
+ padding: 2px;
+ text-decoration: none;
+}
+
+.content__body a:link {
+ color: var(--orange);
+}
+
+.content__body a:hover,
+.content__body a:visited {
+ color: var(--yellow);
+}
+
+/* Fonts */
+
+html {
+ font-family:
+ Iosevka,
+ monospace,
+ system-ui,
+ /* macOS 10.11-10.12 */ -apple-system,
+ /* Windows 6+ */ Segoe UI,
+ /* Android 4+ */ Roboto,
+ /* Ubuntu 10.10+ */ Ubuntu,
+ /* Gnome 3+ */ Cantarell,
+ /* KDE Plasma 5+ */ Noto Sans,
+ /* fallback */ sans-serif,
+ /* macOS emoji */ "Apple Color Emoji",
+ /* Windows emoji */ "Segoe UI Emoji",
+ /* Windows emoji */ "Segoe UI Symbol",
+ /* Linux emoji */ "Noto Color Emoji";
+}
+
+
+body {
+ font-size: 16px;
+ line-height: 1.5rem;
+ letter-spacing: 0.2px;
+}
+
+/* Headings */
+h1 {
+ font-size: 2rem;
+ margin: 1.5rem 0;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 1.5rem;
+ margin: 1.5rem 0;
+}
+
+h1+h2,
+h1+h3,
+h1+h4,
+h1+h5,
+h1+h6,
+h2+h3,
+h2+h4,
+h2+h5,
+h2+h6,
+h3+h4,
+h3+h5,
+h3+h6,
+h4+h5,
+h4+h6,
+h5+h6 {
+ margin: 1;
+}
+
+h1:before { content: "\003E"; }
+h2:before { content: "\003E\003E"; }
+h3:before { content: "\003E\003E\003E"; }
+h4:before { content: "\003E\003E\003E\003E"; }
+h5:before { content: "\003E\003E\003E\003E\003E"; }
+h6:before { content: "\003E\003E\003E\003E\003E\003E"; }
+
+h1:before,
+h2:before,
+h3:before,
+h4:before,
+h5:before,
+h6:before {
+ color: var(--yellow);
+ font-weight: 300;
+}
+
+h1:first-child {
+ margin-top: 0;
+}
+
+/* Paragraphs */
+p {
+ margin: 0 0 1.5rem 0;
+}
+
+/* Links */
+
+a:link, a:visited {
+ color: #fff;
+}
+
+a:hover, a:active {
+ color: var(--light-orange);
+}
+
+/* Lists */
+ul {
+ margin: 0 0 0 0;
+ padding-left: 1.25rem;
+}
+
+ol {
+ margin: 0 0 0 0;
+ padding-left: 1.75rem;
+}
+
+ol li {
+ margin-bottom: 10px;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+ margin: 0;
+}
+
+ul li::marker {
+ font-size: 0.8rem;
+ content: '\2500\ ';
+ color: var(--yellow);
+}
+
+ol li::marker {
+ color: var(--yellow);
+}
+
+dt {
+ margin: 0;
+ font-weight: bold;
+}
+
+dd {
+ margin: 0 0 0 1.5rem;
+ font-style: italic;
+}
+
+dd + dt {
+ margin-top: 1.5rem;
+}
+
+dl {
+ margin: 0 0 1.5rem 0;
+}
+
+/* Blockquotes */
+blockquote {
+ margin: 0;
+ border-left: 2px double var(--dark-gray);
+ font-style: italic;
+ font-size: 14px;
+ background: #0b0b0b !important;
+ padding: 0 5px 0 10px;
+}
+
+/* Code */
+pre {
+ border: 1px solid var(--yellow);
+ border-radius: 4px;
+}
+
+pre,
+code,
+kbd,
+samp {
+ font-family:
+ /* Iosevka */ Iosevka,
+ /* macOS 10.10+ */ Menlo,
+ /* Windows 6+ */ Consolas,
+ /* Android 4+ */ Roboto Mono,
+ /* Ubuntu 10.10+ */ Ubuntu Monospace,
+ /* KDE Plasma 5+ */ Noto Mono,
+ /* KDE Plasma 4+ */ Oxygen Mono,
+ /* Linux/OpenOffice fallback */ Liberation Mono,
+ /* fallback */ monospace;
+ background: #0b0b0b !important;
+ font-size: 14px;
+ color: var(--yellow);
+ letter-spacing: 0;
+}
+
+pre {
+ overflow-x: auto;
+ padding: 1.5rem;
+ margin: 0 0 1.5rem 0;
+}
+
+/* Emphasis */
+b,
+strong {
+ font-weight: 600;
+}
+
+/* Highlighting */
+::selection,
+mark {
+ background-color: var(--yellow);
+ color: var(--bg);
+}
+
+/* Other typographic elements */
+hr {
+ border: 0;
+ margin-bottom: 1.5rem;
+}
+
+hr:after {
+ content: '---';
+ color: var(--yellow);
+}
+
+
+/* Prevent super/sub from affecting line height */
+sup, sub {
+ vertical-align: baseline;
+ position: relative;
+ top: -0.25rem;
+ font-size: unset;
+}
+sub {
+ top: 0.25rem;
+}
+
+/* Tables */
+table {
+ margin: 0 0 0 0;
+ overflow-wrap: anywhere;
+}
+
+th, td {
+ color: var(--light-gray);
+ border-bottom: 1px solid var(--dark-gray);
+ vertical-align: top;
+ padding: 4px;
+}
+th:first-child, td:first-child {
+ padding-left: 0px;
+}
+th {
+ text-align: center;
+}
+
+/* 1rem = 16px by default */
+
+.page {
+ max-width: 64rem;
+ margin: 1rem auto;
+ display: grid;
+ grid-template-areas:
+ "header"
+ "body"
+ "aside";
+ grid-template-columns: minmax(0, 1fr);
+ grid-row-gap: 1rem;
+}
+
+@media (min-width: 45rem) {
+ .page {
+ grid-template-areas:
+ "header header"
+ "body aside";
+ grid-template-columns: minmax(0, 1fr) 15rem;
+ grid-column-gap: 2rem;
+ }
+}
+
+/* Header */
+
+.page__header {
+ grid-area: header;
+ display: flex;
+}
+
+.page__logo {
+ flex-shrink: 0;
+}
+
+.page__nav {
+ flex-grow: 1;
+}
+
+/* Body + aside */
+.page__body {
+ padding: 20px;
+ border-left: 2px dotted white;
+ grid-area: body;
+ background-color: rgba(0, 0, 0, 0.4);
+ overflow-wrap: break-word;
+}
+
+.page__body details a:link {
+ color: var(--orange)
+}
+
+.page__aside {
+ grid-area: aside;
+ color: var(--bright-bg);
+}
+
+details {
+ color: #fff;
+}
+
+summary {
+ padding: 4px;
+ font-weight: 500;
+}
+
+summary::marker {
+ color: var(--yellow);
+}
+
+.buttons {
+ display: flex;
+ justify-content: center;
+}
+
+.buttons li {
+ padding: 5px;
+}
+
+.buttons li::marker {
+ content: "";
+}
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-15 01:41:01 +0000