the home site for me: also iteration 3 or 4 of my site

feat: add 88x31 buttons

dunkirk.sh 01ae510b a171b730

verified
.DS_Store

This is a binary file and will not be displayed.

+1
.gitignore
···
node_modules
.env
.crush
+
.DS_Store
+190 -167
sass/css/mods.css
···
#nav-bar {
-
padding: 0.625rem 0 0 0;
-
display: flex;
-
flex-direction: row;
-
gap: 0.25rem;
-
flex-wrap: wrap;
-
justify-content: flex-end;
-
align-items: center;
-
align-content: flex-end;
+
padding: 0.625rem 0 0 0;
+
display: flex;
+
flex-direction: row;
+
gap: 0.25rem;
+
flex-wrap: wrap;
+
justify-content: flex-end;
+
align-items: center;
+
align-content: flex-end;
}
#footer-container {
-
display: flex;
-
flex-direction: column;
-
justify-content: center;
-
align-items: center;
-
text-align: center;
-
padding-bottom: 0.5rem;
+
display: flex;
+
flex-direction: column;
+
justify-content: center;
+
align-items: center;
+
text-align: center;
+
padding-bottom: 0.5rem;
}
#footer-container p {
-
margin: 0;
+
margin: 0;
}
.accent-data {
-
color: var(--accent-dark);
+
color: var(--accent-dark);
}
.tags-data {
-
display: flex;
-
flex-direction: row;
-
flex-wrap: wrap;
-
justify-content: flex-end;
-
align-items: flex-start;
-
align-content: flex-end;
-
gap: 0.25rem;
+
display: flex;
+
flex-direction: row;
+
flex-wrap: wrap;
+
justify-content: flex-end;
+
align-items: flex-start;
+
align-content: flex-end;
+
gap: 0.25rem;
}
.title-list li {
-
margin-bottom: 0.375rem;
+
margin-bottom: 0.375rem;
}
/* icons settings */
.icons {
-
width: 1.3rem;
-
height: 1.3rem;
-
aspect-ratio: 1 / 1;
-
display: inline-block;
-
vertical-align: middle;
-
color: var(--text);
-
fill: var(--text);
-
background-color: transparent;
-
cursor: pointer;
+
width: 1.3rem;
+
height: 1.3rem;
+
aspect-ratio: 1 / 1;
+
display: inline-block;
+
vertical-align: middle;
+
color: var(--text);
+
fill: var(--text);
+
background-color: transparent;
+
cursor: pointer;
}
.icons:hover {
-
background-color: transparent;
-
color: var(--accent);
+
background-color: transparent;
+
color: var(--accent);
}
/* footnotes */
.footnote-definition {
-
margin: 0 0 0 0.125rem;
+
margin: 0 0 0 0.125rem;
}
.footnote-definition-label {
-
color: var(--accent);
+
color: var(--accent);
}
.footnote-definition p {
-
display: inline;
-
margin: 0.625rem 0 0 0.625rem;
+
display: inline;
+
margin: 0.625rem 0 0 0.625rem;
}
/* general classes */
.no-style {
-
padding: 0;
-
margin: 0;
-
border: none;
-
border-radius: 0;
+
padding: 0;
+
margin: 0;
+
border: none;
+
border-radius: 0;
}
.no-style:hover {
-
background-color: transparent;
-
color: var(--accent);
+
background-color: transparent;
+
color: var(--accent);
}
.center {
-
text-align: center;
+
text-align: center;
}
.center img {
-
display: block;
-
margin: 1rem auto;
+
display: block;
+
margin: 1rem auto;
}
.center figcaption {
-
text-align: center;
+
text-align: center;
}
.float-right {
-
float: right;
+
float: right;
}
.float-left {
-
float: left;
+
float: left;
}
div > code,
li code,
p code {
-
padding: 0.1em 0.3em 0.1em 0.3em;
-
color: var(--text-dark);
-
background-color: var(--bg-light);
+
padding: 0.1em 0.3em 0.1em 0.3em;
+
color: var(--text-dark);
+
background-color: var(--bg-light);
}
pre {
-
border-top-left-radius: 0;
+
border-top-left-radius: 0;
}
blockquote {
-
padding-top: 0.2rem;
-
padding-bottom: 0.2rem;
+
padding-top: 0.2rem;
+
padding-bottom: 0.2rem;
}
blockquote:has(+ pre) {
-
display: inline-block;
-
border: none;
-
font-family: "code", monospace !important;
-
font-size: 0.8rem;
-
font-weight: 600;
-
margin: 0;
-
margin-bottom: 0.2rem;
-
margin-block: 0 0;
-
border-top-left-radius: 0.2em;
-
border-top-right-radius: 0.2em;
-
padding-left: 0.75rem;
-
padding-right: 0.75rem;
-
padding-top: 0.25rem;
-
padding-bottom: 0.25rem;
-
position: relative;
-
background-color: var(--accent);
+
display: inline-block;
+
border: none;
+
font-family: "code", monospace !important;
+
font-size: 0.8rem;
+
font-weight: 600;
+
margin: 0;
+
margin-bottom: 0.2rem;
+
margin-block: 0 0;
+
border-top-left-radius: 0.2em;
+
border-top-right-radius: 0.2em;
+
padding-left: 0.75rem;
+
padding-right: 0.75rem;
+
padding-top: 0.25rem;
+
padding-bottom: 0.25rem;
+
position: relative;
+
background-color: var(--accent);
}
blockquote:has(+ pre) p {
-
margin: 0;
-
color: var(--accent-text);
+
margin: 0;
+
color: var(--accent-text);
}
blockquote:has(+ pre) p::selection {
-
background: var(--pink-puree);
+
background: var(--pink-puree);
}
.yt-embed {
-
width: 100%;
-
display: flex;
-
flex-direction: column;
-
justify-content: center;
-
align-content: center;
-
text-align: center;
+
width: 100%;
+
display: flex;
+
flex-direction: column;
+
justify-content: center;
+
align-content: center;
+
text-align: center;
}
.yt-embed iframe {
-
width: 100%;
-
aspect-ratio: 16 / 9;
-
align-self: center;
+
width: 100%;
+
aspect-ratio: 16 / 9;
+
align-self: center;
}
.yt-embed figcaption {
-
margin-top: 1rem;
-
text-align: center;
+
margin-top: 1rem;
+
text-align: center;
}
#elr table {
-
border-style: none;
+
border-style: none;
}
#elr td {
-
border-style: dashed;
+
border-style: dashed;
}
img.avatar {
-
width: 24px;
-
height: 24px;
-
aspect-ratio: 1 / 1;
-
border-radius: 50%;
-
vertical-align: middle;
-
display: inline-block;
-
border: none;
-
padding: 0;
-
margin: 0;
+
width: 24px;
+
height: 24px;
+
aspect-ratio: 1 / 1;
+
border-radius: 50%;
+
vertical-align: middle;
+
display: inline-block;
+
border: none;
+
padding: 0;
+
margin: 0;
}
cite {
-
display: inline-flex;
-
align-items: center;
-
vertical-align: middle;
+
display: inline-flex;
+
align-items: center;
+
vertical-align: middle;
}
cite a {
-
display: inline-flex;
-
align-items: center;
+
display: inline-flex;
+
align-items: center;
}
cite a img.avatar {
-
margin-right: 5px;
+
margin-right: 5px;
}
.image-gallery {
-
display: flex;
-
flex-direction: column;
-
gap: 0.5rem;
-
padding-top: 0.5rem;
+
display: flex;
+
flex-direction: column;
+
gap: 0.5rem;
+
padding-top: 0.5rem;
}
.image-gallery img {
-
max-width: 100%;
-
border-radius: 0.25rem;
-
padding: 0;
-
margin: 0;
+
max-width: 100%;
+
border-radius: 0.25rem;
+
padding: 0;
+
margin: 0;
}
.side-by-side {
-
display: flex;
-
flex-direction: row;
+
display: flex;
+
flex-direction: row;
}
.side-by-side img {
-
max-width: calc(50% - 0.25rem);
+
max-width: calc(50% - 0.25rem);
}
.gallery-grid {
-
display: grid;
-
grid-template-columns: repeat(2, 1fr);
-
gap: 0.1rem;
+
display: grid;
+
grid-template-columns: repeat(2, 1fr);
+
gap: 0.1rem;
}
.gallery-grid img {
-
width: 100%;
-
height: auto;
-
object-fit: cover;
+
width: 100%;
+
height: auto;
+
object-fit: cover;
}
.inlined-bubbles {
-
width: auto;
-
pointer-events: none;
-
display: block;
-
margin-top: 10px;
-
text-align: center;
+
width: auto;
+
pointer-events: none;
+
display: block;
+
margin-top: 10px;
+
text-align: center;
}
.bubble {
-
padding: 0.7em 1.2em 0.7em 1.2em;
-
background: var(--accent);
-
border-bottom: 5px solid var(--bg-light);
-
border-radius: 7px 7px 10px 10px;
-
font-size: 1rem;
-
font-weight: bold;
-
color: var(--accent-text);
-
display: inline-block;
-
text-align: center;
-
transition:
-
transform 0.3s ease,
-
opacity 0.3s ease;
+
padding: 0.7em 1.2em 0.7em 1.2em;
+
background: var(--accent);
+
border-bottom: 5px solid var(--bg-light);
+
border-radius: 7px 7px 10px 10px;
+
font-size: 1rem;
+
font-weight: bold;
+
color: var(--accent-text);
+
display: inline-block;
+
text-align: center;
+
transition:
+
transform 0.3s ease,
+
opacity 0.3s ease;
}
@keyframes bubbleIn {
-
0% {
-
opacity: 0;
-
transform: translateY(10px) scale(0.95);
-
}
-
100% {
-
opacity: 1;
-
transform: translateY(0) scale(1);
-
}
+
0% {
+
opacity: 0;
+
transform: translateY(10px) scale(0.95);
+
}
+
100% {
+
opacity: 1;
+
transform: translateY(0) scale(1);
+
}
}
@media (prefers-reduced-motion: no-preference) {
-
.bubble.animate-in {
-
animation: bubbleIn 0.3s ease-out forwards;
-
}
+
.bubble.animate-in {
+
animation: bubbleIn 0.3s ease-out forwards;
+
}
}
.bubble a {
-
color: var(--accent-text);
-
text-decoration: none;
+
color: var(--accent-text);
+
text-decoration: none;
}
#time-ago {
-
font-weight: normal;
-
font-size: 0.8rem;
+
font-weight: normal;
+
font-size: 0.8rem;
+
}
+
+
.badge-row {
+
display: flex;
+
flex-wrap: wrap;
+
justify-content: center;
+
gap: 8px;
+
padding-bottom: 0.5rem;
+
}
+
+
.badge-row img {
+
display: inline-block;
+
border: none;
+
border-radius: 0;
+
box-shadow: none;
+
max-width: 100%;
+
height: auto;
+
margin: 0;
+
}
+
+
.badge-row a {
+
display: inline-flex;
+
align-items: center;
}
:root {
-
--nightshade-violet: oklch(0.27 0.0242 287.67);
-
--purple-night: oklch(27.58% 0.0203 289.13);
-
--red-crushed-grape: oklch(0.656 0.1189 296.74);
-
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
-
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
-
--reseda-green: oklch(62.33% 0.0475 126.94);
-
--earth-yellow: oklch(86.49% 0.018 73.05);
-
--sunset: oklch(0.86 0.0213 73.05);
-
--ultra-violet: oklch(42.21% 0.0676 297.45);
-
--rose-quartz: oklch(65.32% 0.0585 311.96);
-
--pink-puree: oklch(75.65% 0.0555 290.76);
-
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
-
--purple-gray: oklch(25.63% 0.0002 290.76);
-
--alice-blue: oklch(95.38% 0.0118 239.91);
+
--nightshade-violet: oklch(0.27 0.0242 287.67);
+
--purple-night: oklch(27.58% 0.0203 289.13);
+
--red-crushed-grape: oklch(0.656 0.1189 296.74);
+
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
+
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
+
--reseda-green: oklch(62.33% 0.0475 126.94);
+
--earth-yellow: oklch(86.49% 0.018 73.05);
+
--sunset: oklch(0.86 0.0213 73.05);
+
--ultra-violet: oklch(42.21% 0.0676 297.45);
+
--rose-quartz: oklch(65.32% 0.0585 311.96);
+
--pink-puree: oklch(75.65% 0.0555 290.76);
+
--lavendar-breeze: oklch(91.06% 0.0223 290.76);
+
--purple-gray: oklch(25.63% 0.0002 290.76);
+
--alice-blue: oklch(95.38% 0.0118 239.91);
}
static/badges/get-netscape.gif

