Photo Explainer

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);
@@ -101,7 +102,7 @@
 	margin: 0 auto;
 	background: var(--color-bg-back);
 }
 #__nuxt {
 	display: flex;
 	width: 100vw;
 	min-height: 100vh;
@@ -119,6 +120,61 @@
 	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 @@
 
 .event-header h2 {
 	--title-border: 0;
+  --title-underline: 0;
 }
 .event-header button {
 	--button-bg: transparent;
@@ -403,10 +460,10 @@
 
 /* Map Styles */
 
 .marker.owddm .marker--hex {
 	fill: var(--color-osaka);
 }
 .marker.kwddm .marker--hex {
 	fill: var(--color-kyoto);
 }
 .map--container {
@@ -474,9 +531,9 @@
 Single Event Page: Targets the p tags rendered by the markdown renderer and adds
 additional spacing to the p tags for better readability.
 */
 #__nuxt > div > main > div > div.event-details-container > div.event-details-description > div > div > p {
   margin-top: 1rem;
 }
 
 #__nuxt > div > main > div > div.event-image-date-container-mobile > div.event-description-container > div > p {
   margin-top: 1rem;

components/ImageContainer.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import "photoswipe/style.css";
 import { Group, PhotoTransform } from '~~/utils/photos';
 import { SlideData } from 'photoswipe/dist/types/slide/zoom-level';
 
 const props = defineProps<{
   galleryID: string;
@@ -39,7 +39,7 @@
       w: photo.transforms.l.webp.size.width,
       h: photo.transforms.l.webp.size.height,
       src: photo.transforms.l.webp.file,
       msrc: photo.transforms.s.webp.file,
       original: photo.original
     })
     items.push(({
@@ -61,7 +61,7 @@
   const lightBox = new PhotoSwipeLightbox({
     gallery: `#${props.galleryID}`,
     children: 'a',
     pswpModule: () => import('photoswipe'),
     dataSource
   });
   let hash = document.location.hash
@@ -147,13 +147,18 @@
 }
 
 .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 @@
 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;

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 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>
+    </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 {