devhack/devhack.net
7
2
Fork 4
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve home page formatting; document doorbell; add calendar end times #1

Merged
m merged 6 commits from :icss_2 into main 2024-09-27 13:54:28 -04:00
Conversation 1 Commits 6 Files changed 3 +57 -39
3 changed files with 57 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index-cal.js
View file

@ -19,15 +19,19 @@ function drawEventList(events) {
weekday: 'long',
month: "numeric",
day: "numeric",
};
const timeOptions = {
hour: "numeric",
minute: "numeric",
};
const ul = document.createElement('ul');
events.forEach(event => {
const li = document.createElement('li');
const dateStr = `${event.start.toLocaleString('en-US', dateOptions)}`.toLocaleLowerCase();
const dateStr = `${event.start.toLocaleDateString('en-US', dateOptions)}`.toLocaleLowerCase();
const timeStr = `${event.start.toLocaleTimeString('en-US', timeOptions)}–${event.end.toLocaleTimeString('en-US', timeOptions)}`.toLocaleLowerCase();
const recurrenceStr = event.recurrence ? ` (${event.recurrence})` : '';
li.textContent = `${event.summary}: ${dateStr}${recurrenceStr}`;
const descriptionStr = event.description ? `<br>${event.description}` : '';
li.innerHTML = `${event.summary}<span class="secondary">${descriptionStr}<br>${dateStr}${recurrenceStr}<br>${timeStr}</span>`;
ul.appendChild(li);
});
return ul;
@ -93,7 +97,9 @@ function getUpcomingEvents(vcalendar, numEvents = 10) {
if (next.compare(sixHoursAgo) >= 0) {
upcomingEvents.push({
summary: icalEvent.summary,
description: icalEvent.description,
start: next.toJSDate(),
end: icalEvent.endDate.toJSDate(),
recurrence: describeRecurrence(icalEvent)
});
break;
@ -104,7 +110,9 @@ function getUpcomingEvents(vcalendar, numEvents = 10) {
if (eventStart.compare(sixHoursAgo) >= 0) {
upcomingEvents.push({
summary: icalEvent.summary,
start: eventStart.toJSDate()
description: icalEvent.description,
start: eventStart.toJSDate(),
end: icalEvent.endDate.toJSDate(),
});
}
}

40
index.html
View file

@ -6,25 +6,33 @@
<link rel="stylesheet" href="style.css">
<script src="vendor/ical.min.js"></script>
<script defer src="index-cal.js"></script>
<body>
<h1>/dev/hack
<span style="display: inline-block; white-space: nowrap">$ <input type="text" autofocus name="_"></span>
</h1>
<p>seattle hackerspace</p>
<p>
<span class="address">4534½ University&nbsp;Way&nbsp;NE<span class="address-hide">, Seattle,&nbsp;WA 98105-4511</span>
<span class="address-hide">(<a href="https://wiki.devhack.net/Directions">getting here</a>)</span></span>
</p>
<h2>calendar</h2>
<div id="cal-parsed">
<ul><li>loading...</li></ul>
</div>
<h2>contact</h2>
<!-- the display version of this is homoglyph-substituted. all of these
<h1>/dev/hack
<span style="display: inline-block; white-space: nowrap">$ <input type="text" autofocus name="_"></span>
</h1>
<p class="block">seattle hackerspace</p>
<p class="block">
<span class="address">4534½ university&nbsp;way&nbsp;n.e.
(<a href="https://wiki.devhack.net/Directions">getting here</a>)
</span>
</p>
<h2>calendar <span class="small">(<a href="/calendar.ics">ics</a>)</span></h2>
<div id="cal-parsed">
<ul>
<li>loading...</li>
</ul>
</div>
<h2>contact</h2>
<!-- the display version of this is homoglyph-substituted. all of these
currently have email redirects but if spam starts happening we can change
things up -->
<a href="mailto:hello-25@devhack.net">һëⅼⅼо@devhack.net</a>
<ul>
<li>e-mail: <a href="mailto:hello-25@devhack.net">һëⅼⅼо@devhack.net</a>.</li>
<li>doorbell: press [#] on gate keypad.</li>
</ul>
</body>
</html>
</html>

42
style.css
View file

@ -6,6 +6,11 @@ body {
border: 10px red;
font-size: 125%;
}
.secondary {
color: #00b300;
}
input[type="text"] {
background-color: inherit;
color: inherit;
@ -14,16 +19,24 @@ input[type="text"] {
font: inherit;
caret-shape: block;
}
h1,p {
h1, .block {
margin: 40px 0px;
}
a {
color: cyan;
p {
margin: 0.5em 0;
}
a:visited {
color: mediumaquamarine;
a, a:visited {
color: #84d7ba;
text-decoration: none;
}
a:hover {
color: #d784a1;
}
dt::before {
content: ">";
padding-right: 0.5em;
@ -33,19 +46,8 @@ ul {
list-style-type: '- ';
}
.address-hide {
opacity: 0.5;
}
@media only screen and (min-width: 768px) {
/* For desktop, only show the address on hover. For mobile devices let's not
make people go through that. */
.address-hide {
display: none;
}
}
.address:hover .address-hide,
.address-hide:hover .address-hide {
display: inline;
.small {
font-style: normal;
font-weight: normal;
font-size: 50%;
}