155 lines
6.6 KiB
HTML
155 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='en'>
|
||
<head>
|
||
<title>gome — Webpage Jam 2023</title>
|
||
<meta charset='utf-8'/>
|
||
<meta name='theme-color' content='#efe5d7'>
|
||
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
|
||
<link rel='icon' type='image/x-icon' href='../../favicon.ico'>
|
||
<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=Lora:ital@0;1&display=swap' rel='stylesheet'>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/dayjs.min.js" integrity="sha512-q4Xn+ZU2K+dqJPL8a3TiyGsDa31IkR/rLt/w+fy8jLrx8TdXj0dLM1Aq4aPXnOOKxHEya/bD9DePDB2DHm4jJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/plugin/duration.min.js" integrity="sha512-/ZD3LcT1wewkHD8U5WR9ZC4r/Wrg01/AiSYcutkQx/qWE681VMo1VIv9QqQxqigCyILgra+IMerNwUUGSKqPfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
|
||
<script type='module'>
|
||
dayjs.extend(window.dayjs_plugin_duration);
|
||
const start = dayjs('2023-08-25');
|
||
const end = dayjs('2023-09-02');
|
||
let current = dayjs();
|
||
const percent = Math.round(current.diff(start) * 100000 / end.diff(start)) / 1000;
|
||
document.getElementById('progress').style.width = percent + '%';
|
||
const countdown = document.getElementById('countdown');
|
||
function pluralize(duration, unit) {
|
||
return `${unit}${duration.get(unit) === 1 ? '' : 's'}`;
|
||
}
|
||
function update_countdown() {
|
||
const duration = dayjs.duration(end.diff(dayjs()));
|
||
countdown.innerText = duration.format(`D [${pluralize(duration, 'day')},] H [${pluralize(duration, 'hour')},] m [${pluralize(duration, 'minute')},] s [${pluralize(duration, 'second')} remain!]`);
|
||
}
|
||
window.setInterval(update_countdown, 1000);
|
||
update_countdown();
|
||
</script>
|
||
<style>
|
||
h2 {
|
||
margin-bottom: 0.75em;
|
||
}
|
||
.webjam-progress {
|
||
width: 100%;
|
||
margin-bottom: 1em;
|
||
}
|
||
.webjam-progress-dates {
|
||
font-size: 0.8em;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.5em;
|
||
gap: 1em;
|
||
}
|
||
#countdown {
|
||
font-size: 0.8em;
|
||
margin-top: 0.25em;
|
||
}
|
||
.webjam-progress-bar {
|
||
height: 1em;
|
||
width: 100%;
|
||
position: relative;
|
||
background-color: #eab77533;
|
||
border: 1px solid #323a42;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.webjam-progress-bar-progress {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
background-color: #984624;
|
||
}
|
||
.participant-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
margin: 0 0 25px 0;
|
||
padding: 0;
|
||
grid-gap: 0.5em;
|
||
}
|
||
.participant-list .participant {
|
||
font-size: 0.85em;
|
||
display: block;
|
||
padding: 0.25em 0.5em 0.5em 0.5em;
|
||
border: 1px solid #323a42;
|
||
box-shadow: 1px 1px #323a42;
|
||
border-radius: 3px;
|
||
margin: 0;
|
||
height: 85px;
|
||
background-color: #ffffff66;
|
||
}
|
||
.participant-list .participant a {
|
||
display: inline;
|
||
}
|
||
.participant-list .participant .username {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
@media only screen and (max-width: 700px) {
|
||
.participant-list {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 440px) {
|
||
.participant-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.participant-list .participant {
|
||
height: auto;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 375px) {
|
||
.webjam-progress-dates .collapse {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header id='header'>
|
||
<nav>
|
||
<a href='../..'>back to gomepage</a>—<a href='..'>library</a>
|
||
</nav>
|
||
</header>
|
||
<main>
|
||
<h1>Ctrl-C Webpage Jam 2023</h1>
|
||
<h2 class='stop-0' style='margin: 0.5em auto'>The Jam is currently underway!</h2>
|
||
<img class='no-border' src='berhthun.webp' width='366' height='366'>
|
||
<div class='webjam-progress'>
|
||
<div class='webjam-progress-dates'>
|
||
<span><span class='collapse'>00:00, </span>25 August<span class='collapse'> 2023</span></span>
|
||
<span><span class='collapse'>00:00, </span>2 September<span class='collapse'> 2023</span></span>
|
||
</div>
|
||
<div class='webjam-progress-bar'>
|
||
<div class='webjam-progress-bar-progress' id='progress'></div>
|
||
</div>
|
||
<div id='countdown'></div>
|
||
</div>
|
||
<p>
|
||
Have fun working on your pages! Feel free to ask for help or share your progress on iris or the IRC channel.
|
||
</p>
|
||
<h2>Participants</h2>
|
||
<ul class='participant-list'>
|
||
<li class='participant'><span class='username'>~pgadey</span> is working on a <a href='https://ctrl-c.club/~pgadey/tour/'>hypertext home tour</a></li>
|
||
<li class='participant'><span class='username'>~chiptune</span> is working on <a href='https://ctrl-c.club/~chiptune/'>homepage updates</a> and more <a href='https://ctrl-c.club/~chiptune/art.html'>ASCII art</a></li>
|
||
<li class='participant'><span class='username'>~basilmori</span> is mirroring their <a href='https://geminiproxy.p.projectsegfau.lt/gemini/gemini.ctrl-c.club/~basilmori/'>gemini capsule</a></li>
|
||
<li class='participant'><span class='username'>~singletona082</span> is working on several pages: <a href='https://ctrl-c.club/~singletona082/zine/'>ctrl-zine</a>, <a href='https://ctrl-c.club/~singletona082/ham/'>ham radio</a>, <a href='https://ctrl-c.club/~singletona082/garden/'>garden</a>, <a href='https://ctrl-c.club/~singletona082/ifiction/'>ifiction</a></li>
|
||
<li class='participant'><span class='username'>~jara25</span> is experimenting with <a href='https://ctrl-c.club/~jara25/webjam-23/'>3D graphics</a></li>
|
||
<li class='participant'><span class='username'>~luchiz</span> is making a <a href='https://ctrl-c.club/~luchiz/webjam23/'>MIDI synthesizer</a></li>
|
||
<li class='participant'><span class='username'>~gome</span> is working on several pages: <a href='https://ctrl-c.club/~gome/'>techsplanations</a>, <a href='https://ctrl-c.club/~gome/'>song writing</a>, <a href='https://ctrl-c.club/~gome/'>inner glossary</a></li>
|
||
</ul>
|
||
<h3 class='stop-5'>Still meaning to join?</h3>
|
||
<p>Just email me the URL(s) you are working on at <code>gome<span style='user-select: none;'> ​</span>@<span style='user-select: none;'> ​</span>ctrl-c.club</code> before the end of the jam!</p>
|
||
</main>
|
||
<footer>
|
||
<img src='../../img/mushrooms_2.webp' alt='Toadstools' />
|
||
</footer>
|
||
</body>
|
||
</html>
|