initial commit

2024-04-09 10:23:10 +00:00
commit a32b894e19
4 changed files with 468 additions and 0 deletions
@@ -0,0 +1,172 @@
+/* 
+=================================================
+https://www.joshwcomeau.com/css/custom-css-reset/
+================================================= 
+*/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/* 
+=================================================
+CUSTOM STYLE
+================================================= 
+*/
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  background-color: #eceff1;
+  color: #263238;
+  font-family: sans-serif;
+}
+
+.panel {
+  flex-grow: 2;
+  position: relative;
+}
+
+.panel.right,
+.panel.left {
+  background-color: #cfd8dc;
+  margin: 1em;
+  border-radius: 2em;
+  padding: 1em;
+}
+
+.panel.middle {
+  height: 100%;
+  flex-grow: 1;
+}
+
+.panel.middle h1 {
+  position: absolute;
+  top: 1em;
+  width: 100%;
+  text-align: center;
+}
+
+.panel.middle h2 {
+  position: absolute;
+  bottom: 1em;
+  width: 100%;
+  text-align: center;
+}
+
+.wheel {
+  position: relative;
+  height: 80%;
+  width: fit-content;
+  margin: 10% auto;
+}
+
+.wheel svg {
+  transition: transform 5s ease-out;
+  height: 100%;
+}
+
+svg text {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.wheel::after {
+  content: "";
+  position: absolute;
+  left: 94%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  border-right: 6vh solid #263238;
+  border-bottom: 2vh solid transparent;
+  border-top: 2vh solid transparent;
+  transform: translateY(-50%);
+  clear: both;
+}
+
+.panel.right textarea {
+  background-color: #cfd8dc;
+  color: #263238;
+  font-family: sans-serif;
+  padding: 0.5em;
+  border: 1px solid #263238;
+  height: 100%;
+  width: 100%;
+  border-radius: 1em;
+}