Initial commit

src/assets/img/logo.svg

@@ -0,0 +1,4 @@
+<svg width="47" height="37" viewBox="0 0 47 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5092 1.89746H35.3259L20.7566 23.6923H0.939941L15.5092 1.89746Z" fill="#42E0CE"/>
+<path d="M16.3771 25.7122L10.7341 34.1539H31.4908L46.0601 12.3591H30.7403L21.8141 25.7122H16.3771Z" fill="#A14FD6"/>
+</svg>

src/assets/scss/base/_breakpoint.scss

@@ -0,0 +1,25 @@
+// | -------------------------------------------------------------
+// | Breakpoint
+// | -------------------------------------------------------------
+
+$breakpoints: (
+  "default": 0,
+  "small": 24em,
+  "medium": 48em,
+  "large": 75em
+) !default;
+
+@mixin breakpoint($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else if (type_of($breakpoint) == number) {
+    @media (min-width: $breakpoint+"px") {
+      @content;
+    }
+  }
+  @else {
+    @error "Not a correct value, check _base-breakpoints for available values.";
+  }
+}

src/assets/scss/base/_button.scss

@@ -0,0 +1,146 @@
+// | -------------------------------------------------------------
+// | Button
+// | -------------------------------------------------------------
+
+.button {
+  display: inline-block;
+  padding: 0.75rem 1rem;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  color: var(--neutral-900);
+  background-color: var(--primary-100);
+  border: 3px solid var(--primary-100);
+  border-radius: 3px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    background-color: var(--primary-200);
+    border-color: var(--primary-200);
+  }
+
+  &:visited {
+    color: var(--neutral-900);
+  }
+
+  &.color-secondary {
+    background-color: var(--secondary-100);
+    border-color: (var(--secondary-100));
+
+    &:hover,
+    &:focus {
+      background-color: var(--secondary-400);
+      border-color: var(--secondary-400);
+    }
+  }
+
+  &.color-neutral {
+    background-color: var(--neutral-500);
+    border-color: (var(--neutral-500));
+
+    &:hover,
+    &:focus {
+      background-color: var(--neutral-400);
+      border-color: var(--neutral-400);
+    }
+  }
+
+  &.color-info {
+    background-color: var(--info-300);
+    border-color: (var(--info-300));
+
+    &:hover,
+    &:focus {
+      background-color: var(--info-200);
+      border-color: var(--info-200);
+    }
+  }
+
+  &.color-success {
+    background-color: var(--success-400);
+    border-color: (var(--success-400));
+
+    &:hover,
+    &:focus {
+      background-color: var(--success-300);
+      border-color: var(--success-300);
+    }
+  }
+
+  &.color-warning {
+    background-color: var(--warning-400);
+    border-color: (var(--warning-400));
+
+    &:hover,
+    &:focus {
+      background-color: var(--warning-300);
+      border-color: var(--warning-300);
+    }
+  }
+
+  &.color-error {
+    background-color: var(--error-300);
+    border-color: (var(--error-300));
+
+    &:hover,
+    &:focus {
+      background-color: var(--error-200);
+      border-color: var(--error-200);
+    }
+  }
+
+  &.size-tiny {
+    padding: 0.125rem 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+  }
+
+  &.size-small {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.3125rem;
+  }
+
+  &.size-large {
+    padding: 0.75rem 1rem;
+    font-size: 1.125rem;
+    line-height: 1.6875rem;
+  }
+
+  &.size-huge {
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+  }
+
+  &.behavior-full {
+    display: block;
+    width: 100%;
+  }
+
+  &.type-secondary {
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+
+  &.has-icon {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    [data-icon] {
+      height: auto;
+      width: 30px;
+    }
+  }
+}
+
+.darkmode .button.type-secondary {
+  color: var(--neutral-100);
+}

src/assets/scss/base/_color.scss

