2024-10-22 01:16:54 +02:00
# fpc-sitegen example template
# labels (e.g. head-format) can be taken as plain-text when prefixed with a back-slash
title-format:
$$CONTENT$$
head-format:
$$CONTENT$$
sub-head-format:
$$CONTENT$$
text-format:
$$CONTENT$$
section-format:
<div class ="card">
<div class="card-inner" style="background: url('img/$$SECTION_NAME$$.png') no-repeat center center; background-size: cover">
2024-10-24 20:15:41 +02:00
<a href="img/$$SECTION_NAME$$.png" class="card-image">
</a>
<div class="card-nfo"><a href="nfos/$$SECTION_NAME$$.nfo"><img src="pics/nfo.gif"></a></div>
2024-10-22 01:16:54 +02:00
</div>
<div class="card-text">
$$CONTENT$$
</div>
</div>
root-section-format:
<div class="graphics-grid">
$$CONTENT$$
</div>
output-format:
<!DOCTYPE html>
<html>
<head>
2024-10-23 20:58:12 +02:00
<meta charset="UTF-8">
2024-10-22 01:16:54 +02:00
<title>$$DOCUMENT_TITLE$$</title>
2024-10-23 21:06:02 +02:00
<link rel="icon" type="image/gif" href="/catcube.fav.gif">
2024-10-22 01:16:54 +02:00
<style>
body {
2024-10-23 13:12:57 +02:00
margin: 2rem;
padding: 0;
2024-10-22 01:16:54 +02:00
background-image: url("pics/background.png");
background-repeat: repeat;
background-size: 200pt;
font-family: Monospace;
font-size: 30pt;
font-weight: bold;
color: white;
text-shadow: 2pt 2pt 4pt black;
}
2024-10-22 18:50:34 +02:00
.banners {
margin: 1rem;
2024-10-22 18:55:54 +02:00
font-size: 4pt;
2024-10-22 18:55:18 +02:00
font-weight: normal;
2024-10-22 18:53:23 +02:00
2024-10-22 18:50:34 +02:00
text-shadow: none;
}
2024-10-22 01:16:54 +02:00
footer {
margin: 1rem;
padding: 1rem;
background: black;
font-size: 14pt;
text-shadow: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: pink;
}
a:active {
color: white;
}
2024-10-22 18:46:55 +02:00
a.fancy {
2024-10-22 01:16:54 +02:00
background:
radial-gradient(circle at 8%, transparent, transparent calc(4% - 1px), purple 4%, purple 6%, transparent calc(6% + 1px)),
conic-gradient(from -45deg at 20%, transparent, transparent 270deg, yellow 270deg, yellow),
conic-gradient(from -45deg at 26%, transparent, transparent 270deg, white 270deg, white),
conic-gradient(from -45deg at 32%, transparent, transparent 270deg, pink 270deg, pink),
conic-gradient(from -45deg at 38%, transparent, transparent 270deg, skyblue 270deg, skyblue),
conic-gradient(from -45deg at 44%, transparent, transparent 270deg, brown 270deg, brown),
conic-gradient(from -45deg , transparent, transparent 270deg, black 270deg, black),
linear-gradient(red, red 16.6%, orange 16.6%, orange 33.2%, yellow 33.2%, yellow 49.8%, green 49.8%, green 66.4%, blue 66.4%, blue 83%, purple 83%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
2024-10-22 18:46:55 +02:00
.me {
text-align: center;
}
.webring-container {
margin: 0 auto;
text-align: center;
}
.webring {
display: inline;
background: black;
padding: 1rem;
text-shadow: none;
}
.title-gfx {
2024-10-22 01:16:54 +02:00
width: 100%;
text-align: center;
}
.gif {
height: 40pt;
}
.graphics-grid {
display: grid;
2024-10-23 13:12:57 +02:00
grid-template-columns: repeat(1, minmax(0, 1fr));
2024-10-26 19:20:51 +02:00
2024-10-22 01:16:54 +02:00
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
}
.card {
padding: 1rem;
}
.card-inner {
aspect-ratio: 4/3;
margin-bottom: 1rem;
2024-10-24 20:15:41 +02:00
text-align: right;
position: sticky;
2024-10-22 01:16:54 +02:00
border-radius: 30pt;
box-shadow: 2pt 2pt 10pt black;
}
.card-image {
width: 100%;
height: 100%;
2024-10-24 20:15:41 +02:00
2024-10-22 01:16:54 +02:00
display: block;
2024-10-24 20:15:41 +02:00
position: absolute;
}
.card-nfo {
display: block;
text-align: right;
2024-10-26 19:20:51 +02:00
padding-top: 10pt;
padding-right: 30pt;
2024-10-24 20:15:41 +02:00
position: sticky;
2024-10-22 01:16:54 +02:00
}
.card-text {
width: 100%;
height: 7rem;
}
@media (min-width: 1200px) {
2024-10-23 13:12:57 +02:00
.graphics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2024-10-22 01:16:54 +02:00
}
@media (min-width: 1500px) {
2024-10-23 13:12:57 +02:00
.graphics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2024-10-22 01:16:54 +02:00
}
</style>
</head>
<body>
2024-10-22 18:46:55 +02:00
<div class="me">
Hi, I'm juvi, I like programming, especially Rust and graphics programming.
<br><br>
Socials: Fedi (@danb@chaos.social), Twitter (@huhudanb), GitHub (@heyjuvi), Pouet (juvi)
<br><br>
</div>
<div class="webring-container">
<div class="webring"><a href="https://heroin.trade" class="fancy"><< tila</a></div> | <div class="webring"><a href="https://marie.software" class="fancy">marie >></a></div>
<br><br>
</div>
<div class="title-gfx">
2024-10-22 01:16:54 +02:00
<img src="pics/peachcat.gif" class="gif">
<img src="pics/cat-spinning.gif" class="gif">
<img src="pics/peachcat.gif" class="gif">
my 4k exegfx
<img src="pics/peachcat.gif" class="gif">
<img src="pics/cat-spinning.gif" class="gif">
<img src="pics/peachcat.gif" class="gif">
</div>
$$CONTENT$$
2024-10-22 18:50:34 +02:00
<br>
2024-10-22 01:16:54 +02:00
2024-10-22 18:50:34 +02:00
<div class="banners">
2024-10-22 18:52:30 +02:00
<img src="/banners/antinft.gif"> <a href="https://heroin.trade"><img src="/banners/heroin_trade.png"></a> <img src="/banners/neovim.gif"> <img src="/banners/cutesocks.gif"> <img src="/banners/4x3_fade.gif"> <img src="/banners/minibanner.gif"> <a href="https://pouet.net"><img src="/banners/pouet.gif"></a>
2024-10-22 18:46:55 +02:00
</div>
2024-10-22 01:16:54 +02:00
<footer>
2024-10-22 18:46:55 +02:00
Generated with fpc-sitegen written in 100% freepascal by marie from <a href="https://marie.software" class="fancy">marie.software</a> and kindly hosted and taken care for by tila from <a href="https://heroin.trade" class="fancy">heroin.trade </a> :3.</div>
2024-10-22 01:16:54 +02:00
2024-10-22 18:46:55 +02:00
Last generated @ $$DATE$$, $$TIME$$ ; source <a href="https://git.heroin.trade/juvi/website/src/branch/$$BRANCH$$/$$SOURCE$$" class="fancy">$$SOURCE$$</a> @ commit <a href="https://git.heroin.trade/juvi/website/commit/$$COMMIT$$" class="fancy">$$COMMIT$$</a>
2024-10-22 01:16:54 +02:00
</footer>
</body>
</html>
