Webring
This commit is contained in:
parent
a93394c97d
commit
e4b0ff273d
|
|
@ -12,6 +12,8 @@
|
|||
--aside-warning-background: var(--dark-aside-warning-background);
|
||||
--aside-warning-border: var(--dark-aside-warning-border);
|
||||
|
||||
--webring-background: var(--dark-webring-background);
|
||||
|
||||
// Syntax highdarking
|
||||
--atom-base: var(--dark-atom-base);
|
||||
--atom-mono-1: var(--dark-atom-mono-1);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
--aside-warning-background: var(--light-aside-warning-background);
|
||||
--aside-warning-border: var(--light-aside-warning-border);
|
||||
|
||||
--webring-background: var(--light-webring-background);
|
||||
|
||||
// Syntax highlighting
|
||||
--atom-base: var(--light-atom-base);
|
||||
--atom-mono-1: var(--light-atom-mono-1);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@ $dark-accent-color: #f9c72f;
|
|||
--light-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
|
||||
--light-atom-base: #fafafa;
|
||||
--dark-atom-base: #282c34;
|
||||
|
|
@ -646,8 +649,12 @@ table {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
|
||||
> * {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 0;
|
||||
|
|
@ -656,6 +663,8 @@ table {
|
|||
}
|
||||
|
||||
.ui-controls {
|
||||
order: 1;
|
||||
|
||||
input {
|
||||
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
|
||||
|
|
@ -754,6 +778,15 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.site-footer {
|
||||
display: block;
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 720 + 30 + 720 + 15
|
||||
// main content, l/r container padding, aside width (50% on each side), outer edge margin
|
||||
// inner edge margin overlaps with container padding
|
||||
|
|
|
|||
|
|
@ -70,29 +70,30 @@
|
|||
</div>
|
||||
|
||||
<footer class="site-footer container">
|
||||
<!-- <div> -->
|
||||
<div>
|
||||
<h2 class="site-title">Shadowfacts</h2>
|
||||
<p class="ui-controls">
|
||||
Theme:
|
||||
<input type="radio" name="theme" id="auto" value="auto">
|
||||
<label for="auto">auto</label>
|
||||
<input type="radio" name="theme" id="light" value="light">
|
||||
<label for="light">light</label>
|
||||
<input type="radio" name="theme" id="dark" value="dark">
|
||||
<label for="dark">dark</label>
|
||||
</p>
|
||||
</div>
|
||||
<nav class="social-links">
|
||||
<ul>
|
||||
<li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li>
|
||||
<li><%- fancyLink("RSS", "/feed.xml") %></li>
|
||||
<li><%- fancyLink("GitHub", "https://github.com/shadowfacts", "rel=me") %></li>
|
||||
<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev", "rel=me") %></li>
|
||||
<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- </div> -->
|
||||
<h2 class="site-title">Shadowfacts</h2>
|
||||
<span class="ui-controls">
|
||||
Theme:
|
||||
<input type="radio" name="theme" id="auto" value="auto">
|
||||
<label for="auto">auto</label>
|
||||
<input type="radio" name="theme" id="light" value="light">
|
||||
<label for="light">light</label>
|
||||
<input type="radio" name="theme" id="dark" value="dark">
|
||||
<label for="dark">dark</label>
|
||||
</span>
|
||||
<nav class="social-links">
|
||||
<ul>
|
||||
<li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li>
|
||||
<li><%- fancyLink("RSS", "/feed.xml") %></li>
|
||||
<li><%- fancyLink("GitHub", "https://github.com/shadowfacts", "rel=me") %></li>
|
||||
<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev", "rel=me") %></li>
|
||||
<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<aside class="webring">
|
||||
<a href="https://metro.bieszczady.pl">Metro Bieszczady webring</a>
|
||||
<a title="previous page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/previous?from=shadowfacts">←</a>
|
||||
<a title="next page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/next?from=shadowfacts">→</a>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue