354 lines
8.6 KiB
SCSS
354 lines
8.6 KiB
SCSS
/* RESET */
|
||
|
||
:root {
|
||
line-height: 1.25;
|
||
font-size: 17px;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, figure, p, ol, ul {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ol, ul {
|
||
list-style: none;
|
||
padding-inline: 0;
|
||
} */
|
||
|
||
img {
|
||
display: block;
|
||
max-inline-size: 100%;
|
||
}
|
||
|
||
/* COLOR */
|
||
|
||
body {
|
||
--color-white: white;
|
||
--color-green1: #739761;
|
||
--color-green2: #3a7f44;
|
||
--color-green3: #336f5f;
|
||
--color-green4: #3f6463;
|
||
--color-green5: #92c83e;
|
||
--color-red1: #d43e45;
|
||
--color-red2: #69282f;
|
||
--color-red3: #f36561;
|
||
--color-yellow1: #d39734;
|
||
--color-yellow2: #fac247;
|
||
--color-yellow3: #dac161;
|
||
--color-orange1: #d88250;
|
||
--color-orange2: #bb5c46;
|
||
--color-blue1: #3ea1da;
|
||
--color-blue2: #154f8e;
|
||
--color-blue3: #002830;
|
||
--color-black: black;
|
||
|
||
--gutter: 4rem;
|
||
--header-height: 90vh;
|
||
|
||
--bottle-width: 100px;
|
||
--bottle-height: 300px;
|
||
}
|
||
|
||
.-white { --color: var(--color-black); --bg-color: var(--color-white) }
|
||
.-green1 { --color: var(--color-white); --bg-color: var(--color-green1) }
|
||
.-green2 { --color: var(--color-white); --bg-color: var(--color-green2) }
|
||
.-green3 { --color: var(--color-white); --bg-color: var(--color-green3) }
|
||
.-green4 { --color: var(--color-white); --bg-color: var(--color-green4) }
|
||
.-green5 { --color: var(--color-white); --bg-color: var(--color-green5) }
|
||
.-red1 { --color: var(--color-white); --bg-color: var(--color-red1) }
|
||
.-red2 { --color: var(--color-white); --bg-color: var(--color-red2) }
|
||
.-red3 { --color: var(--color-white); --bg-color: var(--color-red3) }
|
||
.-yellow1 { --color: var(--color-white); --bg-color: var(--color-yellow1) }
|
||
.-yellow2 { --color: var(--color-white); --bg-color: var(--color-yellow2) }
|
||
.-yellow3 { --color: var(--color-white); --bg-color: var(--color-yellow3) }
|
||
.-orange1 { --color: var(--color-white); --bg-color: var(--color-orange1) }
|
||
.-orange2 { --color: var(--color-white); --bg-color: var(--color-orange2) }
|
||
.-blue1 { --color: var(--color-white); --bg-color: var(--color-blue1) }
|
||
.-blue2 { --color: var(--color-white); --bg-color: var(--color-blue2) }
|
||
.-blue3 { --color: var(--color-white); --bg-color: var(--color-blue3) }
|
||
.-black { --color: var(--color-white); --bg-color: var(--color-black) }
|
||
|
||
|
||
.color {
|
||
background-color: var(--bg-color);
|
||
color: var(--color);
|
||
}
|
||
|
||
/* FONTS */
|
||
|
||
@font-face {
|
||
font-family: 'Tox Typewriter';
|
||
src: url('../fonts/ToxTypewriter.woff2') format('woff2'),
|
||
url('../fonts/ToxTypewriter.woff') format('woff');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* DESIGN */
|
||
|
||
.header {
|
||
height: var(--header-height);
|
||
/* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
|
||
background-image: url(../images/fond.webp);
|
||
background-repeat: none;
|
||
background-size: cover;
|
||
background-position: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
padding: calc(var(--h1-size) / 4);
|
||
background-color: var(--color-red3);
|
||
color: var(--color-white);
|
||
line-height: .5;
|
||
text-align: right;
|
||
}
|
||
.header h1 small {
|
||
color: var(--color-yellow2);
|
||
font-size: calc(var(--h1-size) / 2);
|
||
}
|
||
|
||
.container, header, footer {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
align-items: stretch;
|
||
}
|
||
|
||
.-c2 > div {
|
||
width: 50%;
|
||
}
|
||
|
||
.-c2 > div.picture {
|
||
width: 45%;
|
||
}
|
||
|
||
.-c2 > div.content {
|
||
width: 55%;
|
||
}
|
||
|
||
.content {
|
||
padding: var(--gutter);
|
||
width: 100%;
|
||
}
|
||
|
||
.boxes {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--gutter);
|
||
}
|
||
|
||
.tag {
|
||
text-align: center;
|
||
margin: 0 auto 2rem;
|
||
width: fit-content;
|
||
}
|
||
.tag h3 {
|
||
padding: 0.5rem 1.5rem;
|
||
width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.picture {
|
||
position: relative;
|
||
padding: 3rem;
|
||
color: var(--color-white);
|
||
}
|
||
|
||
.picture img {
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.footer, .footer .content {
|
||
min-height: inherit;
|
||
width: inherit;
|
||
}
|
||
|
||
.footer p {
|
||
padding: 0;
|
||
}
|
||
|
||
.footer a {
|
||
font-family: 'Tox Typewriter';
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
.gamme h2 { text-align: center }
|
||
.gamme .boxes { flex-wrap: wrap; gap: calc(var(--gutter) * 2) var(--gutter); max-width: 1400px; margin: 0 auto; }
|
||
.gamme .box {
|
||
width: calc(33% - var(--gutter) + 1rem);
|
||
display: flex;
|
||
align-items: center;
|
||
max-width: 500px;
|
||
}
|
||
.gamme img {
|
||
width: var(--bottle-width);
|
||
height: var(--bottle-height);
|
||
display: inline-block;
|
||
}
|
||
.gamme .detail {
|
||
--detail-gutter: 1rem;
|
||
width: calc(100% - (var(--bottle-width) + var(--detail-gutter)));
|
||
display: inline-block;
|
||
margin-left: var(--detail-gutter);
|
||
}
|
||
.gamme .title {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.gamme .title h3, .gamme .title h4, .gamme .detail p { display: inline; margin: 0; margin: 0 }
|
||
.gamme h3 {
|
||
padding: .1rem .5rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
.gamme h4 {
|
||
font-size: .8rem;
|
||
}
|
||
|
||
.ombre {
|
||
text-shadow: 2px 2px 4px #444,-2px -2px 4px #444,-2px 2px 4px #444,2px -2px 4px #444;
|
||
}
|
||
|
||
/* GENERAL */
|
||
|
||
body {
|
||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||
font-weight: 300;
|
||
--h1-size: 8rem;
|
||
--h2-size: 4rem;
|
||
--h3-size: 2rem;
|
||
--h4-size: 1.5rem;
|
||
--h5-size: 1.1rem;
|
||
}
|
||
|
||
a { color: var(--color-white); }
|
||
|
||
h1, h2, h3, h4, h5, .scribe, blockquote {
|
||
font-family: 'Tox Typewriter';
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
h1 { font-size: var(--h1-size) }
|
||
h2 { font-size: var(--h2-size); padding-bottom: 3rem; }
|
||
h3 { font-size: var(--h3-size) }
|
||
h4 { font-size: var(--h4-size) }
|
||
h5 { font-size: var(--h5-size) }
|
||
|
||
p, ul { padding-bottom: 1.5rem; }
|
||
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
blockquote {
|
||
text-align: right;
|
||
font-size: 1.2rem;
|
||
border-right: 3px solid white;
|
||
padding-right: 1rem;
|
||
margin: 1rem 1rem 1rem 0;
|
||
}
|
||
|
||
.center { text-align: center }
|
||
.flower { list-style: none; padding: 0 }
|
||
.flower li {
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.5,12A3.5,3.5 0 0,0 22,8.5A6.5,6.5 0 0,0 15.5,2A3.5,3.5 0 0,0 12,5.5A3.5,3.5 0 0,0 8.5,2A6.5,6.5 0 0,0 2,8.5A3.5,3.5 0 0,0 5.5,12A3.5,3.5 0 0,0 2,15.5A6.5,6.5 0 0,0 8.5,22A3.5,3.5 0 0,0 12,18.5A3.5,3.5 0 0,0 15.5,22A6.5,6.5 0 0,0 22,15.5A3.5,3.5 0 0,0 18.5,12M12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16M14.5,12A2.5,2.5 0 0,1 12,14.5A2.5,2.5 0 0,1 9.5,12A2.5,2.5 0 0,1 12,9.5A2.5,2.5 0 0,1 14.5,12Z'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E") no-repeat left top;
|
||
background-size: 1rem;
|
||
padding: 0 0 .5rem 1.5rem;
|
||
}
|
||
|
||
/* MOBILE
|
||
|
||
Les media query permettent d'adapter le design selon la largeur des appareils :
|
||
320px — 480px: Mobile devices
|
||
481px — 768px: iPads, Tablets
|
||
769px — 1024px: Small screens, laptops
|
||
1025px — 1200px: Desktops, large screens
|
||
1201px and more — Extra large screens, TV
|
||
*/
|
||
@media screen and (max-width: 1200px) {
|
||
body {
|
||
/* background-color: yellow; */
|
||
--h1-size: 7rem;
|
||
--h2-size: 3.5rem;
|
||
--h3-size: 1.75rem;
|
||
--h4-size: 1.5rem;
|
||
--h5-size: 1.1rem;
|
||
--gutter: 3rem;
|
||
}
|
||
}
|
||
@media screen and (max-width: 1024px) {
|
||
body {
|
||
/* background-color: green; */
|
||
--h1-size: 6rem;
|
||
--h2-size: 3rem;
|
||
--h3-size: 1.5rem;
|
||
--h4-size: .75rem;
|
||
--h5-size: .5rem;
|
||
--gutter: 2rem;
|
||
}
|
||
.gamme .box {
|
||
width: calc(50% - var(--gutter) / 2);
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
body {
|
||
/* background-color: red; */
|
||
--h1-size: 5rem;
|
||
--h2-size: 2.5rem;
|
||
--h3-size: 1.75rem;
|
||
--h4-size: 1.5rem;
|
||
--h5-size: 1.1rem;
|
||
--gutter: 1.5rem;
|
||
|
||
|
||
--bottle-width: 75px;
|
||
--bottle-height: 225px;
|
||
}
|
||
.gamme .box {
|
||
width: 100%;
|
||
}
|
||
.container { flex-wrap: wrap ;}
|
||
.container .picture { min-height: 80vh; }
|
||
.container .picture { order: 2 }
|
||
.container .content { order: 1 }
|
||
.-c2 > div, .-c2 > div.picture, .-c2 > div.content {
|
||
width: 100%;
|
||
}
|
||
}
|
||
@media screen and (max-width: 480px) {
|
||
body {
|
||
/* background-color: blue; */
|
||
--h1-size: 4rem;
|
||
--h2-size: 2rem;
|
||
--h3-size: 1rem;
|
||
--h4-size: .75rem;
|
||
--h5-size: .5rem;
|
||
--header-height: 50vh;
|
||
--gutter: 1rem;
|
||
--bottle-width: 50px;
|
||
--bottle-height: 150px;
|
||
}
|
||
h2 { text-align: center }
|
||
.boxes { flex-wrap: wrap }
|
||
}
|