From 627f66d6f8530c2442ebb0277b759443af6c5ed8 Mon Sep 17 00:00:00 2001
From: "Glitch (hello-express)" <none>
Date: Thu, 5 Nov 2020 18:07:42 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=95=F0=9F=92=BE=20Checkpoint=20./publi?=
 =?UTF-8?q?c/style.css:617503/3841=20./public/index.html:617503/2728?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 24 ++++++-------
 public/style.css  | 92 ++++++++++++++++++++++++++++++++++-------------
 2 files changed, 80 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index 994cb25..8b42837 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,21 +15,21 @@
   </head>
   <body>
     <div class="wrapper">
-      <div class="content">
-        <h1 class="title">Hey node!</h1>
-      </div>
-      <img src="/illustration.svg" class="illustration" />
-    </div>
-    <div class="remix">
-      <div>
-        <button class="btn--remix">
+        <div class="content">
+          <span class="title">Hey, Node!</span>
           <img
-            src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576"
+            src="illustration.svg"
+            class="illustration"
+            alt="Editor illustration"
           />
-          Remix on Glitch
-        </button>
+        </div>
       </div>
-    </div>
+      <nav class="navigation">
+        <a href="https://glitch.com/edit/#!/remix/glitch-hello-website" class="btn--remix">
+          <img src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576" />
+          Remix on Glitch
+        </a>
+      </nav>
 
     <!-- include the Glitch button to show what the webpage is about and
           to make it easier for folks to view source and remix -->
diff --git a/public/style.css b/public/style.css
index 9f5d446..41df4cc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,7 +1,36 @@
-/* Our CSS values that we'll use in the rest of our styling */
+/* Our default values set for mobile */
 :root {
-  --main-bg-color: #BDC9FF;
-  --main-text-color: #2800FF;
+  --color-bg: #FFFFA0;
+  --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 {
@@ -19,28 +48,24 @@
 
 body {
   font-family: HK Grotesk;
-  background-color: var(--main-bg-color);
-}
-
-/* Reset margin and padding on our titles */
-h1 {
-  margin: 0;
-  padding: 0;
+  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 {
@@ -48,18 +73,21 @@ h1 {
   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: 0.5rem 0.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;
@@ -72,10 +100,26 @@ h1 {
   border-radius: 4px;
 }
 
-.btn--remix img {
-  margin-right: 0.75rem;
+.btn--remix:hover {
+  background-color: #D0FFF1;
 }
 
-.illustration {
-  max-width: 60%;
+.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
+*/
\ No newline at end of file