From fc9d9f9e131272676af4d6817f8637f9b8354d9d Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Mon, 19 Jun 2023 02:41:48 +0900
Subject: [PATCH 1/3] feat: image explainer and layout improvements on photos

---
 assets/style.css              | 57 +++++++++++++++++++++++++++++++++++
 components/ImageContainer.vue | 24 +++++----------
 pages/photos.vue              | 13 ++++++--
 3 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index ae6b9e9..5fb4319 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -51,6 +51,7 @@
 	--color-bg-back: #F1F0F0;
 	--color-bg-front: #fff;
 	--space: .75rem;
+  --space-small: .5rem;
 	--radius: .5rem;
 
 	--border: 1px solid var(--color-gray);
@@ -119,6 +120,61 @@ h2 {
 	border-bottom: var(--_border);
 }
 
+.gallery-container div, h2,
+.explainer {
+  border-radius: var(--radius);
+}
+
+
+.gallery-container h2,
+.explainer {
+  background: var(--color-bg-back);
+  font-size: 1em;
+}
+
+.explainer {
+  margin: 0 var(--space) var(--space-small) var(--space);
+  padding: 0.5rem 1rem;
+}
+.explainer summary {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+  opacity: 0.5;
+  width: 100%;
+  justify-content: space-between;
+}
+.explainer ul {
+  padding-inline-start: 1rem;
+}
+.explainer li {
+  margin-bottom: 0.5rem;
+}
+.explainer summary:hover {
+  opacity: 1;
+}
+.explainer[open] summary {
+  opacity: 1;
+  margin-bottom: .5rem;
+}
+.explainer[open] summary::after {
+  content: "×";
+}
+.explainer summary abbr {
+  text-decoration: none;
+}
+
+.gallery-container h2 {
+  display: inline-block;
+  line-height: 1.2;
+  height: 200px;
+  max-width: 300px;
+  margin: 0;
+  padding: 0;
+	--title-border: 0;
+  --title-underline: 0;
+}
+
 p {
 	margin: 0;
 }
@@ -303,6 +359,7 @@ main {
 
 .event-header h2 {
 	--title-border: 0;
+  --title-underline: 0;
 }
 .event-header button {
 	--button-bg: transparent;
diff --git a/components/ImageContainer.vue b/components/ImageContainer.vue
index c11d7c5..f6d4578 100644
--- a/components/ImageContainer.vue
+++ b/components/ImageContainer.vue
@@ -147,13 +147,18 @@ div {
 }
 
 .gallery-container {
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--space-small);
   margin: 0 var(--space);
 }
 
+.img-container-margin {
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+  border-radius: var(--radius);
+}
 .img-container {
   width: 10rem;
   height: 10rem;
@@ -165,26 +170,11 @@ div {
 img {
   margin-top: auto;
   margin-bottom: auto;
-  border-radius: var(--radius);
 }
 
 img:hover {
   box-shadow: 0 0 150px 5px #aab6bd;
 }
-
-div, h2 {
-  border-radius: 10px;
-}
-
-h2 {
-  display: inline-block;
-  background: #f0f0f0;
-  font-size: 1em;
-  line-height: 1.2;
-  height: 200px;
-  margin: 0;
-  max-width: 300px;
-}
 .content, .date {
   display: block;
   margin: 1em;
diff --git a/pages/photos.vue b/pages/photos.vue
index 8a18fc0..dd6f135 100644
--- a/pages/photos.vue
+++ b/pages/photos.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="photos-container">
+    <details class="explainer">
+      <summary><abbr title="Information">ⓘ Information</abbr></summary>
+      <ul>
+        <li>All photos here have been taken by community members and sent in either through our <a href="https://discord.com/channels/1034792577293094972/1077517983439654962">#event-photos</a>
+      channel on discord or through the Meetup page.</li>
+        <li>All photos in this channel are published under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA license</a>.</li>
+        <li>If you want a photo of you removed from the page, or if yo have any other issues with a photo on this page, please let us know through → <a href="https://github.com/owddm/public/issues/new">a new github issue</a>.</li>
+        <li>If you use any photo of this page, we request you to follow the github repository and also remove any photo if a member is uncomfortable with it.</li>
+      </ul>
+    </details>
     <ImageContainer galleryID="full-gallery" :key="update" :groups="groups" />
   </div>
 </template>
@@ -16,9 +26,6 @@ const groups = computed<Group[]>(() => {
 </script>
 
 <style scoped>
-.photos-container {
-  margin-top: 2rem;
-}
 
 @media screen and (orientation: landscape) {
   .photos-container {

From 9c08570bb24c6fe23190f0415cc82ed2ae73bf3c Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 20 Jun 2023 01:54:26 +0900
Subject: [PATCH 2/3] fixing suggestions by coliff.

---
 pages/photos.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/photos.vue b/pages/photos.vue
index dd6f135..b4b4fb8 100644
--- a/pages/photos.vue
+++ b/pages/photos.vue
@@ -6,7 +6,7 @@
         <li>All photos here have been taken by community members and sent in either through our <a href="https://discord.com/channels/1034792577293094972/1077517983439654962">#event-photos</a>
       channel on discord or through the Meetup page.</li>
         <li>All photos in this channel are published under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA license</a>.</li>
-        <li>If you want a photo of you removed from the page, or if yo have any other issues with a photo on this page, please let us know through → <a href="https://github.com/owddm/public/issues/new">a new github issue</a>.</li>
+        <li>If you want a photo of you removed from the page, or if you have any other issues with a photo on this page, please let us know through → <a href="https://github.com/owddm/public/issues/new">a new GitHub issue</a>.</li>
         <li>If you use any photo of this page, we request you to follow the github repository and also remove any photo if a member is uncomfortable with it.</li>
       </ul>
     </details>

From a69e2c3f84a4b4bcd32c01fbfb2ee8948df00b85 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 20 Jun 2023 01:54:53 +0900
Subject: [PATCH 3/3] Simplifying sentence1

---
 pages/photos.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/photos.vue b/pages/photos.vue
index b4b4fb8..7e4a1b3 100644
--- a/pages/photos.vue
+++ b/pages/photos.vue
@@ -5,7 +5,7 @@
       <ul>
         <li>All photos here have been taken by community members and sent in either through our <a href="https://discord.com/channels/1034792577293094972/1077517983439654962">#event-photos</a>
       channel on discord or through the Meetup page.</li>
-        <li>All photos in this channel are published under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA license</a>.</li>
+        <li>All photos are published under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA license</a>.</li>
         <li>If you want a photo of you removed from the page, or if you have any other issues with a photo on this page, please let us know through → <a href="https://github.com/owddm/public/issues/new">a new GitHub issue</a>.</li>
         <li>If you use any photo of this page, we request you to follow the github repository and also remove any photo if a member is uncomfortable with it.</li>
       </ul>