Weko/Takubeh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initialisation du site

Browse Source
This commit is contained in:
Simon
2024-02-02 12:39:18 +01:00
commit fc5c2f4972
73 changed files with 1305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/main.scss Normal file
View File

@ -0,0 +1,2 @@
@import "reset.scss";
@import "style.scss";

274
assets/styles/reset.scss Normal file
View File

@ -0,0 +1,274 @@
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
html {
/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
font-family:
system-ui,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
line-height: 1.15; /* 1. Correct the line height in all browsers. */
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
tab-size: 4; /* 3 */
}
/*
Sections
========
*/
body {
margin: 0; /* Remove the margin in all browsers. */
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}

353
assets/styles/style.scss Normal file
View File

@ -0,0 +1,353 @@
/* 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 }
}