Merge branch 'massive-relayout'
This commit is contained in:
commit
4a4a941e5d
56 changed files with 1481 additions and 1054 deletions
|
|
@ -1,4 +1,4 @@
|
|||
-- Eryn Wells <eryn@erynwells.me>
|
||||
|
||||
vim.bo.shiftwidth = 4
|
||||
vim.bo.softtabstop = 4
|
||||
vim.bo.shiftwidth = 2
|
||||
vim.bo.softtabstop = 2
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
:root {
|
||||
--post-item-highlight-color: #efefef;
|
||||
|
||||
--blog-list-grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content max-content;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--post-item-highlight-color: #121212;
|
||||
}
|
||||
}
|
||||
|
||||
.blog > .highlight { margin-block-end: var(--body-item-spacing); }
|
||||
|
||||
.post-nav {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.post-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-single footer {
|
||||
margin-block-start: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.blog.list > ul {
|
||||
list-style: none;
|
||||
}
|
||||
.blog.list > ul > li {
|
||||
align-items: baseline;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: var(--blog-list-grid-template-columns);
|
||||
margin-block-end: 0.25rem;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
.blog.list > ul > li:hover {
|
||||
background-color: var(--post-item-highlight-color);
|
||||
}
|
||||
.blog.list > ul > li > a { color: inherit; }
|
||||
.blog.list > ul > li > a:hover { text-decoration: none; }
|
||||
.blog.list > ul > li > time:nth-child(2) { text-align: end; }
|
||||
.blog.list > ul > li > .draft { align-self: center; }
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.blog.list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: var(--blog-list-grid-template-columns);
|
||||
}
|
||||
.blog.list > ul {
|
||||
display: grid;
|
||||
row-gap: 0.25rem;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
list-style: none;
|
||||
}
|
||||
.blog.list > ul > li {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.blog.list > h5 {
|
||||
grid-column: 1 / -1;
|
||||
margin-block: 1rem 0;
|
||||
}
|
||||
.blog.list > h5:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog.list > ul > li > :first-child {
|
||||
text-align: end;
|
||||
}
|
||||
9
assets/styles/blog/002_grid.css
Normal file
9
assets/styles/blog/002_grid.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
article > :is(h1, h2, h3, h4, h5, h6) {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.blog.list {
|
||||
gap: 4rem 0;
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
details:has(.photo-params.debug) {
|
||||
margin-inline: var(--body-item-spacing);
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -77,8 +75,13 @@ details:has(.photo-params.debug) {
|
|||
background-color: var(--separator-color);
|
||||
}
|
||||
|
||||
.photos-params.debug {
|
||||
width: calc(100% - var(--body-item-spacing));
|
||||
table.photo-params.debug {
|
||||
--inline-start-padding: 2rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - var(--inline-start-padding));
|
||||
margin-block-start: 1rem;
|
||||
margin-inline-start: var(--inline-start-padding);
|
||||
}
|
||||
|
||||
.photo-params.debug > thead {
|
||||
|
|
|
|||
207
assets/styles/home.css
Normal file
207
assets/styles/home.css
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
@layer page {
|
||||
:root {
|
||||
--animation-offset: 6px;
|
||||
--font-size-max: 12px;
|
||||
--line-height: 1.85;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
font-size: 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.site h1 { white-space: normal; }
|
||||
|
||||
@media (max-width: 599px) {
|
||||
html {
|
||||
--font-size-scale-factor: 1.33vmax;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
line-height: var(--landing-line-height);
|
||||
margin-block-start: 10vh;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
main header {
|
||||
align-items: first baseline;
|
||||
display: grid;
|
||||
gap: 0 2rem;
|
||||
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
grid-template-areas:
|
||||
"title blurb"
|
||||
"title nav";
|
||||
padding-inline: 1em;
|
||||
margin-inline: 2rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
main header {
|
||||
gap: 1rem 0;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"blurb"
|
||||
"nav";
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main h1 {
|
||||
letter-spacing: 0.025em;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
main h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
align-items: baseline;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
font-size: 90%;
|
||||
list-style: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
nav > li::before {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#content {
|
||||
grid-area: blurb
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: nav
|
||||
}
|
||||
|
||||
h1,
|
||||
#content>p,
|
||||
nav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
animation: left-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
animation: top-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
#content>p,
|
||||
nav {
|
||||
animation: right-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
#content>p,
|
||||
nav {
|
||||
animation: bottom-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.platter {
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
:root {
|
||||
--highlight-background-color: rgb(var(--super-lt-gray));
|
||||
--highlight-background-color: rgb(250, 250, 250);
|
||||
--highlight-foreground-color: var(--foreground-body-color);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
}
|
||||
}
|
||||
|
||||
.chroma {
|
||||
line-height: var(--line-height);
|
||||
|
|
@ -28,7 +24,17 @@
|
|||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
color: #7f7f7f;
|
||||
background-color: var(--background-color);
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
}
|
||||
.chroma .ln a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
/* Keyword */ .chroma .k { color: #00a8c8 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
:root {
|
||||
--logentry-background-color: var(--tag-background-color);
|
||||
--logentry-foreground-color: var(--tag-text-color);
|
||||
}
|
||||
--logentry-background-color: var(--tag-background-color);
|
||||
--logentry-foreground-color: var(--tag-text-color);
|
||||
|
||||
:root {
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{{ $gridSize := site.Params.photos.gridSize }}
|
||||
:root {
|
||||
--date-item-background-color: rgb(var(--lt-gray));
|
||||
|
||||
|
|
@ -26,16 +27,13 @@
|
|||
|
||||
.photos.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.photos.list > * {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.photos.page > nav {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.photos.list > a {
|
||||
|
|
@ -44,13 +42,11 @@
|
|||
}
|
||||
|
||||
.photos.list > a > img {
|
||||
border-radius: 3px;
|
||||
image-orientation: from-image;
|
||||
}
|
||||
|
||||
.photos.list > div {
|
||||
background-color: var(--date-item-background-color);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -89,73 +85,3 @@
|
|||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.photo-params {
|
||||
padding-inline: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
.photo-params > .container {
|
||||
display: block;
|
||||
background-color: var(--photo-params-container-background-color);
|
||||
border-radius: 10px;
|
||||
margin: var(--body-item-spacing) auto;
|
||||
padding: calc(var(--body-item-spacing) / 2);
|
||||
max-width: calc(0.66 * var(--content-width));
|
||||
}
|
||||
|
||||
.photo-params > .container > table {
|
||||
background-color: var(--photo-params-background-color);
|
||||
color: var(--photo-params-color);
|
||||
border-collapse: collapse;
|
||||
border-radius: 6px;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photo-params thead td {
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params tbody tr > td {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td {
|
||||
border: none;
|
||||
border-top: 1px solid var(--photo-params-border-color);
|
||||
border-left: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.photo-params td {
|
||||
font-size: 75%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.photo-params td:last-child {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.photo-params td:first-child {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.photo-params .make-model {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params .size {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.photo-params .location {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
34
assets/styles/photos/050_page.css
Normal file
34
assets/styles/photos/050_page.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@layer section {
|
||||
.photos.page {
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
|
||||
.photos.page > article > :not(:last-child) {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.photos.page > article > h1 {
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
.photos.page > nav {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.photos.page > :not(figure) {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.photos.page > figure {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
figure, img {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.photos.page :is(figure, figure > img) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
68
assets/styles/photos/050_params.css
Normal file
68
assets/styles/photos/050_params.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.photo-params {
|
||||
padding-inline: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
.photo-params > .container {
|
||||
display: block;
|
||||
background-color: var(--photo-params-container-background-color);
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
padding: calc(var(--body-item-spacing) / 2);
|
||||
max-width: calc(0.66 * var(--content-width));
|
||||
}
|
||||
|
||||
.photo-params > .container > table {
|
||||
background-color: var(--photo-params-background-color);
|
||||
color: var(--photo-params-color);
|
||||
border-collapse: collapse;
|
||||
border-radius: 6px;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photo-params thead td {
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params tbody tr > td {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td {
|
||||
border: none;
|
||||
border-top: 1px solid var(--photo-params-border-color);
|
||||
border-left: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.photo-params td {
|
||||
font-size: 75%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.photo-params td:last-child {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.photo-params td:first-child {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.photo-params .make-model {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params .size {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.photo-params .location {
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
@layer reset, typography, root, layout, template, page, utility;
|
||||
|
||||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--sub-dk-gray: 16, 16, 16;
|
||||
--dk-gray: 32, 32, 32;
|
||||
--super-dk-gray: 80, 80, 80;
|
||||
--mid-gray: 128, 128, 128;
|
||||
--sub-lt-gray: 175, 175, 175;
|
||||
--lt-gray: 223, 223, 223;
|
||||
--super-lt-gray: 240, 240, 240;
|
||||
--white: 255, 255, 255;
|
||||
|
||||
--lt-blue: 69, 212, 243;
|
||||
--mid-blue: 26, 169, 239;
|
||||
--dk-blue: 63, 46, 231;
|
||||
--purple: 161, 49, 232;
|
||||
--lilac: 187, 121, 245;
|
||||
|
||||
--background: var(--white);
|
||||
|
||||
--separator-color: rgb(var(--lt-gray));
|
||||
--header-border-color: var(--separator-color);
|
||||
--footer-border-color: var(--separator-color);
|
||||
|
||||
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
|
||||
--body-item-spacing: 4rem;
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
|
||||
--header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--nav-bulleted-spacing: 0.75rem;
|
||||
|
||||
--platter-background-color: rgba(var(--white), var(--platter-background-opacity));
|
||||
--platter-background-opacity: 0.6;
|
||||
--platter-backdrop-filter: blur(10px);
|
||||
|
||||
--content-width: 80rem;
|
||||
|
||||
--tag-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-background-color: rgb(var(--super-lt-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--sub-lt-gray));
|
||||
|
||||
--transition-duration: 0.7s;
|
||||
|
||||
--menu-icon-size: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: var(--black);
|
||||
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
|
||||
--platter-backdrop-filter: brightness(0.66) blur(10px);
|
||||
|
||||
--tag-foreground-color: rgb(var(--sub-lt-gray));
|
||||
--tag-background-color: rgb(var(--dk-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-foreground-color: rgb(var(--mid-gray));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@layer root {
|
||||
a { text-decoration: none; }
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.12em;
|
||||
}
|
||||
a.hover-only {
|
||||
color: var(--color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
a.hover-only:hover {
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 4px solid var(--separator-color);
|
||||
padding-inline-start: 2rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--body-code-background-color);
|
||||
border-radius: 0.25rem;
|
||||
display: inline-block;
|
||||
padding-inline: 0.6rem;
|
||||
}
|
||||
code.nobg {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details { width: 100%; }
|
||||
|
||||
details:has(#TableOfContents) {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--separator-color);
|
||||
padding: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--separator-color);
|
||||
padding: var(--body-item-spacing);
|
||||
padding-top: calc(var(--body-item-spacing) / 10);
|
||||
}
|
||||
|
||||
html { background-color: var(--html-background-color); }
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.circular {
|
||||
shape-outside: circle(50%);
|
||||
-webkit-clip-path: circle(50%);
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
max-width: calc(var(--content-width) + 2 * var(--body-item-spacing));
|
||||
margin: var(--body-item-spacing) auto;
|
||||
padding-inline: var(--body-item-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
content: "";
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
content: "•";
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
opacity: 80%;
|
||||
margin-inline: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
ul > li,
|
||||
ol > li,
|
||||
dl > dt,
|
||||
ul > li > ul,
|
||||
ul > li > ol,
|
||||
ol > li > ul,
|
||||
ol > li > ol {
|
||||
margin-inline-start: calc(var(--body-item-spacing) + 2px);
|
||||
}
|
||||
|
||||
header > span.series {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: 1px;
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
header > span.series::before {
|
||||
color: var(--header-series-arrow-foreground-color);
|
||||
content: "↳";
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@supports (display: subgrid) {
|
||||
.post-list {
|
||||
align-items: baseline;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns:
|
||||
minmax(150px, max-content) minmax(20px, max-content) 3px auto;
|
||||
grid-template-areas: "month day line title";
|
||||
}
|
||||
}
|
||||
|
||||
.post-list li {
|
||||
align-items: baseline;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 4rem;
|
||||
}
|
||||
|
||||
.post-title h1 {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8em;
|
||||
margin-block: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-title > .post-date {
|
||||
color: var(--light-dim);
|
||||
display: inline-block;
|
||||
font-size: 1.75rem;
|
||||
inline-size: min-content;
|
||||
letter-spacing: 1px;
|
||||
margin-block-start: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid var(--separator-color);
|
||||
border-collapse: collapse;
|
||||
margin-inline: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid var(--separator-color);
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
1
assets/styles/root/000_layers.css
Normal file
1
assets/styles/root/000_layers.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@layer reset, typography, root, layout, section, page, utility;
|
||||
224
assets/styles/root/002_colors.css
Normal file
224
assets/styles/root/002_colors.css
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--sub-dk-gray: 16, 16, 16;
|
||||
--dk-gray: 32, 32, 32;
|
||||
--super-dk-gray: 80, 80, 80;
|
||||
--mid-gray: 128, 128, 128;
|
||||
--sub-lt-gray: 175, 175, 175;
|
||||
--lt-gray: 223, 223, 223;
|
||||
--super-lt-gray: 240, 240, 240;
|
||||
--white: 255, 255, 255;
|
||||
|
||||
--lt-blue: 69, 212, 243;
|
||||
--mid-blue: 26, 169, 239;
|
||||
--dk-blue: 63, 46, 231;
|
||||
--purple: 161, 49, 232;
|
||||
--lilac: 187, 121, 245;
|
||||
|
||||
--background: var(--white);
|
||||
--color: rgba(var(--black), 0.8);
|
||||
|
||||
--a-color: rgb(var(--mid-blue));
|
||||
--a-underline-color: rgb(var(--sub-lt-gray));
|
||||
--a-ruby-color: var(--color);
|
||||
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||
|
||||
--separator-color: rgb(var(--lt-gray));
|
||||
--header-border-color: var(--separator-color);
|
||||
--footer-border-color: var(--separator-color);
|
||||
|
||||
--header-anchor-link-color: rgb(var(--sub-lt-gray));
|
||||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
--header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
|
||||
--heading-color: rgb(var(--black));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--platter-background-color: rgba(var(--white), var(--platter-background-opacity));
|
||||
--platter-background-opacity: 0.6;
|
||||
--platter-backdrop-filter: blur(10px);
|
||||
|
||||
--site-nav-link-color: var(--a-color);
|
||||
|
||||
--tag-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-background-color: rgb(var(--super-lt-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--sub-lt-gray));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: var(--black);
|
||||
--color: rgba(var(--white), 0.8);
|
||||
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--header-anchor-link-color: rgb(var(--super-dk-gray));
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
--heading-color: rgb(var(--white));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
|
||||
--platter-backdrop-filter: brightness(0.66) blur(10px);
|
||||
|
||||
--tag-foreground-color: rgb(var(--sub-lt-gray));
|
||||
--tag-background-color: rgb(var(--dk-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-foreground-color: rgb(var(--mid-gray));
|
||||
}
|
||||
}
|
||||
|
||||
@layer root {
|
||||
a rt,
|
||||
a:hover rt {
|
||||
color: var(--a-ruby-color);
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: var(--a-color);
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: var(--a-color);
|
||||
}
|
||||
|
||||
a.hover-only {
|
||||
color: var(--color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
color: var(--a-color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--body-code-background-color);
|
||||
}
|
||||
|
||||
code.nobg {
|
||||
background: none;
|
||||
}
|
||||
|
||||
details:has(#TableOfContents) {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
h1.gradient {
|
||||
--site-title-color1: rgb(103, 128, 229);
|
||||
--site-title-color2: rgb(130, 90, 227);
|
||||
--site-title-color3: rgb(135, 101, 228);
|
||||
--site-title-color4: rgb(125, 115, 229);
|
||||
--site-title-color5: rgb(107, 130, 230);
|
||||
--site-title-color6: rgb(77, 153, 232);
|
||||
--site-title-color7: rgb(74, 136, 230);
|
||||
--site-title-color8: rgb(71, 128, 228);
|
||||
--site-title-color9: rgb(65, 80, 224);
|
||||
--site-title-color10: rgb(61, 58, 223);
|
||||
|
||||
color: rgb(var(--mid-blue));
|
||||
}
|
||||
|
||||
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
||||
h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
|
||||
h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
|
||||
h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
|
||||
h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
|
||||
h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
|
||||
h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
|
||||
h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
|
||||
h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
|
||||
h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
|
||||
h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
|
||||
}
|
||||
@supports (background-clip: text) or (-webkit-background-clip: text) {
|
||||
h1.gradient {
|
||||
background:
|
||||
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
h1.gradient a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
header.site nav > li {
|
||||
color: var(--site-nav-link-color);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--html-background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
main > :is(h1, h2, h3, h4, h5, h6) > a[href],
|
||||
main > :is(h1, h2, h3, h4, h5, h6) > a[href]:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
ruby:hover rt {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
rt {
|
||||
color: rgba(var(--white), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
figure.code code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.post header a,
|
||||
.post header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
449
assets/styles/root/002_layout.css
Normal file
449
assets/styles/root/002_layout.css
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
:root {
|
||||
--body-item-spacing: 2rem;
|
||||
--content-width: 80rem;
|
||||
--content-columns: 5;
|
||||
--gutter-width: 3rem;
|
||||
--list-item-block-gap: var(--body-item-spacing);
|
||||
--margin-min-width: var(--body-item-spacing);
|
||||
--margin-max-width: 1fr;
|
||||
--menu-icon-size: 20px;
|
||||
--nav-bulleted-spacing: 0.75rem;
|
||||
}
|
||||
|
||||
@layer root {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[margin-left]
|
||||
minmax(var(--margin-min-width), var(--margin-max-width))
|
||||
[wide-content-start wide-content-left-start]
|
||||
1fr
|
||||
[wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
repeat(var(--content-columns),
|
||||
[column-start]
|
||||
min(
|
||||
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
|
||||
calc(var(--content-width) / var(--content-columns))
|
||||
)
|
||||
[column-end]
|
||||
)
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start]
|
||||
1fr
|
||||
[wide-content-right-end wide-content-end]
|
||||
minmax(var(--margin-min-width), var(--margin-max-width))
|
||||
[margin-right];
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
main {
|
||||
--margin-min-width: 0;
|
||||
--margin-max-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 519px) {
|
||||
/* Collapse the margin and wide content tracks */
|
||||
main {
|
||||
--content-columns: 3;
|
||||
|
||||
grid-template-columns:
|
||||
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
repeat(
|
||||
var(--content-columns),
|
||||
[column-start]
|
||||
min(
|
||||
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
|
||||
calc(var(--content-width) / var(--content-columns))
|
||||
)
|
||||
[column-end]
|
||||
)
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 415px) {
|
||||
main {
|
||||
--content-columns: 1;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
calc(100% - 2 * var(--gutter-width))
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer layout {
|
||||
aside#table-of-contents {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
--line-width: 4px;
|
||||
|
||||
border-inline-start: var(--line-width) solid var(--separator-color);
|
||||
padding-inline-start: calc(3rem - var(--line-width));
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p code {
|
||||
padding-block-start: 0.1em;
|
||||
padding-inline: 0.25em;
|
||||
}
|
||||
|
||||
code.nobg {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
details:has(#TableOfContents) {
|
||||
box-sizing: border-box;
|
||||
padding: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
details > summary + #TableOfContents {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
box-sizing: border-box;
|
||||
padding: var(--body-item-spacing);
|
||||
padding-top: calc(var(--body-item-spacing) / 10);
|
||||
}
|
||||
|
||||
figcaption:not(:empty) {
|
||||
margin-block-start: 0.2em;
|
||||
}
|
||||
|
||||
figure {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
margin: 0;
|
||||
margin-inline: 0;
|
||||
min-width: fit-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 415px) {
|
||||
figure {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
}
|
||||
|
||||
figure.code {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
figure.code pre {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
figure > .container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--body-item-spacing);
|
||||
justify-content: center;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 414px) {
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
figure svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure .youtube {
|
||||
overflow: hidden;
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > li { display: block; }
|
||||
|
||||
header.site nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
@media (max-width: 435px) {
|
||||
header.site nav:first-of-type { order: 5; }
|
||||
}
|
||||
|
||||
header.site nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
header.site > .grid { max-width: none; }
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
margin-block-start: var(--body-item-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
main > figure:not(.code),
|
||||
main > a.to-photo-post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
main > header > .series {
|
||||
margin-inline-start: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > header > .series::before {
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
|
||||
padding-block-start: 0.5em;
|
||||
}
|
||||
|
||||
nav.bulleted > li:not(:first-child)::before {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.social > li {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.social > li:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
section.flow {
|
||||
display: block flow;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
:is(ul, ol) > li,
|
||||
dl > dt {
|
||||
margin-inline-start: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
:is(ul, ol) > li:not(:last-child) {
|
||||
margin-block-end: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
:is(ul, ol) > li > :is(ul, ol) {
|
||||
margin-inline-start: 0;
|
||||
margin-block-start: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-inline: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.list .post header {
|
||||
grid-column: wide-content-start / content-end;
|
||||
}
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list .post header {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.list .post header h1 {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
grid-column: wide-content-start;
|
||||
justify-self: end;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
grid-column: content-start / content-end;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
gap: var(--list-item-block-gap) 0;
|
||||
}
|
||||
|
||||
.list > h1,
|
||||
.list > header {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.list > .post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list > .post {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
|
||||
.page > header {
|
||||
align-items: first baseline;
|
||||
column-gap: 4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 539px) {
|
||||
.page > header {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page > header,
|
||||
.page > footer {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.page > article > * {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
}
|
||||
|
||||
.page > article > :not(:last-child) {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.post {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
}
|
||||
|
||||
.post > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block flex;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
14
assets/styles/root/010_interactions.css
Normal file
14
assets/styles/root/010_interactions.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
:root {
|
||||
--transition-duration: 0.7s;
|
||||
}
|
||||
|
||||
@layer root {
|
||||
figure.code .ln a {
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@layer root {
|
||||
figcaption {
|
||||
margin-block-start: 0.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-inline: 0;
|
||||
overflow: hidden;
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
figure > .container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
figure.bordered {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
figure a,
|
||||
figure a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
height: auto;
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
figure svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure .youtube {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
max-width: var(--content-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@layer root {
|
||||
main > :first-child,
|
||||
main > article > :first-child { margin-block-start: 0; }
|
||||
main > :not(:last-child),
|
||||
main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); }
|
||||
main > :last-child,
|
||||
main > article > :last-child { margin-block-end: 0; }
|
||||
}
|
||||
|
|
@ -17,100 +17,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
header.site h1 > a:hover { text-decoration: none; }
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > li { display: block; }
|
||||
|
||||
header.site nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
header.site nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
header.site > .grid { max-width: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 435px) {
|
||||
header.site nav:first-of-type { order: 5; }
|
||||
}
|
||||
|
||||
nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
|
||||
nav.social > li:first-child { margin-inline-start: 0; }
|
||||
|
||||
.social {
|
||||
display: block flex;
|
||||
letter-spacing: 2px;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--menu-icon-size);
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#social-menu-mastodon img {
|
||||
content: var(--mastodon-icon);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
#social-menu-mastodon img { content: var(--mastodon-icon); }
|
||||
#social-menu-github img { content: var(--github-icon); }
|
||||
#social-menu-instagram img { content: var(--instagram-icon); }
|
||||
#social-menu-feed img { content: var(--feed-icon); }
|
||||
|
||||
#social-menu-mastodon img {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.highlight code {
|
||||
background-color: inherit;
|
||||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
.highlight .line {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
.highlight .ln a {
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.highlight .cl {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
.taxonomies {
|
||||
align-items: first baseline;
|
||||
display: flex;
|
||||
grid-column: content-start / content-end;
|
||||
height: min-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 1rem;
|
||||
height: min-content;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
|
|
@ -12,10 +22,7 @@ ul.tags > li {
|
|||
display: inline-block;
|
||||
font-size: 75%;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
ul.tags > li:first-child {
|
||||
margin-inline-start: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.tags > li:hover {
|
||||
|
|
@ -28,6 +35,7 @@ ul.tags > li > a {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.tags > li > a:hover {
|
||||
|
|
@ -35,10 +43,9 @@ ul.tags > li > a:hover {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.tags > li + li { margin-inline-start: 1rem; }
|
||||
ul.tags > li.chevron + li { margin-inline-start: 0 }
|
||||
ul.tags > li + li { margin-inline-start: 0; }
|
||||
|
||||
ul.tags > .chevron {
|
||||
.taxonomies > .chevron {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -47,11 +54,7 @@ ul.tags > .chevron {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 1px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
ul.tags > .chevron:hover {
|
||||
color: var(--tag-spacer-foreground-color);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@font-face {
|
||||
font-family: "Museo_Slab";
|
||||
src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
|
||||
url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
|
||||
url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -19,39 +19,48 @@
|
|||
--font-size-scale-factor: 1vmax;
|
||||
--site-header-font-size: 200%;
|
||||
|
||||
--h1-size: 305%;
|
||||
--h2-size: 244%;
|
||||
--h3-size: 195%;
|
||||
--h4-size: 156%;
|
||||
--h5-size: 125%;
|
||||
--h6-size: 100%;
|
||||
|
||||
--line-height: 1.5;
|
||||
--heading-line-height: 1;
|
||||
/* A little extra line height so the descenders don't get clipped */
|
||||
--site-heading-line-height: 1.1;
|
||||
|
||||
--color: rgba(var(--black), 0.8);
|
||||
--a-color: rgb(var(--mid-blue));
|
||||
--a-ruby-color: var(--color);
|
||||
--heading-color: rgb(var(--black));
|
||||
--site-nav-link-color: var(--a-color);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: rgba(var(--white), 0.8);
|
||||
--heading-color: rgb(var(--white));
|
||||
}
|
||||
}
|
||||
|
||||
a { color: var(--a-color); }
|
||||
a:visited { color: var(--a-color); }
|
||||
a.hover-only { color: var(--color); }
|
||||
a.hover-only:hover { color: var(--a-color); }
|
||||
a rt, a:hover rt { color: var(--a-ruby-color); }
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[href]:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
code { font-family: var(--font-family-monospace); }
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 80%;
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure.code .cl {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
footer.site {
|
||||
|
|
@ -59,77 +68,43 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 { font-size: 305%; }
|
||||
h2 { font-size: 244%; }
|
||||
h3 { font-size: 195%; }
|
||||
h4 { font-size: 156%; }
|
||||
h5 { font-size: 125%; }
|
||||
h6 { font-size: 100%; }
|
||||
h1 { font-size: var(--h1-size); }
|
||||
h2 { font-size: var(--h2-size); }
|
||||
h3 { font-size: var(--h3-size); }
|
||||
h4 { font-size: var(--h4-size); }
|
||||
h5 { font-size: var(--h5-size); }
|
||||
h6 { font-size: var(--h6-size); }
|
||||
h5, h6 { font-family: var(--font-family-body); }
|
||||
|
||||
header.site nav > .active { font-weight: bold; }
|
||||
header.site nav > li { color: var(--site-nav-link-color); }
|
||||
header > span.series::before {
|
||||
content: "↳";
|
||||
}
|
||||
|
||||
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
||||
main:has(header > .post-title > h1) h2 { font-size: 195%; }
|
||||
main:has(header > .post-title > h1) h3 { font-size: 156%; }
|
||||
main:has(header > .post-title > h1) h4 { font-size: 125%; }
|
||||
main:has(header > .post-title > h1) h5 { font-size: 100%; }
|
||||
main:has(header > .post-title > h1) h6 { font-size: 100%; }
|
||||
main:has(header > .post-title > h1) :is(h5, h6) { font-family: var(--font-family-body); }
|
||||
header.site h1 > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header.site nav {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading-color);
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1pt;
|
||||
line-height: var(--heading-line-height);
|
||||
}
|
||||
|
||||
h1.site {
|
||||
--site-title-color1: rgb(103, 128, 229);
|
||||
--site-title-color2: rgb(130, 90, 227);
|
||||
--site-title-color3: rgb(135, 101, 228);
|
||||
--site-title-color4: rgb(125, 115, 229);
|
||||
--site-title-color5: rgb(107, 130, 230);
|
||||
--site-title-color6: rgb(77, 153, 232);
|
||||
--site-title-color7: rgb(74, 136, 230);
|
||||
--site-title-color8: rgb(71, 128, 228);
|
||||
--site-title-color9: rgb(65, 80, 224);
|
||||
--site-title-color10: rgb(61, 58, 223);
|
||||
|
||||
color: rgb(var(--mid-blue));
|
||||
h1.gradient {
|
||||
font-family: var(--font-family-site-heading);
|
||||
}
|
||||
|
||||
h1.site > a { color: inherit; }
|
||||
h1.gradient > a { color: inherit; }
|
||||
|
||||
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
||||
h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); }
|
||||
h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); }
|
||||
h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); }
|
||||
h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); }
|
||||
h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); }
|
||||
h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); }
|
||||
h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); }
|
||||
h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); }
|
||||
h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); }
|
||||
h1.site span:nth-child(10n) { color: var(--site-title-color10); }
|
||||
}
|
||||
@supports (background-clip: text) or (-webkit-background-clip: text) {
|
||||
h1.site {
|
||||
background:
|
||||
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
header.site h1.site {
|
||||
font-size: var(--site-header-font-size);
|
||||
|
|
@ -153,20 +128,58 @@
|
|||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
header > span.series {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
header > span.series::before {
|
||||
color: var(--header-series-arrow-foreground-color);
|
||||
}
|
||||
|
||||
html {
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before { color: var(--color); }
|
||||
nav.bulleted > li::before { color: var(--heading-color); }
|
||||
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
||||
main:has(header > .post-title > h1) h2 { font-size: 195%; }
|
||||
main:has(header > .post-title > h1) h3 { font-size: 156%; }
|
||||
main:has(header > .post-title > h1) h4 { font-size: 125%; }
|
||||
main:has(header > .post-title > h1) h5 { font-size: 100%; }
|
||||
main:has(header > .post-title > h1) h6 { font-size: 100%; }
|
||||
|
||||
p { line-height: var(--line-height); }
|
||||
main:has(header > .post-title > h1) :is(h5, h6) {
|
||||
font-family: var(--font-family-body);
|
||||
}
|
||||
|
||||
ruby:hover rt { color: var(--color); }
|
||||
nav.bulleted>li:first-child::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
rt { color: rgba(var(--white), 0.5); }
|
||||
nav.bulleted > li::before {
|
||||
content: "•";
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
p > code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#TableOfContents ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.social {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
@layer utility {
|
||||
.centered { text-align: center; }
|
||||
.float-right { float: right; }
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.nobreak { white-space: nowrap; }
|
||||
|
||||
.noselect {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -23,4 +28,14 @@
|
|||
.visible { visibility: visible; }
|
||||
|
||||
article.two-column { columns: 2; }
|
||||
|
||||
img.circular {
|
||||
shape-outside: circle(50%);
|
||||
-webkit-clip-path: circle(50%);
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
|
||||
.column5 {
|
||||
grid-column: span content-start 4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ goldmark:
|
|||
unsafe: true
|
||||
highlight:
|
||||
anchorLineNos: true
|
||||
lineNos: true
|
||||
lineNos: false
|
||||
lineNumbersInTable: false
|
||||
noClasses: false
|
||||
|
|
|
|||
|
|
@ -4,3 +4,7 @@ twitter: erynofwales
|
|||
github: erynofwales
|
||||
instagram: erynofwales
|
||||
description: Home page of Eryn Rachel Wells
|
||||
|
||||
photos:
|
||||
gridSize: 200
|
||||
thumbnailSize: 600
|
||||
|
|
|
|||
|
|
@ -4,10 +4,15 @@ date: 2022-09-03T12:14:32-07:00
|
|||
resources:
|
||||
- name: me
|
||||
src: me.jpeg
|
||||
params:
|
||||
alt: "
|
||||
Me, wearing a hat and smiling slightly, standing in front of a stone background.
|
||||
"
|
||||
---
|
||||
|
||||
{{< circular_image id=me name=me class="float-right" width=200
|
||||
alt="A photo of me, wearing a hat, standing in front of a stone background">}}
|
||||
{{% section class=flow %}}
|
||||
|
||||
{{< circular_image id=me name=me class="float-right" width=200 >}}
|
||||
|
||||
I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
|
||||
Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,
|
||||
|
|
@ -17,6 +22,8 @@ I attended [Oberlin College][ob] where I got a degree in Computer Science.
|
|||
|
||||
I speak English natively, and Spanish too, though I always need more practice.
|
||||
|
||||
{{% /section %}}
|
||||
|
||||
## Hobbies
|
||||
|
||||
I've been a musician for most of my life. I started on the piano at age seven,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,17 @@
|
|||
@layer page {
|
||||
main > section > p:not(:last-child) {
|
||||
margin-bottom: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
img#me {
|
||||
p:has(img#me) {
|
||||
display: inline;
|
||||
grid-column: unset;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img#me {
|
||||
margin: 0;
|
||||
shape-outside: circle(55%);
|
||||
width: min(200px, 25%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,18 @@ resources:
|
|||
- name: gay
|
||||
title: The Gayest Place in Town is my Therapist's Office
|
||||
src: gay.jpeg
|
||||
params:
|
||||
alt: "
|
||||
A doormat with a border of rainbow colored blocks. In the middle, in
|
||||
a blobby script, it says 'The Gayest Place In Town'
|
||||
"
|
||||
categories: Test
|
||||
series: "Testing Erynwells.me"
|
||||
tags: ["Test A", "Test B", "テスト"]
|
||||
toc: open
|
||||
---
|
||||
|
||||
# Body Text
|
||||
## Body Text
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
||||
|
|
@ -31,7 +36,7 @@ interdum varius sit amet mattis vulputate enim. Eget nunc lobortis mattis
|
|||
aliquam faucibus purus in massa. Amet consectetur adipiscing elit ut aliquam
|
||||
purus sit. Tincidunt dui ut ornare lectus sit amet est.
|
||||
|
||||
# Code Highlighting
|
||||
## Code Highlighting
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore `magna aliqua`.
|
||||
|
|
@ -58,7 +63,7 @@ int main(int argc, char *argv[])
|
|||
Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare
|
||||
lectus sit amet est.
|
||||
|
||||
# Figures
|
||||
## Figures
|
||||
|
||||
Iaculis nunc sed augue lacus viverra vitae congue. Non curabitur gravida arcu
|
||||
ac. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Scelerisque in
|
||||
|
|
@ -107,7 +112,7 @@ faucibus nisl tincidunt. Lectus vestibulum mattis ullamcorper velit sed
|
|||
ullamcorper morbi tincidunt. Tellus elementum sagittis vitae et leo duis. Nunc
|
||||
sed id semper risus in hendrerit gravida.
|
||||
|
||||
# Block Quotes
|
||||
## Block Quotes
|
||||
|
||||
Here's a block quote:
|
||||
|
||||
|
|
@ -122,7 +127,7 @@ Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Sem viverra
|
|||
aliquet eget sit amet tellus cras adipiscing enim. Libero nunc consequat
|
||||
interdum varius sit amet mattis vulputate enim.
|
||||
|
||||
# Lists
|
||||
## Lists
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
||||
|
|
@ -158,30 +163,30 @@ Great! Here's a nested list:
|
|||
|
||||
Woah!
|
||||
|
||||
# Headers
|
||||
## Headers
|
||||
|
||||
Here are some headers.
|
||||
|
||||
# H1
|
||||
### H3
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
||||
ultrices. Augue eget arcu dictum varius duis at consectetur lorem donec. Donec
|
||||
ac odio tempor orci dapibus ultrices.
|
||||
|
||||
## H2
|
||||
#### H4
|
||||
|
||||
Et leo duis ut diam. Pellentesque id nibh tortor id aliquet lectus. Ac orci
|
||||
`phasellus` egestas tellus rutrum tellus pellentesque eu. Amet commodo nulla
|
||||
facilisi nullam vehicula ipsum.
|
||||
|
||||
### H3
|
||||
##### H5
|
||||
|
||||
Posuere urna nec tincidunt praesent semper feugiat nibh. Phasellus vestibulum
|
||||
lorem sed risus. Consequat semper viverra nam libero justo laoreet sit amet
|
||||
cursus.
|
||||
|
||||
#### H4
|
||||
###### H6
|
||||
|
||||
Ipsum dolor sit amet consectetur adipiscing elit. Molestie ac feugiat sed lectus
|
||||
vestibulum mattis ullamcorper velit. Sem viverra aliquet eget sit amet tellus
|
||||
|
|
@ -190,7 +195,7 @@ vulputate enim. Eget nunc lobortis mattis aliquam faucibus purus in massa. Amet
|
|||
consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus
|
||||
sit amet est.
|
||||
|
||||
# {{< ruby Japanese ja >}}日本語{{< /ruby >}}
|
||||
## {{% ruby Japanese ja %}}日本語{{% /ruby %}}
|
||||
|
||||
Here's some text in {{< ruby Japanese ja >}}日本語{{< /ruby >}} with {{< ruby
|
||||
furigana ja >}}ふりがな{{< /ruby >}}.
|
||||
|
|
|
|||
3
layouts/_default/_markup/render-heading.html
Normal file
3
layouts/_default/_markup/render-heading.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
|
||||
<a href="#{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</a>
|
||||
</h{{ .Level }}>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
{{ block "body" . -}}
|
||||
{{- block "before" . -}}{{- end -}}
|
||||
{{- block "header" . -}}{{ partial "header.html" .}}{{- end -}}
|
||||
<main class="{{ .Type }} {{ .Kind }}{{ if gt (len .Pages) 0 }} list{{ end }}">
|
||||
<main class="{{ .Type }} {{ .Kind }} {{ if gt (len .Pages) 1 }}list{{ else }}page{{ end }}">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
{{- block "footer" . -}}
|
||||
|
|
|
|||
|
|
@ -3,29 +3,26 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<header class="page">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
|
||||
{{ partial "table_of_contents.html" . }}
|
||||
{{ partial "ruby_controls.html" . }}
|
||||
{{ partial "ruby_controls.html" . }}
|
||||
|
||||
{{- $hasContent := false -}}
|
||||
{{ with .Content }}
|
||||
{{- $hasContent = true -}}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.posts | default true }}
|
||||
{{ if and $hasContent }}
|
||||
<h2>Posts</h2>
|
||||
{{- $hasContent := false -}}
|
||||
{{ with .Content }}
|
||||
{{- $hasContent = true -}}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
|
||||
<ul>
|
||||
{{- range .Pages -}}
|
||||
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{ if .Params.posts | default true }}
|
||||
{{ if $hasContent }}
|
||||
<h2>Posts</h2>
|
||||
{{ end }}
|
||||
|
||||
{{- range .Pages -}}
|
||||
{{ .Render "li_grid_with_date" }}
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,20 +3,38 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<header class="page">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<header class="page">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<article>
|
||||
{{ .Content }}
|
||||
|
||||
{{ .Content }}
|
||||
{{- range .Data.Terms.Alphabetical -}}
|
||||
<h2>{{ .Name | title }}</h2>
|
||||
|
||||
{{- range .Data.Terms.Alphabetical -}}
|
||||
<h2>{{ .Name | title }}</h2>
|
||||
<ul>
|
||||
{{- range .WeightedPages -}}
|
||||
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
{{- range .WeightedPages -}}
|
||||
<article class="post">
|
||||
<header>
|
||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
</header>
|
||||
|
||||
{{ if .Description }}
|
||||
<p>{{ .Description }}</p>
|
||||
{{ else if lt .WordCount 110 }}
|
||||
{{ .Content }}
|
||||
{{ else }}
|
||||
{{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }}
|
||||
<p>{{ .WordCount }} words</p>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer_tags.html" . }}
|
||||
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
</article>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
|
|
|
|||
0
layouts/about/section.atom.atom
Normal file
0
layouts/about/section.atom.atom
Normal file
|
|
@ -1,11 +1,19 @@
|
|||
<li>
|
||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January" }}</time>
|
||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "2" }}</time>
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
<div class="category">
|
||||
{{ with index (.GetTerms "categories") 0 }}
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<article class="post">
|
||||
<header>
|
||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
</header>
|
||||
|
||||
{{ if .Description }}
|
||||
<p>{{ .Description }}</p>
|
||||
{{ else if lt .WordCount 110 }}
|
||||
{{ .Content }}
|
||||
{{ else }}
|
||||
{{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }}
|
||||
<p>{{ .WordCount }} words</p>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer_tags.html" . }}
|
||||
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
</li>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@
|
|||
|
||||
{{ define "main" }}
|
||||
{{- range .Pages.ByDate.GroupByDate "2006" -}}
|
||||
<h5>{{ .Key | title }}</h5>
|
||||
<ul>
|
||||
<h1 class="date"><a id="{{ .Key }}">{{ .Key | title }}</a></h1>
|
||||
|
||||
{{- range .Pages -}}
|
||||
{{- if or (not .Draft) (not hugo.IsProduction) -}}
|
||||
{{- .Render "li_grid_with_date" -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
29
layouts/blog/section.atom.atom
Normal file
29
layouts/blog/section.atom.atom
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{{- $pctx := . -}}
|
||||
{{- if .IsHome -}} {{ $pctx = .Site }} {{- end -}}
|
||||
{{- $pages := slice -}}
|
||||
{{- if or $.IsHome $.IsSection -}}
|
||||
{{- $pages = $pctx.RegularPages -}}
|
||||
{{- else -}}
|
||||
{{- $pages = $pctx.Pages -}}
|
||||
{{- end -}}
|
||||
{{- $limit := .Site.Config.Services.RSS.Limit -}}
|
||||
{{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}}
|
||||
{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<title>{{ .Site.Title }}</title>
|
||||
<link href="{{ .Permalink }}" />
|
||||
<link href="{{ `/feed.atom` | absURL }}" rel="self" />
|
||||
<link href="{{ `/icons/favicon.png` | absURL }}" rel="shortcut icon" />
|
||||
{{ if not .Date.IsZero }}<updated>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>{{ end }}
|
||||
<id>{{ .Permalink }}</id>
|
||||
{{ with .Site.Author.name }}
|
||||
<author>
|
||||
<name>{{ . }}</name>
|
||||
{{ with $.Site.Author.email }}<email>{{ . }}</email>{{ end }}
|
||||
<uri>{{ $.Site.Home.Permalink }}</uri>
|
||||
</author>
|
||||
{{ end }}
|
||||
<generator version="{{ hugo.Version }}" uri="https://gohugo.io">Hugo {{ hugo.Version }}</generator>
|
||||
<rights>© 2020-{{ now.Year }} Eryn Wells</rights>
|
||||
{{ range $pages }}{{ .Render "atom_entry" }}{{ end }}
|
||||
</feed>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "body" }}
|
||||
<main>
|
||||
<header class="platter">
|
||||
<h1 class="site">{{ partial "site_name.html" .Title }}</h1>
|
||||
<h1 class="site gradient">{{ partial "site_name.html" .Title }}</h1>
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
|
@ -9,213 +9,3 @@
|
|||
</header>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
||||
{{ define "styles" }}
|
||||
<style>
|
||||
:root {
|
||||
--animation-offset: 6px;
|
||||
--font-size-max: 12px;
|
||||
--line-height: 1.85;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 2rem;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
font-size: 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.site h1 { white-space: normal; }
|
||||
|
||||
@media (max-width: 599px) {
|
||||
html {
|
||||
--font-size-scale-factor: 1.33vmax;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
line-height: var(--landing-line-height);
|
||||
margin-block-start: 10vh;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
main header {
|
||||
align-items: first baseline;
|
||||
display: grid;
|
||||
gap: 0 2rem;
|
||||
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
grid-template-areas:
|
||||
"title blurb"
|
||||
"title nav";
|
||||
padding-inline: 1em;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
main header {
|
||||
gap: 1rem 0;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"blurb"
|
||||
"nav";
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main h1 {
|
||||
letter-spacing: 0.025em;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
main h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
align-items: baseline;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
font-size: inherit;
|
||||
list-style: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#content {
|
||||
grid-area: blurb
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: nav
|
||||
}
|
||||
|
||||
h1,
|
||||
#content>p,
|
||||
nav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
animation: left-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
animation: top-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
#content>p,
|
||||
nav {
|
||||
animation: right-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
|
||||
#content>p,
|
||||
nav {
|
||||
animation: bottom-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.platter {
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
|
|
|||
0
layouts/nethack/section.atom.atom
Normal file
0
layouts/nethack/section.atom.atom
Normal file
0
layouts/nethack/section.html
Normal file
0
layouts/nethack/section.html
Normal file
0
layouts/nihongo/section.atom.atom
Normal file
0
layouts/nihongo/section.atom.atom
Normal file
0
layouts/nihongo/section.html
Normal file
0
layouts/nihongo/section.html
Normal file
|
|
@ -1,18 +1,23 @@
|
|||
<header>
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
<div class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if and (not (eq .Section "about")) .Date }}
|
||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
{{ if and (not (eq .Section "about")) .Date }}
|
||||
<time>{{ .Date | time.Format "January 2, 2006" }}</time>
|
||||
{{ end }}
|
||||
|
||||
{{- if .Params.series -}}
|
||||
{{- $series := .GetTerms "series" -}}
|
||||
|
||||
{{- if gt (len $series) 1 -}}
|
||||
{{- errorf "More than one series for %s" .Permalink -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with index $series 0 -}}
|
||||
<span class="series"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
|
||||
<span class="series">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</span>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{{ if .Draft }}<span class="draft">d</span>{{ end }}
|
||||
{{ if .Draft }}<span class="draft">draft</span>{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
{{- if or .Params.categories .Params.tags -}}
|
||||
<ul class="tags">
|
||||
{{- if .Params.categories -}}
|
||||
{{- $categories := .GetTerms "categories" -}}
|
||||
{{- if gt (len $categories) 1 -}}
|
||||
{{- errorf "More than one category for %q" .Path -}}
|
||||
<div class="taxonomies">
|
||||
{{- if or .Params.categories .Params.tags -}}
|
||||
<ul class="tags">
|
||||
{{- if .Params.categories -}}
|
||||
{{- $categories := .GetTerms "categories" -}}
|
||||
{{- if gt (len $categories) 1 -}}
|
||||
{{- errorf "More than one category for %q" .Path -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with index (.GetTerms "categories") 0 -}}
|
||||
<li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
||||
{{- if and .Params.categories .Params.tags -}}
|
||||
<div class="chevron noselect">⏵</div>
|
||||
{{- end -}}
|
||||
|
||||
{{- with index (.GetTerms "categories") 0 -}}
|
||||
<li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
|
||||
<ul class="tags">
|
||||
{{- if .Params.tags -}}
|
||||
{{- range .GetTerms "tags" -}}
|
||||
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
|
||||
{{- if and .Params.categories .Params.tags -}}
|
||||
<li class="chevron noselect">⏵</li>
|
||||
{{- end -}}
|
||||
|
||||
{{- if .Params.tags -}}
|
||||
{{- range .GetTerms "tags" -}}
|
||||
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,25 @@
|
|||
{{- $url := .RelPermalink -}}
|
||||
<header class="site">
|
||||
<div class="platter grid">
|
||||
<h1 class="site">
|
||||
<h1 class="site gradient">
|
||||
<a class="site-name" href="{{ `` | absURL }}">{{ partial "site_name.html" site.Params.shortTitle }}</a>
|
||||
</h1>
|
||||
{{ partial "site_nav.html" . }}
|
||||
<nav class="social">
|
||||
{{ with site.Menus.social }}
|
||||
{{- range . -}}
|
||||
{{- $id := .Identifier -}}
|
||||
{{- $targetBlank := .Params.targetBlank | default true -}}
|
||||
<li id="social-menu-{{ $id }}">
|
||||
<a href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}">
|
||||
<img alt="{{ .Name }}">
|
||||
</a>
|
||||
</li>
|
||||
{{- $id := .Identifier -}}
|
||||
{{- $targetBlank := .Params.targetBlank | default true -}}
|
||||
<li id="social-menu-{{ $id }}">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if $targetBlank }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
aria-label="{{ .Name }}">
|
||||
<img alt="{{ .Name }}" width=20 height=20>
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,24 @@
|
|||
{{ $stylesheets := slice }}
|
||||
{{ with .Resources.Match "*.css" }}
|
||||
{{ range . }}
|
||||
{{ $stylesheets = $stylesheets | append (. | resources.ExecuteAsTemplate .Name .) }}
|
||||
{{ end }}
|
||||
{{ if hugo.IsProduction }}
|
||||
{{ $stylesheets = slice ($stylesheets
|
||||
| resources.Concat (printf "%s/page.css" $.File.Dir)
|
||||
| fingerprint "md5") }}
|
||||
{{ $stylesheets = $stylesheets | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ return $stylesheets }}
|
||||
|
||||
{{ if eq .Kind "home" }}
|
||||
{{ with resources.Get "styles/home.css" }}
|
||||
{{ $stylesheets = $stylesheets | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $processedStylesheets := slice }}
|
||||
{{ range $stylesheets }}
|
||||
{{ $processedStylesheets = $processedStylesheets | append (. | resources.ExecuteAsTemplate .Name .) }}
|
||||
{{ end }}
|
||||
{{ if hugo.IsProduction }}
|
||||
{{ $processedStylesheets = slice ($processedStylesheets
|
||||
| resources.Concat (printf "%s/page.css" $.File.Dir)
|
||||
| fingerprint "md5") }}
|
||||
{{ end }}
|
||||
|
||||
{{ return $processedStylesheets }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{{ $stylesheets := slice (resources.Get "styles/root.css")
|
||||
(resources.Get "styles/railroad.css")
|
||||
{{ $stylesheets := slice (resources.Get "styles/railroad.css")
|
||||
(resources.Get "styles/monokai.css")
|
||||
| append (resources.Match "styles/root/*.css" | sort) }}
|
||||
{{ if not hugo.IsProduction }}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
{{ partial "content_header.html" . }}
|
||||
|
||||
{{ partial "table_of_contents.html" . }}
|
||||
|
||||
{{- $layout := .Params.layout -}}
|
||||
<article{{ with $layout }} class="{{ . }}"{{ end }}>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{- $content := .Content -}}
|
||||
{{ with $layout := .Params.layout }}
|
||||
<article class="{{ $layout }}">
|
||||
{{ $content }}
|
||||
</article>
|
||||
{{ else }}
|
||||
{{ $content }}
|
||||
{{ end}}
|
||||
|
||||
<footer>
|
||||
{{ partial "footer_tags.html" . }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,15 @@
|
|||
<nav class="site bulleted">
|
||||
{{ with site.Menus.main }}
|
||||
{{- range . -}}
|
||||
<li><a {{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }} href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||
<li>
|
||||
<a
|
||||
{{ if $currentPage.HasMenuCurrent "main" . }}
|
||||
class="active"
|
||||
{{ end }}
|
||||
href="{{ .URL }}">
|
||||
<span>{{ .Name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
|
||||
{{- $thumbnail = $thumbnail.Crop "600x600" -}}
|
||||
{{- $gridSize := $.Site.Params.photos.thumbnailSize -}}
|
||||
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" $gridSize "Height" $gridSize) -}}
|
||||
{{- $thumbnail = $thumbnail.Crop (printf "%dx%d" $gridSize $gridSize) -}}
|
||||
{{- $altText := $thumbnail.Params.alt -}}
|
||||
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
|
||||
<img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
|
||||
<img
|
||||
src="{{ $thumbnail.RelPermalink }}"
|
||||
{{ with $altText }}
|
||||
alt="{{ . }}"
|
||||
{{ end }}
|
||||
width={{ $gridSize }}
|
||||
height={{ $gridSize }}>
|
||||
</a>
|
||||
|
|
|
|||
29
layouts/photos/section.atom.atom
Normal file
29
layouts/photos/section.atom.atom
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{{- $pctx := . -}}
|
||||
{{- if .IsHome -}} {{ $pctx = .Site }} {{- end -}}
|
||||
{{- $pages := slice -}}
|
||||
{{- if or $.IsHome $.IsSection -}}
|
||||
{{- $pages = $pctx.RegularPages -}}
|
||||
{{- else -}}
|
||||
{{- $pages = $pctx.Pages -}}
|
||||
{{- end -}}
|
||||
{{- $limit := .Site.Config.Services.RSS.Limit -}}
|
||||
{{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}}
|
||||
{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<title>{{ .Site.Title }}</title>
|
||||
<link href="{{ .Permalink }}" />
|
||||
<link href="{{ `/feed.atom` | absURL }}" rel="self" />
|
||||
<link href="{{ `/icons/favicon.png` | absURL }}" rel="shortcut icon" />
|
||||
{{ if not .Date.IsZero }}<updated>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>{{ end }}
|
||||
<id>{{ .Permalink }}</id>
|
||||
{{ with .Site.Author.name }}
|
||||
<author>
|
||||
<name>{{ . }}</name>
|
||||
{{ with $.Site.Author.email }}<email>{{ . }}</email>{{ end }}
|
||||
<uri>{{ $.Site.Home.Permalink }}</uri>
|
||||
</author>
|
||||
{{ end }}
|
||||
<generator version="{{ hugo.Version }}" uri="https://gohugo.io">Hugo {{ hugo.Version }}</generator>
|
||||
<rights>© 2020-{{ now.Year }} Eryn Wells</rights>
|
||||
{{ range $pages }}{{ .Render "atom_entry" }}{{ end }}
|
||||
</feed>
|
||||
|
|
@ -3,41 +3,47 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{- if .Title -}}
|
||||
{{ partial "content_header.html" . }}
|
||||
{{- end -}}
|
||||
{{- $photos := partial "photos/list.html" . -}}
|
||||
{{ if eq (len $photos) 0 }}
|
||||
{{ errorf "Missing photo from photos page %q" .Path }}
|
||||
{{ end }}
|
||||
|
||||
{{- $photos := partial "photos/list.html" . -}}
|
||||
{{ if eq (len $photos) 0 }}
|
||||
{{ errorf "Missing photo from photos page %q" .Path }}
|
||||
{{ end }}
|
||||
{{ if eq (len $photos) 1 }}
|
||||
{{- $img := index $photos 0 -}}
|
||||
<figure>
|
||||
<img
|
||||
src="{{ $img.RelPermalink }}"
|
||||
{{ with $img.Params.alt }}
|
||||
alt="{{ . }}"
|
||||
{{ end }}
|
||||
height={{ $img.Height }}>
|
||||
</figure>
|
||||
|
||||
{{ if eq (len $photos) 1 }}
|
||||
{{- $img := index $photos 0 -}}
|
||||
<figure><img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}></figure>
|
||||
<article>
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
{{ .Content }}
|
||||
{{- if .Params.photo_details | default true -}}
|
||||
{{- partial "photo_exif_table.html" $img.Exif -}}
|
||||
|
||||
{{- if .Params.photo_details | default true -}}
|
||||
{{- partial "photo_exif_table.html" $img.Exif -}}
|
||||
|
||||
{{- if in ($.Site.BaseURL | string) "localhost" -}}
|
||||
{{- partial "development/photo_exif_table.html" $img.Exif -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{ else }}
|
||||
<figure>
|
||||
<ul class="carousel">
|
||||
{{- range $photos -}}
|
||||
<li>{{ . }}</li>
|
||||
{{- if in ($.Site.BaseURL | string) "localhost" -}}
|
||||
{{- partial "development/photo_exif_table.html" $img.Exif -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</figure>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
{{ else }}
|
||||
<figure>
|
||||
<ul class="carousel">
|
||||
{{- range $photos -}}
|
||||
<li>{{ . }}</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</figure>
|
||||
{{ end }}
|
||||
|
||||
<footer>
|
||||
{{ partial "footer_tags.html" . }}
|
||||
</footer>
|
||||
<footer>
|
||||
{{ partial "footer_tags.html" . }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
|
||||
{{- $id := .Get "id" -}}
|
||||
{{- $classes := .Get "class" -}}
|
||||
{{- $alt := .Get "alt" -}}
|
||||
{{- $alt := .Get "alt" | default $img.Params.alt -}}
|
||||
{{- $width := .Get "width" -}}
|
||||
{{- $resized_img := $img.Resize (printf "%dx%d" $width $width) -}}
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@
|
|||
</div>
|
||||
{{ if and $shouldShowTitle -}}
|
||||
{{- range $imgs -}}
|
||||
<figcaption>{{ .Title }}</figcaption>
|
||||
{{- if gt (len .Title) 0 -}}
|
||||
<figcaption>{{ .Title }}</figcaption>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- with $photoPage := $.Page.GetPage (printf "photos/%s" (.Get 0)) -}}
|
||||
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 1280 "Height" 1280) -}}
|
||||
{{- $altText := $thumbnail.Params.alt | default .Title -}}
|
||||
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
|
||||
<a class="to-photo-post" href="{{ .RelPermalink }}" title="{{ .Title }}">
|
||||
<img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
|
||||
</a>
|
||||
{{- else -}}
|
||||
|
|
|
|||
3
layouts/shortcodes/section.html
Normal file
3
layouts/shortcodes/section.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<section {{ with .Get "class" }}class="{{ . }}"{{ end }}>
|
||||
{{ .Inner }}
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue