(accidental PR)

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "eslint.workingDirectories": [
+        "./app",
+        "./server"
+    ],
+    "cSpell.words": [
+        "referendar"
+    ]
+}

app/assets/css/content.css

@@ -0,0 +1,45 @@
+.content-wrapper .container {
+    padding: 0 !important;
+  }
+
+  @media (max-width: 960px) {
+    .content-wrapper .container {
+      padding: 32px;
+    }
+  }
+
+  .content-wrapper .d-flex {
+    max-width: 1260px !important;
+    margin: auto;
+    margin-bottom: 40px;
+  }
+
+  @media (max-width: 960px) {
+    .content-wrapper .d-flex {
+      margin-bottom: 24px;
+      width: 100%;
+    }
+  }
+
+  .content-wrapper .nuxt-content h3 {
+    padding-top: 32px;
+    padding-bottom: 24px;
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  @media (max-width: 960px) {
+    .content-wrapper .nuxt-content h3 {
+      padding-top: 24px;
+      padding-bottom: 16px;
+      font-size: 1.5rem;
+    }
+  }
+
+  .content-wrapper .nuxt-content h3 a {
+    text-decoration: none;
+  }
+
+  .content-wrapper .nuxt-content p {
+    padding: 10px;
+  }

app/assets/css/fonts.css

@@ -1,45 +1,59 @@
 @font-face {
   font-family: 'Tiempos Headline';
-  src: url('~static/fonts/TiemposHeadline/TiemposHeadline-Semibold.woff')
-    format('woff');
+  src: url('https://www.const-court.be/public/fonts/TiemposHeadline/TiemposHeadline-Semibold.woff') format('woff');
+  font-weight: 600; /* Semibold corresponds to 600 */
+  font-style: normal;
   font-display: swap;
-
 }
 
 @font-face {
-  font-family: 'Tiempos Headline Italic';
-  src: url('~static/fonts/TiemposHeadline/TiemposHeadline-SemiboldItalic.woff')
-    format('woff');
+  font-family: 'Tiempos Headline';
+  src: url('https://www.const-court.be/public/fonts/TiemposHeadline/TiemposHeadline-SemiboldItalic.woff') format('woff');
+  font-weight: 600; /* Semibold corresponds to 600 */
+  font-style: italic;
   font-display: swap;
-
 }
 
 @font-face {
   font-family: 'Proxima Nova';
-  src: url('~static/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
-    url('~static/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2');
+  src: url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
+       url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2');
+  font-weight: 400; /* Regular corresponds to 400 */
+  font-style: normal;
   font-display: swap;
-
 }
 
 @font-face {
-  font-family: 'Proxima Nova Semibold';
-  src: url('~static/fonts/ProximaNova/ProximaNova-SemiBold.woff') format('woff'),
-  url('~static/fonts/ProximaNova/ProximaNova-SemiBold.woff2') format('woff2');
+  font-family: 'Proxima Nova';
+  src: url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-SemiBold.woff') format('woff'),
+       url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-SemiBold.woff2') format('woff2');
+  font-weight: 600; /* Semibold corresponds to 600 */
+  font-style: normal;
   font-display: swap;
-
 }
 
 @font-face {
-  font-family: 'Proxima Nova Bold';
-  src: url('~static/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
-  url('~static/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2');
+  font-family: 'Proxima Nova';
+  src: url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
+       url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2');
+  font-weight: 700; /* Bold corresponds to 700 */
+  font-style: normal;
   font-display: swap;
-
 }
 
-* {
-  box-sizing: border-box;
-  font-family: proxima-nova, sans-serif;
-  font-weight: 400;
-}
+
+/* body { */
+  /* font-family: 'Proxima Nova', sans-serif; */
+  /* font-weight: 400;  */
+/* } */
+
+/* h1 { */
+  /* font-family: 'Tiempos Headline', serif; */
+  /* font-weight: 600; */
+/* } */
+
+/* em { */
+  /* font-family: 'Proxima Nova', sans-serif; */
+  /* font-style: italic; */
+  /* font-weight: 400; */
+/* } */

app/assets/scss/colors.scss

@@ -15,3 +15,32 @@ $successGreen: #3aa82f;
 $rajahLight: rgba(254, 201, 118, 0.9);
 $rajahExtraLight: rgba(254, 201, 118, 0.2);
 $textOnRajah: #3d3a44;
+$pdfRed: #c90304;
+
+// expose the preceding scss variables to the root element of the document as css variables
+// scss variables are preprocessed and not available in the browser
+// Using the modern Dart Sass syntax.
+
+:root {
+    --logo-color: #{$logoColor};
+    --indigo: #{$indigo};
+    --indigo-extra-light: #{$indigoExtraLight};
+    --indigo-light: #{$indigoLight};
+    --indigo-medium-light: #{$indigoMediumLight};
+    --sky-blue: #{$skyBlue};
+    --sky-blue-extra-light: #{$skyBlueExtraLight};
+    --rajah-yellow: #{$rajahYellow};
+    --ivory-grey: #{$ivoryGrey};
+    --dark-grey: #{$darkGrey};
+    --link-blue: #{$linkBlue};
+    --error-red: #{$errorRed};
+    --warning-orange: #{$warningOrange};
+    --success-green: #{$successGreen};
+    --rajah-light: #{$rajahLight};
+    --rajah-extra-light: #{$rajahExtraLight};
+    --text-on-rajah: #{$textOnRajah};
+    --pdf-red: #{$pdfRed};
+}
+
+// inside vue template section:
+// <div :style="{ color: 'var(--indigo)' }">

app/assets/scss/fonts.scss

@@ -1,3 +1,5 @@
+@use "colors.scss" as *;
+
 .title-container {
   width: 100%;
   display: flex;

app/assets/scss/main.scss

@@ -0,0 +1,61 @@
+@font-face {
+    font-family: 'Tiempos Headline';
+    src: url('/nuxt/fonts/TiemposHeadline/TiemposHeadline-Semibold.woff') format('woff'),
+        url('https://www.const-court.be/public/fonts/TiemposHeadline/TiemposHeadline-Semibold.woff') format('woff');
+    font-weight: 600;
+    /* Semibold corresponds to 600 */
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Tiempos Headline';
+    src: url('/nuxt/fonts/TiemposHeadline/TiemposHeadline-SemiboldItalic.woff') format('woff'),
+        url('https://www.const-court.be/public/fonts/TiemposHeadline/TiemposHeadline-SemiboldItalic.woff') format('woff');
+    font-weight: 600;
+    /* Semibold corresponds to 600 */
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('/nuxt/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
+        url('/nuxt/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2')
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff');
+    font-weight: 400;
+    /* Regular corresponds to 400 */
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('/nuxt/fonts/ProximaNova/ProximaNova-SemiBold.woff') format('woff'),
+        url('/nuxt/fonts/ProximaNova/ProximaNova-SemiBold.woff2') format('woff2'),
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-SemiBold.woff') format('woff'),
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    /* Semibold corresponds to 600 */
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('/nuxt/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
+        url('/nuxt/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
+        url('https://www.const-court.be/public/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2');
+    font-weight: 700;
+    /* Bold corresponds to 700 */
+    font-style: normal;
+    font-display: swap;
+}
+
+// // This rule ensures that non-Vuetify parts of your app (e.g., custom HTML or non-Vuetify components)
+// // use Proxima Nova  because it uses Roboto by default.
+body {
+    font-family: 'Proxima Nova', sans-serif;
+}

app/assets/scss/media.scss

@@ -1,3 +1,5 @@
+// Using the modern Dart Sass syntax.
+
 @mixin mobile {
   @media (max-width: 599px) {
     @content;

app/assets/styles/vuetify.scss

@@ -0,0 +1,14 @@
+// assets/styles/vuetify.scss
+
+// Define custom font families because Vuetify uses Roboto by default.
+$body-font-family: 'Proxima Nova', sans-serif;
+$heading-font-family: 'Roboto', serif;
+$btn-font-family: $body-font-family;
+
+// Passing our custom SCSS variables to Vuetify's styles
+// to ensure that Vuetify components use our specified fonts.
+@use 'vuetify' with ($body-font-family: $body-font-family,
+    $heading-font-family: $heading-font-family);
+
+    // can vuetify pickup css colors and use them in the theme?
+    // https://vuetifyjs.com/en/features/theme/#css-variables

app/components/AgendaCard.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Decision } from '@/core/constants'
 
 const props = defineProps({
@@ -31,7 +31,7 @@ const transform = (items: Decision[]): Decision[] => {
 
   return itemsWithShortDescription
 }
-
+console.log('ERROR: ', props.apiUrl)
 const { data: items, error } = await useFetch<Decision[]>(props.apiUrl, { transform: transform })
 
 if (error.value) {