@@ -0,0 +1,34 @@
+// | -------------------------------------------------------------
+// | Color
+// | -------------------------------------------------------------
+
+$colors: (
+  primary: (
+    100: hsl(276, 100%, 79%),
+    200: hsl(276, 79%, 69%),
+    300: hsl(276, 53%, 49%),
+    400: hsl(276, 64%, 48%),
+    500: hsl(276, 96%, 20%),
+  ),
+  secondary: (
+    100: hsl(173, 81%, 68%),
+    200: hsl(173, 80%, 63%),
+    300: hsl(173, 72%, 57%),
+    400: hsl(173, 75%, 47%),
+    500: hsl(173, 90%, 30%),
+  ),
+  neutral: (
+    100: hsl(0 0% 100%),
+    200: hsl(200 23% 97%),
+    300: hsl(200 12% 95%),
+    400: hsl(205 12% 88%),
+    500: hsl(209 13% 83%),
+    600: hsl(208 6% 55%),
+    700: hsl(210 8% 31%),
+    800: hsl(212 9% 22%),
+    900: hsl(210 10% 14%),
+  ),
+  dark: (
+    100: hsl(240, 4%, 9%),
+  ),
+);

src/assets/scss/base/_container.scss

@@ -0,0 +1,24 @@
+// | -------------------------------------------------------------
+// | Container
+// | -------------------------------------------------------------
+
+@use "breakpoint" as *;
+
+.container {
+  margin: 0 auto;
+  padding: 0 calc(2rem / 2);
+  max-width: 100%;
+
+  @include breakpoint(medium) {
+    padding: 0 2rem;
+  }
+
+  @include breakpoint(large) {
+    padding: 0 calc(2rem / 2);
+    max-width: 1200px;
+  }
+
+  &.stretch {
+    max-width: 100%;
+  }
+}

src/assets/scss/base/_font.scss

