Takubeh/assets/styles/header.scss

116 lines
2.5 KiB
SCSS

.header {
height: var(--header-height);
/* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
background-image: url(/images/fond.webp);
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);
background-color: var(--color-red3);
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);
font-size: calc(var(--h1-size) / 2);
}
}
}
.menu {
position: absolute;
bottom: .6rem;
font-family: 'Tox Typewriter';
a {
margin: .6rem;
padding: .6rem;
font-size: 1rem;
box-shadow: 1px 1px var(--color-red3),-1px -1px var(--color-red3),1px -1px var(--color-red3),-1px 1px var(--color-red3);
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
a.active {
text-decoration: underline;
box-shadow: 1px 1px var(--color-yellow2),-1px -1px var(--color-yellow2),1px -1px var(--color-yellow2),-1px 1px var(--color-yellow2);
}
}
@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;
}
}
}