You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
5.6 KiB
HTML

3 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Remote Roast</title>
<meta name="DC.title" content="The Remote Roast" />
<meta name="description" content="The Remote Roast Club, a rC3 assembly about coffee.">
<meta property="og:title" content="The Remote Roast">
<meta property="og:description" content="The Remote Roast Club, a rC3 assembly about coffee.">
<meta property="og:image" content="https://remoteroast.club/thumbnail.jpg">
<meta property="og:url" content="https://remoteroast.club/index.html">
<meta name="twitter:card" content="summary_large_image">
<style>
@font-face {
font-family: "Orbitron";
font-weight: 700;
font-display: swap;
font-style: normal;
src: url("orbitron-bold-webfont.woff") format("woff");
}
body {
max-width: calc(100vw - 2em);
width: 40em;
height: 100vh;
margin: 0 auto;
padding: 2em 0;
background: #221714;
color: #FEE;
font: 20px/1.4 mono;
text-align: center;
}
#logo {
width: 200px;
height: 200px;
}
h1,h2 {
font: bold 30px/1.4 Orbitron;
}
section {
text-align: justify;
margin-top: 3em;
}
a {
color: white;
}
a::after {
content: "";
display: inline-block;
width: .8em;
height: .8em;
margin: 0 0 .2em .2em;
background: transparent url(link.svg) center no-repeat;
}
.day {
display: inline-block;
width: 6em;
}
li {
margin: 1em 0;
}
@media screen and (max-width: 370px) {
.day { display: inline; width: auto; }
}
</style>
</head>
<body>
<header>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 624 624" version="1.1" id="logo">
<rect x="1.156" y="-0.188" width="576.313" height="576.343" fill="#000" />
<rect x="143" y="240" width="97" height="288" style="fill:#001b18" />
<rect x="528" y="432" width="96" height="192" style="fill:#001b18" />
<rect x="528" y="47" width="96" height="97" style="fill:#01a08f" />
<rect x="432" y="47" width="96" height="193" style="fill:#01a08f" />
<rect x="336" y="47" width="96" height="97" style="fill:#01a08f" />
<rect x="336" y="432" width="96" height="192" style="fill:#01a08f" />
<rect x="240" y="336" width="96" height="288" style="fill:#01a08f" />
<rect x="143" y="528" width="97" height="96" style="fill:#01564d" />
<rect x="528" y="143" width="96" height="289" style="fill:#01a08f" />
<rect x="432" y="528" width="96" height="96" style="fill:#01564d" />
<rect x="240" y="47" width="96" height="289" style="fill:#01564d" />
<rect x="432" y="240" width="96" height="288" style="fill:#02fae0" />
<rect x="336" y="143" width="96" height="290" style="fill:#02fae0" />
<text x="210" y="550" style="font: bold 140px Orbitron" fill="#fff" stroke="#01564d" stroke-width="8">R2C</text>
<rect fill="none" stroke="#fff" stroke-width="7.63px" x="1.156" y="-0.188" width="576.313" height="576.343" />
<g fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" style="transform: scale(15) translate(10px, 4px)">
<!-- coffee icon from https://feathericons.com/ -->
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
<line x1="6" y1="1" x2="6" y2="4"></line>
<line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line>
</g>
</svg>
<h1>The Remote Roast Club</h1>
</header>
<main>
<section name="what" id="what">
<header><h2>What?</h2></header>
<p>
3 years ago
This was an
<a rel="noopener" target="_blank" href="https://events.ccc.de/2012/10/22/assemblies/">assembly</a>
by a coffee enthusiast for coffee enthusiasts. People could chat about
topics from coffee beans, origins and varieties to brewing methods and
coffee robots. Two (technically three) workshops showed people how to
get the best out of their coffee with the equipment they already have.
3 years ago
</p>
</section>
<section name="where-to-find" id="where">
<header><h2>Where?</h2></header>
<p>
3 years ago
If you were live in the
3 years ago
<a rel="noopener" target="_blank" href="https://rc3.world/" title="rC3 world">rC3 World</a>
3 years ago
you would look for Remote Roast in the
3 years ago
<a rel="noopener" target="_blank" href="https://rc3.world/rc3/assemblies/all" title="List of assemblies on rC3">list of assemblies</a>
or
<a rel="noopener" target="_blank" href="https://rc3.world/rc3/assembly/remoteroast/" title="RemoteRostClub Assembly on rC3">go to the RemoteRostClub Assembly</a>
3 years ago
directly. All this probably doesn't work anymore.
3 years ago
</section>
<section name="events" id="events">
<header><h2>Events</h2></header>
3 years ago
<p>Currently no events planned.</p>
3 years ago
<ol>
3 years ago
<!-- EXAMPLE
3 years ago
<li>
<time datetime="2020-12-28 14:00:00.0+01:00"><span class="day">Monday</span> 14:00</time>
<time datetime="2020-12-28 14:30:00.0+01:00">14:30</time>
<a rel="noopener" target="_blank" href="https://rc3.world/rc3/event/howto-chemex/" title="RemoteRostClub Event: How to Chemex">HowTo: Chemex / V60 / Kalita Wave</a>
</li>
3 years ago
-->
3 years ago
</ol>
</section>
</main>
<script data-goatcounter="https://remoterost-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>