@@ -0,0 +1,149 @@
+// | -------------------------------------------------------------
+// | Font
+// | -------------------------------------------------------------
+
+@use 'breakpoint' as *;
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'),
+    url('/fonts/OpenSans-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/OpenSans-Bold.woff2') format('woff2'),
+    url('/fonts/OpenSans-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/OpenSans-Italic.woff2') format('woff2'),
+    url('/fonts/OpenSans-Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2'),
+    url('/fonts/OpenSans-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  font-family: var(--font-family-default);
+  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
+  text-rendering: optimizeLegibility;
+  font-synthesis: none;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  a:not(.button) {
+    color: var(--action-color);
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--action-color);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--action-color-state);
+      text-decoration: none;
+    }
+  }
+
+  :where(main) a {
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+
+  :where(h1, h2) {
+    font-family: var(--font-family-special);
+  }
+
+  h1,
+  h2 {
+    font-weight: 800;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+    line-height: 3.375rem;
+
+    @include breakpoint(medium) {
+      font-size: 3rem;
+      line-height: 3.625rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.875rem;
+    line-height: 2.8125rem;
+
+    @include breakpoint(medium) {
+      font-size: 2.25rem;
+      line-height: 3.375rem;
+    }
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+
+    @include breakpoint(medium) {
+      font-size: 1.875rem;
+      line-height: 2.8125rem;
+    }
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+
+    @include breakpoint(medium) {
+      font-size: 1.5rem;
+      line-height: 2.25rem;
+    }
+  }
+
+  h5 {
+    font-size: 1.125rem;
+    line-height: 1.6875rem;
+
+    @include breakpoint(medium) {
+      font-size: 1.25rem;
+      line-height: 1.875rem;
+      h6 {
+        font-size: 1rem;
+      }
+    }
+
+    line-height: 1.5rem;
+
+    @include breakpoint(medium) {
+      font-size: 1.125rem;
+      line-height: 1.6875rem;
+    }
+  }
+}

src/assets/scss/base/_list.scss

@@ -0,0 +1,67 @@
+// | -------------------------------------------------------------
+// | Lists
+// | -------------------------------------------------------------
+
+@use 'breakpoint' as *;
+
+ul:not([class]),
+ol:not([class]) {
+  margin-left: 1rem;
+
+  ul,
+  ol {
+    padding: 0.5rem 1rem 0;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+}
+
+ul:not([class]) {
+  > li::marker {
+    display: block;
+    color: var(--primary-800);
+  }
+}
+
+ol.incremented {
+  counter-reset: item;
+
+  ol {
+    counter-reset: item;
+  }
+
+  ol,
+  ul {
+    margin: 0.75rem 0 0 1rem;
+  }
+
+  li {
+    display: block;
+    margin-bottom: 0.5rem;
+
+    @include breakpoint(medium) {
+      margin-bottom: 0.75rem;
+    }
+
+    &::before {
+      content: counters(item, '.') '. ';
+      counter-increment: item;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    p {
+      display: inline;
+    }
+  }
+
+  ul {
+    li::before {
+      content: '';
+    }
+  }
+}

src/assets/scss/base/_outline.scss

@@ -0,0 +1,21 @@
+// | -------------------------------------------------------------
+// | Outline
+// | -------------------------------------------------------------
+
+@mixin outline {
+  outline: 2px dotted black;
+  outline-color: black;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 2px white;
+  box-shadow: 0 0 0 2px white;
+}
+
+*:focus,
+*:focus-visible {
+  @include outline;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}

src/assets/scss/base/_reset.scss

@@ -0,0 +1,121 @@
+// | -------------------------------------------------------------
+// | > Reset
+// | -------------------------------------------------------------
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+
+  @media (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+
+    body * {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+    }
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+blockquote,
+body,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+li,
+ol,
+p,
+pre,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul:where([class]) {
+  list-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  letter-spacing: inherit;
+  font: inherit;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+}
+
+fieldset {
+  padding: 0;
+  border: none;
+}
+
+legend {
+  margin-bottom: 0.5rem;
+  max-width: 100%;
+}
+
+button,
+input,
+textarea {
+  border: 1px solid gray;
+}
+
+button {
+  padding: 0.75em 1em;
+  border-radius: 0;
+  background-color: transparent;
+  line-height: 1;
+}
+
+button * {
+  pointer-events: none;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+noscript {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+[tabindex="-1"] {
+  outline: none !important;
+  box-shadow: none !important;
+}

src/assets/scss/base/_root.scss

@@ -0,0 +1,13 @@
+// | -------------------------------------------------------------
+// | Root
+// | -------------------------------------------------------------
+
+@use "color" as *;
+
+:root {
+  @each $color, $shades in $colors {
+    @each $shade, $value in $shades {
+      --#{$color}-#{$shade}: #{$value};
+    }
+  }
+}

src/assets/scss/base/_space-content.scss

@@ -0,0 +1,57 @@
+// | -------------------------------------------------------------
+// | Space Content
+// | -------------------------------------------------------------
+
+@use 'breakpoint' as *;
+
+.space-content {
+  > * + *,
+  > dl > * + * {
+    margin-top: 1.5rem;
+    margin-bottom: 0;
+  }
+
+  > h2 {
+    margin-top: 3rem;
+
+    @include breakpoint(large) {
+      margin-top: 4rem;
+    }
+  }
+
+  > h3 {
+    margin-top: 2rem;
+
+    @include breakpoint(large) {
+      margin-top: 3rem;
+    }
+  }
+
+  > h4 {
+    margin-top: 1.5rem;
+
+    @include breakpoint(large) {
+      margin-top: 2rem;
+    }
+  }
+
+  > h5 {
+    margin-top: 1rem;
+
+    @include breakpoint(large) {
+      margin-top: 1.5rem;
+    }
+  }
+
+  > h6 {
+    margin-top: 1rem;
+
+    @include breakpoint(large) {
+      margin-top: 1.5rem;
+    }
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+}

src/assets/scss/globals.scss

@@ -0,0 +1,14 @@
+// | -------------------------------------------------------------
+// | Globals
+// | -------------------------------------------------------------
+
+@use 'base/reset';
+@use 'base/root';
+@use 'base/font';
+@use 'base/list';
+@use 'base/container';
+@use 'base/breakpoint';
+@use 'base/button';
+@use 'base/color';
+@use 'base/outline';
+@use 'base/space-content';