Takubeh/assets/styles/header.scss

116 lines
2.5 KiB
SCSS
Raw Normal View History

2024-02-02 13:49:39 +01:00
.header {
height: var(--header-height);
/* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
background-image: url(/images/fond.webp);
2024-02-28 23:07:49 +01:00
background-repeat: no-repeat;
2024-02-02 13:49:39 +01:00
background-size: cover;
background-position: center;
text-align: center;
2024-02-28 23:07:49 +01:00
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);
2024-02-02 13:49:39 +01:00
.title {
padding: calc(var(--h1-size) / 4);
background-color: var(--color-red3);
color: var(--color-white);
line-height: .5;
text-align: right;
2024-02-28 23:07:49 +01:00
font-size: var(--h1-size);
font-family: 'Tox Typewriter';
font-weight: normal;
font-style: normal;
margin-bottom: 0;
2024-02-02 13:49:39 +01:00
small {
color: var(--color-yellow2);
font-size: calc(var(--h1-size) / 2);
}
}
}
2024-02-28 23:07:49 +01:00
.menu {
position: absolute;
bottom: .6rem;
font-family: 'Tox Typewriter';
a {
margin: .6rem;
padding: .6rem;
font-size: 1rem;
2024-05-15 01:32:24 +02:00
box-shadow: 1px 1px var(--color-red3),-1px -1px var(--color-red3),1px -1px var(--color-red3),-1px 1px var(--color-red3);
2024-02-28 23:07:49 +01:00
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
a.active {
text-decoration: underline;
2024-05-15 01:32:24 +02:00
box-shadow: 1px 1px var(--color-yellow2),-1px -1px var(--color-yellow2),1px -1px var(--color-yellow2),-1px 1px var(--color-yellow2);
2024-02-28 23:07:49 +01:00
}
}
@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;
}
}
}