🚿🍬 Checkpoint

./.glitch-assets:1062301/395 ./index.html:1062301/593 ./script.js:1062301/160
2021-04-11 21:52:23 +00:00
parent a25e58ec8a
commit 8646e582b7
5 changed files with 5 additions and 34 deletions
--- a/style.css
+++ b/style.css
@ -0,0 +1,127 @@
+/* Our default values set for mobile */
+:root {
+  --color-bg: #69F7BE;
+  --color-text-main: #2800FF;
+  --wrapper-height: 87vh;
+  --image-max-width: 300px;
+  --image-margin: 3rem;
+
+}
+
+/* Tablet portrait */
+@media (min-width: 768px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 400px;
+    --image-margin: 5rem;
+  }
+}
+
+/* Tablet Landscape */
+@media (min-width: 1024px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 500px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1280px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 500px;
+  }
+}
+
+@font-face {
+  font-family: HK Grotesk;
+  src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076")
+    format("opentype");
+}
+
+@font-face {
+  font-family: HK Grotesk;
+  font-weight: bold;
+  src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249")
+    format("opentype");
+}
+
+body {
+  font-family: HK Grotesk;
+  background-color: var(--color-bg);
+}
+
+.title {
+  color: var(--color-text-main);
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 120px;
+  line-height: 105%;
+}
+
+.wrapper {
+  min-height: var(--wrapper-height);
+  display: grid;
+  place-items: center;
+  margin-left: 2rem;
+  margin-top: 3rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Navigation grid */
+.navigation {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Our remix on glitch button + grid for other actions */
+.btn--remix {
+  font-family: HK Grotesk;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 1.1rem;
+  line-height: 1rem;
+  font-weight: 500;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  background: #FFFFFF;
+  border: 1px solid #000000;
+  box-sizing: border-box;
+  border-radius: 4px;
+  color: #000;
+  text-decoration: none;
+}
+
+.btn--remix:hover {
+  background-color: #D0FFF1;
+}
+
+.btn--remix img {
+  margin-right: 0.5rem;
+}
+
+.btn--remix {
+  margin-right: 1rem;
+}
+
+/* Very light scaling for our illustration */
+.illustration {
+  max-width: 100%;
+  max-height: var(--image-max-width);
+  margin-top: var(--image-margin);
+}
+
+
+/*
+  Add hover state to the buttons!! oops
+*/