update (styles) : improvements (#7)

codexarama · May 20, 2021 · 0b6dc50 · 0b6dc50
1 parent ae4caa1
commit 0b6dc50
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 23 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git 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
@@ -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
@@ -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
@@ -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;