Files
fedizinefest-site/index.html
T

364 lines
8.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>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="FediZineFest">
<meta property="og:type" content="article">
<meta property="og:url" content="fedizinefest.fyi/">
<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%;
flex-flow: row wrap;
border-top: .25rem solid var(--color-header);
}
footer p {
margin: 0.5rem 0;
}
@media (max-width: 650px) {
footer {
flex-flow: column nowrap;
}
footer p {
text-align: center;
}
}
#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" aria-current="page">
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">
all years
</a>
</li>
</ul>
</nav>
</header>
<main id="main">
<h1 id="fedizinefest">FediZineFest</h1>
<p>FediZineFest ran in <a href="/years/2024">2024</a> and <a href="/years/2025">2025</a>. We're now looking at <a href="/years/2026-2027">FediZineFest 2026-2027</a>.</p>
<h2 id="what">What</h2>
<p>A zine sharing and distribution project for the fediverse.</p>
<h2 id="who">Who</h2>
<ul>
<li><strong>Artists</strong> provide physical and/or digital zines; receive payment and physical and/or digital zines.</li>
<li><strong>Backers</strong> provide payment; receive physical and/or digital zines.</li>
</ul>
<p>See <a href="/years/2026-2027/guidelines#who">&quot;Who&quot; on the 2026-2027 guidelines page</a> for more about participation caps and the waitlist.</p>
<h2 id="when">When</h2>
<p>2026-2027 dates yet to be determined. See <a href="/years/2026-2027/guidelines#when">&quot;When&quot; on the 2026-2027 guidelines page</a> for deadline structure.</p>
<h2 id="where">Where</h2>
<p>Anywhere that can ship to/from the US.</p>
<h2 id="why">Why</h2>
<p>To bring folks together and share art.</p>
<h2 id="more-questions">More questions?</h2>
<p><strong>Artists:</strong> read the <a href="/years/2026-2027/guidelines#artist-information">2026-2027 artist information</a> for information about art restrictions and payment.</p>
<p><strong>Backers:</strong> read the <a href="/years/2026-2027/guidelines#backer-information">2026-2027 backer information</a> for information about how to purchase zine bundles.</p>
</main>
<footer>
<p>
Read the <a href="/attribution">site attribution</a>
</p>
<p>© 2023-2026</p>
<p>Site feedback? Questions?
<a href="https://leecat.art/contact">Reach out to Lee</a>
</p>
</footer>
<!-- This page `/` was built on 2026-08-31T16:35:58.918Z -->
</body>
</html>