Merge pull request #57 from wildgracevideo/behind-the-scenes

Add behind the scenes.
wildgracevideo · May 1, 2024 · e47b59b · e47b59b
2 parents 8ca1b1e + 73de54b
commit e47b59b
Show file tree

Hide file tree

Showing 23 changed files with 754 additions and 132 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -48,10 +48,15 @@ html {
     font-family: 'Cormorant Garamond', serif;
 }
 
+.font-family-rock-salt {
+    font-family: 'Rock Salt', serif;
+}
+
 body,
 html,
 #__nuxt {
     height: 100%;
+    scroll-behavior: smooth;
 }
 
 .grecaptcha-badge {
@@ -167,10 +172,6 @@ html,
     font-size: 0;
 }
 
-.aspect-125 {
-    aspect-ratio: 1/1.25;
-}
-
 .image-box-shadow {
     box-shadow:
         rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
@@ -186,6 +187,7 @@ html,
         opacity: 0;
         transform: translateX(200px);
     }
+
     100% {
         opacity: 1;
         transform: translateX(0);
@@ -197,6 +199,7 @@ html,
         opacity: 0;
         transform: translateX(-200px);
     }
+
     100% {
         opacity: 1;
         transform: translateX(0);
@@ -207,6 +210,7 @@ html,
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -216,6 +220,7 @@ html,
     from {
         opacity: 1;
     }
+
     to {
         opacity: 0;
     }
@@ -225,6 +230,7 @@ html,
     0% {
         font-size: 0;
     }
+
     100% {
         font-size: 2.25rem;
     }
@@ -234,6 +240,7 @@ html,
     0% {
         font-size: 0;
     }
+
     100% {
         font-size: 2.25rem;
     }

diff --git a/assets/gfonts/fonts/Poppins-400-18.woff2 b/assets/gfonts/fonts/Poppins-400-18.woff2
diff --git a/assets/gfonts/fonts/Poppins-400-19.woff2 b/assets/gfonts/fonts/Poppins-400-19.woff2
diff --git a/assets/gfonts/fonts/Poppins-600-20.woff2 b/assets/gfonts/fonts/Poppins-600-20.woff2
diff --git a/assets/gfonts/fonts/Poppins-600-21.woff2 b/assets/gfonts/fonts/Poppins-600-21.woff2
diff --git a/assets/gfonts/fonts/Rock_Salt-400-22.woff2 b/assets/gfonts/fonts/Rock_Salt-400-22.woff2
diff --git a/assets/gfonts/google-fonts.css b/assets/gfonts/google-fonts.css
@@ -1,4 +1,4 @@
-/* https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Cardo:wght@400&family=Playfair+Display:wght@400;700&family=Cormorant+Garamond:wght@400&display=swap */
+/* https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Cardo:wght@400&family=Playfair+Display:wght@400;700&family=Cormorant+Garamond:wght@400&family=Rock+Salt:wght@400&display=swap */
 /* greek-ext */
 @font-face {
   font-family: 'Cardo';
@@ -8,6 +8,7 @@
   src: url('assets/gfonts/fonts/Cardo-400-1.woff2') format('woff2');
   unicode-range: U+1F00-1FFF;
 }
+
 /* greek */
 @font-face {
   font-family: 'Cardo';
@@ -17,6 +18,7 @@
   src: url('assets/gfonts/fonts/Cardo-400-2.woff2') format('woff2');
   unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Cardo';
@@ -26,6 +28,7 @@
   src: url('assets/gfonts/fonts/Cardo-400-3.woff2') format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Cardo';
@@ -35,6 +38,7 @@
   src: url('assets/gfonts/fonts/Cardo-400-4.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* cyrillic-ext */
 @font-face {
   font-family: 'Cormorant Garamond';
@@ -44,6 +48,7 @@
   src: url('assets/gfonts/fonts/Cormorant_Garamond-400-5.woff2') format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
+
 /* cyrillic */
 @font-face {
   font-family: 'Cormorant Garamond';
@@ -53,6 +58,7 @@
   src: url('assets/gfonts/fonts/Cormorant_Garamond-400-6.woff2') format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* vietnamese */
 @font-face {
   font-family: 'Cormorant Garamond';
@@ -62,6 +68,7 @@
   src: url('assets/gfonts/fonts/Cormorant_Garamond-400-7.woff2') format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Cormorant Garamond';
@@ -71,6 +78,7 @@
   src: url('assets/gfonts/fonts/Cormorant_Garamond-400-8.woff2') format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Cormorant Garamond';
@@ -80,6 +88,7 @@
   src: url('assets/gfonts/fonts/Cormorant_Garamond-400-9.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* cyrillic */
 @font-face {
   font-family: 'Playfair Display';
@@ -89,6 +98,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-10.woff2') format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* vietnamese */
 @font-face {
   font-family: 'Playfair Display';
@@ -98,6 +108,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-11.woff2') format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Playfair Display';
@@ -107,6 +118,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-12.woff2') format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Playfair Display';
@@ -116,6 +128,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-13.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* cyrillic */
 @font-face {
   font-family: 'Playfair Display';
@@ -125,6 +138,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-10.woff2') format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* vietnamese */
 @font-face {
   font-family: 'Playfair Display';
@@ -134,6 +148,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-11.woff2') format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Playfair Display';
@@ -143,6 +158,7 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-12.woff2') format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Playfair Display';
@@ -152,57 +168,53 @@
   src: url('assets/gfonts/fonts/Playfair_Display-400-13.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-/* devanagari */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-400-18.woff2') format('woff2');
-  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
-}
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-400-19.woff2') format('woff2');
+  src: url('assets/gfonts/fonts/Poppins-400-18.woff2') format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-400-20.woff2') format('woff2');
+  src: url('assets/gfonts/fonts/Poppins-400-19.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-/* devanagari */
+
+/* latin-ext */
 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-600-21.woff2') format('woff2');
-  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+  src: url('assets/gfonts/fonts/Poppins-600-20.woff2') format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
-/* latin-ext */
+
+/* latin */
 @font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-600-22.woff2') format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('assets/gfonts/fonts/Poppins-600-21.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* latin */
 @font-face {
-  font-family: 'Poppins';
+  font-family: 'Rock Salt';
   font-style: normal;
-  font-weight: 600;
+  font-weight: 400;
   font-display: swap;
-  src: url('assets/gfonts/fonts/Poppins-600-23.woff2') format('woff2');
+  src: url('assets/gfonts/fonts/Rock_Salt-400-22.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/components/AutoPlayVideo.vue b/components/AutoPlayVideo.vue
@@ -1,7 +1,7 @@
 <template>
     <video
         ref="videoElement"
-        :class="`{$attrs.class as string}`"
+        :class="`${$attrs.class as string}`"
         muted
         loop
         disablePictureInPicture
@@ -17,11 +17,34 @@
             :thumbnail="{ url: thumbnailImage, contentUrl: thumbnailImage }"
         />
     </video>
+    <button
+        v-if="withSoundControl"
+        class="relative bottom-12 z-10 float-right ml-auto mr-4 h-8 w-8 cursor-pointer text-white md:h-10 md:w-10"
+        @click="toggleMute"
+    >
+        <span class="sr-only">{{
+            muted ? 'Unmute Video Audio' : 'Mute Video Audio'
+        }}</span>
+        <SpeakerXMarkIcon v-if="muted" />
+        <SpeakerWaveIcon v-else />
+    </button>
 </template>
 
 <script setup lang="ts">
+    import {
+        SpeakerWaveIcon,
+        SpeakerXMarkIcon,
+    } from '@heroicons/vue/24/outline';
+
     const videoElement = ref<HTMLVideoElement>();
 
+    const muted = ref(true);
+
+    function toggleMute() {
+        muted.value = !muted.value;
+        videoElement.value.muted = muted.value;
+    }
+
     onMounted(() => {
         function handleIntersection(entries: IntersectionObserverEntry[]) {
             entries.map((entry: IntersectionObserverEntry) => {
@@ -49,5 +72,6 @@
         thumbnailImage: string | undefined;
         video: string;
         publicationDate: string;
+        withSoundControl?: boolean;
     }>();
 </script>
diff --git a/components/FileOrVideo.vue b/components/FileOrVideo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :key="$.vnode.key || undefined">
+    <div :key="$.vnode.key || undefined" :class="parentClass">
         <AutoPlayVideo
             v-if="file.endsWith('mp4') || file.endsWith('webm')"
             :video="file"
@@ -10,6 +10,7 @@
             :class="`pointer-events-none cursor-default ${
                 $attrs.class as string
             }`"
+            :with-sound-control="withSoundControl"
         />
         <template v-else>
             <img
@@ -35,6 +36,12 @@
         thumbnailImage?: string;
         publicationDate: string;
         isLazy?: boolean;
+        withSoundControl?: boolean;
+        parentClass?: string;
     }
     defineProps<FileConfig>();
+
+    defineOptions({
+        inheritAttrs: false,
+    });
 </script>
diff --git a/components/HomePageAbout.vue b/components/HomePageAbout.vue
@@ -25,7 +25,7 @@
                 :seo-title="fileConfig.seoTitle"
                 :thumbnail-image="fileConfig.thumbnailImage"
                 :publication-date="fileConfig.publicationDate"
-                class="aspect-125 mx-0 mb-12 md:mb-0"
+                class="mx-0 mb-12 aspect-photo md:mb-0"
             />
         </div>
     </article>

diff --git a/components/header/TopBar.vue b/components/header/TopBar.vue
@@ -115,7 +115,7 @@
             type: HeaderItem,
         },
         {
-            name: 'Who We Are',
+            name: 'Behind the Scenes',
             href: '/who-we-are',
             type: HeaderItem,
         },