Merge pull request #5 from netwerk-digitaal-erfgoed/feature/MMF-29

Feat: MMF-29

nuxt/assets/scss/defaults.scss

@@ -13,13 +13,18 @@
   --black-50: rgba(0, 0, 0, 0.5);
 
   // Font Sizes
-  --font-size-sm: 0.875rem;
+  --font-size-xsm: 0.875rem;
+  --font-size-sm: 1rem;
   --font-size-base: 1.25rem;
   --font-size-md: 1.375rem;
   --font-size-lg: 1.5rem;
   --font-size-xl: 2rem;
-  --font-size-2xl: 2.25rem;
-  --font-size-3xl: 2.75rem;
+
+  @for $i from 2 through 10 {
+    $increment: 0.5rem;
+    $value: 2rem + (($i - 1) * $increment);
+    --font-size-#{$i}xl: #{$value};
+  }
 
   // Font weights
   --font-weight-light: 300;
@@ -39,6 +44,8 @@
     --space-#{$i}: #{$value};
   }
 
+  --container: 100rem;
+
   // Transitions
   --transition-page-vertical: top 1s;
   --transition-page-horizontal: left 1s;

nuxt/components/Atoms/ArtworkTeaser.vue

@@ -88,7 +88,7 @@ defineProps<{
     }
 
     .subtitle {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-xsm);
       font-weight: var(--font-weight-light);
     }
   }

nuxt/components/Atoms/Button.vue

@@ -1,16 +1,26 @@
 <template>
   <button
+    v-if="type !== 'link'"
     :type="type"
     :class="classes">
     <slot></slot>
   </button>
+  <NuxtLink
+    v-else
+    :class="classes"
+    :to="to">
+    <slot></slot>
+  </NuxtLink>
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationRaw } from '#vue-router';
+
 const props = withDefaults(
   defineProps<{
     variant?: 'primary' | 'secondary';
-    type?: HTMLButtonElement['type'];
+    type?: HTMLButtonElement['type'] | 'link';
+    to?: RouteLocationRaw;
   }>(),
   {
     variant: 'primary',
@@ -19,7 +29,13 @@ const props = withDefaults(
 );
 
 const classes = computed(() => {
-  return ['btn', props.variant];
+  const c = ['btn', props.variant];
+
+  if (props.type === 'link') {
+    c.push('link');
+  }
+
+  return c;
 });
 </script>
 
@@ -31,6 +47,10 @@ const classes = computed(() => {
   transition: var(--transition-state);
   user-select: none;
 
+  &.link {
+    display: inline-block;
+  }
+
   &:disabled {
     cursor: not-allowed;
   }
@@ -40,7 +60,8 @@ const classes = computed(() => {
     border: var(--space-0) solid transparent;
     background-color: var(--blues-blue);
 
-    &:hover:enabled {
+    &:hover:enabled,
+    &.link:hover {
       color: var(--blues-blue);
       background-color: var(--background-color);
       border: var(--space-0) solid var(--blues-blue);
@@ -52,7 +73,8 @@ const classes = computed(() => {
     color: var(--blues-blue);
     border: var(--space-0) solid var(--blues-blue);
 
-    &:hover:enabled {
+    &:hover:enabled,
+    &.link:hover {
       background-color: var(--blues-blue);
       color: var(--background-color);
       border: var(--space-0) solid transparent;

nuxt/components/Atoms/PropertyGroup.vue

@@ -37,7 +37,7 @@ const properties = computed(() => {
 <style scoped lang="scss">
 .property {
   @include flex-column;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xsm);
   font-weight: var(--font-weight-light);
 
   .label {

nuxt/components/Molecules/Branding/Intro.vue

@@ -81,7 +81,7 @@ const introClass = computed(() => {
     }
 
     .footer {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-xsm);
       text-transform: uppercase;
       grid-row-start: 3;
       grid-column: span 8 / span 8;

nuxt/components/Molecules/Header.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="{ base: true, 'dark-mode': darkMode }">
+  <div
+    ref="header"
+    :class="{ base: true, 'dark-mode': darkMode }">
     <MoleculesButtonsHome v-if="showHome" />
     <h3
       v-if="title"
@@ -27,6 +29,26 @@ withDefaults(
     showHome: true,
   },
 );
+
+const header = ref<HTMLDivElement>();
+
+const cleanup = () => {
+  document.body.style.removeProperty('--header-height');
+};
+
+const setHeaderHeight = () => {
+  if (header.value) {
+    document.body.style.setProperty('--header-height', header.value.getBoundingClientRect().height + 'px');
+  }
+
+  return cleanup;
+};
+
+useResize(setHeaderHeight);
+
+onMounted(() => {
+  setHeaderHeight();
+});
 </script>
 
 <style scoped lang="scss">

nuxt/components/organisms/ArtworkSlider.vue

@@ -157,7 +157,7 @@ const { findByCategory } = artworkStore;
     border: 1px solid black;
     text-transform: unset;
     padding: var(--space-2);
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-xsm);
     font-weight: var(--font-weight-light);
   }
 }

nuxt/composables/useResize.ts

@@ -0,0 +1,26 @@
+export function useResize(fn: (event: Event) => void | (() => void), target: Window | Element | Ref<Element | undefined> = window) {
+  let cleanup: (() => void) | undefined;
+
+  const listener = (event: Event) => {
+    const result = fn(event);
+
+    if (result) {
+      cleanup = result;
+    }
+  };
+
+  onMounted(() => {
+    unref(target)?.addEventListener('resize', listener);
+  });
+
+  const removeListener = () => {
+    unref(target)?.removeEventListener('resize', listener);
+  };
+
+  onBeforeUnmount(() => {
+    cleanup?.();
+    removeListener();
+  });
+
+  return removeListener;
+}

nuxt/nuxt.config.ts

@@ -2,18 +2,31 @@ import svgLoader from 'vite-svg-loader';
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  ssr: false,
-  devtools: {
-    enabled: false,
-  },
   css: [
     'ress/ress.css',
     '@/assets/scss/defaults.scss',
     '@/assets/scss/theme.scss',
     '@/assets/scss/main.scss',
     '@/assets/scss/transitions.scss',
   ],
-  modules: ['@pinia/nuxt'],
+  devtools: {
+    enabled: false,
+  },
+  googleFonts: {
+    families: {
+      Poppins: true,
+    },
+    download: false,
+    useStylesheet: true,
+  },
+  modules: ['@pinia/nuxt', '@nuxtjs/google-fonts'],
+  runtimeConfig: {
+    app: {
+      backendUrl: '',
+      token: '',
+    },
+  },
+  ssr: false,
   vite: {
     plugins: [svgLoader()],
     css: {
@@ -24,12 +37,6 @@ export default defineNuxtConfig({
       },
     },
   },
-  runtimeConfig: {
-    app: {
-      backendUrl: '',
-      token: '',
-    },
-  },
   vue: {
     compilerOptions: {
       isCustomElement: tag => tag.startsWith('swiper-'),

nuxt/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@types/node": "^20.12.12",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",

nuxt/pages/[flix]/[category]/[artwork].vue

@@ -231,7 +231,7 @@ if (currentArtwork && currentCategory) {
       margin-right: 0;
 
       .description-content {
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-xsm);
         font-weight: var(--font-weight-light);
         margin-top: var(--space-4);
       }