okay here have actual page content
This commit is contained in:
parent
da42f41711
commit
c6589f4bd2
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"}
|
56
style.scss
56
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;
|
||||
|
|
Loading…
Reference in a new issue