This is a binary file and will not be displayed.

static/badges/green-team.gif

This is a binary file and will not be displayed.

static/badges/hackclub.png

This is a binary file and will not be displayed.

static/badges/made-with-neovim.png

This is a binary file and will not be displayed.

static/badges/no-web3.gif

This is a binary file and will not be displayed.

static/badges/powered-by-nix.gif

This is a binary file and will not be displayed.

static/badges/tangled.png

This is a binary file and will not be displayed.

+51 -54
templates/footer.html
···
<hr />
<div id="footer-container">
-
<p style="margin-bottom: 0.5rem">
-
&copy; {{ now() | date(format="%Y") }} Kieran Klukas ||
-
<code id="visits">0</code> page visits || {% set hash =
-
get_env(name="CF_PAGES_COMMIT_SHA", default=load_data(path=".git/refs/heads/main", required=false))%}{% if hash is not string %}{% set hash = "unknown" %}{% endif %}<a href=https://tangled.sh/@dunkirk.sh/zera/commit/{{ hash }}>zera@{{ hash |
-
truncate(length=7, end="")}}</a>
-
</p>
-
<p style="margin-bottom: 0.5rem">
-
Webrings:
-
<a href="https://w.elr.sh">elr</a>
-
[<a href='javascript:void(0)' onclick='randomSite()'>random</a> |
-
<a href='#' id='prev-link'>prev</a> |
-
<a href='#' id='next-link'>next</a>] •
-
<a href="https://ctp-webr.ing">ctp</a>
-
[<a href="https://ctp-webr.ing/dunkirk/previous">prev</a> |
-
<a href="https://ctp-webr.ing/dunkirk/next">next</a>]
-
</p>
-
<p>
-
Content licensed under
-
<a
-
target="_blank"
-
rel="noopener noreferrer"
-
href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
-
>CC BY-NC-SA 4.0</a
-
>
-
</p>
-
<p>
-
Code licensed under
-
<a
-
target="_blank"
-
rel="noopener noreferrer"
-
href="https://tangled.sh/@dunkirk.sh/zera/blob/main/LICENSE.md"
-
>AGPL 3.0</a
-
>
-
</p>
-
<script type="text/javascript" src="https://w.elr.sh/onionring-variables.js"></script>
-
<script>
-
thisSite = "https://dunkirk.sh"
-
thisIndex = null;
+
<p class="badge-row">
+
<a href="https://512kb.club"><img src="badges/green-team.gif"
+
alt="a proud member of the green team of 512KB club" /></a>
+
<a href="https://yesterweb.org/no-to-web3/index.html?s=09"><img src="badges/no-web3.gif"
+
alt="say no to web3, keep the web free" /></a>
+
<a href="https://hackclub.com"><img src="badges/hackclub.png" alt="linux powered" /></a>
+
<a href="https://tangled.org"><img src=" badges/tangled.png" alt="tangled beta" /></a>
+
<a href="https://www.netscape-communications.com/download/"><img src="badges/get-netscape.gif"
+
alt="get netscape" /></a>
+
<a href="https://tangled.org/@dunkirk.sh/dots"><img src="badges/powered-by-nix.gif" alt="powered by nix" /></a>
+
<a href="https://tangled.org/@dunkirk.sh/nixvim"><img src="badges/made-with-neovim.png" /></a>
+
</p>
+
<p style="margin-bottom: 0.5rem">
+
&copy; {{ now() | date(format="%Y") }} Kieran Klukas ||
+
<code id="visits">0</code> page visits || {% set hash =
+
get_env(name="CF_PAGES_COMMIT_SHA", default=load_data(path=".git/refs/heads/main", required=false))%}{% if hash is
+
not string %}{% set hash = "unknown" %}{% endif %}<a href=https://tangled.sh/@dunkirk.sh/zera/commit/{{ hash
+
}}>zera@{{ hash |
+
truncate(length=7, end="")}}</a>
+
</p>
+
<p style="margin-bottom: 0.5rem">
+
Webrings:
+
<a href="https://w.elr.sh">elr</a>
+
[<a href='javascript:void(0)' onclick='randomSite()'>random</a> |
+
<a href='#' id='prev-link'>prev</a> |
+
<a href='#' id='next-link'>next</a>] •
+
<a href="https://ctp-webr.ing">ctp</a>
+
[<a href="https://ctp-webr.ing/dunkirk/previous">prev</a> |
+
<a href="https://ctp-webr.ing/dunkirk/next">next</a>]
+
</p>
+
+
<script type="text/javascript" src="https://w.elr.sh/onionring-variables.js"></script>
+
<script>
+
thisSite = "https://dunkirk.sh"
+
thisIndex = null;
-
for (i = 0; i < sites.length; i++) {
-
if (thisSite.startsWith(sites[i])) {
-
thisIndex = i;
-
break;
-
}
+
for (i = 0; i < sites.length; i++) {
+
if (thisSite.startsWith(sites[i])) {
+
thisIndex = i;
+
break;
}
+
}
-
function randomSite() {
-
otherSites = sites.slice();
-
otherSites.splice(thisIndex, 1);
-
randomIndex = Math.floor(Math.random() * otherSites.length);
-
location.href = otherSites[randomIndex];
-
}
+
function randomSite() {
+
otherSites = sites.slice();
+
otherSites.splice(thisIndex, 1);
+
randomIndex = Math.floor(Math.random() * otherSites.length);
+
location.href = otherSites[randomIndex];
+
}
-
previousIndex = (thisIndex-1 < 0) ? sites.length-1 : thisIndex-1;
-
nextIndex = (thisIndex+1 >= sites.length) ? 0 : thisIndex+1;
+
previousIndex = (thisIndex - 1 < 0) ? sites.length - 1 : thisIndex - 1;
+
nextIndex = (thisIndex + 1 >= sites.length) ? 0 : thisIndex + 1;
-
document.getElementById('prev-link').href = sites[previousIndex];
-
document.getElementById('next-link').href = sites[nextIndex];
-
</script>
+
document.getElementById('prev-link').href = sites[previousIndex];
+
document.getElementById('next-link').href = sites[nextIndex];
+
</script>
</div>