add footer and style home

assets/css/src/articles.css

@@ -0,0 +1,31 @@
+#articles {
+  margin: 0 var(--unit--horizontal);
+}
+#organize {
+  margin-bottom: calc(var(--unit--vertical));
+}
+.article {
+  position: relative;
+  margin-bottom: calc(var(--unit--vertical) * 2);
+  box-sizing: border-box;
+}
+
+.article__infos,
+.article__labels {
+  transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1)));
+}
+
+.article__infos {
+  display: flex;
+}
+
+.article__labels {
+  display: flex;
+}
+
+.article .label {
+  margin-right: var(--unit--horizontal);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 6px;
+}

assets/css/src/footer.css

@@ -0,0 +1,5 @@
+#main-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}

assets/css/src/generic.css

@@ -0,0 +1,66 @@
+.hidden {
+  display: none;
+}
+
+.grid {
+  background-size: var(--unit--horizontal) var(--unit--vertical);
+  background-image: linear-gradient(
+      to right,
+      var(--color-secondary--x-light) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to bottom,
+      var(--color-secondary--light) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to bottom,
+      var(--color-secondary--x-light) 1px,
+      transparent 1px
+    );
+  background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2);
+  background-attachment: fixed;
+}
+
+.left:not(.padding) {
+  margin-left: calc(var(--unit--horizontal) * var(--left));
+}
+.padding.left {
+  padding-left: calc(var(--unit--horizontal) * var(--left));
+}
+.top:not(.padding) {
+  margin-top: calc(var(--unit--vertical) * var(--top));
+}
+.padding.top {
+  padding-top: calc(var(--unit--vertical) * var(--top));
+}
+.right:not(.padding) {
+  margin-right: calc(var(--unit--horizontal) * var(--right));
+}
+.padding.right {
+  padding-right: calc(var(--unit--horizontal) * var(--right));
+}
+.bottom:not(.padding) {
+  margin-bottom: calc(var(--unit--horizontal) * var(--bottom));
+}
+.padding.bottom {
+  padding-bottom: calc(var(--unit--horizontal) * var(--bottom));
+}
+
+.full-width {
+  width: 100%;
+}
+
+.width {
+  width: calc(var(--unit--horizontal) * var(--width));
+}
+
+.flex {
+  display: flex;
+  justify-content: var(--content);
+  gap: calc(var(--gap) * var(--unit--horizontal));
+}
+.flex.column {
+  flex-direction: column;
+}

assets/css/src/header.css

@@ -0,0 +1,38 @@
+#header {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(var(--unit--vertical) * 5);
+  padding: var(--unit--vertical) var(--unit--horizontal);
+
+  transition: height 0.2s ease-in-out;
+}
+#header.minimized {
+  height: calc(var(--unit--vertical) * 3);
+}
+#logo {
+  position: relative;
+}
+
+#header.open #actuel {
+  color: var(--color-background);
+}
+#logo #actuel {
+  color: var(--color-primary--transparent);
+  position: relative;
+  z-index: 1;
+  margin-left: calc(var(--unit--horizontal) * 2);
+}
+#logo #inactuel {
+  position: absolute;
+  z-index: 0;
+  color: var(--color-secondary);
+  bottom: -48%;
+  transition: bottom 0.2s ease-in-out;
+}
+#header.minimized #logo #inactuel {
+  bottom: 0%;
+}

assets/css/src/html.css

@@ -0,0 +1,58 @@
+body {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: var(--unit--vertical) var(--unit--horizontal);
+  background-color: var(--color-background);
+  color: var(--color-primary);
+}
+
+hr {
+  height: calc(var(--unit--vertical) / 2);
+  border: none;
+  background-color: var(--color-primary);
+  width: calc(var(--unit--horizontal) * 4);
+  margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal));
+}
+
+nav hr {
+  background-color: var(--color-background);
+  margin-left: 0;
+}
+
+/* ================= SCROLLBAR ================= */
+body,
+html {
+  scroll-behavior: smooth;
+}
+
+/* Works on Firefox */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}
+
+/* Works on Chrome, Edge, and Safari */
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 0px;
+  border: none;
+}
+
+a:not(.no-line) {
+  text-decoration: dotted;
+  text-decoration-color: #fff;
+  text-decoration-line: underline;
+  text-underline-offset: 0.2rem;
+}

assets/css/src/reset.css

@@ -0,0 +1,31 @@
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+li {
+  list-style-type: none;
+}

assets/css/src/tabs.css

@@ -0,0 +1,27 @@
+button.toggle.open {
+  font-weight: bold;
+}
+
+button.toggle.left::after {
+  margin-left: var(--unit--horizontal);
+}
+button.toggle.left.close::after {
+  content: "+";
+}
+button.toggle.left.open::after {
+  content: "-";
+}
+
+button.toggle.right::before {
+  margin-right: var(--unit--horizontal);
+}
+button.toggle.right.close::before {
+  content: "+";
+}
+button.toggle.right.open::before {
+  content: "-";
+}
+
+.content {
+  margin-top: calc(var(--unit--vertical) * 2);
+}

assets/css/src/texts.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: "Switzer-Variable";
+  src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2"),
+    url("/assets/fonts/Switzer-Variable.woff") format("woff"),
+    url("/assets/fonts/Switzer-Variable.ttf") format("truetype");
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+* {
+  font-family: "Switzer-Variable", sans-serif;
+}
+
+h1 {
+  font-size: 25vw;
+  line-height: 4rem;
+  transform: translate(-2px, -13px);
+  font-weight: 550;
+}
+
+p,
+li,
+button,
+.fs-m {
+  transform: translateY(calc(var(--unit--vertical) * 0.12));
+  font-size: var(--font-size-m);
+  line-height: calc(var(--unit--vertical));
+}
+p,
+li,
+button,
+.fw-light {
+  font-weight: var(--font-weight-light);
+}
+
+.ta-center {
+  text-align: center;
+}
+
+p {
+  transform: translateY(3px);
+}
+
+button {
+  display: flex;
+  align-items: center;
+}
+
+article p {
+  margin-bottom: var(--unit--vertical);
+}

assets/css/src/variables.css

@@ -0,0 +1,15 @@
+:root {
+  --color-background: #000;
+  --color-primary: #ffffff;
+  --color-primary--transparent: rgba(255, 255, 255, 0.86);
+  --color-secondary: rgb(120, 171, 150, 0.86);
+  --color-secondary--light: rgb(119, 177, 157, 0.25);
+  --color-secondary--x-light: rgb(119, 177, 157, 0.15);
+
+  --unit--horizontal: 5vw;
+  --unit--vertical: 1.3rem;
+
+  --font-size-m: 1.2rem;
+
+  --font-weight-light: 200;
+}