diff options
| -rw-r--r-- | index.html | 95 | ||||
| -rw-r--r-- | static/styles.css | 17 |
2 files changed, 81 insertions, 31 deletions
@@ -29,46 +29,85 @@ <br> <hr> <br> - <div class="event"> - <span class="event-time">Mondays 6:30p–8:30p</span> - <br> - <span class="event-location"><a href="https://maps.app.goo.gl/h4CyTKFKULxWNjXN9">McCarren Park</a> <span class="neighborhood">· 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–8p</strong> - <br> - <span class="event-location"><a href="https://maps.app.goo.gl/UTNUqUdEjYCssiMx5">Jefferson Market Library</a> <span class="neighborhood">· 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–11p</span> - <br> - <span class="event-location"><a href="https://maps.app.goo.gl/S5gFDcWC4RsJfgRc9">Book Club Bar</a> <span class="neighborhood">· 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; } |