summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html95
-rw-r--r--static/styles.css17
2 files changed, 81 insertions, 31 deletions
diff --git a/index.html b/index.html
index 95ca412..4471244 100644
--- a/index.html
+++ b/index.html
@@ -29,46 +29,85 @@
<br>
<hr>
<br>
- <div class="event">
- <span class="event-time">Mondays 6:30p&ndash;8:30p</span>
- <br>
- <span class="event-location"><a href="https://maps.app.goo.gl/h4CyTKFKULxWNjXN9">McCarren Park</a> <span class="neighborhood">&middot; Williamsburg</span></span>
+ <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">
+ Next: <strong>July 22</strong>
+ </div>
+ </div>
+ </div>
+ </div>
+ </summary>
<div class="info">
North corner, west side
<br>
Rainy day location: <a href="https://maps.app.goo.gl/4jKTTTJ3h61dGPyz6">Spritzenhaus33</a>
- <br>
- <br>
- <div class="instance instance-ok">
- Next: <strong>July 22</strong>
- </div>
</div>
- </div>
+ </details>
<br>
- <div class="event">
- <strong class="event-time">Wednesdays 6p&ndash;8p</strong>
- <br>
- <span class="event-location"><a href="https://maps.app.goo.gl/UTNUqUdEjYCssiMx5">Jefferson Market Library</a> <span class="neighborhood">&middot; Greenwich Village</span></span>
+ <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">
+ Next: <strong>July 24</strong>
+ </div>
+ </div>
+ </div>
+ </div>
+ </summary>
<div class="info">
Elevator to third floor
- <br>
- <br>
- <div class="instance instance-ok">
- Next: <strong>July 24</strong>
- </div>
</div>
- </div>
+ </details>
<br>
- <div class="event">
- <span class="event-time">first Sunday/month; 9p&ndash;11p</span>
- <br>
- <span class="event-location"><a href="https://maps.app.goo.gl/S5gFDcWC4RsJfgRc9">Book Club Bar</a> <span class="neighborhood">&middot; East Village</span></span>
- <div class="info">
- <div class="instance instance-ok" style="margin-top: .4em;">
- Next: <strong>August 4</strong>
+ <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">
+ Next: <strong>August 4</strong>
+ </div>
+ </div>
+ </div>
</div>
+ </summary>
+ <div class="info">
+ Rear half of the store
</div>
- </div>
+ </details>
<br>
<hr>
<p>
diff --git a/static/styles.css b/static/styles.css
index e7300b6..00c38ae 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -130,6 +130,17 @@ a:hover {
padding-top: .6em;
}
+.event-header-wrapper {
+ display: inline-block;
+}
+
+.event-header {
+ width: 100%;
+ display: grid;
+ grid-template-columns: auto auto;
+ gap: 1em;
+}
+
.instance {
border: 1px darkslategrey dotted;
border-radius: 5px;
@@ -168,14 +179,14 @@ hr {
.event-time {
font-weight: bold;
- font-size: larger;
+ font-size: large;
}
.event-location {
- font-size: larger;
+ font-size: large;
}
.neighborhood {
- font-size: 80%;
+ font-size: 90%;
font-style: italic;
}