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

feat: Avancement du jour

Browse Source
This commit is contained in:
Simon
2024-02-28 23:07:49 +01:00
parent b52179fd51
commit c190684600
22 changed files with 293 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/styles/footer.scss
View File

@ -1,14 +1,37 @@
.footer, .footer .content {
.footer {
min-height: inherit;
width: inherit;
.container {
align-items: center;
justify-content: space-between;
width: 100%;
margin: 1rem;
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
div a {
margin-left: .5rem;
}
}
img {
display: inline;
vertical-align: middle;
}
p {
padding: 0;
}
}
.footer p {
padding: 0;
}
@media screen and (max-width: 1024px) {
.footer .container {
flex-direction: column-reverse;
.footer a {
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
p {
margin-top: .5rem;
}
}
}

94
assets/styles/header.scss
View File

@ -2,10 +2,37 @@
height: var(--header-height);
/* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
background-image: url(/images/fond.webp);
background-repeat: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
position: relative;
a {
text-decoration: none
}
.title {
padding: calc(var(--h1-size) / 4 / 2);
background-color: var(--color-red3);
color: var(--color-white);
line-height: .5;
text-align: right;
font-size: calc(var(--h1-size) / 2);
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
margin-bottom: 2rem;
small {
color: var(--color-yellow2);
font-size: calc(var(--h1-size) / 2 / 2);
}
}
}
.home .header {
height: var(--header-home-height);
.title {
padding: calc(var(--h1-size) / 4);
@ -13,6 +40,11 @@
color: var(--color-white);
line-height: .5;
text-align: right;
font-size: var(--h1-size);
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
margin-bottom: 0;
small {
color: var(--color-yellow2);
@ -20,3 +52,63 @@
}
}
}
.menu {
position: absolute;
bottom: .6rem;
font-family: 'Tox Typewriter';
a {
margin: .6rem;
padding: .6rem;
font-size: 1rem;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
a.active {
text-decoration: underline;
}
}
@media screen and (max-width: 480px) {
.header .menu {
bottom: .3rem;
a {
margin: .3rem;
padding: .3rem;
font-size: .8rem;
}
h1 {
font-size: .8rem;
}
}
}
@media screen and (max-height: 480px) and (orientation: landscape) {
.home .header {
height: 80vh;
}
.header {
height: 40vh;
}
.header .menu {
bottom: .3rem;
a {
margin: .3rem;
padding: .3rem;
font-size: .8rem;
}
h1 {
font-size: .8rem;
}
}
}

33
assets/styles/style.scss
View File

@ -5,10 +5,20 @@
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;
@ -42,13 +52,14 @@ body {
--color-black: black;
--gutter: 4rem;
--header-height: 60vh;
--header-home-height: 60vh;
--header-height: 40vh;
--bottle-width: 100px;
--bottle-height: 300px;
}
.-white { --color: var(--color-black); --bg-color: var(--color-white) }
.-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) }
@ -212,7 +223,7 @@ h1, h2, h3, h4, h5, .scribe, blockquote {
}
h1 { font-size: var(--h1-size) }
h2 { font-size: var(--h2-size); padding-bottom: 3rem; }
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) }
@ -306,7 +317,8 @@ Les media query permettent d'adapter le design selon la largeur des appareils :
--h3-size: 1rem;
--h4-size: .75rem;
--h5-size: .5rem;
--header-height: 50vh;
--header-home-height: 50vh;
--header-height: 30vh;
--gutter: 1rem;
--bottle-width: 50px;
--bottle-height: 150px;
@ -314,3 +326,16 @@ Les media query permettent d'adapter le design selon la largeur des appareils :
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;
}