🎉 Initial setup

🎉 Initial setup

Setup deployment

src/css/base/elements.css

@@ -0,0 +1,114 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  vertical-align: baseline;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+html {
+  height: 100%;
+  line-height: 1.5;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: var(--color-body-text);
+  background-color: var(--color-body-bg);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-head);
+  line-height: 1.05;
+
+  & a {
+    color: currentColor;
+    text-decoration: none !important;
+  }
+}
+
+h1 {
+  font-size: var(--font-size-xxxl);
+}
+
+h2 {
+  font-size: var(--font-size-xxl);
+}
+
+h3 {
+  font-size: var(--font-size-xl);
+}
+
+h4, h5, h6 {
+  font-size: var(--font-size-m);
+}
+
+a {
+  outline: 0;
+  color: inherit;
+  text-decoration: underline;
+  transition-property: background, color;
+  transition-duration: var(--transition-duration-fast);
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-accent);
+      text-decoration: underline;
+    }
+  }
+
+  & svg {
+    transition-property: background, color;
+    transition-duration: var(--transition-duration-fast);
+  }
+}
+
+p {
+  margin-bottom: var(--space-l);
+}
+
+ul {
+  margin-left: var(--space-m);
+  margin-bottom: var(--space-l);
+}
+
+p,
+ul {
+  & + h2 {
+    margin-top: var(--space-xl);
+  }
+
+  & + h3,
+  & + h4,
+  & + h5,
+  & + h6 {
+    margin-top: var(--space-l);
+  }
+}
+
+img:-moz-loading {
+  visibility: hidden;
+}
+
+[aria-hidden="true"] {
+  display: none;
+}

src/css/base/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'The Bold Font';
+  src: url('../fonts/theboldfont.woff2') format('woff2');
+}

src/css/base/footer.css

@@ -0,0 +1,4 @@
+.footer {
+  text-align: center;
+  font-size: var(--font-size-xs);
+}

src/css/base/header.css

@@ -0,0 +1,119 @@
+.header {
+  /* position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10; */
+  color: var(--color-body-text);
+  background-color: var(--color-body-bg);
+
+  @media (--up_to_L) {
+    padding-top: var(--space-l);
+    padding-bottom: var(--space-l);
+  }
+  @media (--L_and_up) {
+    padding-top: var(--space-xl);
+    padding-bottom: var(--space-xl);
+  }
+
+  @nest body.topbar & {
+    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  @nest body.topbar.topbar--appear & {
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration-fast);
+  }
+
+  & .wrap {
+    @media (--L_and_up) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-end;
+    }
+  }
+
+  & .brand {
+    display: inline-block;
+    margin-right: var(--space-xl);
+  }
+
+  & .logo {
+    display: block;
+
+    @media (--up_to_M) {
+      height: 27px;
+      width: 300px;
+    }
+    @media (--M_to_L) {
+      height: 45px;
+      width: 500px;
+    }
+    @media (--L_and_up) {
+      height: 63px;
+      width: 700px;
+    }
+  }
+
+  & .nav {
+    position: relative;
+    top: 3px;
+    left: -1px;
+    display: flex;
+    flex: 1;
+
+    @media (--up_to_L) {
+      margin-top: var(--space-m);
+    }
+    @media (--L_and_up) {
+      margin-top: var(--space-l);
+    }
+
+    & a {
+      text-decoration: none;
+
+      &.navItem {
+        text-transform: uppercase;
+        letter-spacing: -0.04em;
+        font-weight: var(--font-weight-bold);
+        margin-right: var(--space-l);
+        line-height: 1;
+
+        @media (--up_to_L) {
+          font-size: var(--font-size-l);
+        }
+        @media (--L_and_up) {
+          font-size: var(--font-size-xl);
+        }
+      }
+    }
+
+    & .social {
+      display: flex;
+      align-items: center;
+
+      @media (--L_and_up) {
+        margin-left: auto;
+      }
+
+      & a,
+      & svg {
+        display: inline-block;
+
+        @media (--up_to_L) {
+          height: calc(var(--font-size-l) - 0.2rem);
+          width: calc(var(--font-size-l) - 0.2rem);
+        }
+        @media (--L_and_up) {
+          height: calc(var(--font-size-xl) - 0.2rem);
+          width: calc(var(--font-size-xl) - 0.2rem);
+        }
+      }
+
+      & a + a {
+        margin-left: var(--space-l);
+      }
+    }
+  }
+}

src/css/base/layout.css

@@ -0,0 +1,24 @@
+.wrap {
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media (--up_to_M) {
+    padding-left: var(--space-l);
+    padding-right: var(--space-l);
+  }
+  @media (--M_to_L) {
+    padding-left: var(--space-xl);
+    padding-right: var(--space-xl);
+  }
+  @media (--L_and_up) {
+    padding-left: var(--space-xxl);
+    padding-right: var(--space-xxl);
+  }
+}
+
+.main {
+  flex: 1;
+  padding-top: var(--space-xl);
+  padding-bottom: var(--space-xl);
+}

src/css/base/variables.css

@@ -0,0 +1,61 @@
+@custom-media --up_to_M screen and (max-width: 599px);
+@custom-media --up_to_L screen and (max-width: 839px);
+@custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);
+@custom-media --M_and_up screen and (min-width: 600px);
+@custom-media --L_and_up screen and (min-width: 840px);
+
+:root {
+  --color-neutral-0: #fff;
+  --color-neutral-10: #ddd;
+  --color-neutral-90: #222;
+
+  --color-body-text: var(--color-neutral-90);
+  --color-body-bg: var(--color-neutral-0);
+  --color-accent: #f7931a;
+  --color-derweg: #00B4CF;
+  --color-interview: #151515;
+
+  --space-xs: .125rem;
+  --space-s: .25rem;
+  --space-m: .5rem;
+  --space-l: 1rem;
+  --space-xl: 2rem;
+  --space-xxl: 4rem;
+
+  --transition-duration-fast: 0.25s;
+  --transition-duration-medium: 0.75s;
+  --transition-duration-slow: 1.5s;
+
+  --border-radius: 16px;
+  --opacity-text: 0.7;
+
+  --font-family-base: sans-serif;
+  --font-family-head: 'The Bold Font', var(--font-family-base);
+
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --font-size-base: 18px;
+  --font-size-xs: .7rem;
+  --font-size-s: .85rem;
+  --font-size-m: 1rem;
+  --font-size-l: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 2.5rem;
+  --font-size-xxxl: 4rem;
+}
+
+:root[data-theme="dark"] {
+  --color-body-text: var(--color-neutral-0);
+  --color-body-bg: var(--color-neutral-90);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-body-text: var(--color-neutral-0);
+    --color-body-bg: var(--color-neutral-90);
+  }
+}