|
|
|
@ -2,8 +2,8 @@
|
|
|
|
|
--header-bg-color: #1b1c1d;
|
|
|
|
|
--header-fg-color: #a3bd8d;
|
|
|
|
|
--header-height: 192px;
|
|
|
|
|
--header-multiplier: .25;
|
|
|
|
|
--header-height-small: calc(var(--header-height)*var(--header-multiplier));
|
|
|
|
|
--header-height-small: calc(var(--header-height) * .25);
|
|
|
|
|
--header-height-multiplier: .25;
|
|
|
|
|
--page-bg-color: #232425;
|
|
|
|
|
--page-fg-color: #7e9fbe;
|
|
|
|
|
--menu-bg-color: #000;
|
|
|
|
@ -74,7 +74,7 @@ body>header {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body>header.small {
|
|
|
|
|
transform: scale(var(--header-multiplier));
|
|
|
|
|
transform: scale(var(--header-height-multiplier));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body>header>svg {
|
|
|
|
@ -95,13 +95,23 @@ a {
|
|
|
|
|
color: var(--page-fg-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: .5em .5em .5em 1em;
|
|
|
|
|
background-color: rgba(128, 128, 128, .1);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#intro {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: column nowrap;
|
|
|
|
|
height: calc(100vh - var(--header-height));
|
|
|
|
|
min-height: calc(100vh - var(--header-height));
|
|
|
|
|
margin: 2rem 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#content {
|
|
|
|
|
padding-top: 2rem;
|
|
|
|
|
}
|
|
|
|
|
#content>h1,
|
|
|
|
|
main.posts > header > h1 {
|
|
|
|
|
margin: 0 0 .25em;
|
|
|
|
@ -114,21 +124,16 @@ main.posts > header > h1 {
|
|
|
|
|
padding-top: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu {
|
|
|
|
|
#cta {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: .5em .5em .5em 1em;
|
|
|
|
|
background-color: rgba(128, 128, 128, .1);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu>a {
|
|
|
|
|
#cta>a {
|
|
|
|
|
width: 450px;
|
|
|
|
|
padding: 2rem .5rem 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: column nowrap;
|
|
|
|
@ -144,18 +149,18 @@ blockquote {
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu>a:hover {
|
|
|
|
|
#cta>a:hover {
|
|
|
|
|
background-color: rgba(128, 128, 128, .2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu>a>svg {
|
|
|
|
|
#cta>a>svg {
|
|
|
|
|
display: block;
|
|
|
|
|
max-width: 200px;
|
|
|
|
|
opacity: .3;
|
|
|
|
|
transition: opacity .3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#menu>a:hover>svg {
|
|
|
|
|
#cta>a:hover>svg {
|
|
|
|
|
opacity: .8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -215,3 +220,13 @@ blockquote {
|
|
|
|
|
opacity: 1.0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
|
|
:root {
|
|
|
|
|
--header-height: calc(100vw * 0.17);
|
|
|
|
|
--header-height-small: 48px;
|
|
|
|
|
}
|
|
|
|
|
#cta>a {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|