summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpetrus comestor <petrus@comestor.org>2024-07-20 17:13:09 -0400
committerpetrus comestor <petrus@comestor.org>2024-07-20 17:13:09 -0400
commita23429520d46ebce69e594936a9ff19af264cb7a (patch)
tree5ea5f2201589e9c9a2c0ec20923312578b71695a
parentcb6380daeed3c256b5449454543f9aa9b342af7d (diff)
fixes
-rw-r--r--hosts.html4
-rw-r--r--index.html139
-rw-r--r--static/styles.css46
3 files changed, 87 insertions, 102 deletions
diff --git a/hosts.html b/hosts.html
index 1ec4154..3cedd87 100644
--- a/hosts.html
+++ b/hosts.html
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
- <title>Host Your Own Quiet Reading</title>
+ <title>Host Your Own</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/static/hex.svg">
@@ -22,7 +22,7 @@
<div class="nav">
<a href="/">Home</a>
&middot;
- <a href="/hosts"><strong>Host Your Own Quiet Reading</strong></a>
+ <a href="/hosts"><strong>Host Your Own</strong></a>
&middot;
<a href="https://instagram.com/quietreadingbk">Instagram</a>
</div>
diff --git a/index.html b/index.html
index 1a6bde5..a2ca76e 100644
--- a/index.html
+++ b/index.html
@@ -22,101 +22,82 @@
<div class="nav">
<a href="/"><strong>Home</strong></a>
&middot;
- <a href="/hosts">Host Your Own Quiet Reading</a>
+ <a href="/hosts">Host Your Own</a>
&middot;
<a href="https://instagram.com/quietreadingbk">Instagram</a>
</div>
<br>
<hr>
<br>
- <details class="event">
- <summary>
- <div class="event-header-wrapper">
- <div class="event-header">
- <div>
- <span class="event-time">Mondays, 6:30p</span>
- <br>
- <span class="event-location">
- <a href="https://maps.app.goo.gl/h4CyTKFKULxWNjXN9">McCarren Park</a>
- </span>
- <br>
- <span class="neighborhood">Williamsburg</span>
- </div>
- <div>
- <div class="instance instance-ok">
- July 22
- </div>
- </div>
- </div>
- </div>
- </summary>
- <div class="info">
- North corner, west side
+ <div class="event">
+ <div class="event-data">
+ <span class="event-time">Mondays, 6:30p</span>
+ <br>
+ <span class="event-location"><a href="https://maps.app.goo.gl/h4CyTKFKULxWNjXN9">McCarren Park</a></span>
<br>
- Rainy day location: <a href="https://maps.app.goo.gl/4jKTTTJ3h61dGPyz6">Spritzenhaus33</a>
+ <span class="neighborhood">Williamsburg</span>
+ <details>
+ <summary>Information</summary>
+ <div class="info">
+ North corner, west side
+ <br>
+ Rainy day location: <a href="https://maps.app.goo.gl/4jKTTTJ3h61dGPyz6">Spritzenhaus33</a>
+ </div>
+ </details>
+ </div>
+ <div class="instance instance-ok">
+ <em>Next:</em><br><strong>July 22</strong>
</div>
- </details>
+ </div>
<br>
- <details class="event">
- <summary>
- <div class="event-header-wrapper">
- <div class="event-header">
- <div>
- <span class="event-time">Wednesdays, 6p</span>
- <br>
- <span class="event-location">
- <a href="https://maps.app.goo.gl/UTNUqUdEjYCssiMx5">Jefferson Market Library</a>
- </span>
- <br>
- <span class="neighborhood">Greenwich Village</span>
- </div>
- <div>
- <div class="instance instance-ok">
- July 24
- </div>
- </div>
+ <div class="event">
+ <div>
+ <span class="event-time">Wednesdays, 6p</span>
+ <br>
+ <span class="event-location"><a href="https://maps.app.goo.gl/UTNUqUdEjYCssiMx5">Jefferson Market Library</a></span>
+ <br>
+ <span class="neighborhood">Greenwich Village</span>
+ <details>
+ <summary>Information</summary>
+ <div class="info">
+ Elevator to third floor
</div>
- </div>
- </summary>
- <div class="info">
- Elevator to third floor
+ </details>
</div>
- </details>
+ <div class="instance instance-ok">
+ <em>Next:</em><br><strong>July 24</strong>
+ </div>
+ </div>
<br>
- <details class="event">
- <summary>
- <div class="event-header-wrapper">
- <div class="event-header">
- <div>
- <span class="event-time">1<sup>st</sup> Sunday/month, 9p</span>
- <br>
- <span class="event-location">
- <a href="https://maps.app.goo.gl/S5gFDcWC4RsJfgRc9">Book Club Bar</a>
- </span>
- <br>
- <span class="neighborhood">East Village</span>
- </div>
- <div>
- <div class="instance instance-ok">
- August 4
- </div>
- </div>
+ <div class="event">
+ <div>
+ <span class="event-time">1<sup>st</sup> Sunday/month, 9p</span>
+ <br>
+ <span class="event-location"><a href="https://maps.app.goo.gl/ewGbWuEjp7cedMrb7">Book Club Bar</a></span>
+ <br>
+ <span class="neighborhood">East Village</span>
+ <details>
+ <summary>Information</summary>
+ <div class="info">
+ Rear half of store
</div>
- </div>
- </summary>
- <div class="info">
- Rear half of the store
+ </details>
</div>
- </details>
+ <div class="instance instance-ok">
+ <em>Next:</em><br><strong>August 4</strong>
+ </div>
+ </div>
<br>
<hr>
- <p>
- Bring your own book, read silently for one hour, and then chat
- for one hour about books, literature, arts, or anything else.
- </p>
- <p>
- No registration, no sign-ups, no payment: just show up with a good book! For park events, you can bring a blanket as well.
- </p>
+ <div class="about">
+ <p>
+ Bring your own book, read for one hour, and then chat
+ for one hour about books, literature, and arts.
+ </p>
+ <p>
+ No registration: just show up with a good book!<br>For park events, you can bring a blanket as well.
+ </p>
+ </div>
<br>
<div class="wrapper">
<img class="picture" src="/static/pictures/jefferson.jpg">
diff --git a/static/styles.css b/static/styles.css
index ad1cc70..62297cf 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -128,32 +128,36 @@ a:hover {
border-radius: 10px;
padding: 1em;
padding-top: .6em;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 2em;
+ align-items: center;
}
-.event-header-wrapper {
- display: inline-block;
-}
-
-.event-header {
- width: 100%;
- display: grid;
- grid-template-columns: auto auto;
- gap: 1em;
+.event-data {
+ width: fit-content;
}
.instance {
- font-weight: bold;
border: 1px darkslategrey dotted;
border-radius: 5px;
- padding: 1em;
- padding-top: .6em;
- display: inline-block;
+ padding: .6em;
+ padding-top: .2em;
+ width: fit-content;
}
.instance-ok {
background: #dfd;
}
+.instance-changed {
+ background: #fffbdd;
+}
+
+.instance-cancelled {
+ background: #fdd;
+}
+
hr {
border: 0;
border-bottom: 1px dashed #ccc;
@@ -168,14 +172,8 @@ hr {
text-align: center;
}
-.info {
- padding-left: 2em;
- padding-top: .5em;
-}
-
-.info p {
- margin: 0;
- margin-bottom: .5em;
+details {
+ font-size: 90%;
}
.event-time {
@@ -191,3 +189,9 @@ hr {
font-size: 90%;
font-style: italic;
}
+
+.about {
+ max-width: 40ch;
+ text-align: center;
+ margin: auto;
+}