Takubeh/assets/styles/style.scss

404 lines
9.3 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* RESET */
:root {
line-height: 1.25;
font-size: 17px;
}
h1, h2, h3, h4, h5 {
line-height: 1;
}
h1, h2, h3, h4, h5, figure, p, ol, ul {
margin: 0;
}
h1 {
text-align: center;
padding: 2rem;
font-size: 2rem;
}
/* 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-orange3: #e26f31;
--color-blue1: #3ea1da;
--color-blue2: #154f8e;
--color-blue3: #002830;
--color-violet1: #713678;
--color-black: black;
--gutter: 4rem;
--header-home-height: 60vh;
--header-height: 40vh;
--bottle-width: 100px;
--bottle-height: 300px;
}
.-white { --color: var(--color-black); --bg-color: var(--color-white); a { color: var(--color-black) }}
.-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) }
.-orange3 { --color: var(--color-white); --bg-color: var(--color-orange3) }
.-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) }
.-violet1 { --color: var(--color-white); --bg-color: var(--color-violet1) }
.-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 */
.box, .container {
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;
}
.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;
&:hover img {
animation: tiltBottle 1s 1 linear;
}
@keyframes tiltBottle{
20%{
transform: rotate(2deg);
}
40%{
transform: rotate(-2deg);
}
60%{
transform: rotate(2deg);
}
80%{
transform: rotate(-2deg);
}
}
}
.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-top: 1.5rem; padding-bottom: 1.5rem; line-height: 1; }
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 :
320px480px: Mobile devices
481px768px: iPads, Tablets
769px1024px: Small screens, laptops
1025px1200px: 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-home-height: 50vh;
--header-height: 30vh;
--gutter: 1rem;
--bottle-width: 50px;
--bottle-height: 150px;
}
h2 { text-align: center }
.boxes { flex-wrap: wrap }
}
p:empty, p:-moz-only-whitespace {
display:none;
}
.simple {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
--h1-size: 4rem;
--h2-size: 2rem;
}
.chiffre {
display: flex;
list-style: none;
justify-content: space-between;
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
margin: 0;
padding: 0;
h3 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
}
li {
text-align: center;
flex: 1
}
img {
margin: 0 auto;
}
}
.right {
text-align: right;
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
}
.carte {
width: 80%;
margin: 1rem auto;
}