flash.moe/assets/makai.css/header.css
2024-09-01 21:46:10 +00:00

150 lines
2.9 KiB
CSS

.header {
width: 100%;
overflow: hidden;
transition: height .5s;
display: flex;
flex-direction: column;
color: var(--header-text-colour);
}
.header-background {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
.header-background img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.3);
filter: brightness(0.6) blur(12px);
}
.header-forehead {
height: 150px;
flex-shrink: 0;
flex-grow: 0;
}
.header-foreground {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color: #0005;
flex-shrink: 0;
flex-grow: 0;
text-shadow: 0 0 1px #000;
}
.header-main {
width: 100%;
max-width: calc(var(--site-max-width, 100%) + var(--global-spacing-1-5x));
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--global-spacing-1-5x);
}
.header-logo {
font-family: var(--font-header);
color: transparent;
text-decoration: none;
display: flex;
flex-grow: 0;
flex-shrink: 0;
font-size: 2em;
line-height: 1.5em;
flex-shrink: 0;
flex-grow: 0;
margin: var(--global-spacing-0-5x);
}
.header-flash {
color: var(--logo-part1-colour);
white-space: pre;
}
.header-wave {
color: var(--logo-part2-colour);
white-space: pre;
}
.header-nav {
display: flex;
flex-wrap: wrap;
flex-shrink: 1;
flex-grow: 0;
justify-content: flex-end;
gap: var(--global-spacing);
max-width: 700px;
}
.header-nav a {
display: block;
color: inherit;
text-decoration: none;
font-size: 1.2em;
line-height: 1.4em;
padding: var(--global-spacing-2x);
transition: background-color .1s;
}
.header-nav a:hover,
.header-nav a:focus {
background-color: #fff1;
}
.header-nav a:active {
background-color: #0005;
}
.header-sub {
width: 100%;
background-color: #0005;
display: flex;
justify-content: center;
padding: 0 var(--global-spacing-1-5x);
}
.header-breadcrumbs {
width: 100%;
max-width: var(--site-max-width, 100%);
display: flex;
align-items: center;
font-size: .9em;
line-height: 1.5em;
}
.header-breadcrumbs-sep {
padding: 0 var(--global-spacing);
}
.header-breadcrumbs-link {
display: block;
color: inherit;
text-decoration: none;
padding: 0 var(--global-spacing);
transition: background-color .1s;
}
.header-breadcrumbs-link:hover,
.header-breadcrumbs-link:focus {
background-color: #fff1;
}
.header-breadcrumbs-link:active {
background-color: #0005;
}
@media (max-width: 900px) {
.header-forehead {
display: none;
}
.header-main {
flex-direction: column;
}
.header-nav {
justify-content: center;
max-width: initial;
}
}