blog/sass/parts/_header.scss

139 lines
1.8 KiB
SCSS
Raw Normal View History

2023-01-18 23:44:40 +00:00
.hias-footer {
text-align: center;
font-size: 0.4rem;
}
2022-11-12 01:07:47 +00:00
.page-header {
font-size: 3em;
line-height: 100%;
font-family: var(--header-font);
margin: 4rem 0px 1rem 0px;
}
.centered-header {
font-family: var(--header-font);
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 4em;
}
header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 1em 0;
}
header .main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2023-01-18 23:44:40 +00:00
justify-content: flex-end;
2022-11-12 01:07:47 +00:00
align-items: flex-start;
gap: 12px;
2023-01-18 23:44:40 +00:00
font-size: 1.2rem;
2022-11-12 01:07:47 +00:00
/* Otherwise header and menu is too close on small screens*/
margin-bottom: 10px;
}
2023-01-18 23:44:40 +00:00
header .config-title {
line-height: 1.3;
}
.nav-header {
/* flex-child */
flex-grow: 0;
/* flex-container */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-even;
gap: 4px;
}
2022-11-12 01:07:47 +00:00
.socials {
/* flex-child */
flex-grow: 0;
/* flex-container */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
gap: 6px;
}
.social {
border-bottom: unset;
background-image: unset;
padding: 2px;
}
.social>img {
border: unset;
width: 24px;
height: 24px;
}
.meta {
color: #999;
letter-spacing: -0.5px;
}
h1 { font-size: 1.5rem }
h2 { font-size: 1.2rem }
/*
2022-11-12 01:07:47 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.2rem;
2022-11-12 01:07:47 +00:00
margin-top: 2em;
}
*/
2022-11-12 01:07:47 +00:00
h1::before {
color: var(--primary-color);
}
h2::before {
color: var(--primary-color);
}
h3::before {
color: var(--primary-color);
}
h4::before {
color: var(--primary-color);
}
h5::before {
color: var(--primary-color);
}
h6::before {
color: var(--primary-color);
}
@media (prefers-color-scheme: dark) {
.social>img {
filter: invert(1);
}
}