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>
|
-- Eryn Wells <eryn@erynwells.me>
|
||||||
|
|
||||||
vim.bo.shiftwidth = 4
|
vim.bo.shiftwidth = 2
|
||||||
vim.bo.softtabstop = 4
|
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> */
|
/* Eryn Wells <eryn@erynwells.me> */
|
||||||
|
|
||||||
details:has(.photo-params.debug) {
|
details:has(.photo-params.debug) {
|
||||||
margin-inline: var(--body-item-spacing);
|
|
||||||
max-width: var(--content-width);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,8 +75,13 @@ details:has(.photo-params.debug) {
|
||||||
background-color: var(--separator-color);
|
background-color: var(--separator-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.photos-params.debug {
|
table.photo-params.debug {
|
||||||
width: calc(100% - var(--body-item-spacing));
|
--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 {
|
.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 {
|
:root {
|
||||||
--highlight-background-color: rgb(var(--super-lt-gray));
|
--highlight-background-color: rgb(250, 250, 250);
|
||||||
--highlight-foreground-color: var(--foreground-body-color);
|
--highlight-foreground-color: var(--foreground-body-color);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chroma {
|
.chroma {
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
|
@ -28,7 +24,17 @@
|
||||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
/* 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 }
|
/* 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 }
|
/* Keyword */ .chroma .k { color: #00a8c8 }
|
||||||
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
||||||
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
/* Eryn Wells <eryn@erynwells.me> */
|
/* Eryn Wells <eryn@erynwells.me> */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--logentry-background-color: var(--tag-background-color);
|
--logentry-background-color: var(--tag-background-color);
|
||||||
--logentry-foreground-color: var(--tag-text-color);
|
--logentry-foreground-color: var(--tag-text-color);
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--separator-color: rgb(var(--dk-gray));
|
--separator-color: rgb(var(--dk-gray));
|
||||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||||
--body-code-background-color: rgb(var(--dk-gray));
|
--body-code-background-color: rgb(var(--dk-gray));
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
{{ $gridSize := site.Params.photos.gridSize }}
|
||||||
:root {
|
:root {
|
||||||
--date-item-background-color: rgb(var(--lt-gray));
|
--date-item-background-color: rgb(var(--lt-gray));
|
||||||
|
|
||||||
|
|
@ -26,16 +27,13 @@
|
||||||
|
|
||||||
.photos.list {
|
.photos.list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr));
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photos.list > * {
|
.photos.list > * {
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
}
|
grid-column: auto;
|
||||||
|
|
||||||
.photos.page > nav {
|
|
||||||
margin-block-end: var(--body-item-spacing);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.photos.list > a {
|
.photos.list > a {
|
||||||
|
|
@ -44,13 +42,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.photos.list > a > img {
|
.photos.list > a > img {
|
||||||
border-radius: 3px;
|
|
||||||
image-orientation: from-image;
|
image-orientation: from-image;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photos.list > div {
|
.photos.list > div {
|
||||||
background-color: var(--date-item-background-color);
|
background-color: var(--date-item-background-color);
|
||||||
border-radius: 3px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -89,73 +85,3 @@
|
||||||
content: "";
|
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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#social-menu-mastodon img { content: var(--mastodon-icon); }
|
||||||
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-github img { content: var(--github-icon); }
|
#social-menu-github img { content: var(--github-icon); }
|
||||||
#social-menu-instagram img { content: var(--instagram-icon); }
|
#social-menu-instagram img { content: var(--instagram-icon); }
|
||||||
#social-menu-feed img { content: var(--feed-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 {
|
ul.tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem 1rem;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
|
|
@ -12,10 +22,7 @@ ul.tags > li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
margin: 0;
|
||||||
|
|
||||||
ul.tags > li:first-child {
|
|
||||||
margin-inline-start: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tags > li:hover {
|
ul.tags > li:hover {
|
||||||
|
|
@ -28,6 +35,7 @@ ul.tags > li > a {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.6rem 1rem;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tags > li > a:hover {
|
ul.tags > li > a:hover {
|
||||||
|
|
@ -35,10 +43,9 @@ ul.tags > li > a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tags > li + li { margin-inline-start: 1rem; }
|
ul.tags > li + li { margin-inline-start: 0; }
|
||||||
ul.tags > li.chevron + li { margin-inline-start: 0 }
|
|
||||||
|
|
||||||
ul.tags > .chevron {
|
.taxonomies > .chevron {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
@ -47,11 +54,7 @@ ul.tags > .chevron {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
padding-inline-start: 1px;
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tags > .chevron:hover {
|
|
||||||
color: var(--tag-spacer-foreground-color);
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Museo_Slab";
|
font-family: "Museo_Slab";
|
||||||
src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
|
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-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -19,39 +19,48 @@
|
||||||
--font-size-scale-factor: 1vmax;
|
--font-size-scale-factor: 1vmax;
|
||||||
--site-header-font-size: 200%;
|
--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;
|
--line-height: 1.5;
|
||||||
--heading-line-height: 1;
|
--heading-line-height: 1;
|
||||||
/* A little extra line height so the descenders don't get clipped */
|
/* A little extra line height so the descenders don't get clipped */
|
||||||
--site-heading-line-height: 1.1;
|
--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 {
|
||||||
a:visited { color: var(--a-color); }
|
text-decoration: none;
|
||||||
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[href]:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.hover-only:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
code { font-family: var(--font-family-monospace); }
|
code {
|
||||||
|
font-family: var(--font-family-monospace);
|
||||||
|
}
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.code .cl {
|
||||||
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer.site {
|
footer.site {
|
||||||
|
|
@ -59,77 +68,43 @@
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 305%; }
|
h1 { font-size: var(--h1-size); }
|
||||||
h2 { font-size: 244%; }
|
h2 { font-size: var(--h2-size); }
|
||||||
h3 { font-size: 195%; }
|
h3 { font-size: var(--h3-size); }
|
||||||
h4 { font-size: 156%; }
|
h4 { font-size: var(--h4-size); }
|
||||||
h5 { font-size: 125%; }
|
h5 { font-size: var(--h5-size); }
|
||||||
h6 { font-size: 100%; }
|
h6 { font-size: var(--h6-size); }
|
||||||
h5, h6 { font-family: var(--font-family-body); }
|
h5, h6 { font-family: var(--font-family-body); }
|
||||||
|
|
||||||
header.site nav > .active { font-weight: bold; }
|
header > span.series::before {
|
||||||
header.site nav > li { color: var(--site-nav-link-color); }
|
content: "↳";
|
||||||
|
}
|
||||||
|
|
||||||
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
header.site h1 > a:hover {
|
||||||
main:has(header > .post-title > h1) h2 { font-size: 195%; }
|
text-decoration: none;
|
||||||
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%; }
|
header.site nav {
|
||||||
main:has(header > .post-title > h1) h6 { font-size: 100%; }
|
list-style: none;
|
||||||
main:has(header > .post-title > h1) :is(h5, h6) { font-family: var(--font-family-body); }
|
}
|
||||||
|
|
||||||
|
header.site nav > .active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: var(--heading-color);
|
|
||||||
font-family: var(--font-family-heading);
|
font-family: var(--font-family-heading);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 1pt;
|
letter-spacing: 1pt;
|
||||||
line-height: var(--heading-line-height);
|
line-height: var(--heading-line-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.site {
|
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));
|
|
||||||
font-family: var(--font-family-site-heading);
|
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 {
|
header.site h1.site {
|
||||||
font-size: var(--site-header-font-size);
|
font-size: var(--site-header-font-size);
|
||||||
|
|
@ -153,20 +128,58 @@
|
||||||
letter-spacing: 0;
|
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 {
|
html {
|
||||||
color: var(--color);
|
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
|
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); }
|
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
||||||
nav.bulleted > li::before { color: var(--heading-color); }
|
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) {
|
nav.bulleted > li::before {
|
||||||
rt { color: rgba(var(--white), 0.5); }
|
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 {
|
@layer utility {
|
||||||
.centered { text-align: center; }
|
.centered { text-align: center; }
|
||||||
.float-right { float: right; }
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
.nobreak { white-space: nowrap; }
|
.nobreak { white-space: nowrap; }
|
||||||
|
|
||||||
.noselect {
|
.noselect {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
@ -23,4 +28,14 @@
|
||||||
.visible { visibility: visible; }
|
.visible { visibility: visible; }
|
||||||
|
|
||||||
article.two-column { columns: 2; }
|
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
|
unsafe: true
|
||||||
highlight:
|
highlight:
|
||||||
anchorLineNos: true
|
anchorLineNos: true
|
||||||
lineNos: true
|
lineNos: false
|
||||||
lineNumbersInTable: false
|
lineNumbersInTable: false
|
||||||
noClasses: false
|
noClasses: false
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,7 @@ twitter: erynofwales
|
||||||
github: erynofwales
|
github: erynofwales
|
||||||
instagram: erynofwales
|
instagram: erynofwales
|
||||||
description: Home page of Eryn Rachel Wells
|
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:
|
resources:
|
||||||
- name: me
|
- name: me
|
||||||
src: me.jpeg
|
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
|
{{% section class=flow %}}
|
||||||
alt="A photo of me, wearing a hat, standing in front of a stone background">}}
|
|
||||||
|
{{< 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
|
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,
|
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.
|
I speak English natively, and Spanish too, though I always need more practice.
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
||||||
## Hobbies
|
## Hobbies
|
||||||
|
|
||||||
I've been a musician for most of my life. I started on the piano at age seven,
|
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%);
|
width: min(200px, 25%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,18 @@ resources:
|
||||||
- name: gay
|
- name: gay
|
||||||
title: The Gayest Place in Town is my Therapist's Office
|
title: The Gayest Place in Town is my Therapist's Office
|
||||||
src: gay.jpeg
|
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
|
categories: Test
|
||||||
series: "Testing Erynwells.me"
|
series: "Testing Erynwells.me"
|
||||||
tags: ["Test A", "Test B", "テスト"]
|
tags: ["Test A", "Test B", "テスト"]
|
||||||
toc: open
|
toc: open
|
||||||
---
|
---
|
||||||
|
|
||||||
# Body Text
|
## Body Text
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
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
|
aliquam faucibus purus in massa. Amet consectetur adipiscing elit ut aliquam
|
||||||
purus sit. Tincidunt dui ut ornare lectus sit amet est.
|
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
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
incididunt ut labore et dolore `magna aliqua`.
|
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
|
Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare
|
||||||
lectus sit amet est.
|
lectus sit amet est.
|
||||||
|
|
||||||
# Figures
|
## Figures
|
||||||
|
|
||||||
Iaculis nunc sed augue lacus viverra vitae congue. Non curabitur gravida arcu
|
Iaculis nunc sed augue lacus viverra vitae congue. Non curabitur gravida arcu
|
||||||
ac. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Scelerisque in
|
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
|
ullamcorper morbi tincidunt. Tellus elementum sagittis vitae et leo duis. Nunc
|
||||||
sed id semper risus in hendrerit gravida.
|
sed id semper risus in hendrerit gravida.
|
||||||
|
|
||||||
# Block Quotes
|
## Block Quotes
|
||||||
|
|
||||||
Here's a block quote:
|
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
|
aliquet eget sit amet tellus cras adipiscing enim. Libero nunc consequat
|
||||||
interdum varius sit amet mattis vulputate enim.
|
interdum varius sit amet mattis vulputate enim.
|
||||||
|
|
||||||
# Lists
|
## Lists
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
||||||
|
|
@ -158,30 +163,30 @@ Great! Here's a nested list:
|
||||||
|
|
||||||
Woah!
|
Woah!
|
||||||
|
|
||||||
# Headers
|
## Headers
|
||||||
|
|
||||||
Here are some headers.
|
Here are some headers.
|
||||||
|
|
||||||
# H1
|
### H3
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
|
||||||
ultrices. Augue eget arcu dictum varius duis at consectetur lorem donec. Donec
|
ultrices. Augue eget arcu dictum varius duis at consectetur lorem donec. Donec
|
||||||
ac odio tempor orci dapibus ultrices.
|
ac odio tempor orci dapibus ultrices.
|
||||||
|
|
||||||
## H2
|
#### H4
|
||||||
|
|
||||||
Et leo duis ut diam. Pellentesque id nibh tortor id aliquet lectus. Ac orci
|
Et leo duis ut diam. Pellentesque id nibh tortor id aliquet lectus. Ac orci
|
||||||
`phasellus` egestas tellus rutrum tellus pellentesque eu. Amet commodo nulla
|
`phasellus` egestas tellus rutrum tellus pellentesque eu. Amet commodo nulla
|
||||||
facilisi nullam vehicula ipsum.
|
facilisi nullam vehicula ipsum.
|
||||||
|
|
||||||
### H3
|
##### H5
|
||||||
|
|
||||||
Posuere urna nec tincidunt praesent semper feugiat nibh. Phasellus vestibulum
|
Posuere urna nec tincidunt praesent semper feugiat nibh. Phasellus vestibulum
|
||||||
lorem sed risus. Consequat semper viverra nam libero justo laoreet sit amet
|
lorem sed risus. Consequat semper viverra nam libero justo laoreet sit amet
|
||||||
cursus.
|
cursus.
|
||||||
|
|
||||||
#### H4
|
###### H6
|
||||||
|
|
||||||
Ipsum dolor sit amet consectetur adipiscing elit. Molestie ac feugiat sed lectus
|
Ipsum dolor sit amet consectetur adipiscing elit. Molestie ac feugiat sed lectus
|
||||||
vestibulum mattis ullamcorper velit. Sem viverra aliquet eget sit amet tellus
|
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
|
consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus
|
||||||
sit amet est.
|
sit amet est.
|
||||||
|
|
||||||
# {{< ruby Japanese ja >}}日本語{{< /ruby >}}
|
## {{% ruby Japanese ja %}}日本語{{% /ruby %}}
|
||||||
|
|
||||||
Here's some text in {{< ruby Japanese ja >}}日本語{{< /ruby >}} with {{< ruby
|
Here's some text in {{< ruby Japanese ja >}}日本語{{< /ruby >}} with {{< ruby
|
||||||
furigana ja >}}ふりがな{{< /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 "body" . -}}
|
||||||
{{- block "before" . -}}{{- end -}}
|
{{- block "before" . -}}{{- end -}}
|
||||||
{{- block "header" . -}}{{ partial "header.html" .}}{{- 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 }}
|
{{ block "main" . }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
{{- block "footer" . -}}
|
{{- block "footer" . -}}
|
||||||
|
|
|
||||||
|
|
@ -3,29 +3,26 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<header class="page">
|
<header>
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{{ partial "table_of_contents.html" . }}
|
{{ partial "ruby_controls.html" . }}
|
||||||
{{ partial "ruby_controls.html" . }}
|
|
||||||
|
|
||||||
{{- $hasContent := false -}}
|
{{- $hasContent := false -}}
|
||||||
{{ with .Content }}
|
{{ with .Content }}
|
||||||
{{- $hasContent = true -}}
|
{{- $hasContent = true -}}
|
||||||
{{ . }}
|
{{ . }}
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ if .Params.posts | default true }}
|
|
||||||
{{ if and $hasContent }}
|
|
||||||
<h2>Posts</h2>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<ul>
|
{{ if .Params.posts | default true }}
|
||||||
{{- range .Pages -}}
|
{{ if $hasContent }}
|
||||||
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
<h2>Posts</h2>
|
||||||
{{- end -}}
|
{{ end }}
|
||||||
</ul>
|
|
||||||
|
{{- range .Pages -}}
|
||||||
|
{{ .Render "li_grid_with_date" }}
|
||||||
|
{{- end -}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,20 +3,38 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<header class="page">
|
<header class="page">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
|
<article>
|
||||||
|
{{ .Content }}
|
||||||
|
|
||||||
{{ .Content }}
|
{{- range .Data.Terms.Alphabetical -}}
|
||||||
|
<h2>{{ .Name | title }}</h2>
|
||||||
|
|
||||||
{{- range .Data.Terms.Alphabetical -}}
|
{{- range .WeightedPages -}}
|
||||||
<h2>{{ .Name | title }}</h2>
|
<article class="post">
|
||||||
<ul>
|
<header>
|
||||||
{{- range .WeightedPages -}}
|
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||||
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
<h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||||
{{- end -}}
|
</header>
|
||||||
</ul>
|
|
||||||
{{- end -}}
|
{{ 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 }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "footer" }}
|
{{ define "footer" }}
|
||||||
|
|
|
||||||
0
layouts/about/section.atom.atom
Normal file
0
layouts/about/section.atom.atom
Normal file
|
|
@ -1,11 +1,19 @@
|
||||||
<li>
|
<article class="post">
|
||||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January" }}</time>
|
<header>
|
||||||
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "2" }}</time>
|
<time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
|
||||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
<h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||||
<div class="category">
|
</header>
|
||||||
{{ with index (.GetTerms "categories") 0 }}
|
|
||||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
{{ if .Description }}
|
||||||
{{ end }}
|
<p>{{ .Description }}</p>
|
||||||
</div>
|
{{ 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" . }}
|
{{ partial "development/draft_tag.html" . }}
|
||||||
</li>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,13 @@
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{- range .Pages.ByDate.GroupByDate "2006" -}}
|
{{- range .Pages.ByDate.GroupByDate "2006" -}}
|
||||||
<h5>{{ .Key | title }}</h5>
|
<h1 class="date"><a id="{{ .Key }}">{{ .Key | title }}</a></h1>
|
||||||
<ul>
|
|
||||||
{{- range .Pages -}}
|
{{- range .Pages -}}
|
||||||
{{- if or (not .Draft) (not hugo.IsProduction) -}}
|
{{- if or (not .Draft) (not hugo.IsProduction) -}}
|
||||||
{{- .Render "li_grid_with_date" -}}
|
{{- .Render "li_grid_with_date" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ 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" }}
|
{{ define "body" }}
|
||||||
<main>
|
<main>
|
||||||
<header class="platter">
|
<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">
|
<div id="content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -9,213 +9,3 @@
|
||||||
</header>
|
</header>
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ 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>
|
<header>
|
||||||
{{ partial "development/draft_tag.html" . }}
|
<h1>{{ .Title }}</h1>
|
||||||
<div class="post-title">
|
|
||||||
<h1>{{ .Title }}</h1>
|
{{ if and (not (eq .Section "about")) .Date }}
|
||||||
{{ if and (not (eq .Section "about")) .Date }}
|
<time>{{ .Date | time.Format "January 2, 2006" }}</time>
|
||||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
{{- if .Params.series -}}
|
{{- if .Params.series -}}
|
||||||
{{- $series := .GetTerms "series" -}}
|
{{- $series := .GetTerms "series" -}}
|
||||||
|
|
||||||
{{- if gt (len $series) 1 -}}
|
{{- if gt (len $series) 1 -}}
|
||||||
{{- errorf "More than one series for %s" .Permalink -}}
|
{{- errorf "More than one series for %s" .Permalink -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with index $series 0 -}}
|
{{- with index $series 0 -}}
|
||||||
<span class="series"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
|
<span class="series">
|
||||||
|
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
|
</span>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
|
{{ partial "development/draft_tag.html" . }}
|
||||||
</header>
|
</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 -}}
|
<div class="taxonomies">
|
||||||
<ul class="tags">
|
{{- if or .Params.categories .Params.tags -}}
|
||||||
{{- if .Params.categories -}}
|
<ul class="tags">
|
||||||
{{- $categories := .GetTerms "categories" -}}
|
{{- if .Params.categories -}}
|
||||||
{{- if gt (len $categories) 1 -}}
|
{{- $categories := .GetTerms "categories" -}}
|
||||||
{{- errorf "More than one category for %q" .Path -}}
|
{{- 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 -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with index (.GetTerms "categories") 0 -}}
|
<ul class="tags">
|
||||||
<li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
|
{{- if .Params.tags -}}
|
||||||
|
{{- range .GetTerms "tags" -}}
|
||||||
|
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
|
||||||
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
</div>
|
||||||
{{- 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 -}}
|
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,25 @@
|
||||||
{{- $url := .RelPermalink -}}
|
{{- $url := .RelPermalink -}}
|
||||||
<header class="site">
|
<header class="site">
|
||||||
<div class="platter grid">
|
<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>
|
<a class="site-name" href="{{ `` | absURL }}">{{ partial "site_name.html" site.Params.shortTitle }}</a>
|
||||||
</h1>
|
</h1>
|
||||||
{{ partial "site_nav.html" . }}
|
{{ partial "site_nav.html" . }}
|
||||||
<nav class="social">
|
<nav class="social">
|
||||||
{{ with site.Menus.social }}
|
{{ with site.Menus.social }}
|
||||||
{{- range . -}}
|
{{- range . -}}
|
||||||
{{- $id := .Identifier -}}
|
{{- $id := .Identifier -}}
|
||||||
{{- $targetBlank := .Params.targetBlank | default true -}}
|
{{- $targetBlank := .Params.targetBlank | default true -}}
|
||||||
<li id="social-menu-{{ $id }}">
|
<li id="social-menu-{{ $id }}">
|
||||||
<a href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}">
|
<a
|
||||||
<img alt="{{ .Name }}">
|
href="{{ .URL }}"
|
||||||
</a>
|
{{ if $targetBlank }}
|
||||||
</li>
|
target="_blank"
|
||||||
|
{{ end }}
|
||||||
|
aria-label="{{ .Name }}">
|
||||||
|
<img alt="{{ .Name }}" width=20 height=20>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,24 @@
|
||||||
{{ $stylesheets := slice }}
|
{{ $stylesheets := slice }}
|
||||||
{{ with .Resources.Match "*.css" }}
|
{{ with .Resources.Match "*.css" }}
|
||||||
{{ range . }}
|
{{ range . }}
|
||||||
{{ $stylesheets = $stylesheets | append (. | resources.ExecuteAsTemplate .Name .) }}
|
{{ $stylesheets = $stylesheets | append . }}
|
||||||
{{ end }}
|
|
||||||
{{ if hugo.IsProduction }}
|
|
||||||
{{ $stylesheets = slice ($stylesheets
|
|
||||||
| resources.Concat (printf "%s/page.css" $.File.Dir)
|
|
||||||
| fingerprint "md5") }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ 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")
|
{{ $stylesheets := slice (resources.Get "styles/railroad.css")
|
||||||
(resources.Get "styles/railroad.css")
|
|
||||||
(resources.Get "styles/monokai.css")
|
(resources.Get "styles/monokai.css")
|
||||||
| append (resources.Match "styles/root/*.css" | sort) }}
|
| append (resources.Match "styles/root/*.css" | sort) }}
|
||||||
{{ if not hugo.IsProduction }}
|
{{ if not hugo.IsProduction }}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,16 @@
|
||||||
{{ partial "content_header.html" . }}
|
{{ partial "content_header.html" . }}
|
||||||
|
|
||||||
|
{{ partial "table_of_contents.html" . }}
|
||||||
|
|
||||||
{{- $layout := .Params.layout -}}
|
{{- $layout := .Params.layout -}}
|
||||||
<article{{ with $layout }} class="{{ . }}"{{ end }}>
|
{{- $content := .Content -}}
|
||||||
{{ .Content }}
|
{{ with $layout := .Params.layout }}
|
||||||
</article>
|
<article class="{{ $layout }}">
|
||||||
|
{{ $content }}
|
||||||
|
</article>
|
||||||
|
{{ else }}
|
||||||
|
{{ $content }}
|
||||||
|
{{ end}}
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
{{ partial "footer_tags.html" . }}
|
{{ partial "footer_tags.html" . }}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,15 @@
|
||||||
<nav class="site bulleted">
|
<nav class="site bulleted">
|
||||||
{{ with site.Menus.main }}
|
{{ with site.Menus.main }}
|
||||||
{{- range . -}}
|
{{- 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 -}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,13 @@
|
||||||
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
|
{{- $gridSize := $.Site.Params.photos.thumbnailSize -}}
|
||||||
{{- $thumbnail = $thumbnail.Crop "600x600" -}}
|
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" $gridSize "Height" $gridSize) -}}
|
||||||
|
{{- $thumbnail = $thumbnail.Crop (printf "%dx%d" $gridSize $gridSize) -}}
|
||||||
{{- $altText := $thumbnail.Params.alt -}}
|
{{- $altText := $thumbnail.Params.alt -}}
|
||||||
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
|
<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>
|
</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 }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{- if .Title -}}
|
{{- $photos := partial "photos/list.html" . -}}
|
||||||
{{ partial "content_header.html" . }}
|
{{ if eq (len $photos) 0 }}
|
||||||
{{- end -}}
|
{{ errorf "Missing photo from photos page %q" .Path }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{- $photos := partial "photos/list.html" . -}}
|
{{ if eq (len $photos) 1 }}
|
||||||
{{ if eq (len $photos) 0 }}
|
{{- $img := index $photos 0 -}}
|
||||||
{{ errorf "Missing photo from photos page %q" .Path }}
|
<figure>
|
||||||
{{ end }}
|
<img
|
||||||
|
src="{{ $img.RelPermalink }}"
|
||||||
|
{{ with $img.Params.alt }}
|
||||||
|
alt="{{ . }}"
|
||||||
|
{{ end }}
|
||||||
|
height={{ $img.Height }}>
|
||||||
|
</figure>
|
||||||
|
|
||||||
{{ if eq (len $photos) 1 }}
|
<article>
|
||||||
{{- $img := index $photos 0 -}}
|
<h1>{{ .Title }}</h1>
|
||||||
<figure><img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}></figure>
|
{{ .Content }}
|
||||||
|
</article>
|
||||||
|
|
||||||
{{ .Content }}
|
{{- if .Params.photo_details | default true -}}
|
||||||
|
{{- partial "photo_exif_table.html" $img.Exif -}}
|
||||||
|
|
||||||
{{- if .Params.photo_details | default true -}}
|
{{- if in ($.Site.BaseURL | string) "localhost" -}}
|
||||||
{{- partial "photo_exif_table.html" $img.Exif -}}
|
{{- partial "development/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>
|
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
{{- end -}}
|
||||||
</figure>
|
{{ else }}
|
||||||
{{ end }}
|
<figure>
|
||||||
|
<ul class="carousel">
|
||||||
|
{{- range $photos -}}
|
||||||
|
<li>{{ . }}</li>
|
||||||
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
</figure>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
{{ partial "footer_tags.html" . }}
|
{{ partial "footer_tags.html" . }}
|
||||||
</footer>
|
</footer>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "footer" }}
|
{{ define "footer" }}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
|
{{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
|
||||||
{{- $id := .Get "id" -}}
|
{{- $id := .Get "id" -}}
|
||||||
{{- $classes := .Get "class" -}}
|
{{- $classes := .Get "class" -}}
|
||||||
{{- $alt := .Get "alt" -}}
|
{{- $alt := .Get "alt" | default $img.Params.alt -}}
|
||||||
{{- $width := .Get "width" -}}
|
{{- $width := .Get "width" -}}
|
||||||
{{- $resized_img := $img.Resize (printf "%dx%d" $width $width) -}}
|
{{- $resized_img := $img.Resize (printf "%dx%d" $width $width) -}}
|
||||||
<img
|
<img
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,9 @@
|
||||||
</div>
|
</div>
|
||||||
{{ if and $shouldShowTitle -}}
|
{{ if and $shouldShowTitle -}}
|
||||||
{{- range $imgs -}}
|
{{- range $imgs -}}
|
||||||
<figcaption>{{ .Title }}</figcaption>
|
{{- if gt (len .Title) 0 -}}
|
||||||
|
<figcaption>{{ .Title }}</figcaption>
|
||||||
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</figure>
|
</figure>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- with $photoPage := $.Page.GetPage (printf "photos/%s" (.Get 0)) -}}
|
{{- with $photoPage := $.Page.GetPage (printf "photos/%s" (.Get 0)) -}}
|
||||||
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 1280 "Height" 1280) -}}
|
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 1280 "Height" 1280) -}}
|
||||||
{{- $altText := $thumbnail.Params.alt | default .Title -}}
|
{{- $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 }}>
|
<img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
|
||||||
</a>
|
</a>
|
||||||
{{- else -}}
|
{{- 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