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

97 lines
2.1 KiB
CSS
Raw Normal View History

2024-08-20 19:30:37 +00:00
.Header {
display: grid;
width: 100%;
overflow: hidden;
2024-08-20 19:30:37 +00:00
grid-template-rows: 150px 1fr;
box-sizing: border-box;
border: 1px solid currentColor;
gap: 8px;
2024-08-27 07:58:49 +00:00
/* font-size: 16px; */
2024-08-21 06:05:24 +00:00
background: transparent var(--tiles-last-black);
box-shadow: inset var(--inset) var(--inset) 0 var(--foreground);
2024-08-20 19:30:37 +00:00
.HeaderTop {
display: grid;
/* width: 100%; */
margin: 0.5em;
overflow: hidden;
2024-08-20 19:30:37 +00:00
height: 100%;
grid-template-columns: 150px 1fr;
box-sizing: border-box;
border: 1px solid currentColor;
font-family: var(--font-text-top);
2024-08-21 06:05:24 +00:00
background: var(--background);
box-shadow: var(--inset) var(--inset) 0 var(--foreground);
2024-08-20 19:30:37 +00:00
.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;
2024-08-20 19:30:37 +00:00
h1,
p {
margin: 0;
}
2024-08-21 06:05:24 +00:00
p {
/* letter-spacing: 0.2em; */
line-height: 0.8em;
2024-08-27 07:58:49 +00:00
font-size: 1em;
font-family: var(--font-text-header);
2024-08-21 06:05:24 +00:00
}
2024-08-20 19:30:37 +00:00
h1 {
font-weight: normal;
2024-08-27 07:58:49 +00:00
font-family: var(--font-text-top);
/* looks weird on Firefox Windows */
font-size: 2em;
2024-08-20 19:30:37 +00:00
line-height: 1em;
2024-08-27 07:58:49 +00:00
/* letter-spacing: 0.0625em; */
2024-08-20 19:30:37 +00:00
}
}
}
.HeaderLinks {
display: inline-flex;
2024-08-20 19:30:37 +00:00
align-items: center;
justify-content: safe center;
2024-08-20 19:30:37 +00:00
font-family: var(--font-text-header);
font-size: 1em;
overflow: auto;
max-width: 100%;
padding: 0.5em;
gap: 0.5em;
2024-08-20 19:30:37 +00:00
.HeaderLinksLink {
display: inline-block;
width: 100%;
min-width: max-content;
2024-08-20 19:30:37 +00:00
text-align: center;
2024-08-27 07:58:49 +00:00
padding: 0.25em;
2024-08-20 19:30:37 +00:00
border: 1px solid currentColor;
color: currentColor;
text-decoration: inherit;
2024-08-21 06:05:24 +00:00
background: var(--background);
box-shadow: var(--inset) var(--inset) 0 var(--foreground);
2024-08-20 19:30:37 +00:00
}
}
}
@media (max-width: 600px) {
.HeaderTopName h1 {
font-size: 2em !important;
}
}