Takubeh/assets/styles/style.scss

404 lines
9.3 KiB
SCSS
Raw Normal View History

2024-02-02 12:39:18 +01:00
/* RESET */
:root {
line-height: 1.25;
font-size: 17px;
}
2024-02-28 23:07:49 +01:00
h1, h2, h3, h4, h5 {
line-height: 1;
}
2024-02-02 12:39:18 +01:00
h1, h2, h3, h4, h5, figure, p, ol, ul {
margin: 0;
}
2024-02-28 23:07:49 +01:00
h1 {
text-align: center;
padding: 2rem;
font-size: 2rem;
}
2024-02-02 12:39:18 +01:00
/* 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;
2024-05-13 10:41:41 +02:00
--color-orange3: #e26f31;
2024-02-02 12:39:18 +01:00
--color-blue1: #3ea1da;
--color-blue2: #154f8e;
--color-blue3: #002830;
2024-05-13 14:37:03 +02:00
--color-violet1: #713678;
2024-02-02 12:39:18 +01:00
--color-black: black;
--gutter: 4rem;
2024-02-28 23:07:49 +01:00
--header-home-height: 60vh;
--header-height: 40vh;
2024-02-02 12:39:18 +01:00
--bottle-width: 100px;
--bottle-height: 300px;
}
2024-02-28 23:07:49 +01:00
.-white { --color: var(--color-black); --bg-color: var(--color-white); a { color: var(--color-black) }}
2024-02-02 12:39:18 +01:00
.-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) }
2024-05-13 10:41:41 +02:00
.-orange3 { --color: var(--color-white); --bg-color: var(--color-orange3) }
2024-02-02 12:39:18 +01:00
.-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) }
2024-05-13 14:37:03 +02:00
.-violet1 { --color: var(--color-white); --bg-color: var(--color-violet1) }
2024-02-02 12:39:18 +01:00
.-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 */
2024-02-02 13:49:39 +01:00
.box, .container {
2024-02-02 12:39:18 +01:00
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;
2024-05-15 01:32:24 +02:00
&: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);
}
}
2024-02-02 12:39:18 +01:00
}
.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) }
2024-02-28 23:07:49 +01:00
h2 { font-size: var(--h2-size); padding-top: 1.5rem; padding-bottom: 1.5rem; line-height: 1; }
2024-02-02 12:39:18 +01:00
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;
2024-02-28 23:07:49 +01:00
--header-home-height: 50vh;
--header-height: 30vh;
2024-02-02 12:39:18 +01:00
--gutter: 1rem;
--bottle-width: 50px;
--bottle-height: 150px;
}
h2 { text-align: center }
.boxes { flex-wrap: wrap }
}
2024-02-28 23:07:49 +01:00
p:empty, p:-moz-only-whitespace {
display:none;
}
.simple {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
--h1-size: 4rem;
--h2-size: 2rem;
}
2024-05-13 10:41:41 +02:00
.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;
}