gome/gomesite
gome
/
gomesite
1
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

webpage jam goes live

This commit is contained in:
gome 2023-08-24 22:18:47 -05:00
parent 7d5c38b859
commit f95aa52ed3
3 changed files with 116 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -58,12 +58,12 @@
</div>
</article>
<article>
<h2>Latest gomepost</h2>
<a class='journal-link' href='journal/goals-2.html'>
<h3>New-year goals postmortem</h3>
<div class='line stop-2'></div>
<time datetime='Wed, 9 Aug 2023 21:30:00 CDT'>9 Aug 2023, 9:30 PM</time>
<p>How did that go?</p>
<h2>New on gomepage</h2>
<p>From the <a href='library'>Library</a></p>
<a class='library-link' href='library/webjam'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon stop-2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
<h3>Ctrl-C Webpage Jam</h3>
<p>Currently underway!</p>
</a>
</article>
<article id='listening'>

BIN
library/webjam/berhthun.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

202
library/webjam/index.html
View File

@ -9,65 +9,105 @@
<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'>
const signups = document.getElementById('signups');
fetch('https://ctrl-c.club/~gome/library/webjam/webjam-entries.php')
.then( r => r.json() )
.then( r => {
for (const { user, plan } of r) {
const user_link = document.createElement('a');
user_link.href = 'https://ctrl-c.club/~' + user;
user_link.innerText = user;
const user_h4 = document.createElement('h4');
user_h4.id = user;
user_h4.innerText = '~';
user_h4.appendChild(user_link);
const plan_pre = document.createElement('pre');
plan_pre.classList.add('webjam-plan');
plan_pre.innerText = plan;
signups.appendChild(user_h4);
signups.appendChild(plan_pre);
}
})
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>
html {
max-width: 90ch;
h2 {
margin-bottom: 0.75em;
}
.dates {
font-variant-numeric: oldstyle-nums;
.webjam-progress {
width: 100%;
margin-bottom: 1em;
}
#signups h4:first-child {
margin-top: 0;
}
.webjam-plan {
background-color: #ffffff66;
border: 1px outset #ffffff44;
border-radius: 2px;
padding: 1em;
white-space: pre-wrap;
margin: 1em -1rem;
}
.container-1 {
.webjam-progress-dates {
font-size: 0.8em;
width: 100%;
display: flex;
align-items: center;
gap: 20px;
justify-content: space-between;
margin-bottom: 0.5em;
gap: 1em;
}
@media only screen and (max-width: 500px) {
.container-1 {
flex-direction: column;
gap: 0;
#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;
}
}
.vital-info {
margin-bottom: 1em;
padding: 1em 1em 0 1em;
background-color: #ffffff44;
border: 1px solid #323a42;
border-radius: 10px;
box-shadow: 1px 1px #323a42;
display: inline-block;
@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>
@ -78,54 +118,32 @@
</nav>
</header>
<main>
<h1>Ctrl-C Webpage Jam 2023!</h1>
<div class='container-1'>
<div class='vital-info'>
<p class='dates'>
<b>Dates</b>: Friday, 25 August &ndash; Friday, 1 September (one week)
</p>
<h3 class='stop-0'>To Sign Up for the Jam:</h3>
<p>
Create a file called <code>.webjam-23</code> in your Ctrl-C home directory
containing a short description of what you would like to accomplish during the jam.
</p>
<h3 class='stop-5'>If You are Signed Up for the Jam:</h3>
<ol>
<li>Finalize your plans in your <code>~/.webjam-23</code> file</li>
<li>Email the URL(s) you will be working on to <code>gome<span style='user-select: none;'>&nbsp;&#8203;</span>@<span style='user-select: none;'>&nbsp;&#8203;</span>ctrl-c.club</code></li>
<li>Check back here during the event to follow everyone’s progress!</li>
</ol>
<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&nbsp;August<span class='collapse'> 2023</span></span>
<span><span class='collapse'>00:00, </span>2&nbsp;September<span class='collapse'> 2023</span></span>
</div>
<img class='no-border' src='../journal-icons/computer-2.webp' width='192' height='192' />
<div class='webjam-progress-bar'>
<div class='webjam-progress-bar-progress' id='progress'></div>
</div>
<div id='countdown'></div>
</div>
<h3 class='stop-0'>Build on your Ctrl-C user site!</h3>
<p>
Is there a page on your site you’ve been meaning to add?
Is your homepage just a big “<b>COMING SOON!</b>”?
Do you want to pick up some new webpage-building skills?
</p><p>
The Webpage Jam 2023 is a week-long opportunity for you to do all that and more alongside your fellow Ctrl-C members.
Have fun working on your pages! Feel free to ask for help or share your progress on iris or the IRC channel.
</p>
<h3 class='stop-0'>You set your own goal for the jam!</h3>
<p>
The goal of the jam is to make a single page,
but you can certainly plan to make more if you want.
Whatever you consider a manageable goal over the course of a week!
You are also allowed to change your goal.
</p>
<h3 class='stop-0'>The format is casual and simple!</h3>
<ul>
<li><b>Before the event</b>, Ctrl-C users will sign up with a statement of their plans for the jam.</li>
<li><b>During the event</b>, we will spend a week working on our respective webpages, sharing our progress and offering support to each other along the way.</li>
<li><b>At the end of the event</b>, the finished pages will be shared here.</li>
<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='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'>~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'>Some of your fellow users have already signed up!</h3>
<p>
To join them, create a <code>~/.webjam-23</code> file!
</p>
<div id='signups'>
</div>
<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;'>&nbsp;&#8203;</span>@<span style='user-select: none;'>&nbsp;&#8203;</span>ctrl-c.club</code> before the end of the jam!</p>
</main>
<footer>
<img src='../../img/mushrooms_2.webp' alt='Toadstools' />