232 lines
5.9 KiB
Plaintext
232 lines
5.9 KiB
Plaintext
# 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"><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.
|
|
<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">
|
|
<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$$
|
|
<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>
|