diff --git a/out/index.html b/out/index.html index e4ebfd3..7c3bb2b 100644 --- a/out/index.html +++ b/out/index.html @@ -10,13 +10,59 @@
- Welcome to webring.umbreon.online! + Welcome to webring.umbreon.online!

- This is a webring for some friends. + This is a simple webring for some friends. This page will have + more information in the future, but Erin is busy obsessing over + the design so it might be a while. +

+

+ Here's everyone who participates: +

+ +

+ For webring participants: +

+ +

+ Running a webring + server written in half an hour. Source of this homepage + is also + available. Both are licensed under WTFPL. +

+

+ Admin: + @erin@tired.umbreon.online
+ Security: + security@ewin.moe

diff --git a/out/style.css b/out/style.css index 386a8ef..242ce96 100644 --- a/out/style.css +++ b/out/style.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @font-face { font-family: "SOADialogue"; src: url("font/SOADialogue.ttf") format(truetype); @@ -17,6 +18,11 @@ ); } +.color, .textbox__text { + color: var(--text-color); + text-shadow: 1rem 0 var(--text-shadow), 1rem 1rem var(--text-shadow), 0 1rem var(--text-shadow); +} + body { background: var(--gradient-horiz-stripes); min-height: 100vh; @@ -34,12 +40,12 @@ main { .textbox { display: inline-block; + --text-color: #424231; + --text-shadow: #C6C6B5; } .textbox--simple { --textbox-bg: #FFFFFF; --textbox-bg-fade: #F7F7EF; - --textbox-text-color: #424231; - --textbox-text-shadow: #C6C6B5; margin: 0 9rem; border: 1rem solid var(--textbox-border-outer); background: var(--textbox-border-inner); @@ -126,10 +132,6 @@ main { font-family: "SOADialogue"; font-size: 12rem; } -.textbox__text, .textbox__text .textbox__span { - color: var(--textbox-text-color); - text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow); -} .textbox__advance { --background: #FFF; --border: #000; @@ -165,13 +167,29 @@ main { } } -.textbox__span--red { - --textbox-text-color: #C54700; - --textbox-text-shadow: #EFC6A5; +.color--red { + --text-color: #C54700; + --text-shadow: #EFC6A5; } -.textbox__span--blue { - --textbox-text-color: #6352FF; - --textbox-text-shadow: #CEC6F7; +.color--blue { + --text-color: #6352FF; + --text-shadow: #CEC6F7; +} + +a { + color: inherit; + text-decoration-thickness: 1rem; + text-underline-offset: 1rem; + text-decoration-skip-ink: none; +} + +code { + font: inherit; + background: rgba(123, 123, 123, 0.7333333333); +} + +ul { + list-style-type: "· "; } .theme-options-grid { diff --git a/out/style.css.map b/out/style.css.map index cb85354..576b9dc 100644 --- a/out/style.css.map +++ b/out/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;AAMA;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AAOF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index 7cb980d..63c309b 100644 --- a/style.scss +++ b/style.scss @@ -26,6 +26,15 @@ ); } +// helper for applying consistent text style +%text { + color: var(--text-color); + text-shadow: + 1rem 0 var(--text-shadow), + 1rem 1rem var(--text-shadow), + 0 1rem var(--text-shadow); +} + // i don't need eyes anyway (transparency spotting) body { background: var(--gradient-horiz-stripes); @@ -51,14 +60,15 @@ main { // containers) display: inline-block; + --text-color: #424231; + --text-shadow: #C6C6B5; + // Most of the text box styles in the game are just recolors of the same // thing &--simple { // Variables for all the different colors --textbox-bg: #FFFFFF; --textbox-bg-fade: #F7F7EF; - --textbox-text-color: #424231; - --textbox-text-shadow: #C6C6B5; // make room for the handles which are `position:absolute`'d outside // this box @@ -184,6 +194,8 @@ main { } // #endregion + // TODO: implement the other styles of box frames + // Text inside the text box &__text { // offset by a bit to leave room for the rounded corners we do via box @@ -219,15 +231,8 @@ main { // correctly, except i dont think this actually helps lol // text-rendering: geometricPrecision; - // text colors and shadow - `.textbox__span`'s use the same logic but - // change the colors via variables - &, .textbox__span { - color: var(--textbox-text-color); - text-shadow: - 1rem 0 var(--textbox-text-shadow), - 1rem 1rem var(--textbox-text-shadow), - 0 1rem var(--textbox-text-shadow); - } + // apply text styles (--text-color and --text-shadow are inherited + @extend %text; } &__advance { @@ -302,18 +307,37 @@ main { } // custom text colors in text boxes -.textbox__span { +.color { + @extend %text; + &--red { - --textbox-text-color: #C54700; - --textbox-text-shadow: #EFC6A5; + --text-color: #C54700; + --text-shadow: #EFC6A5; } &--blue { - --textbox-text-color: #6352FF; - --textbox-text-shadow: #CEC6F7; + --text-color: #6352FF; + --text-shadow: #CEC6F7; } } +// links do a thing +a { + color: inherit; + text-decoration-thickness: 1rem; + text-underline-offset: 1rem; + text-decoration-skip-ink: none; +} + +code { + font: inherit; + background: #7B7B7BBB; +} + +ul { + list-style-type: "· "; +} + // misc shit .theme-options-grid { display: flex;