/* https://edezekiel.medium.com/css-only-responsive-navigation-menu-c36ad02751e8 */
.hidden-nav {
display: none;
}
.menu-toggle-input {
display: none;
}
.menu-toggle {
display: none;
cursor: pointer;
}
.nav-links a {
display: block;
margin-bottom: 0.5rem;
}
@media screen and (max-width: 768px) {
.logo-link {
display: none;
}
.hidden-nav {
display: flex;
align-items: center;
padding: 0.5rem;
height: 2.5rem;
}
.collapsible-nav {
padding: 0.5rem;
position: fixed;
top: 0.2rem;
left: 0;
display: flex;
align-items: flex-start;
flex-direction: column;
z-index: 3;
width: 2rem;
height: 2rem;
overflow-y: scroll;
}
.nav-links {
display: none;
margin-top: 1em;
margin-left: 1em;
}
.menu-toggle {
display: flex;
position: fixed;
left: 1rem;
top: 0.5rem;
width: 1rem;
height: 1rem;
}
.menu-toggle-input:checked {
display: block;
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 2;
& ~ .nav-links {
display: flex;
flex-direction: column;
z-index: 3;
position: relative;
}
}
.collapsible-nav:has(.menu-toggle-input:checked) {
width: 100vw;
height: 100vh;
}
}
.logo-link {
width: 8rem;
}
.nav-logo {
width: 100%;
}
.has-deeplink {
position: relative;
.deeplink {
position: absolute;
/* right: calc(100% + 0.25em); */
right: 0;
top: 0;
font-size: 1rem;
}
}
:root {
--gutter: 1rem;
--gutter-half: 0.5rem;
}
@media screen and (min-width: 1025px) {
:root {
--gutter: 2rem;
--gutter-half: 1rem;
}
}
main {
padding-top: var(--gutter);
padding-left: var(--gutter);
padding-right: var(--gutter);
margin-top: 2rem;
margin-bottom: 2rem;
}
@media screen and (min-width: 769px) {
body {
display: flex;
}
nav {
width: calc(10rem + var(--gutter-half));
padding: var(--gutter) var(--gutter-half) var(--gutter) var(--gutter);
display: block;
flex-shrink: 0;
position: relative;
}
.collapsible-nav {
position: fixed;
top: var(--gutter);
left: var(--gutter);
}
main {
flex-grow: 1;
padding-left: var(--gutter-half);
padding-right: var(--gutter-half);
padding-top: var(--gutter);
padding-bottom: var(--gutter);
margin-top: 0;
max-width: 40rem;
}
}
/* THEME */
:root {
--palette-yellow: #eddf0f;
--palette-black: #1b1919;
--palette-warm_black: #0e1011;
--palette-nyc_blue: hsl(215deg 100% 26%);
--palette-dark_blue: hsl(215deg 100% 26%);
--palette-dark_blue_darker: hsl(215deg 100% 20%);
--palette-dark_blue_lighter: hsl(215deg 100% 40%);
--palette-light_blue: hsl(215deg 100% 74%);
--palette-light_blue_darker: hsl(215deg 100% 60%);
--palette-light_blue_lighter: hsl(215deg 100% 90%);
--palette-red: #d72238;
--palette-nyc_orange: #ff6600;
--palette-warm_white: #fffefd;
--color-background: var(--palette-warm_white);
--color-links: var(--palette-dark_blue);
--color-links_visited: var(--palette-dark_blue_darker);
--color-links_hover: var(--palette-dark_blue_lighter);
--color-text: var(--palette-warm_black);
--color-primary_accent: var(--palette-nyc_orange);
--color-secondary_accent: var(--palette-light_blue);
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--palette-warm_black);
--color-links: var(--palette-light_blue);
--color-links_visited: var(--palette-light_blue_darker);
--color-links_hover: var(--palette-light_blue_lighter);
--color-text: var(--palette-warm_white);
--color-primary_accent: var(--palette-nyc_orange);
--color-secondary_accent: var(--palette-dark_blue_lighter);
}
}
body {
background-color: var(--color-background);
color: var(--color-text);
font-weight: 400;
&::before {
content: '';
background-color: white;
border-left: 33vw solid var(--palette-nyc_blue);
border-right: 33vw solid var(--palette-nyc_orange);
height: 3px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
}
main::after {
content: '';
display: block;
width: 100vw;
background: rgba(0,38,84,1);
margin-top: calc(3 * var(--gutter));
background: linear-gradient(
180deg,
rgba(255,66,0,1) 0%,
rgba(255,66,0,1) 18%,
rgba(0,38,84,0) 18%,
rgba(0,38,84,0) 20%,
rgba(255,66,0,0.8) 20%,
rgba(255,66,0,0.8) 38%,
rgba(0,38,84,0) 38%,
rgba(0,38,84,0) 40%,
rgba(255,66,0,0.6) 40%,
rgba(255,66,0,0.6) 58%,
rgba(0,38,84,0) 58%,
rgba(0,38,84,0) 60%,
rgba(255,66,0,0.4) 60%,
rgba(255,66,0,0.4) 78%,
rgba(0,38,84,0) 78%,
rgba(0,38,84,0) 80%,
rgba(255,66,0,0.2) 80%,
rgba(255,66,0,0.2) 98%,
rgba(0,38,84,0) 98%,
rgba(0,38,84,0) 100%
);
height: 10vh;
margin-left: calc(-1 * var(--gutter));
}
@media screen and (min-width: 841px) {
main::after {
content: '';
display: block;
position: fixed;
top: 0;
width: 3vw;
right: 0;
margin-top: 0;
background: rgba(0,38,84,1);
background: linear-gradient(
180deg,
rgba(255,66,0,1) 0%,
rgba(255,66,0,1) 18%,
rgba(0,38,84,0) 18%,
rgba(0,38,84,0) 20%,
rgba(255,66,0,0.8) 20%,
rgba(255,66,0,0.8) 38%,
rgba(0,38,84,0) 38%,
rgba(0,38,84,0) 40%,
rgba(255,66,0,0.6) 40%,
rgba(255,66,0,0.6) 58%,
rgba(0,38,84,0) 58%,
rgba(0,38,84,0) 60%,
rgba(255,66,0,0.4) 60%,
rgba(255,66,0,0.4) 78%,
rgba(0,38,84,0) 78%,
rgba(0,38,84,0) 80%,
rgba(255,66,0,0.2) 80%,
rgba(255,66,0,0.2) 98%,
rgba(0,38,84,0) 98%,
rgba(0,38,84,0) 100%
);
height: 100vh;
}
}
@media screen and (min-width: 1281px) {
main::after {
width: 6vw;
}
}
a[href] {
color: var(--color-links);
text-decoration-style: dotted;
&:visited {
color: var(--color-links_visited);
}
&:hover {
text-decoration-style: solid;
color: var(--color-links_hover);
}
}
hr {
border: none;
border-bottom: 1px solid var(--palette-nyc_blue);
opacity: 0.2;
}
.collapsible-nav {
background-color: var(--color-background);
color: inherit;
}
.nav-links a[href]:not(:hover) {
text-decoration: none;
}
.deeplink {
font-weight: 400;
opacity: 0.1;
}
@media (prefers-color-scheme: dark) {
hr {
border-bottom: 1px solid var(--palette-nyc_orange);
}
}
details summary {
cursor: pointer;
}
.small {
font-size: 0.8em;
}
dt {
float: left;
clear: left;
width: 12em;
&::after {
content: ':';
}
}
p {
margin-top: 0;
}
u {
&.-primary {
border-bottom-color: var(--color-primary_accent);
}
&.-secondary {
border-bottom-color: var(--color-secondary_accent);
}
}
.callout {
border: 1px solid #ccc;
border-radius: 0.25em;
padding: var(--gutter);
margin-bottom: var(--gutter);
&.-primary {
border-color: var(--color-primary_accent);
}
&.-secondary {
border-color: var(--color-secondary_accent);
}
}