From de4130b0638747b1c64cce3cbc5c390fb0ef855c Mon Sep 17 00:00:00 2001
From: Amandine Arias <amandine.arias@gmail.com>
Date: Mon, 17 May 2021 18:27:52 +0200
Subject: [PATCH] update (styles) : improvements (#7)

---
 css/styles.css                | 104 ++++++++++++++++++----------------
 sass/base/_typography.scss    |  43 ++++++++++----
 sass/components/_buttons.scss |  23 +++-----
 sass/layout/_card.scss        |   8 +--
 sass/layout/_footer.scss      |   4 +-
 sass/layout/_gallery.scss     |  16 ++----
 sass/layout/_lightbox.scss    |   2 +-
 sass/layout/_nav.scss         |  10 +++-
 sass/layout/_profile.scss     |   8 +--
 sass/utils/_mixin.scss        |   2 +-
 sass/utils/_variables.scss    |   6 +-
 11 files changed, 124 insertions(+), 102 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 244d7ee..57594e2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -45,19 +45,23 @@ main {
 
 body {
   font-family: Roboto, Arial, Helvetica, sans-serif;
-  font-size: small;
+  font-size: medium;
   font-weight: 400;
 }
 
-.btn-homepage {
+.evitement {
   font-size: xx-small;
+  color: white;
+}
+.evitement:hover {
+  color: black;
 }
 
 .header__tags {
-  font-size: xx-small;
+  font-size: small;
 }
 .header__headline {
-  font-size: 2em;
+  font-size: larger;
   color: #901c1c;
 }
 
@@ -78,7 +82,7 @@ nav {
   box-shadow: 0 0 0 2px white, 0 0 0 4px #901c1c;
 }
 .card__location {
-  font-size: medium;
+  font-size: larger;
   color: #901c1c;
   border-radius: 3px;
   line-height: 1, 5em;
@@ -97,7 +101,7 @@ nav {
   box-shadow: 0 0 0 2px white, 0 0 0 4px #901c1c;
 }
 .card__price {
-  font-size: xx-small;
+  font-size: small;
   font-weight: 300;
   border-radius: 3px;
   line-height: 2em;
@@ -107,9 +111,6 @@ nav {
   box-shadow: 0 0 0 2px white, 0 0 0 4px #901c1c;
 }
 
-.filter__title {
-  font-size: medium;
-}
 .filter__title, .filter__select {
   font-weight: 700;
 }
@@ -119,13 +120,26 @@ nav {
 
 .gallery {
   color: #901c1c;
-  font-size: medium;
 }
 
 .footer {
   font-weight: 700;
 }
 
+@media only screen and (max-width: 600px) {
+  .card__name {
+    font-size: larger;
+  }
+  .card__location {
+    font-size: 0.9em;
+  }
+  .card__tagline {
+    font-size: xx-small;
+  }
+  .card__price {
+    font-size: xx-small;
+  }
+}
 .btn {
   background-color: #901c1c;
   border: none;
@@ -145,34 +159,26 @@ nav {
 }
 
 .evitement {
-  position: fixed;
-  width: 90%;
-  margin: 5px auto;
-  text-align: center;
-  color: white;
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
 }
 .evitement__link {
-  width: 130px;
+  position: fixed;
   padding: 3px 6px;
-  transform-origin: center center;
-}
-.evitement__link:hover {
-  color: black;
 }
 
 @media only screen and (max-width: 600px) {
   .evitement {
     display: none;
-    position: fixed;
-    top: 92%;
-    transition: all 1s ease;
   }
   .evitement__link {
-    transform-origin: center center;
+    top: 92%;
   }
 
   .evitement.scroll {
-    display: block;
+    display: inline-flex;
+    transition: all 1s ease;
   }
 }
 .header {
@@ -230,7 +236,7 @@ nav {
 }
 .tags li a {
   text-align: center;
-  font-size: xx-small;
+  font-size: small;
   border-radius: 25px;
   border: solid 1px lightgray;
   margin: 0 2px;
@@ -249,21 +255,26 @@ nav {
   box-shadow: 0 0 0 2px white, 0 0 0 4px #901c1c;
 }
 
+@media only screen and (max-width: 600px) {
+  .tags li a {
+    font-size: xx-small;
+  }
+}
 .card {
   width: 33%;
   text-align: center;
   padding: 25px 0;
 }
 .card__image {
-  width: 125px;
-  height: 125px;
+  width: 175px;
+  height: 175px;
   border-radius: 50%;
   margin: auto;
   overflow: hidden;
 }
 .card__image img {
-  width: 125px;
-  height: 125px;
+  width: 175px;
+  height: 175px;
   object-fit: cover;
   transition: all 0.5s ease;
 }
@@ -298,14 +309,14 @@ nav {
   margin-top: 10px;
 }
 .id__image {
-  width: 125px;
-  height: 125px;
+  width: 175px;
+  height: 175px;
   border-radius: 50%;
   overflow: hidden;
 }
 .id__image img {
-  width: 125px;
-  height: 125px;
+  width: 175px;
+  height: 175px;
   object-fit: cover;
   transition: all 0.5s ease;
 }
@@ -372,7 +383,7 @@ nav {
   margin: 10px auto;
 }
 .form__body--title, .form__body--name {
-  font-size: 2em;
+  font-size: larger;
   font-weight: 400;
   color: black;
 }
@@ -546,16 +557,16 @@ input {
   margin-bottom: 15px;
 }
 .gallery__media {
-  width: 200px;
-  height: 200px;
+  width: 275px;
+  height: 275px;
   border-radius: 3px;
   margin: auto;
   overflow: hidden;
   cursor: pointer;
 }
 .gallery__media img, .gallery__media video {
-  width: 200px;
-  height: 200px;
+  width: 275px;
+  height: 275px;
   object-fit: cover;
   transition: all 0.5s ease;
 }
@@ -571,8 +582,6 @@ input {
 }
 .gallery__infos {
   width: 150px;
-  display: inline-flex;
-  justify-content: space-between;
 }
 .gallery__title {
   border-radius: 3px;
@@ -584,11 +593,6 @@ input {
   outline: none;
   box-shadow: 0 0 0 2px white, 0 0 0 4px #901c1c;
 }
-.gallery__likes {
-  display: inline-flex;
-  justify-content: flex-end;
-  align-items: center;
-}
 .gallery__likes--btn {
   width: 14px;
   height: 13px;
@@ -642,9 +646,11 @@ input {
 @media only screen and (max-width: 600px) {
   .gallery__media {
     width: 100%;
+    height: 200px;
   }
   .gallery__media img, .gallery__media video {
     width: 100%;
+    height: 200px;
   }
 }
 .lightbox__modal {
@@ -676,7 +682,7 @@ input {
 }
 .lightbox__media {
   max-width: 100%;
-  max-height: 700px;
+  max-height: 650px;
   border-radius: 3px;
   margin: auto;
 }
@@ -740,9 +746,9 @@ input {
 .footer {
   position: fixed;
   display: inline-flex;
-  justify-content: space-between;
+  justify-content: space-around;
   bottom: 0;
-  width: 150px;
+  width: 200px;
   padding: 10px;
   background-color: #db8876;
   border-radius: 5px 0 0 0;
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
index beff7ab..e620a54 100644
--- a/sass/base/_typography.scss
+++ b/sass/base/_typography.scss
@@ -2,13 +2,18 @@ body {
   @include font();
 }
 
-.btn-homepage {
+.evitement {
   font-size: $xs;
+  color: $primaire-a;
+
+  &:hover {
+    color: $secondaire-a;
+  }
 }
 
 .header {
   &__tags {
-    font-size: $xs;
+    font-size: $s;
   }
 
   &__headline {
@@ -24,11 +29,11 @@ nav {
 
 .card {
   &__name {
-    font-size: $l;
+    font-size: $xxl;
     font-weight: $regular;
     color: $primaire-txt;
     border-radius: 3px;
-    line-height: 1,5em;
+    line-height: 1, 5em;
 
     &:focus {
       outline: none;
@@ -37,10 +42,10 @@ nav {
   }
 
   &__location {
-    font-size: $m;
+    font-size: $l;
     color: $secondaire-txt;
     border-radius: 3px;
-    line-height: 1,5em;
+    line-height: 1, 5em;
 
     &:focus {
       outline: none;
@@ -60,7 +65,7 @@ nav {
   }
 
   &__price {
-    font-size: $xs;
+    font-size: $s;
     font-weight: $light;
     border-radius: 3px;
     line-height: 2em;
@@ -73,10 +78,6 @@ nav {
 }
 
 .filter {
-  &__title {
-    font-size: $m;
-  }
-  
   &__title,
   &__select {
     font-weight: $bold;
@@ -90,9 +91,27 @@ nav {
 
 .gallery {
   color: $secondaire-txt;
-  font-size: $m;
 }
 
 .footer {
   font-weight: $bold;
 }
+
+@media only screen and (max-width: 600px) {
+  .card {
+    &__name {
+      font-size: $l;
+    }
+
+    &__location {
+      font-size: 0.9em;
+    }
+    &__tagline {
+      font-size: $xs;
+
+    }
+    &__price {
+      font-size: $xs;
+    }
+  }
+}
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index 9d4e8d9..d770439 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -25,34 +25,25 @@
 // bouton "passez au contenu"
 // page d'accueil
 .evitement {
-  position: fixed;
-  width: 90%;
-  margin: 5px auto;
-  text-align: center;
-  color: $primaire-a;
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
 
   &__link {
-    width: 130px;
+    position: fixed;
     padding: 3px 6px;
-    transform-origin: center center;
-
-    &:hover {
-      color: $secondaire-a;
-    }
   }
 }
 
 @media only screen and (max-width: 600px) {
   .evitement {
     display: none;
-    position: fixed;
-    top: 92%;
-    transition: all 1s ease; // ne fonctionne pas
     &__link {
-      transform-origin: center center;
+      top: 92%;
     }
   }
   .evitement.scroll {
-    display: block;
+    display: inline-flex;
+    transition: all 1s ease; // ne fonctionne pas
   }
 }
diff --git a/sass/layout/_card.scss b/sass/layout/_card.scss
index 9705e9d..d176c33 100644
--- a/sass/layout/_card.scss
+++ b/sass/layout/_card.scss
@@ -4,15 +4,15 @@
   padding: 25px 0;
 
   &__image {
-    width: 125px;
-    height: 125px;
+    width: 175px;
+    height: 175px;
     border-radius: 50%;
     margin: auto;
     overflow: hidden;
 
     & img {
-      width: 125px;
-      height: 125px;
+      width: 175px;
+      height: 175px;
       object-fit: cover;
       transition: all 0.5s ease;
 
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index 574058e..e808377 100644
--- a/sass/layout/_footer.scss
+++ b/sass/layout/_footer.scss
@@ -1,9 +1,9 @@
 .footer {
   position: fixed;
   display: inline-flex;
-  justify-content: space-between;
+  justify-content: space-around;
   bottom: 0;
-  width: 150px;
+  width: 200px;
   padding: 10px;
   background-color: $secondaire-bg;
   border-radius: 5px 0 0 0;
diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
index a68055c..d641fc7 100644
--- a/sass/layout/_gallery.scss
+++ b/sass/layout/_gallery.scss
@@ -10,8 +10,8 @@
   }
 
   &__media {
-    width: 200px;
-    height: 200px;
+    width: 275px;
+    height: 275px;
     border-radius: 3px;
     margin: auto;
     overflow: hidden;
@@ -19,8 +19,8 @@
 
     & img,
     & video {
-      width: 200px;
-      height: 200px;
+      width: 275px;
+      height: 275px;
       object-fit: cover;
       transition: all 0.5s ease;
 
@@ -41,8 +41,6 @@
 
   &__infos {
     width: 150px;
-    display: inline-flex;
-    justify-content: space-between;
   }
 
   &__title {
@@ -58,9 +56,6 @@
   }
 
   &__likes {
-    display: inline-flex;
-    justify-content: flex-end;
-    align-items: center;
 
     &--btn {
       width: 14px;
@@ -123,13 +118,14 @@
 
 @media only screen and (max-width: 600px) {
   .gallery {
-
     &__media {
       width: 100%;
+      height: 200px;
 
       & img,
       & video {
         width: 100%;
+        height: 200px;
       }
     }
   }
diff --git a/sass/layout/_lightbox.scss b/sass/layout/_lightbox.scss
index 7189df4..ca8a417 100644
--- a/sass/layout/_lightbox.scss
+++ b/sass/layout/_lightbox.scss
@@ -31,7 +31,7 @@
 
   &__media {
     max-width: 100%;
-    max-height: 700px;
+    max-height: 650px;
     border-radius: 3px;
     margin: auto;
   }
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index bb9b7eb..0ccdca4 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -1,7 +1,7 @@
 .tags {
   li a {
     text-align: center;
-    font-size: $xs;
+    font-size: $s;
     border-radius: 25px;
     border: solid 1px $secondaire-border;
     margin: 0 2px;
@@ -23,3 +23,11 @@
     box-shadow: 0 0 0 2px white, 0 0 0 4px $primaire-bg;
   }
 }
+
+@media only screen and (max-width: 600px) {
+  .tags {
+    li a {
+      font-size: $xs;
+    }
+  }
+}
diff --git a/sass/layout/_profile.scss b/sass/layout/_profile.scss
index 6f603f0..efde3b2 100644
--- a/sass/layout/_profile.scss
+++ b/sass/layout/_profile.scss
@@ -18,14 +18,14 @@
   }
 
   &__image {
-    width: 125px;
-    height: 125px;
+    width: 175px;
+    height: 175px;
     border-radius: 50%;
     overflow: hidden;
 
     & img {
-      width: 125px;
-      height: 125px;
+      width: 175px;
+      height: 175px;
       object-fit: cover;
       transition: all 0.5s ease;
 
diff --git a/sass/utils/_mixin.scss b/sass/utils/_mixin.scss
index 97e543f..25c8856 100644
--- a/sass/utils/_mixin.scss
+++ b/sass/utils/_mixin.scss
@@ -1,5 +1,5 @@
 @mixin font () {
     font-family: $type;
-    font-size: $s;
+    font-size: $m;
     font-weight: $regular;
 }
\ No newline at end of file
diff --git a/sass/utils/_variables.scss b/sass/utils/_variables.scss
index 2cf8c5d..e27efad 100644
--- a/sass/utils/_variables.scss
+++ b/sass/utils/_variables.scss
@@ -3,7 +3,9 @@ $type: Roboto, Arial, Helvetica, sans-serif;
 $xs: xx-small;
 $s: small;
 $m: medium;
-$l: 2em;
+$l: larger;
+$xl: x-large;
+$xxl: 2em;
 $light: 300;
 $regular: 400;
 $bold: 700;
@@ -18,4 +20,4 @@ $secondaire-txt: #901c1c;
 $secondaire-border: lightgray;
 $secondaire-a: black;
 $contrast-bg: #fafafa;
-$contrast-txt: #525252;
+$contrast-txt: #525252;
\ No newline at end of file