initial commit

assets/css/src/calendar-strip.css

@@ -0,0 +1,25 @@
+.calendar-strip {
+  background-color: var(--color-yellow);
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 2rem var(--margin-body);
+  border-top: var(--border);
+  border-bottom: var(--border);
+}
+
+.calendar-strip__selector {
+  flex-shrink: 0;
+}
+
+.calendar-strip__days {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+}
+
+.calendar-strip__calendar-btn {
+  border: var(--border);
+  padding: 0.2rem 0.5rem;
+}

assets/css/src/nav.css

@@ -0,0 +1,67 @@
+/* Nav */
+.main-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: var(--border);
+  padding: 1rem;
+}
+
+.main-nav .logo {
+  font-weight: normal;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.main-nav .logo > * {
+  display: block;
+}
+
+.main-nav .logo > *:not(:first-child) {
+  margin-left: 2.4ch;
+}
+
+.main-nav__right {
+  display: flex;
+}
+
+.main-nav__right > *:not(:last-child) {
+  margin-right: 2.69rem;
+}
+
+.main-nav .burger-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-nav .burger-btn__line,
+.main-nav .burger-btn__line::before,
+.main-nav .burger-btn__line::after {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.main-nav .burger-btn__line::before {
+  transform: translateY(-0.5rem);
+}
+
+.main-nav .burger-btn__line::after {
+  transform: translateY(0.5rem);
+}
+
+/* Main nav small */
+
+.main-nav--small .logo__detail {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.main-nav--small .logo > *:not(:first-child) {
+  margin-left: 1.4ch;
+}

assets/css/src/reset.css

@@ -0,0 +1,59 @@
+body,
+html,
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-body-bg);
+}
+
+body,
+html {
+  scroll-behavior: smooth;
+}
+
+figure {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:visited {
+  color: inherit;
+}
+
+ul {
+  margin: 0;
+  padding-left: 0;
+}
+
+li {
+  list-style: none;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+}
+picture {
+  width: 100%;
+}
+
+picture {
+  display: block;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+}

assets/css/src/text.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Medium.woff") format("woff");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Semibold.woff") format("woff");
+  font-weight: bold;
+}
+body {
+  font-family: "Joker";
+  font-size: var(--font-size-body);
+}

assets/css/src/variables.css

@@ -0,0 +1,27 @@
+:root {
+  --border: 1px solid #000;
+
+  --font-size-body: 1.25rem;
+  --font-size-h3: 1.5625rem;
+  --font-size-h2: 1.875rem;
+  --font-size-h1: 2.8125rem;
+
+  --margin-body: 3.86rem;
+
+  --color-pink: #ed268f;
+  --color-pink-light: #ffa199;
+  --color-salmon: #ff4f4b;
+  --color-purple: #9e00ff;
+  --color-purple-light: #f066ff;
+  --color-yellow: #faff82;
+  --color-yellow-fluo: #d6ff00;
+  --color-orange: #ff5c00;
+  --color-red: #ff3300;
+  --color-duck: #2e8799;
+  --color-blue: #009eff;
+  --color-blue-light: #abf1ff;
+  --color-grey: #c4c9cc;
+  --color-green: #00b477;
+  --color-brown: #a59478;
+  --color-brown-light: #d6cfbe;
+}