/*
jekyll supports sass out of the box. Use only when plain CSS do not suffice.
*/ $breakpoint-small: 640px; $breakpoint-medium: 800px; $breakpoint-large: 1024px; $breakpoint-extralarge: 1600px;
main {
/* stick footer to the footer by pushing from the block above it -- main > footer */ flex: 1;
}
header.header, footer.footer {
padding: var(--space-base) 0; font-family: var(--font-family-sans);
}
header.header {
text-align: center; margin-bottom: var(--space-base); border-bottom: var(--border-width) solid var(--border-color);
}
/* title/logo */ header.header h1 {
font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading)); font-weight: 700; margin-bottom: 0;
}
header.header h1 a, header.header h1 a:visited {
color: var(--text-color); text-decoration: none;
}
header.header h1 a:hover, header.header h1 a:active {
color: var(--text-color-alt); text-decoration: none; border-bottom: 2px solid var(--text-color);
}
header.header h2 {
padding: 0; margin: var(--space-half) 0; font-size: calc(var(--font-size) * var(--typescale-heading)); font-weight: 400;
}
header.header :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-family-sans);
}
footer.footer {
margin-top: var(--space-double); border-top: var(--border-width) solid var(--border-color); font-size: var(--font-size-small);
}
.footer__credit {
display: flex; justify-content: space-between;
}
/* nav links (header/footer) */ nav {
margin: var(--space-base) 0 0; padding: 0; font-family: var(--font-family-sans); font-size: var(--font-size-smaller); text-transform: uppercase;
}
nav a {
padding: 0; margin: 0 var(--space-half) 0 0; text-decoration: none;
}
nav a:hover, nav a:active {
text-decoration: none; border-bottom: 2px solid var(--text-color-link-hover);
}
/* larger screens */ @media (min-width: $breakpoint-large) {
blockquote, .content-medium { margin-left: calc(-1 * var(--space-double)); margin-right: calc(-1 * var(--space-double)); } .content-large, img.large, img.large + em { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: var(--image-width-max); transform: translateX(calc(50vw - 50%)); } img.medium, img.medium + em { margin-left: calc(-1 * var(--space-double)); width: calc(var(--body-width) + calc(3 * var(--space-base))); max-width: 100vw; } img.small { max-width: 50%; height: auto; } img.small.left, img.small.right { margin-top: var(--space-half); margin-bottom: var(--space-base); } img.small.left { float: left; margin-right: var(--space-base); margin-left: calc(-1 * var(--space-double)); } img.small.right { float: right; margin-left: var(--space-half); margin-right: calc(-1 * var(--space-double)); } .gallery { column-count: 3; padding: var(--space-half); }
}
/* extra-large screens */ @media (min-width: $breakpoint-extralarge) {
.gallery { column-count: 4; padding: var(--space-half); }
}
.gallery {
line-height: 0; column-gap: var(--space-half);
}
.gallery img {
width: 100% !important; height: auto !important; margin-bottom: var(--space-half);
}
.gallery a:hover img, .gallery a:active img {
opacity: var(--opacity-low);
}
/* images */ /* need fix for images with hyperlinks */ img + em, a + em.caption {
/* similar styling to figcaption */ display: block; opacity: var(--opacity-low); margin: calc(-1 * var(--space-half)) 0 0; padding: var(--space-half); font-family: var(--font-family-sans); font-size: var(--font-size-smaller); font-style: normal; text-align: center; background: var(--background-color-alt); border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); border-bottom: 1px solid var(--border-color);
}
.content-full, img.full, img.full + em {
position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; max-width: 100vw; border-radius: 0;
}
/* pages */ .home_posts {}
.home_posts__title {
margin: var(--space-double) 0 var(--space-base); color: var(--text-color-alt); font-weight: 400; font-size: calc(var(--font-size) * var(--typescale-heading));
}
.home_posts__meta {
padding: 0 var(--space-half); font-size: var(--font-size-smaller); text-transform: lowercase;
}
/*
articles/posts/pages lists list of items with a heading and lists DIV.items-list [h1/h2/h3 > ul/ol > li]
————————————— */ .items-list :is(h1, h2, h3, h4, h5, h6) {
display: inline-block; margin: var(--space-base) var(--space-double) 0; padding: var(--space-quarter) var(--space-base); color: var(--text-color-alt); background: var(--background-color-alt); border: 1px solid var(--border-color); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border-bottom: 0 none; font-size: calc(var(--font-size) * var(--typescale-heading));
}
.items-list :is(ul, ol) {
margin: 0 0 var(--space-base) 0; padding: 0; background: var(--background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius);
}
/*.items-list:is(ul, ol) li {}*/
.items-list :is(ul, ol) li {
list-style: none; padding: calc(1.5 * var(--space-quarter)) var(--space-double); border-bottom: 1px solid var(--border-color);
}
.items-list :is(ul, ol) li:first-child {
border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
}
.items-list :is(ul, ol) li:last-child {
border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); border: 0 none;
}
.items-list :is(ul, ol) li:nth-child(even) {
background: var(--background-color-alt);
}
.items-list :is(ul, ol) time {
margin: 0; padding: 0 var(--space-quarter); white-space: nowrap; font-family: var(--font-family-monospace); font-size: var(--font-size-smallest); color: var(--text-color-alt);
}
/* posts/articles ————————————— */
.post-meta, .post-nav {
display: flex; justify-content: space-between; margin: 0; padding: var(--space-half) var(--space-base); background: var(--background-color-alt); border-radius: var(--border-radius); font-family: var(--font-family-sans); font-size: var(--font-size-smallest); text-transform: uppercase; opacity: var(--opacity-low);
}
.post-nav a {
padding: var(--space-half); text-decoration: none;
}
/* responsive video embeds */ .video-wrap {
position: relative; margin-bottom: 1em; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: var(--border-radius);
} .video-wrap :is(iframe, object, embed) {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--border-radius);
}
.content-full .video-wrap, .content-full .video-wrap :is(iframe, object, embed) {
border-radius: 0;
}
/* highlighter */ figure.highlight {}
figure.highlight pre, figure.highlight code {
background: none;
}
.highlight {
border-radius: var(--border-radius);
}
.highlight * {
color: initial;
}
/* footnotes are generated by Kramdown powered Markdown */ .footnotes {
margin-top: var(--space-double); padding: var(--space-base) var(--space-half); border-top: var(--border-width) solid var(--border-color); font-size: var(--font-size-small);
}
.footnotes .reversefootnote {
text-decoration: none;
}
/* UTILITIES ————————————— */
/* clamp content to one line */ .one-liner {
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.visually-hidden {
display: block; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px); white-space: nowrap; position: absolute;
}