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 @@
<main>
<div class="textbox textbox--simple textbox--yellow">
<div class="textbox__text">
- Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
+ Welcome to <span class="color color--red">webring.umbreon.online</span>!
</div>
<div class="textbox__advance"></div>
</div>
<p>
- 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.
+ </p>
+ <p>
+ Here's everyone who participates:
+ </p>
+ <ul>
+ <li><a href="https://loveshock.xyz">loveshock.xyz</a></li>
+ <li><a href="https://starshines.gay">starshines.gay</a></li>
+ <li><a href="https://tempest.dev">tempest.dev</a></li>
+ <li><a href="https://interestingzinc.xyz">interestingzinc.xyz</a></li>
+ </ul>
+ <p>
+ For webring participants:
+ </p>
+ <ul>
+ <li>
+ You can view the full URL registered for your site by
+ checking <a href="https://webring.umbreon.online/list">
+ <code>/list</code></a>.
+ </li>
+ <li>
+ Link to the previous and next site in the ring with
+ <code>/prev</code> and <code>next</code>. Both of these
+ endpoints expect a query parameter `from` whose value should
+ be the full URL of your site as shown in <code>/list</code>,
+ including the scheme (http/https), optionally URI encoded.
+ For example:
+ <code>https://webring.umbreon.online/prev?from=https://mysite.xyz</code>.
+ </li>
+ <li>
+ If you need to change your registration or something, ping
+ Erin on Discord or something.
+ </li>
+ </ul>
+ <p>
+ Running <a href="https://git.ewin.moe/erin/webring">a webring
+ server written in half an hour</a>. Source of this homepage
+ <a href="https://git.ewin.moe/erin/webring-static">is also
+ available</a>. Both are licensed under WTFPL.
+ </p>
+ <p>
+ Admin: <a href="https://tired.umbreon.online/@erin">
+ @erin@tired.umbreon.online</a><br>
+ Security: <a href="mailto:security@ewin.moe">
+ security@ewin.moe</a>
</p>
</main>
</body>
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;