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