From 0b6dc5054ba15325b90548dc929a4deb5d31221e Mon Sep 17 00:00:00 2001
From: Amandine Arias <amandine.arias@gmail.com>
Date: Thu, 20 May 2021 20:30:33 +0200
Subject: [PATCH] update (styles) : improvements (#7)

---
 css/styles.css             | 19 ++++++++----------
 sass/base/_typography.scss |  2 +-
 sass/layout/_gallery.scss  | 40 ++++++++++++++++++++++++++++++--------
 sass/layout/_lightbox.scss |  1 -
 sass/utils/_variables.scss |  5 +++--
 5 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 84c5ef3..ebd6447 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -61,7 +61,7 @@ body {
   font-size: small;
 }
 .header__headline {
-  font-size: larger;
+  font-size: large;
   color: #901c1c;
 }
 
@@ -71,7 +71,7 @@ nav {
 }
 
 .card__name {
-  font-size: 2em;
+  font-size: xx-large;
   font-weight: 400;
   color: #d3573c;
   border-radius: 3px;
@@ -82,7 +82,7 @@ nav {
   box-shadow: 0 0 0 2px white, 0 0 0 4px #db8876;
 }
 .card__location {
-  font-size: x-large;
+  font-size: large;
   color: #901c1c;
   border-radius: 3px;
   line-height: 1.5em;
@@ -129,7 +129,7 @@ nav {
 
 @media only screen and (max-width: 600px) {
   .card__name {
-    font-size: larger;
+    font-size: large;
   }
   .card__location {
     font-size: 0.9em;
@@ -566,19 +566,17 @@ label {
   overflow: hidden;
   cursor: pointer;
 }
-.gallery__media:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px white, 0 0 0 6px #901c1c;
-}
-.gallery__link img, .gallery__link video {
+.gallery__media img, .gallery__media video {
   width: 275px;
   height: 275px;
   object-fit: cover;
   transition: all 0.5s ease;
 }
-.gallery__link img:hover, .gallery__link img:focus, .gallery__link video:hover, .gallery__link video:focus {
+.gallery__media img:hover, .gallery__media img:focus, .gallery__media video:hover, .gallery__media video:focus {
   transform: scale(1.25);
   transform-origin: 50% 50%;
+  outline: none;
+  box-shadow: 0 0 0 3px white, 0 0 0 6px #901c1c;
 }
 .gallery__content {
   width: 100%;
@@ -692,7 +690,6 @@ label {
 .lightbox__title {
   margin-top: 5px;
   color: #901c1c;
-  font-size: medium;
 }
 .lightbox__btn {
   position: absolute;
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
index e0c9f1f..74e0dd4 100644
--- a/sass/base/_typography.scss
+++ b/sass/base/_typography.scss
@@ -42,7 +42,7 @@ nav {
   }
 
   &__location {
-    font-size: $xl;
+    font-size: $l;
     color: $secondaire-txt;
     border-radius: 3px;
     line-height: 1.5em;
diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
index 1c75cc1..02584a2 100644
--- a/sass/layout/_gallery.scss
+++ b/sass/layout/_gallery.scss
@@ -17,14 +17,6 @@
     overflow: hidden;
     cursor: pointer;
 
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px white, 0 0 0 6px $primaire-bg;
-    }
-  }
-
-  &__link {
-
     & img,
     & video {
       width: 275px;
@@ -36,9 +28,41 @@
       &:focus {
         transform: scale(1.25);
         transform-origin: 50% 50%;
+        outline: none;
+        box-shadow: 0 0 0 3px white, 0 0 0 6px $primaire-bg;
       }
     }
   }
+  // &__media {
+  //   width: 275px;
+  //   height: 275px;
+  //   border-radius: 3px;
+  //   margin: auto;
+  //   overflow: hidden;
+  //   cursor: pointer;
+
+  //   &:focus {
+  //     outline: none;
+  //     box-shadow: 0 0 0 3px white, 0 0 0 6px $primaire-bg;
+  //   }
+  // }
+
+  // &__link {
+
+  //   & img,
+  //   & video {
+  //     width: 275px;
+  //     height: 275px;
+  //     object-fit: cover;
+  //     transition: all 0.5s ease;
+
+  //     &:hover,
+  //     &:focus {
+  //       transform: scale(1.25);
+  //       transform-origin: 50% 50%;
+  //     }
+  //   }
+  // }
 
   &__content {
     width: 100%;
diff --git a/sass/layout/_lightbox.scss b/sass/layout/_lightbox.scss
index ef6635d..6e387f2 100644
--- a/sass/layout/_lightbox.scss
+++ b/sass/layout/_lightbox.scss
@@ -35,7 +35,6 @@
   &__title {
     margin-top: 5px;
     color: $secondaire-txt;
-    font-size: $m;
   }
 
   &__btn {
diff --git a/sass/utils/_variables.scss b/sass/utils/_variables.scss
index e27efad..b902bbc 100644
--- a/sass/utils/_variables.scss
+++ b/sass/utils/_variables.scss
@@ -3,9 +3,10 @@ $type: Roboto, Arial, Helvetica, sans-serif;
 $xs: xx-small;
 $s: small;
 $m: medium;
-$l: larger;
+$ml: larger;
+$l: large;
 $xl: x-large;
-$xxl: 2em;
+$xxl: xx-large;
 $light: 300;
 $regular: 400;
 $bold: 700;