first commit

2023-03-15 15:31:55 +01:00
commit bf635fea29
52 changed files with 1391 additions and 0 deletions
@@ -0,0 +1,137 @@
+@charset "UTF-8";
+/* mix blend mode est dépendant du stacking context */
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 400;
+  src: url("assets/fonts/PublicSans-Regular.ttf") format("TrueType");
+}
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 300;
+  src: url("assets/fonts/PublicSans-Light.ttf") format("TrueType");
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Public", sans-serif;
+  font-weight: 400;
+}
+
+#content {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+#content svg {
+  width: 30%;
+  height: auto;
+}
+#content svg path {
+  cursor: pointer;
+}
+#content svg#fill {
+  fill: white;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+}
+#content svg#stroke {
+  position: absolute;
+  fill: none;
+  stroke: black;
+  stroke-width: 1px;
+}
+#content #buttons_container {
+  position: absolute;
+  bottom: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+#content #buttons_container .mode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  margin: 0px 10px;
+  padding: 7px 15px;
+  padding-left: 10px;
+  border-radius: 50px;
+  cursor: pointer;
+  border: solid 0.8px rgba(0, 0, 0, 0.5);
+  transition: border 0.4s ease-in-out;
+  font-weight: 300;
+  font-size: 1rem;
+}
+#content #buttons_container .mode svg {
+  width: 28px;
+  height: auto;
+  margin-right: 10px;
+}
+#content #buttons_container .mode svg .thick {
+  transition: stroke-width 0.2s ease-in-out;
+  stroke-width: 0.8;
+  stroke: black;
+}
+#content #buttons_container .mode svg .thin {
+  transition: stroke-width 0.2s ease-in-out;
+  stroke-width: 0.5;
+  stroke: black;
+}
+#content #buttons_container .mode p {
+  height: fit-content;
+  margin-bottom: 3px;
+}
+#content #buttons_container .mode.active {
+  font-weight: 400;
+  border: solid 1.2px rgb(0, 0, 0);
+}
+#content #buttons_container .mode.active svg .thick {
+  stroke-width: 1.2;
+  stroke: black;
+}
+#content #buttons_container .mode.active svg .thin {
+  stroke-width: 0.6;
+  stroke: black;
+}
+#content #BG_BG_BG {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -1;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+#content #BG_BG_BG_tmp {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -2;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#grain-bg {
+  position: absolute !important;
+  width: 100vw;
+  height: 100vh;
+}
+
+#grain-bg > * {
+  position: relative;
+}
+
+/*# sourceMappingURL=styles.css.map */