From 5acc3d79790d3a8aafd853e2bfd57d5d020f6876 Mon Sep 17 00:00:00 2001 From: "Glitch (wiry-plaid-valley)" Date: Thu, 5 Nov 2020 18:10:17 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=99=E2=98=8E=EF=B8=8F=20Checkpoint=20.?= =?UTF-8?q?/style.css:617503/11313=20./index.html:617503/3007?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 22 ++++++------- style.css | 94 +++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 83 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index c50f85e..6962240 100644 --- a/index.html +++ b/index.html @@ -15,21 +15,21 @@
-
- Hello world! -
- -
-
-
- +
+ Hello World! Editor illustration +
+
+
- + diff --git a/style.css b/style.css index 49a601e..61caea3 100644 --- a/style.css +++ b/style.css @@ -1,38 +1,71 @@ -/* Our CSS values that we'll use in the rest of our styling */ +/* Our default values set for mobile */ :root { - --main-bg-color: #69F7BE; - --main-text-color: #373fff; + --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-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"); + 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(--main-bg-color); + background-color: var(--color-bg); } .title { - color: var(--main-text-color); + color: var(--color-text-main); font-family: HK Grotesk; font-style: normal; font-weight: bold; - font-size: 164px; + font-size: 120px; line-height: 105%; } .wrapper { - min-height: 95vh; + min-height: var(--wrapper-height); display: grid; place-items: center; + margin-left: 2rem; + margin-top: 3rem; } .content { @@ -40,18 +73,21 @@ body { flex-direction: column; align-items: center; justify-content: center; - padding: 1rem; +} + +/* Navigation grid */ +.navigation { + display: flex; + justify-content: flex-end; } /* Our remix on glitch button + grid for other actions */ -.remix { - display: grid; - place-items: end; -} - .btn--remix { font-family: HK Grotesk; - padding: .5rem .75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; font-size: 1.1rem; line-height: 1rem; font-weight: 500; @@ -62,14 +98,28 @@ body { border: 1px solid #000000; box-sizing: border-box; border-radius: 4px; - text-decoration: none; +} + +.btn--remix:hover { + background-color: #D0FFF1; } .btn--remix img { - margin-right: .75rem; + 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 +*/ \ No newline at end of file