update (styles) : improvements (#7)

codexarama · May 15, 2021 · c29aa3f · c29aa3f
1 parent a8437b1
commit c29aa3f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 24 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -73,6 +73,10 @@ nav {
 }
 
 .filter {
+  &__title {
+    font-size: $m;
+  }
+
   &__title,
   &__select {
     font-weight: $bold;
@@ -86,7 +90,7 @@ nav {
 
 .gallery {
   color: $secondaire-txt;
-  font-weight: $bold;
+  font-size: $m;
 }
 
 .footer {

diff --git a/sass/layout/_filter.scss b/sass/layout/_filter.scss
@@ -6,7 +6,6 @@
 
   &__title {
     margin: 10px 10px 0 0;
-    font-size: $s;
   }
 
   &__box {

diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
@@ -1,12 +1,13 @@
 .gallery {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
 
   &__card {
     margin-bottom: 15px;
+    width: 200px;
   }
 
   &__media {
@@ -40,6 +41,7 @@
   }
 
   &__infos {
+    width: 150px;
     display: inline-flex;
     justify-content: space-between;
   }
@@ -59,6 +61,7 @@
   &__likes {
     display: inline-flex;
     justify-content: flex-end;
+    align-items: center;
 
     &--btn {
       width: 14px;
@@ -97,7 +100,7 @@
     }
 
     &--count {
-      width: 30px;
+      width: 35px;
       background-color: transparent;
       border: none;
       border-radius: 3px;
@@ -107,7 +110,7 @@
       text-align: right;
       font-family: $type;
       font-size: inherit;
-      font-weight: inherit;
+      font-weight: $bold;
       color: $secondaire-txt;
       user-select: none;
 

diff --git a/sass/layout/_lightbox.scss b/sass/layout/_lightbox.scss
@@ -10,7 +10,7 @@
     height: 100%;
     width: 100%;
     overflow: auto;
-    background-color: rgba(0, 0, 0, 1);
+    background-color: white;
   }
 
   &__show {
@@ -34,22 +34,33 @@
 
   &__title {
     width: 100%;
-    color: $primaire-a;
     text-align: center;
     margin-top: 5px;
+    color: $secondaire-txt;
+    font-size: $m;
   }
 
   &__btn {
     position: absolute;
     cursor: pointer;
-    color: $primaire-a;
-    opacity: .5;
     padding: 2%;
+    border-radius: 3px;
+    background-color: transparent;
+    appearance: none;
+    border: none;
+    outline: none;
+    color: $secondaire-txt;
     font-size: 20px;
     transition: 0.5s ease;
     user-select: none;
-    &:hover {
-      opacity: 1;
+    &:hover,
+    &:focus {
+      color: $primaire-txt;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px white, 0 0 0 4px $secondaire-bg;
     }
   }
 
@@ -71,4 +82,4 @@
     right: 0;
     top: 0;
   }
-}
+}
diff --git a/sass/utils/_variables.scss b/sass/utils/_variables.scss
@@ -14,7 +14,6 @@ $primaire-txt: #d3573c;
 $primaire-border: #901c1c;
 $primaire-a: white;
 $secondaire-bg: #db8876;
-// $secondaire-bg: #d3573c;
 $secondaire-txt: #901c1c;
 $secondaire-border: lightgray;
 $secondaire-a: black;