shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Webring

This commit is contained in:
Shadowfacts 2022-04-06 23:43:16 -04:00
parent a93394c97d
commit e4b0ff273d
4 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/css/dark.scss
View File

@ -12,6 +12,8 @@
--aside-warning-background: var(--dark-aside-warning-background); --aside-warning-background: var(--dark-aside-warning-background);
--aside-warning-border: var(--dark-aside-warning-border); --aside-warning-border: var(--dark-aside-warning-border);
--webring-background: var(--dark-webring-background);
// Syntax highdarking // Syntax highdarking
--atom-base: var(--dark-atom-base); --atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1); --atom-mono-1: var(--dark-atom-mono-1);

2
site/css/light.scss
View File

@ -12,6 +12,8 @@
--aside-warning-background: var(--light-aside-warning-background); --aside-warning-background: var(--light-aside-warning-background);
--aside-warning-border: var(--light-aside-warning-border); --aside-warning-border: var(--light-aside-warning-border);
--webring-background: var(--light-webring-background);
// Syntax highlighting // Syntax highlighting
--atom-base: var(--light-atom-base); --atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1); --atom-mono-1: var(--light-atom-mono-1);

35
site/css/main.scss
View File

@ -30,6 +30,9 @@ $dark-accent-color: #f9c72f;
--light-aside-warning-border: #c6322f; --light-aside-warning-border: #c6322f;
--dark-aside-warning-border: #c6322f; --dark-aside-warning-border: #c6322f;
--light-webring-background: linear-gradient(135deg, #855988, #6b4984, #483475, #2b2f77, #141852);
--dark-webring-background: linear-gradient(135deg, rgba(128, 224, 105, 1), rgba(128, 224, 105, 0.7));
// Syntax highlighting // Syntax highlighting
--light-atom-base: #fafafa; --light-atom-base: #fafafa;
--dark-atom-base: #282c34; --dark-atom-base: #282c34;
@ -646,8 +649,12 @@ table {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline;
> * {
width: 50%;
}
.site-title { .site-title {
margin: 0; margin: 0;
@ -656,6 +663,8 @@ table {
} }
.ui-controls { .ui-controls {
order: 1;
input { input {
display: none; display: none;
} }
@ -691,6 +700,21 @@ table {
} }
} }
} }
.webring {
order: 2;
background: var(--webring-background);
background-clip: text;
width: fit-content;
font-size: 1.2em;
font-variant: small-caps;
font-weight: 900;
a {
text-decoration: none;
color: transparent;
}
}
} }
// Pagination // Pagination
@ -754,6 +778,15 @@ table {
} }
} }
@media (max-width: 768px) {
.site-footer {
display: block;
> * {
width: 100%;
}
}
}
// 720 + 30 + 720 + 15 // 720 + 30 + 720 + 15
// main content, l/r container padding, aside width (50% on each side), outer edge margin // main content, l/r container padding, aside width (50% on each side), outer edge margin
// inner edge margin overlaps with container padding // inner edge margin overlaps with container padding

47
site/layouts/default.html.ejs
View File

@ -70,29 +70,30 @@
</div> </div>
<footer class="site-footer container"> <footer class="site-footer container">
<!-- <div> --> <h2 class="site-title">Shadowfacts</h2>
<div> <span class="ui-controls">
<h2 class="site-title">Shadowfacts</h2> Theme:
<p class="ui-controls"> <input type="radio" name="theme" id="auto" value="auto">
Theme: <label for="auto">auto</label>
<input type="radio" name="theme" id="auto" value="auto"> <input type="radio" name="theme" id="light" value="light">
<label for="auto">auto</label> <label for="light">light</label>
<input type="radio" name="theme" id="light" value="light"> <input type="radio" name="theme" id="dark" value="dark">
<label for="light">light</label> <label for="dark">dark</label>
<input type="radio" name="theme" id="dark" value="dark"> </span>
<label for="dark">dark</label> <nav class="social-links">
</p> <ul>
</div> <li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li>
<nav class="social-links"> <li><%- fancyLink("RSS", "/feed.xml") %></li>
<ul> <li><%- fancyLink("GitHub", "https://github.com/shadowfacts", "rel=me") %></li>
<li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li> <li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev", "rel=me") %></li>
<li><%- fancyLink("RSS", "/feed.xml") %></li> <li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
<li><%- fancyLink("GitHub", "https://github.com/shadowfacts", "rel=me") %></li> </ul>
<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev", "rel=me") %></li> </nav>
<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li> <aside class="webring">
</ul> <a href="https://metro.bieszczady.pl">Metro Bieszczady webring</a>
</nav> <a title="previous page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/previous?from=shadowfacts">←</a>
<!-- </div> --> <a title="next page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/next?from=shadowfacts">→</a>
</aside>
<script> <script>
(() => { (() => {