Version 1 of citizenM code challenge

Author: Will Falkowski

.gitignore

@@ -0,0 +1,51 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+#dist
+
+# Logs
+logs
+*.log
+
+.netlify
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Node dependencies
+node_modules
+
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+test-results/
+playwright-report/
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,49 @@
+## Prerequisites
+
+You need to install bun on your machine before you start.
+
+https://bun.sh/
+
+```bash
+curl -fsSL https://bun.sh/install | bash
+```
+
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  availableCurrencies: ["EUR", "GBP", "DKK", "USD", "JPY"],
+  localeCurrencyMap: {
+    "en-US": "USD",
+    "en-GB": "GBP",
+    da: "DKK",
+    "da-DK": "DKK",
+    ja: "JPY",
+    "ja-JP": "JPY",
+    default: "EUR",
+  },
+});

app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtLayout />
+</template>

assets/scss/base/base.scss

@@ -0,0 +1,29 @@
+:root {
+  --cm-border-radius: 4px;
+  --cm-header-height: 80px;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  font-weight: normal;
+  outline: none;
+}
+
+#__nuxt,
+body,
+html {
+  min-height: 100dvh;
+  margin: 0;
+}
+
+body {
+  background-color: var(--cm-color-primary-white);
+  color: var(--cm-color-primary-black);
+  font-family: var(--cm-font-primary-regular);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+}

assets/scss/base/breakpoints.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+$breakpoints: (
+  mobile: 320px,
+  mobileMedium: 375px,
+  mobileWide: 425px,
+  tablet: 768px,
+  desktop: 1024px,
+  desktopMedium: 1280px,
+  desktopWide: 1600px,
+);
+
+@function breakpoint($key) {
+  @return map.get($breakpoints, $key);
+}

assets/scss/base/colors.scss

@@ -0,0 +1,30 @@
+$colors-map: (
+  color-primary-black: #000,
+  color-primary-white: #fff,
+  color-primary-red: #ff0038,
+
+  color-green: #03d386,
+  color-light-grey-surface: #f1f1f1,
+
+  color-red-hover: #e60032,
+  color-background: #fff,
+
+  color-border: #ddd,
+  color-border-hover: #000,
+);
+
+:root {
+  @each $key, $value in $colors-map {
+    --cm-#{$key}: #{$value};
+  }
+}
+
+@each $key, $value in $colors-map {
+  .color-#{$key} {
+    color: var(--cm-#{$key});
+  }
+
+  .bg-#{$key} {
+    background-color: var(--cm-#{$key});
+  }
+}

assets/scss/base/fonts.scss

@@ -0,0 +1,17 @@
+$fonts-map: (
+  primary-regular: "Chalet-NewYorkNineteenSixty",
+);
+
+:root {
+  @each $key, $value in $fonts-map {
+    --cm-font-#{$key}: #{$value};
+  }
+}
+
+@each $key, $value in $fonts-map {
+  @font-face {
+    font-family: #{$value};
+    src: url("/fonts/#{$value}.woff2") format("woff2");
+    font-style: normal;
+  }
+}

assets/scss/base/reset.scss

@@ -0,0 +1,65 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

assets/scss/base/responsive.scss

@@ -0,0 +1,35 @@
+@use "@/base/breakpoints.scss" as *;
+
+:root {
+  --cm--gutter-small: 1rem;
+  --cm--gutter-medium: 2rem;
+  --cm--gutter-large: 4rem;
+  --cm--content-max-width: 1200px;
+}
+
+.container {
+  width: 100%;
+  padding-left: var(--cm--gutter-small);
+  padding-right: var(--cm--gutter-small);
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.container {
+  max-width: var(--cm--content-max-width);
+}
+
+@media (min-width: breakpoint(tablet)) {
+  .container {
+    padding-left: var(--cm--gutter-medium);
+    padding-right: var(--cm--gutter-medium);
+  }
+}
+
+@media (min-width: breakpoint(desktop)) {
+  .container {
+    padding-left: var(--cm--gutter-large);
+    padding-right: var(--cm--gutter-large);
+  }
+}