# 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">
<a href="img/$$SECTION_NAME$$.png" class="card-image">
</a>
<div class="card-nfo"><a href="nfos/$$SECTION_NAME$$.nfo.html"><img src="pics/nfo.gif"></a></div>
</div>
<div class="card-text">
$$CONTENT$$
</div>
</div>
root-section-format:
<div class="graphics-grid">
$$CONTENT$$
</div>
output-format:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$$DOCUMENT_TITLE$$</title>
<link rel="icon" type="image/gif" href="/catcube.fav.gif">
<style>
body {
margin: 2rem;
padding: 0;
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;
}
.banners {
margin: 1rem;
font-size: 4pt;
font-weight: normal;
text-shadow: none;
}
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;
}
a.fancy {
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;
}
.me {
text-align: center;
}
.webring-container {
margin: 0 auto;
text-align: center;
}
.webring {
display: inline;
background: black;
padding: 1rem;
text-shadow: none;
}
.title-gfx {
width: 100%;
text-align: center;
}
.gif {
height: 40pt;
}
.graphics-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
}
.card {
padding: 1rem;
}
.card-inner {
aspect-ratio: 4/3;
margin-bottom: 1rem;
text-align: right;
position: sticky;
border-radius: 30pt;
box-shadow: 2pt 2pt 10pt black;
}
.card-image {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.card-nfo {
display: block;
text-align: right;
padding-top: 10pt;
padding-right: 30pt;
position: sticky;
}
.card-text {
width: 100%;
height: 7rem;
}
@media (min-width: 1200px) {
.graphics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
.graphics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
</style>
</head>
<body>
<div class="me">
Hi, I'm juvi, I like programming, especially Rust and graphics programming and making art with it.
<br><br>
Socials: Fedi (<a href="https://icosahedron.website/@juvi">@juvi@icosahedron.social</a>), GitHub (<a href="https://github.com/heyjuvi">@heyjuvi</a>), Pouet (<a href="https://www.pouet.net/user.php?who=104849">juvi</a>)
<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">
<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">
<br>
(also have a look at <a href="https://executable.graphics">executables.graphics</a>)
</div>
$$CONTENT$$
<br>
<div class="banners">
<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>
</div>
<footer>
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>
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>
</footer>
</body>
</html>