abtmtr-v13/assets/components/header/style.css

96 lines
2.1 KiB
CSS

.Header {
display: grid;
width: 100%;
overflow: hidden;
grid-template-rows: 150px 1fr;
box-sizing: border-box;
border: 1px solid currentColor;
gap: 8px;
/* font-size: 16px; */
background: transparent var(--tiles-last-black);
box-shadow: inset var(--inset) var(--inset) 0 var(--foreground);
.HeaderTop {
display: grid;
/* width: 100%; */
margin: 0.5em;
overflow: hidden;
height: 100%;
grid-template-columns: 150px 1fr;
box-sizing: border-box;
border: 1px solid currentColor;
font-family: var(--font-text-top);
background: var(--background);
box-shadow: var(--inset) var(--inset) 0 var(--foreground);
.HeaderTopImage {
width: 100%;
height: 100%;
object-fit: contain;
box-sizing: border-box;
}
.HeaderTopName {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: clip;
h1,
p {
margin: 0;
}
p {
/* letter-spacing: 0.2em; */
line-height: 0.8em;
font-size: 1em;
font-family: var(--font-text-header);
}
h1 {
font-weight: normal;
font-family: var(--font-text-top);
/* looks weird on Firefox Windows */
font-size: 2em;
line-height: 1em;
/* letter-spacing: 0.0625em; */
}
}
}
.HeaderLinks {
display: inline-flex;
align-items: center;
justify-content: safe center;
font-family: var(--font-text-header);
font-size: 1em;
overflow: auto;
max-width: 100%;
padding: 0.5em;
gap: 0.5em;
.HeaderLinksLink {
display: inline-block;
width: 100%;
min-width: max-content;
text-align: center;
padding: 0.25em;
border: 1px solid currentColor;
color: currentColor;
text-decoration: inherit;
background: var(--background);
box-shadow: var(--inset) var(--inset) 0 var(--foreground);
}
}
}
@media (max-width: 600px) {
.HeaderTopName h1 {
font-size: 2em !important;
}
}