From cc1e6957da57573c44dbd7f37a758a04646ea65e Mon Sep 17 00:00:00 2001
From: Nix7amcm <65091582+Nix7amcm@users.noreply.github.com>
Date: Tue, 9 May 2023 01:29:56 +0100
Subject: [PATCH] mobile toggle position and other minor edits

-toggle position for mobile with line
-header media query flex-direction column
-minor change to breakpoints-down small to cover px 639 jump
-toggle label color
-toggle focus state and height slight adjustment
-toggle focus color variables added
-toggle button position slight adjustment
-slight margin-left to centre Followers
-h1 h2 margin-bottom increase
-h2 color
---
 app/scss/components/card.scss    |  1 +
 app/scss/components/header.scss  |  4 ++++
 app/scss/components/toggle.scss  | 19 ++++++++++++++-----
 app/scss/globals/colors.scss     |  4 ++++
 app/scss/globals/typography.scss |  4 ++--
 app/scss/util/breakpoints.scss   |  2 +-
 6 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/scss/components/card.scss b/app/scss/components/card.scss
index 8e0defb..16d886b 100644
--- a/app/scss/components/card.scss
+++ b/app/scss/components/card.scss
@@ -125,6 +125,7 @@
     font-weight: 400;
     color: var(--text-color2);
     text-transform: uppercase;
+    margin-left: rem(5);
   }
 
   &__change {
diff --git a/app/scss/components/header.scss b/app/scss/components/header.scss
index e9fd33b..dd9febd 100644
--- a/app/scss/components/header.scss
+++ b/app/scss/components/header.scss
@@ -10,6 +10,10 @@
     align-items: center;
   }
 
+  @include breakpoint-down(small) {
+		flex-direction: column;
+	}
+
   &__title {
     width: 100%;
 
diff --git a/app/scss/components/toggle.scss b/app/scss/components/toggle.scss
index 4adead1..ad5f398 100644
--- a/app/scss/components/toggle.scss
+++ b/app/scss/components/toggle.scss
@@ -7,10 +7,17 @@
   border: none;
   margin: 0;
 
+  @include breakpoint-down(small) {
+    margin-top: rem(30);
+    padding: rem(20) 0 0 0;
+    text-align: left;
+    border-top: rem(1) solid var(--text-color2);
+  }
+
   label {
     font-size: rem(14);
     font-weight: 700;
-    color: var(--toggle);
+    color: var(--text-color2);
 
     &[for='dark'] {
       line-height: rem(24);
@@ -28,9 +35,11 @@
     opacity: 0;
     width: rem(24);
     height: rem(24);
+    cursor: pointer;
 
     &:focus ~ .toggle__button {
-      border: 2px solid white;
+      border: rem(0.015) solid var(--toggle-focus);
+      height: rem(17.985);
     }
   }
 
@@ -48,7 +57,7 @@
   &__button {
     position: absolute;
     left: rem(3);
-    top: rem(3);
+    top: rem(2.778);
     right: 100%;
     width: rem(18);
     height: rem(18);
@@ -58,8 +67,8 @@
   }
 
   #light:checked ~ .toggle__button {
-    left: calc(100% - 21px);
-    right: 3px;
+    left: calc(100% - rem(22.985));
+    right: rem(3);
   }
 
   #system:checked ~ .toggle__button {
diff --git a/app/scss/globals/colors.scss b/app/scss/globals/colors.scss
index 25c78a2..97bab04 100644
--- a/app/scss/globals/colors.scss
+++ b/app/scss/globals/colors.scss
@@ -11,6 +11,7 @@
   --toggle-bg-start: hsl(210, 78%, 56%);
   --toggle-bg-end: hsl(146, 68%, 55%);
   --toggle-light: hsl(230, 19%, 60%);
+  --toggle-focus-light: hsl(0, 0%, 100%);
   --toggle-button-light: hsl(228, 46%, 96%);
   --dark-bg: hsl(230, 17%, 14%);
   --dark-top-bg: hsl(232, 19%, 15%);
@@ -48,6 +49,7 @@
       var(--toggle-bg-start) 98.02%
     );
     --toggle-button: var(--dark-bg);
+    --toggle-focus: var(--toggle-focus-light);
   }
 }
 
@@ -60,6 +62,7 @@ body.light {
   --toggle: var(--toggle-light);
   --toggle-bg: var(--toggle-bg-light);
   --toggle-button: var(--toggle-button-light);
+  --toggle-focus: var(--dark-bg);
 }
 
 body.dark {
@@ -75,4 +78,5 @@ body.dark {
     var(--toggle-bg-start) 98.02%
   );
   --toggle-button: var(--dark-bg);
+  --toggle-focus: var(--toggle-focus-light);
 }
diff --git a/app/scss/globals/typography.scss b/app/scss/globals/typography.scss
index 5b7f4d7..1f1f0c8 100644
--- a/app/scss/globals/typography.scss
+++ b/app/scss/globals/typography.scss
@@ -9,7 +9,7 @@ h3 {
 
 h1 {
   font-size: rem(24);
-  margin-bottom: rem(3);
+  margin-bottom: rem(5);
   @include breakpoint(large) {
     font-size: rem(28);
   }
@@ -17,7 +17,7 @@ h1 {
 
 h2 {
   font-size: rem(24);
-  margin-bottom: rem(24);
+  margin-bottom: rem(27);
   color: var(--text-color2);
 }
 
diff --git a/app/scss/util/breakpoints.scss b/app/scss/util/breakpoints.scss
index d5f24a2..cd67f50 100644
--- a/app/scss/util/breakpoints.scss
+++ b/app/scss/util/breakpoints.scss
@@ -7,7 +7,7 @@ $breakpoints-up: (
 
 // 639px, 1149px, 1399px
 $breakpoints-down: (
-	'small': '39.9375em',
+	'small': '39.99em',
 	'medium': '71.8125em',
 	'large': '87.4375em',
 );