okay here have actual page content

This commit is contained in:
Erin 2023-07-19 17:15:44 -04:00
parent da42f41711
commit c6589f4bd2
4 changed files with 119 additions and 31 deletions

View file

@ -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>

View file

@ -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 {

View file

@ -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"}
{"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"}

View file

@ -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;