chore: styles
This commit is contained in:
parent
fa2ac170b3
commit
3bc48bd311
44 changed files with 248 additions and 454 deletions
|
|
@ -68,3 +68,4 @@
|
|||
/posts/2023/now-page-update-matter-favorites/ /posts/2023/now-page-update-favorite-articles-from-matter/ 301
|
||||
/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji/ /posts/2023/displaying-now-playing-data-with-matching-emoji-using-netlify-edge-functions-and-eleventy/ 301
|
||||
/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301
|
||||
/posts/2022/simple-api-fetch-hooks-with-swr/ /posts/2022/simple-data-fetching-with-custom-react-hooks-and-swr 301
|
||||
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.6.7",
|
||||
"version": "2.8.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "2.6.7",
|
||||
"version": "2.8.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "4.0.1",
|
||||
|
|
@ -1166,9 +1166,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001677",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
|
||||
"integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
|
||||
"version": "1.0.30001678",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz",
|
||||
"integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -1355,9 +1355,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
|
||||
"integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
@ -1791,9 +1791,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.52",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
|
||||
"integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
|
||||
"version": "1.5.55",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz",
|
||||
"integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.6.7",
|
||||
"version": "2.8.1",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ img {
|
|||
border: var(--border-default);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,6 +209,10 @@ ol {
|
|||
a {
|
||||
color: var(--accent-color);
|
||||
|
||||
&.back-link {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
& > img {
|
||||
border: var(--border-default);
|
||||
}
|
||||
|
|
@ -216,15 +221,13 @@ a {
|
|||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
&:is(:hover, :focus, :active) {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
& > img {
|
||||
border-color: var(--accent-color-hover);
|
||||
border: var(--border-default-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
|
@ -285,15 +288,18 @@ hr {
|
|||
/* articles */
|
||||
article {
|
||||
margin-bottom: var(--spacing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
&:not([class], :last-of-type) {
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
&.intro p {
|
||||
&.intro {
|
||||
border-bottom: var(--border-gray);
|
||||
|
||||
& p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
|
|
@ -313,27 +319,6 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
p + .associated-media,
|
||||
img + .associated-media,
|
||||
.banner + .associated-media {
|
||||
margin-top: var(--spacing-base);
|
||||
border-top: var(--border-gray);
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
& .footnotes-list {
|
||||
margin-bottom: 0;
|
||||
|
||||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(~ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
padding: var(--spacing-xs);
|
||||
|
|
@ -348,6 +333,7 @@ table {
|
|||
white-space: nowrap;
|
||||
caption-side: bottom;
|
||||
overscroll-behavior: none;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
table,
|
||||
|
|
@ -441,13 +427,9 @@ td:first-of-type,
|
|||
.default-wrapper {
|
||||
padding-top: var(--spacing-2xl);
|
||||
|
||||
& > h2 {
|
||||
& > h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > a + h2 {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
|
|
|
|||
|
|
@ -86,10 +86,6 @@ ol {
|
|||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:where(hr) {
|
||||
border: none;
|
||||
border-block-start: 1px solid;
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
|
||||
/* borders */
|
||||
--border-default: 1px solid var(--accent-color);
|
||||
--border-default-hover: 1px solid var(--accent-color-hover);
|
||||
--border-gray: 1px solid var(--gray-light);
|
||||
|
||||
/* fonts */
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.addon-links {
|
||||
margin-top: var(--spacing-base);
|
||||
display: grid;
|
||||
gap: var(--sizing-base);
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
|
|
@ -8,17 +7,8 @@
|
|||
grid-template-columns: var(--grid-columns-two);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& article {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
grid-template-columns: var(--grid-columns-four);
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
* + .banner,
|
||||
:not(* + .banner) .banner:first-of-type {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
.banner:has(+ *),
|
||||
:not(* + .banner) .banner:last-of-type {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: var(--spacing-md);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
border: 1px solid;
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
|
|
@ -62,9 +53,7 @@
|
|||
|
||||
border-color: var(--banner-accent-color);
|
||||
|
||||
& p a:hover,
|
||||
& p a:active,
|
||||
& p a:focus {
|
||||
& p a:is(:hover, :active, :focus) {
|
||||
color: var(--banner-accent-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@ button,
|
|||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
& + hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:not(.active):is(:hover, :active, :focus, :focus-within) {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
border: 2px solid var(--accent-color-hover);
|
||||
transition: background-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out),
|
||||
border var(--transition-duration-default) var(--transition-ease-in-out),
|
||||
color var(--transition-duration-default) var(--transition-ease-in-out);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
|
||||
textarea,
|
||||
select {
|
||||
color: var(--text-color);
|
||||
|
|
@ -19,13 +18,16 @@ select {
|
|||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
form:has(+ *),
|
||||
label:has(input):has(+ *) input,
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *),
|
||||
textarea:has(+ *) {
|
||||
form,
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
|
||||
textarea {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.search__form {
|
||||
margin-top: 0;
|
||||
|
||||
|
|
@ -34,6 +36,18 @@ textarea:has(+ *) {
|
|||
}
|
||||
}
|
||||
|
||||
.search__form--type {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--sizing-md);
|
||||
border: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.search__results {
|
||||
margin: 0 0 var(--spacing-base);
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.mastodon-post-wrapper {
|
||||
& dl,
|
||||
dt {
|
||||
& dt {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
a + .media-grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
|
|
@ -10,15 +6,6 @@ a + .media-grid {
|
|||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
:is(&.poster, &.square, &.vertical) img {
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:is(&.poster, &.vertical) img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.poster {
|
||||
grid-template-columns: var(--grid-poster);
|
||||
|
||||
|
|
@ -33,10 +20,6 @@ a + .media-grid {
|
|||
& a {
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
}
|
||||
|
||||
& img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
|
|
@ -47,40 +30,21 @@ a + .media-grid {
|
|||
}
|
||||
}
|
||||
|
||||
&:is(.poster, .square, .vertical) img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& .item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: var(--box-shadow-media);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
transition: border-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
& a:hover .item::after,
|
||||
& a:active .item::after {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
color: var(--color-lightest);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 0 var(--spacing-sm);
|
||||
bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
& .header,
|
||||
& .subheader {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,41 @@
|
|||
menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.menu-primary {
|
||||
& .menu-primary {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
top: calc(var(--spacing-3xl) * 1.75);
|
||||
left: 0;
|
||||
gap: 0;
|
||||
margin-top: calc(var(--spacing-3xl) * 2.25);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
& > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: var(--spacing-sm) 0;
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
& a,
|
||||
& .active {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& .active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& .icon > svg,
|
||||
& .active > svg {
|
||||
:is(.icon, .active) > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
:is(.icon, .active) > span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,29 +45,29 @@ menu {
|
|||
display: none;
|
||||
|
||||
&:checked + .menu-button-container {
|
||||
.menu-closed {
|
||||
& .menu-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-open {
|
||||
& .menu-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) + .menu-button-container {
|
||||
.menu-closed {
|
||||
& .menu-closed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-open {
|
||||
& .menu-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .menu-primary li {
|
||||
height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
&:checked ~ .menu-primary li {
|
||||
|
|
@ -89,18 +77,11 @@ menu {
|
|||
&:first-child {
|
||||
border-top: var(--border-gray);
|
||||
}
|
||||
|
||||
& a,
|
||||
& .active {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button-container {
|
||||
display: unset;
|
||||
width: var(--sizing-svg-base);
|
||||
height: var(--sizing-svg-base);
|
||||
|
||||
& svg {
|
||||
cursor: pointer;
|
||||
|
|
@ -117,38 +98,24 @@ menu {
|
|||
top: unset;
|
||||
left: unset;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.menu-primary > li {
|
||||
width: auto;
|
||||
height: auto;
|
||||
& > li {
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
& .icon > svg,
|
||||
& .active > svg {
|
||||
:is(.icon, .active) > svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
:is(.icon, .active) > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggle ~ .menu-primary li {
|
||||
height: unset;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#menu-toggle ~ .menu-primary li,
|
||||
#menu-toggle:checked ~ .menu-primary li {
|
||||
height: unset;
|
||||
border: none;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button-container {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,36 @@
|
|||
.modal-wrapper {
|
||||
.modal-wrapper,
|
||||
.modal-body {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: var(--modal-overlay-background);
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
background: var(--modal-overlay-background);
|
||||
z-index: 3;
|
||||
|
||||
& .modal-body {
|
||||
position: fixed;
|
||||
.modal-body {
|
||||
background: var(--background-color);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
inset: 0;
|
||||
overflow-y: scroll;
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-lg) var(--spacing-base);
|
||||
overflow-y: auto;
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
& h3 {
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-height: 75%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 75%;
|
||||
max-height: 75%;
|
||||
inset: 12.5%;
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
& .modal-close {
|
||||
.modal-close {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: var(--sizing-svg-base);
|
||||
width: var(--sizing-svg-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,12 +53,10 @@
|
|||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
|
||||
& svg {
|
||||
svg {
|
||||
stroke: var(--accent-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
&:is(:hover, :focus, :active) {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
.music-chart {
|
||||
margin-bottom: var(--spacing-base);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
& li:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .item {
|
||||
|
|
@ -20,22 +15,21 @@
|
|||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
margin-top: var(--spacing-sm);
|
||||
max-width: 40%;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,6 +68,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 85%;
|
||||
|
|
@ -98,37 +93,11 @@
|
|||
|
||||
& time {
|
||||
margin-top: var(--spacing-sm);
|
||||
margin-left: 0;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-left: var(--spacing-lg);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
& .item .meta {
|
||||
max-width: 80%;
|
||||
|
||||
& .title {
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
& .subtext p {
|
||||
margin: 0;
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
& button {
|
||||
background: none;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
|
||||
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
|
||||
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover,
|
||||
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:active {
|
||||
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:is(:hover, :active),
|
||||
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) {
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
|
|
@ -20,8 +20,4 @@
|
|||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + button[data-toggle-button]:has(+ *) {
|
||||
margin: 0 0 var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,11 @@ youtube-video {
|
|||
overflow: hidden;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color-hover);
|
||||
border: var(--border-default-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
&:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
</h1>
|
||||
</section>
|
||||
<div class="default-wrapper">
|
||||
<article class="intro">
|
||||
<p>
|
||||
<xsl:value-of select="/rss/channel/description" />
|
||||
</p>
|
||||
|
|
@ -39,11 +40,12 @@
|
|||
<p>
|
||||
<a href="/feeds">View more of the feeds from my site.</a>
|
||||
</p>
|
||||
</article>
|
||||
<hr />
|
||||
<section>
|
||||
<xsl:for-each select="/rss/channel/item">
|
||||
<div class="item">
|
||||
<p class="date">Published: <xsl:value-of select="pubDate" /></p>
|
||||
<time>Published: <xsl:value-of select="pubDate" /></time>
|
||||
<h3>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@layer reset, defaults, base, page, components, plugins;
|
||||
|
||||
/* style resets */
|
||||
@import url("./reset.css") layer(reset);
|
||||
@import url("./base/reset.css") layer(reset);
|
||||
|
||||
/* core defaults */
|
||||
@import url("./defaults/fonts.css") layer(defaults);
|
||||
@import url("./defaults/vars.css") layer(defaults);
|
||||
@import url("./base/fonts.css") layer(defaults);
|
||||
@import url("./base/vars.css") layer(defaults);
|
||||
|
||||
/* base styles */
|
||||
@import url("./base/index.css") layer(base);
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
|
||||
& img {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,27 @@
|
|||
:is(.book-entry, .book-focus) img {
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-vertical);
|
||||
}
|
||||
|
||||
.book-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
&:not(:last-of-type) {
|
||||
padding-bottom: var(--spacing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-base);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& .media-meta .description {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a:has(img) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& img {
|
||||
max-width: calc(var(--sizing-3xl) * 4);
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-vertical);
|
||||
}
|
||||
|
||||
& .media-meta {
|
||||
|
|
@ -38,8 +33,8 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& .description {
|
||||
margin-bottom: var(--spacing-base);
|
||||
& .description p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
|
|
@ -55,9 +50,6 @@
|
|||
}
|
||||
|
||||
.book-focus {
|
||||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
||||
& .book-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -70,6 +62,10 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
}
|
||||
|
||||
& .media-meta {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,34 @@
|
|||
.contact-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
gap: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
grid-template-columns: var(--grid-columns-two);
|
||||
}
|
||||
|
||||
& label.hp,
|
||||
& .hp,
|
||||
& label > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& .column {
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.description {
|
||||
& .column.description {
|
||||
& p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-right: var(--spacing-xl);
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-success-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
|
||||
& h2 {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,11 @@
|
|||
&:not(:last-of-type) {
|
||||
border-bottom: var(--border-gray);
|
||||
margin-bottom: var(--spacing-base);
|
||||
padding-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
& .date {
|
||||
display: block;
|
||||
& time {
|
||||
color: var(--gray-dark);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
|
|
@ -26,21 +23,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& ol > li p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& footer {
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
|
||||
& hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: var(--grid-columns-two);
|
||||
|
|
|
|||
|
|
@ -17,3 +17,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:is(:hover, :active, :focus) .media-overlay::after {
|
||||
border: var(--border-default-hover);
|
||||
transition: border-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
.media-overlay::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: var(--border-default);
|
||||
box-shadow: var(--box-shadow-media);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
.associated-media {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
|
@ -1,23 +1,12 @@
|
|||
.artist-focus,
|
||||
.genre-focus {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.genre-focus [data-toggle-content] p:last-of-type {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.artist-focus {
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 240px;
|
||||
max-width: calc(var(--sizing-3xl) * 6.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,11 +32,6 @@
|
|||
|
||||
& table + p {
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--spacing-base);
|
||||
margin-bottom: 0;
|
||||
margin: var(--spacing-base) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.concert-list {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,16 @@
|
|||
a:hover > .watching.hero::after,
|
||||
a:active > .watching.hero::after {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
.watching {
|
||||
&.hero {
|
||||
.watching.hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
color: white;
|
||||
color: var(--color-lightest);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: var(--spacing-sm);
|
||||
bottom: var(--spacing-sm);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -30,8 +18,6 @@ a:active > .watching.hero::after {
|
|||
|
||||
& .subheader {
|
||||
font-size: var(--font-size-sm);
|
||||
display: inline-flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
& .header,
|
||||
|
|
@ -40,37 +26,4 @@ a:active > .watching.hero::after {
|
|||
text-shadow: var(--text-shadow-default);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: var(--box-shadow-media);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
transition: border-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
&.focus {
|
||||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
||||
& .media-meta {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
& .footnotes {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a + .poster.grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
.webring-wrapper {
|
||||
.webring-wrapper,
|
||||
.webring-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.webring-wrapper {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
|
|
@ -11,13 +14,7 @@
|
|||
}
|
||||
|
||||
& .webring-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
storage="local"
|
||||
transition-duration="10ms"
|
||||
>
|
||||
<span class="loading client-side"> {{ nowPlaying }}</span>
|
||||
<span class="loading client-side">{{ nowPlaying }}</span>
|
||||
<span class="content"></span>
|
||||
<noscript>
|
||||
<span>{{ nowPlaying }}</span>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<article class="intro">
|
||||
{{ intro }}
|
||||
<p class="music">{% render "blocks/now-playing.liquid", nowPlaying:nowPlaying %}</p>
|
||||
</article>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
Recent activity
|
||||
</h2>
|
||||
<ul>
|
||||
<li><span class="music">Last track listened to:</span> {% render "blocks/now-playing.liquid", nowPlaying:nowPlaying %}</li>
|
||||
<li><span class="music">Top track this week:</span> {{ track.track_name }} by <a href="{{ track.artist_url }}">{{ track.artist_name }}</a></li>
|
||||
<li><span class="tv">Last episode watched:</span> <strong class="highlight-text">{{ show.formatted_episode }}</strong> of <a href="{{ show.url }}">{{ show.title }}</a></li>
|
||||
<li><span class="movies">Last movie watched:</span> <a href="{{ movie.url }}">{{ movie.title }}</a>{%- if movie.rating %} ({{ movie.rating }}){%- endif -%}</li>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{%- assign alt = item.grid.alt | replaceQuotes -%}
|
||||
{%- assign imageUrl = item.grid.image -%}
|
||||
<a href="{{ item.grid.url }}" title="{{ alt }}">
|
||||
<div class="item">
|
||||
<div class="item media-overlay">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ item.grid.title }}</div>
|
||||
<div class="subheader">{{ item.grid.subtext }}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<a href="{{ movie.url }}">
|
||||
<div class="watching hero">
|
||||
<div class="watching media-overlay hero">
|
||||
<div class="meta-text">
|
||||
<div class="header">{{ movie.title }}</div>
|
||||
<div class="subheader">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ schema: books-year
|
|||
{%- assign currentYear = 'now' | date: "%Y" -%}
|
||||
{%- assign yearString = year.value | append: '' -%}
|
||||
{%- assign currentYearString = currentYear | append: '' -%}
|
||||
<a href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
|
||||
<a href="/books" class="back-link">{% tablericon "arrow-left" %} Back to books</a>
|
||||
<h2>{{ year.value }} / Books</h2>
|
||||
{% if yearString == currentYearString %}
|
||||
<p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.{%- if favoriteBooks %} Among my favorites are {{ favoriteBooks }}.{%- endif -%}</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
permalink: /
|
||||
---
|
||||
{% render "home/intro.liquid" intro:globals.intro %}
|
||||
{% render "home/recent-activity.liquid" music:music, nowPlaying:nowPlaying.content, books:books.currentYear, tv:tv, movies:movies, links:links %}
|
||||
{% render "home/intro.liquid" intro:globals.intro, nowPlaying:nowPlaying.content %}
|
||||
{% render "home/recent-activity.liquid" music:music, books:books.currentYear, tv:tv, movies:movies, links:links %}
|
||||
{% render "home/recent-posts.liquid" posts:posts %}
|
||||
|
|
@ -11,7 +11,7 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
|
|||
<p>These are concerts I've attended (not all of them — just the ones I could remember or glean from emails, photo metadata et al). I've been to at least <strong class="highlight-text">{{ concerts | size }}</strong> shows. <a href="/music">You can also take a look at the music I've been listening to lately</a>.</p>
|
||||
<hr />
|
||||
{%- endif -%}
|
||||
<ul class="concert-list">
|
||||
<ul>
|
||||
{%- for concert in pagination.items -%}
|
||||
{%- capture artistName -%}
|
||||
{% if concert.artist.url %}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ schema: music-index
|
|||
<h2>{{ title }}</h2>
|
||||
<p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | mediaLinks: "genre", 5 }}.</p>
|
||||
<p><strong class="highlight-text">Take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/concerts">check out the concerts I've been to.</a></p>
|
||||
<p><span class="music">Last track listened to:</span> {% render "blocks/now-playing.liquid", nowPlaying:nowPlaying.content %}</p>
|
||||
<p class="music">{% render "blocks/now-playing.liquid", nowPlaying:nowPlaying.content %}</p>
|
||||
<hr />
|
||||
<h3 id="artists">
|
||||
{% tablericon "microphone-2" %}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ pagination:
|
|||
permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
|
||||
schema: favorite-movies
|
||||
---
|
||||
<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<a href="/watching" class="back-link">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="watching">{{ title }}</h2>
|
||||
<p>These are my favorite movies. There are many like them, but these are mine.</p>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ pagination:
|
|||
permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
|
||||
schema: favorite-shows
|
||||
---
|
||||
<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<a href="/watching" class="back-link">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
{% if pagination.pageNumber == 0 %}
|
||||
<h2 class="watching">{{ title }}</h2>
|
||||
<p>These are my favorite shows. There are many like them, but these are mine.</p>
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ export const generateArtistHTML = (artist, globals) => {
|
|||
: "";
|
||||
|
||||
return `
|
||||
<a href="/music">${ICON_MAP.arrowLeft} Back to music</a>
|
||||
<a href="/music" class="back-link">${ICON_MAP.arrowLeft} Back to music</a>
|
||||
<article class="artist-focus">
|
||||
<div class="artist-display">
|
||||
<img
|
||||
|
|
@ -301,17 +301,17 @@ export const generateBookHTML = (book, globals) => {
|
|||
const percentage = book["progress"] ? `${book["progress"]}%` : "";
|
||||
const status =
|
||||
book["status"] === "finished"
|
||||
? `Finished on <strong class="highlight-text">${formatDate(
|
||||
? `<span class="sub-meta">Finished on <strong class="highlight-text">${formatDate(
|
||||
book["date_finished"]
|
||||
)}</strong>`
|
||||
)}</strong></span>`
|
||||
: percentage
|
||||
? `<div class="progress-bar-wrapper" title="${percentage}">
|
||||
<div style="width:${percentage}" class="progress-bar"></div>
|
||||
<div class="progress-bar" style="width:${percentage}"></div>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
return `
|
||||
<a href="/books">${
|
||||
<a href="/books" class="back-link">${
|
||||
ICON_MAP["arrowLeft"]
|
||||
} Back to books</a>
|
||||
<article class="book-focus">
|
||||
|
|
@ -352,7 +352,7 @@ export const generateBookHTML = (book, globals) => {
|
|||
? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</span>`
|
||||
: ""
|
||||
}
|
||||
${status ? `<span class="sub-meta">${status}</span>` : ""}
|
||||
${status ? status : ""}
|
||||
</div>
|
||||
</div>
|
||||
${
|
||||
|
|
@ -373,7 +373,7 @@ export const generateGenreHTML = (genre) => {
|
|||
const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5);
|
||||
|
||||
return `
|
||||
<a href="/music">${
|
||||
<a href="/music" class="back-link">${
|
||||
ICON_MAP["arrowLeft"]
|
||||
} Back to music</a>
|
||||
<h2>${genre["name"]}</h2>
|
||||
|
|
@ -411,7 +411,7 @@ export const generateWatchingHTML = (media, globals, type) => {
|
|||
media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]);
|
||||
|
||||
return `
|
||||
<a href="/watching">${
|
||||
<a href="/watching" class="back-link">${
|
||||
ICON_MAP.arrowLeft
|
||||
} Back to watching</a>
|
||||
<article class="watching focus">
|
||||
|
|
|
|||
Reference in a new issue