minify events

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;
 }