Files
fedizinefest-site/years/index.html
T

352 lines
7.3 KiB
HTML
Raw Normal View History

2026-08-26 15:36:49 -07:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>Catalog of Years | FediZineFest</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="canonical" href="/">
<meta name="description" content="A zine sharing project for the fediverse">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Catalog of Years | FediZineFest">
<meta property="og:type" content="article">
<meta property="og:url" content="fedizinefest.fyi/years/">
<meta property="og:description" content="A zine sharing project for the fediverse">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta property="og:image" content="/img/2025-logo.png">
<meta property="og:image:alt" content="a logo in dark purple and golden yellow. it looks sorta like a folded map, or like a single piece of printer paper that's been folded and cut into the format needed for an 8-page zine. the 8 panels read FEDI ZINE. next to this, a blue and green folded 8-page zine reads 'fest 2025'">
<meta name="generator" content="Eleventy v3.1.5">
<!-- CSS -->
<style>:root {
color-scheme: light dark;
--color-bg-light: #f0f0f0;
--color-text-light: #640054;
--color-header-light: #185370;
--color-warn-light: #fbcc0a;
--color-bg-dark: #1f1f1f;
--color-text-dark: #91c73b;
--color-header-dark: #ff9b37;
--color-warn-dark: #540033;
--color-bg: light-dark(var(--color-bg-light), var(--color-bg-dark));
--color-text: light-dark(var(--color-text-light), var(--color-text-dark));
--color-header: light-dark(var(--color-header-light), var(--color-header-dark));
--color-warn: light-dark(var(--color-warn-light), var(--color-warn-dark));
}
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
}
*:not(dialog) {
margin: 0; /* 2. Remove default margin */
}
*:focus-visible {
outline: .2rem solid var(--color-header);
outline-offset: .15rem;
background-color: var(--color-header);
}
html {
height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords; /* 3. Enable keyword animations */
}
}
#root, #__next {
isolation: isolate; /* 10. Create a root stacking context */
}
body {
line-height: 1.5; /* 4. Increase line-height */
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
font-family: "Atkinson Hyperlegible Next", sans-serif;
background-color: var(--color-bg);
color: var(--color-text);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100%;
}
main {
width: 60%;
margin: 0 auto 2rem;
}
@media (max-width: 1100px) {
main {
width: 80%;
}
}
@media (max-width: 650px) {
main {
width: 92%;
}
}
img, picture, video, canvas, svg {
display: block; /* 6. Improve media defaults */
max-width: 100%; /* 6. Improve media defaults */
height: auto; /* 6. Improve media defaults */
margin: 0 auto;
}
input, button, textarea, select {
font: inherit; /* 7. Inherit fonts for form controls */
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word; /* 8. Avoid text overflows */
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance; /* 9. Improve line wrapping */
color: var(--color-header);
font-weight: bold;
line-height: 105%;
}
h1 {
margin: 5rem 0 2rem;
font-size: 3rem;
text-align: center;
}
@media (max-width: 650px) {
h1 { margin: 2rem 0; }
}
h2 {
font-size: 2rem;
padding-top: 3rem;
border-top: solid;
margin: 1.4rem 0;
}
h3 {
font-size: 1.4rem;
margin-top: 1rem;
}
p {
text-wrap: pretty; /* 9. Improve line wrapping */
}
p, ul {
margin: 1.5rem 0;
}
ul ul {
margin: .5rem 0;
}
@media (max-width: 650px) {
ul {
padding-left: 1.5rem;
}
}
a:link,
a:visited {
background-color: var(--color-text);
color: var(--color-bg);
font-weight: bold;
padding: 0 .2rem;
text-decoration: none;
border-radius: .2rem;
}
/* makes the years page prettier */
h3 a:link,
h3 a:visited {
background-color: var(--color-header);
}
h3 *:focus-visible {
outline: .2rem solid var(--color-text);
background-color: var(--color-text);
}
/* Header nav */
nav {
border-bottom: .25rem solid var(--color-header);
font-size: 1.1rem;
}
#skip {
position: absolute;
left: -999px;
top: -999px;
}
#skip:focus-visible {
left: 1rem;
top: .5rem;
}
nav ul {
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin: .5rem .5rem;
}
footer {
display: flex;
justify-content: space-between;
margin: 1rem auto 0;
padding: 1rem .5rem;
width: 100%;
2026-08-26 23:50:47 +00:00
flex-flow: row wrap;
2026-08-26 15:36:49 -07:00
border-top: .25rem solid var(--color-header);
}
footer p {
margin: 0.5rem 0;
}
2026-08-26 23:50:47 +00:00
@media (max-width: 650px) {
footer {
flex-flow: column nowrap;
}
footer p {
text-align: center;
}
}
2026-08-26 15:36:49 -07:00
#zine-container {
padding: 0;
}
#zine-container li {
list-style: none;
border-bottom: solid;
border-left: solid;
border-radius: 4px;
padding: 0 .4rem .4rem;
margin-bottom: 1rem;
}
#zine-container h2,
#zine-container p {
border: none;
display: inline;
}
#zine-container h2 a {
background-color: var(--color-header);
line-height: 135%;
}
#zine-container h3 {
background-color: var(--color-warn);
color: var(--color-text);
border-radius: 3px;
padding: 0 .2rem;
text-align: right;
line-height: 150%;
margin: .25rem 0 .75rem 0;
}
#zine-container blockquote {
margin: 0;
color: var(--color-header);
}</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav aria-label="main navigation">
<a id="skip" href="#main">skip to content</a>
<ul>
<li>
<a href="/" title="home">
home
</a>
</li>
<li>
<a href="/signup/" title="get involved">
get involved
</a>
</li>
<li>
<a href="/zines/" title="zines!">
zines!
</a>
</li>
<li>
<a href="/years/" title="all years" aria-current="page">
all years
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1 id="catalog-of-years">Catalog of Years</h1>
<h2 id="fedizinefest-2026-2027"><a href="/years/2026-2027">FediZineFest 2026-2027</a></h2>
<h3 id="2026-2027-guidelines"><a href="/years/2026-2027/guidelines">2026-2027 guidelines</a></h3>
<h2 id="fedizinefest-2025"><a href="/years/2025">FediZineFest 2025</a></h2>
<h3 id="2025-guidelines"><a href="/years/2025/guidelines">2025 guidelines</a></h3>
<h3 id="2025-zines"><a href="/years/2025/zines">2025 zines</a></h3>
<h2 id="fedizinefest-2024"><a href="/years/2024">FediZineFest 2024</a></h2>
<h3 id="2024-guidelines"><a href="/years/2024/guidelines">2024 guidelines</a></h3>
<h3 id="2024-zines"><a href="/years/2024/zines">2024 zines</a></h3>
</main>
<footer>
<p>
Read the <a href="/attribution">site attribution</a>
</p>
2026-08-26 23:50:47 +00:00
<p>© 2023-2026</p>
2026-08-26 15:36:49 -07:00
<p>Site feedback? Questions?
2026-08-27 04:12:41 +00:00
<a href="https://leecat.art/contact">Reach out to Lee</a>
2026-08-26 15:36:49 -07:00
</p>
</footer>
2026-08-27 04:12:41 +00:00
<!-- This page `/years/` was built on 2026-08-27T04:12:34.763Z -->
2026-08-26 15:36:49 -07:00
</body>
</html>