commit e5a60b05c92f1d7e69944f7a03dd1b743deb49dd
parent 25842bcb1893cd21092fb5f37bfca2209e3ae7e8
Author: weetat <wtenison@protonmail.com>
Date: Wed, 12 Feb 2025 21:52:40 +0000
Imported my global styles.
Diffstat:
| A | web/styles.css | | | 329 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 329 insertions(+), 0 deletions(-)
diff --git a/web/styles.css b/web/styles.css
@@ -0,0 +1,328 @@
+@layer base, mod;
+
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
+
+/* ////////// BASE ////////// */
+@layer base {
+
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+
+ :root {
+
+ --wte_gold: 1.618;
+
+ --wte_header__height: 5rem;
+
+ --wte_page__max-width: 900px;
+
+ --wte_padding--half: calc(var(--wte_padding) * 0.5);
+ --wte_padding: 0.5rem;
+ --wte_padding--double: calc(var(--wte_padding) * 2.0);
+
+ --wte_margin--half: calc(var(--wte_margin) * 0.5);
+ --wte_margin: 0.5rem;
+ --wte_margin--double: calc(var(--wte_margin) * 2);
+
+ --wte_border__width--half: calc(var(--wte_border__width) / 2);
+ --wte_border__width: 0.25rem;
+ --wte_border__width--double: 0.5rem;
+ --wte_border__radius: 1.0rem;
+ --wte_border__radius--half: calc(var(--wte_border__radius) * 0.5);
+
+ --color__ff: #fdfdfd;
+ --color__f0: #dfe6e9;
+ --color__f0f1: color-mix(in srgb, var(--color__f0) 50%, var(--color__f1));
+ --color__f1: #b2bec3;
+ --color__f1b1: color-mix(in srgb, var(--color__f1) 50%, var(--color__b1));
+ --color__b1: #636e72;
+ --color__b1b0: color-mix(in srgb, var(--color__b1) 50%, var(--color__b0));
+ --color__b0a: color-mix(in srgb, var(--color__b1) 10%, var(--color__b0));
+ --color__b0: #2d3436;
+ --color__bf: #010101;
+
+ --color__theme: light-dark(var(--color__ff), var(--color__bf));
+
+ --color__font-light: light-dark(var(--color__b1), var(--color__f1));
+ --color__font-dark: light-dark(var(--color__bf), var(--color__ff));
+ --color__fg-light: light-dark(var(--color__b1), var(--color__f1));
+ --color__fg-dark: light-dark(var(--color__b0), var(--color__f0));
+ --color__bg-light: light-dark(var(--color__f0), var(--color__b0));
+ --color__bg-dark: light-dark(var(--color__f1), var(--color__b1));
+
+ --color__pink-light: light-dark(#fd79a8, #e84393);
+ --color__pink-dark: light-dark(#e84393, #fd79a8);
+ --color__red-light: light-dark(#ff7675, #d63031);
+ --color__red-dark: light-dark(#d63031, #ff7675);
+ --color__orange-light: light-dark(#fab1a0, #e17055);
+ --color__orange-dark: light-dark(#e17055, #fab1a0);
+ --color__yellow-light: light-dark(#ffeaa7, #fdcb6e);
+ --color__yellow-dark: light-dark(#fdcb6e, #ffeaa7);
+ --color__mint-light: light-dark(#55efc4, #00b894);
+ --color__mint-dark: light-dark(#00b894, #55efc4);
+ --color__aqua-light: light-dark(#81ecec, #00cec9);
+ --color__aqua-dark: light-dark(#00cec9, #81ecec);
+ --color__blue-light: light-dark(#74b9ff, #0984e3);
+ --color__blue-dark: light-dark(#0984e3, #74b9ff);
+ --color__purple-light: light-dark(#a29bfe, #6c5ce7);
+ --color__purple-dark: light-dark(#6c5ce7, #a29bfe);
+ }
+
+ body {
+ margin: calc(var(--wte_header__height) + var(--wte_padding)) var(--wte_margin--double) var(--wte_margin--double);
+
+ color-scheme: light;
+ color: var(--color__font-dark);
+ background-color: var(--color__bg-light);
+
+ font-family: 'Comfortaa';
+
+ >._content {
+ display: grid;
+
+ @media screen and (min-width: 900px) {
+ grid-template-columns: auto max(var(--wte_page__max-width)) auto;
+ }
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ padding: var(--wte_padding--half) var(--wte_padding) var(--wte_padding--half) var(--wte_padding);
+ margin: var(--wte_margin--double) var(--wte_margin) var(--wte_margin--double) var(--wte_margin);
+
+ display: grid;
+ justify-items: center;
+ border-bottom: 2px solid var(--color__fg-light);
+
+ font-weight: bold;
+ }
+
+ img {
+ width: 75%;
+ padding: var(--wte_padding);
+ margin: var(--wte_margin);
+
+ justify-self: center;
+ }
+
+ /* ////////// LAYOUT ////////// */
+
+ @scope (.collapsible_) {
+ :scope {
+ display: grid;
+ grid-template-rows: max-content max-content;
+ justify-items: center;
+ }
+
+ /* Collapsible 'header'*/
+ > :first-child {
+ width: 100%;
+ margin: var(--wte_margin--half);
+ padding: var(--wte_padding--half);
+
+ cursor: pointer;
+
+ &::before {
+ color: var(--color__blue-dark);
+ content: "+\a0";
+ }
+
+ &.active::before {
+ color: var(--color__yellow-dark);
+ content: "-\a0";
+ }
+ }
+
+ /* Collapsible container */
+ > :nth-child(2) {
+ width: 98%;
+ height: 0;
+ overflow: hidden;
+ transition: 0.33s;
+ }
+
+
+ }
+
+ @scope (.slideshow_) {
+ :scope {
+ width: max-content;
+ padding: var(--wte_padding--double);
+
+ display: grid;
+ grid-template-columns: max-content auto max-content;
+ justify-items: center;
+ align-items: center;
+
+ border-radius: var(--wte_border__radius);
+ }
+
+ #image-frame {
+ width: 100%;
+ height: var(--wte_image__size);
+ padding: var(--wte_padding--double);
+
+ display: grid;
+ justify-items: center;
+ overflow: hidden;
+
+ img {
+ display: none;
+ height: calc(var(--wte_image__size) - var(--wte_padding--double) * 2);
+ }
+ }
+
+ #button-left {
+ &::before {
+ font-weight: bold;
+ content: "\25C0\ ";
+ }
+ }
+
+ #button-right {
+ &::after {
+ font-weight: bold;
+ content: " \25B6";
+ }
+ }
+ }
+
+ /* ////////// UTILITIES ////////// */
+
+ /* STANDARD LAYOUT CONTAINER */
+ .__bg {
+ padding: var(--wte_padding);
+ background-color: var(--color__bg-dark);
+ border: 3px solid var(--color__fg-light);
+ border-radius: var(--wte_border__radius--half);
+
+ &>* {
+ padding: var(--wte_padding);
+ background-color: var(--color__bg-light);
+ border: 2px solid var(--color__fg-light);
+ border-radius: var(--wte_border__radius--half);
+ }
+ }
+
+ .--clear-bg {
+ background-color: inherit;
+ border: none;
+ }
+
+ .__vb {
+ padding: var(--wte_padding);
+ border-bottom-left-radius: var(--wte_border__radius);
+ border-bottom-right-radius: var(--wte_border__radius);
+ background-color: var(--color__bg-dark);
+
+ &>* {
+ border: 2px solid var(--color__fg-light);
+ border-radius: var(--wte_border__radius--half);
+ background-color: var(--color__bg-light);
+ }
+ }
+
+ /* DELIMITED LIST */
+ ul.__del-list {
+ padding: var(--wte_padding);
+ margin: 0;
+
+ > :first-child {
+ border-top: none;
+ }
+
+ >li {
+ padding: var(--wte_padding--double) 0 var(--wte_padding--double);
+ border-top: 2px solid var(--color__fg-light);
+ list-style-type: none;
+ }
+
+ .h {
+ padding-bottom: var(--wte_padding);
+ font-weight: bold;
+ }
+ }
+
+ .__table-list>* {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ }
+
+ .__table-grid-l>* {
+ display: grid;
+ grid-template-columns: minmax(100px, .25fr) 1fr;
+ }
+
+
+ .__vb-1 {
+ padding: var(--wte_padding--half);
+ border-bottom-left-radius: var(--wte_border__radius);
+ border-bottom-right-radius: var(--wte_border__radius);
+ background-color: var(--color__bg-dark);
+
+ &>* {
+ margin-top: var(--wte_margin);
+ margin-bottom: var(--wte_margin);
+ border: 2px solid var(--color__fg-light);
+ border-radius: var(--wte_border__radius--half);
+ background-color: var(--color__bg-light);
+ }
+ }
+
+
+ .__border-circle {
+ background-color: light-dark(var(--color__blue-dark), var(--color__bg-light));
+ border: 0.5rem solid light-dark(var(--color__bg-light), var(--color__blue-dark));
+ border-radius: 100%;
+ }
+
+ .descriptor {
+ margin-top: 0.25rem;
+ font-size: 0.75em;
+ }
+
+ .--font-center {
+ text-align: center;
+ }
+
+ .--font-half {
+ font-size: .5rem;
+ }
+
+ .--font-3-4 {
+ font-size: .75rem;
+ }
+
+ .--font-4-3 {
+ font-size: 1.25rem;
+ }
+
+ .--font-double {
+ font-size: 2rem;
+ }
+
+ .--font-bold {
+ font-weight: bold;
+ }
+
+ .--clickable {
+ cursor: pointer;
+ }
+
+ .__stdc>* {
+ width: 100%;
+ height: 100%;
+ padding: var(--wte_padding);
+ margin: 0;
+
+ display: grid;
+ }
+}
+\ No newline at end of file
