diff options
| -rw-r--r-- | hosts.html | 4 | ||||
| -rw-r--r-- | index.html | 139 | ||||
| -rw-r--r-- | static/styles.css | 46 |
3 files changed, 87 insertions, 102 deletions
@@ -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> · - <a href="/hosts"><strong>Host Your Own Quiet Reading</strong></a> + <a href="/hosts"><strong>Host Your Own</strong></a> · <a href="https://instagram.com/quietreadingbk">Instagram</a> </div> @@ -22,101 +22,82 @@ <div class="nav"> <a href="/"><strong>Home</strong></a> · - <a href="/hosts">Host Your Own Quiet Reading</a> + <a href="/hosts">Host Your Own</a> · <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; +} |