chore: use remote search
This commit is contained in:
parent
7a2a2aa951
commit
482e13569f
53 changed files with 1184 additions and 3735 deletions
431
src/assets/styles/base/index.css
Normal file
431
src/assets/styles/base/index.css
Normal file
|
|
@ -0,0 +1,431 @@
|
|||
html
|
||||
body {
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
letter-spacing: -.025rem;
|
||||
word-spacing: -.05rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: var(--sizing-md);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-lightest);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
:is(p, ul, ol) a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--gray-dark);
|
||||
padding-left: var(--spacing-lg);
|
||||
border-left: var(--sizing-xs) solid var(--gray-dark);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
p:not(.banner p) > svg {
|
||||
margin-bottom: var(--inline-margin-bottom);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) svg {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):has(svg) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm)
|
||||
}
|
||||
|
||||
strong,
|
||||
blockquote {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
em,
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: var(--sizing-svg-base);
|
||||
height: var(--sizing-svg-base);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
/* brand colors */
|
||||
.article,
|
||||
.books,
|
||||
.brand-github,
|
||||
.brand-mastodon,
|
||||
.brand-npm,
|
||||
.coffee,
|
||||
.collected,
|
||||
.concerts,
|
||||
.country,
|
||||
.device-tv-old,
|
||||
.device-watch,
|
||||
.favorite,
|
||||
.headphones,
|
||||
.heart-handshake,
|
||||
.info-circle,
|
||||
.link,
|
||||
.mail,
|
||||
.mail-plus,
|
||||
.movies,
|
||||
.music,
|
||||
.rss,
|
||||
.search,
|
||||
.tattoo,
|
||||
.tv {
|
||||
&.article { --section-color: var(--article); }
|
||||
&.books { --section-color: var(--books); }
|
||||
&.brand-github { --section-color: var(--brand-github); }
|
||||
&.brand-mastodon { --section-color: var(--brand-mastodon); }
|
||||
&.brand-npm { --section-color: var(--brand-npm); }
|
||||
&.coffee { --section-color: var(--brand-buy-me-a-coffee); }
|
||||
&.collected { --section-color: var(--collected); }
|
||||
&.concerts { --section-color: var(--concerts); }
|
||||
&.country { --section-color: var(--country); }
|
||||
&.device-tv-old { --section-color: var(--tv); }
|
||||
&.device-watch { --section-color: var(--now); }
|
||||
&.favorite { --section-color: var(--favorite); }
|
||||
&.headphones { --section-color: var(--music); }
|
||||
&.heart-handshake { --section-color: var(--webrings); }
|
||||
&.info-circle { --section-color: var(--about); }
|
||||
&.link { --section-color: var(--link); }
|
||||
&.mail { --section-color: var(--brand-gmail); }
|
||||
&.mail-plus { --section-color: var(--newsletter); }
|
||||
&.movies, &.tv { --section-color: var(--tv); }
|
||||
&.music { --section-color: var(--music); }
|
||||
&.rss { --section-color: var(--brand-rss); }
|
||||
&.search { --section-color: var(--search); }
|
||||
&.tattoo { --section-color: var(--tattoo); }
|
||||
|
||||
color: var(--section-color);
|
||||
|
||||
& svg {
|
||||
stroke: var(--section-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main-title, footer nav.sub-pages) a:hover,
|
||||
:is(.main-title, footer nav.sub-pages) a:focus,
|
||||
:is(.main-title, footer nav.sub-pages) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default) var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
:is(
|
||||
a:has(svg):hover,
|
||||
a:has(svg):active,
|
||||
a:has(svg):focus
|
||||
) svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
:is(a):has(svg) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&:active svg,
|
||||
&:focus svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-md);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
h1 { font-size: var(--font-size-2xl); }
|
||||
h2 { font-size: var(--font-size-xl); }
|
||||
h3 { font-size: var(--font-size-lg); }
|
||||
h4 { font-size: var(--font-size-base); }
|
||||
h5 { font-size: var(--font-size-md); }
|
||||
h6 { font-size: var(--font-size-sm); }
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
h1 { font-size: var(--font-size-3xl); }
|
||||
h2 { font-size: var(--font-size-2xl); }
|
||||
h3 { font-size: var(--font-size-xl); }
|
||||
h4 { font-size: var(--font-size-lg); }
|
||||
h5 { font-size: var(--font-size-base); }
|
||||
h6 { font-size: var(--font-size-md); }
|
||||
}
|
||||
|
||||
/* dividers */
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--gray-light);
|
||||
border: 0;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table {
|
||||
display: block;
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
caption-side: bottom;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:is(th, td):not(:first-child, :last-child) {
|
||||
border-right: var(--border-gray);
|
||||
}
|
||||
|
||||
th,
|
||||
tr:not(:last-child) {
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--spacing-sm);
|
||||
word-break: break-word;
|
||||
|
||||
&:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
max-width: 200px;
|
||||
border-inline-end: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: var(--gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-weight-bold);
|
||||
background-color: var(--gray-lighter);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
min-width: calc(var(--spacing-3xl) * 2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-child {
|
||||
background: var(--background-color);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
td:first-of-type,
|
||||
:where(thead, tfoot) th:nth-child(2) {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.main-title {
|
||||
width: 100%;
|
||||
padding-top: var(--spacing-3xl);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* nav */
|
||||
.active,
|
||||
.active svg {
|
||||
cursor: not-allowed;
|
||||
color: var(--accent-color);
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
/* layout */
|
||||
.default-wrapper {
|
||||
padding-top: var(--spacing-2xl);
|
||||
|
||||
& > h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > a + h2 {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
& .updated {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
margin: var(--spacing-3xl) 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
& nav {
|
||||
&.social,
|
||||
&.sub-pages {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.social {
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
width: 100%;
|
||||
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-pages {
|
||||
font-size: var(--font-size-sm);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
|
||||
& span:not(.active) {
|
||||
margin-left: var(--spacing-sm);
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(.main-title, footer nav.sub-pages) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
/* lists */
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
padding-left: var(--spacing-base);
|
||||
|
||||
& li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image-banner {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
18
src/assets/styles/components/badge-grid.css
Normal file
18
src/assets/styles/components/badge-grid.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.badge-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-md);
|
||||
grid-template-columns: var(--grid-columns-three);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: var(--grid-columns-four);
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& img {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
59
src/assets/styles/components/banners.css
Normal file
59
src/assets/styles/components/banners.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
* + .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);
|
||||
border: 1px solid;
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-lg);
|
||||
width: var(--sizing-lg);
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
&.error,
|
||||
&.github,
|
||||
&.npm,
|
||||
&.old-post,
|
||||
&.rss,
|
||||
&.warning {
|
||||
&.error { --banner-accent-color: var(--error); }
|
||||
&.github { --banner-accent-color: var(--brand-github); }
|
||||
&.npm { --banner-accent-color: var(--brand-npm); }
|
||||
&.old-post { --banner-accent-color: var(--gray-dark); }
|
||||
&.rss { --banner-accent-color: var(--brand-rss); }
|
||||
&.warning { --banner-accent-color: var(--warning); }
|
||||
|
||||
border-color: var(--banner-accent-color);
|
||||
|
||||
& p a:hover,
|
||||
& p a:active,
|
||||
& p a:focus {
|
||||
color: var(--banner-accent-color);
|
||||
}
|
||||
|
||||
& svg {
|
||||
stroke: var(--banner-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/assets/styles/components/buttons.css
Normal file
35
src/assets/styles/components/buttons.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@import url('./tab-buttons.css');
|
||||
@import url('./text-toggle.css');
|
||||
|
||||
button,
|
||||
.button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
|
||||
& + hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:not(.theme-toggle) {
|
||||
border: 2px solid var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
white-space: nowrap;
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
transition: color var(--transition-duration-default) var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
&:not(.theme-toggle, .active):hover,
|
||||
&:not(.theme-toggle, .active):active,
|
||||
&:not(.theme-toggle, .active):focus,
|
||||
&:not(.theme-toggle, .active):focus-within {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
93
src/assets/styles/components/forms.css
Normal file
93
src/assets/styles/components/forms.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
::placeholder {
|
||||
color: var(--text-color);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form:has(+ *),
|
||||
label:has(input):has(+ *) input,
|
||||
input[type="text"]:has(+ *),
|
||||
input[type="email"]:has(+ *),
|
||||
input[type="search"]:has(+ *),
|
||||
textarea:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
select {
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: var(--border-gray);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
& label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sizing-xs);
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& legend {
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
}
|
||||
|
||||
.search__form {
|
||||
margin-top: 0;
|
||||
|
||||
& .search__form--input::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.search__results {
|
||||
margin: 0 0 var(--spacing-base);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
|
||||
& li {
|
||||
margin: var(--spacing-sm) 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--sizing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/assets/styles/components/mastodon-post.css
Normal file
17
src/assets/styles/components/mastodon-post.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.mastodon-post-wrapper {
|
||||
& dl, dt {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& dl {
|
||||
align-items: center;
|
||||
|
||||
& dd {
|
||||
margin-left: var(--spacing-xs);;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
src/assets/styles/components/media-grid.css
Normal file
101
src/assets/styles/components/media-grid.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
.icon-link + .media-grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& ~ .pagination {
|
||||
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);
|
||||
|
||||
& a {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
}
|
||||
}
|
||||
|
||||
&.square {
|
||||
grid-template-columns: var(--grid-square);
|
||||
|
||||
& a {
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
}
|
||||
|
||||
& img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
grid-template-columns: var(--grid-vertical);
|
||||
|
||||
& a {
|
||||
aspect-ratio: var(--aspect-ratio-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
& .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 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 0 var(--spacing-sm);
|
||||
bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
& .header,
|
||||
& .subheader {
|
||||
color: var(--color-lightest);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-md);
|
||||
text-shadow: var(--text-shadow-default);
|
||||
}
|
||||
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
147
src/assets/styles/components/menu.css
Normal file
147
src/assets/styles/components/menu.css
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.menu-primary {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
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%;
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& .icon > svg,
|
||||
& .active > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
display: none;
|
||||
|
||||
&:checked + .menu-button-container {
|
||||
.menu-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) + .menu-button-container {
|
||||
.menu-closed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .menu-primary li {
|
||||
height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:checked ~ .menu-primary li {
|
||||
border-bottom: var(--border-gray);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.menu-primary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
gap: var(--spacing-md);
|
||||
position: relative;
|
||||
top: unset;
|
||||
left: unset;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.menu-primary > li {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
& .icon > svg,
|
||||
& .active > svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggle ~ .menu-primary li {
|
||||
height: unset;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .menu-primary li {
|
||||
height: unset;
|
||||
border: none;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
67
src/assets/styles/components/modal.css
Normal file
67
src/assets/styles/components/modal.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.modal-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: var(--modal-overlay-background);
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
& .modal-body {
|
||||
position: fixed;
|
||||
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);
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-height: 75%;
|
||||
max-width: 75%;
|
||||
inset: 12.5%;
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
& .modal-close {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: var(--sizing-svg-base);
|
||||
width: var(--sizing-svg-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
display: none;
|
||||
|
||||
&:checked ~ .modal-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:not(:checked) ~ .modal-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-toggle,
|
||||
.modal-close {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
|
||||
& svg {
|
||||
stroke: var(--accent-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
141
src/assets/styles/components/music-chart.css
Normal file
141
src/assets/styles/components/music-chart.css
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
.music-chart {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
& 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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
& a:has(img) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
width: calc(var(--sizing-3xl) * 2);
|
||||
height: calc(var(--sizing-3xl) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
& .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: calc(75% - var(--sizing-lg));
|
||||
}
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
width: calc(75% - var(--sizing-lg));
|
||||
}
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
& .title,
|
||||
& .subtext,
|
||||
& .subtext p,
|
||||
& .timestamp {
|
||||
line-height: var(--line-height-md);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
& .subtext,
|
||||
& .timestamp {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
& .timestamp {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/assets/styles/components/paginator.css
Normal file
25
src/assets/styles/components/paginator.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pagination p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination span.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: var(--gray-medium);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
13
src/assets/styles/components/progress-bar.css
Normal file
13
src/assets/styles/components/progress-bar.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.progress-bar-wrapper {
|
||||
display: flex;
|
||||
height: var(--sizing-lg);
|
||||
width: 100%;
|
||||
background-color: var(--gray-light);
|
||||
border-radius: var(--border-radius-full);
|
||||
overflow: hidden;
|
||||
|
||||
& .progress-bar {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
}
|
||||
40
src/assets/styles/components/tab-buttons.css
Normal file
40
src/assets/styles/components/tab-buttons.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
#tracks-recent,
|
||||
#tracks-chart,
|
||||
#tracks-recent ~ .tracks-recent,
|
||||
#tracks-chart ~ .tracks-chart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tracks-recent:checked ~ .tracks-recent,
|
||||
#tracks-chart:checked ~ .tracks-chart {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ .tracks-recent,
|
||||
input[id="tracks-chart"] ~ .tracks-chart {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
#tracks-recent:checked ~ [for="tracks-recent"],
|
||||
#tracks-chart:checked ~ [for="tracks-chart"] {
|
||||
cursor: not-allowed;
|
||||
border-color: var(--accent-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
|
||||
#tracks-chart:not(:checked) ~ [for="tracks-chart"] {
|
||||
color: var(--accent-color);
|
||||
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 {
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
27
src/assets/styles/components/text-toggle.css
Normal file
27
src/assets/styles/components/text-toggle.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
[data-toggle-content] {
|
||||
&.text-toggle-hidden {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
box-shadow: var(--box-shadow-text-toggle);
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + button[data-toggle-button]:has(+ *) {
|
||||
margin: 0 0 var(--spacing-base);
|
||||
}
|
||||
}
|
||||
50
src/assets/styles/components/theme-toggle.css
Normal file
50
src/assets/styles/components/theme-toggle.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
theme-toggle {
|
||||
display: flex;
|
||||
width: var(--sizing-svg-base);
|
||||
height: var(--sizing-svg-base);
|
||||
margin-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
& svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&:focus svg,
|
||||
&:focus-within svg,
|
||||
&:active svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
& > .light svg { stroke: var(--sun); }
|
||||
& > .dark svg { stroke: var(--moon); }
|
||||
|
||||
& > .light ,
|
||||
& > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
& .theme-toggle > .light {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& .theme-toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
& .theme-toggle > .light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .theme-toggle > .dark {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
31
src/assets/styles/defaults/fonts.css
Normal file
31
src/assets/styles/defaults/fonts.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@font-face {
|
||||
font-family: MonoLisa;
|
||||
src: url('/assets/fonts/ml.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MonoLisa;
|
||||
src: url('/assets/fonts/mlb.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MonoLisa;
|
||||
src: url('/assets/fonts/mli.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MonoLisa;
|
||||
src: url('/assets/fonts/mlbi.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
297
src/assets/styles/defaults/vars.css
Normal file
297
src/assets/styles/defaults/vars.css
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
:root {
|
||||
/* colors */
|
||||
--blue-100: #a2c4ff;
|
||||
--blue-200: #6b9eff;
|
||||
--blue-300: #4a78ff;
|
||||
--blue-400: #3364ff;
|
||||
--blue-500: #2553e6;
|
||||
--blue-600: #1e42c7;
|
||||
|
||||
--gray-100: #f6f7f8;
|
||||
--gray-200: #eceef1;
|
||||
--gray-300: #dfe3e8;
|
||||
--gray-400: #959eae;
|
||||
--gray-500: #7f899b;
|
||||
--gray-600: #626d7f;
|
||||
--gray-700: #545e71;
|
||||
--gray-800: #4a5365;
|
||||
--gray-900: #1a1d22;
|
||||
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
--gray-lighter: var(--gray-200);
|
||||
--gray-light: var(--gray-300);
|
||||
--gray-medium: var(--gray-400);
|
||||
--gray-dark: var(--gray-800);
|
||||
|
||||
/* base theme */
|
||||
--color-lightest: var(--white);
|
||||
--color-darkest: var(--black);
|
||||
--text-color: var(--color-darkest);
|
||||
--background-color: var(--color-lightest);
|
||||
--text-color-inverted: var(--color-lightest);
|
||||
--background-color-inverted: var(--color-darkest);
|
||||
--accent-color: var(--blue-400);
|
||||
--accent-color-hover: var(--blue-600);
|
||||
|
||||
--brand-github-light: #333;
|
||||
--brand-github-dark: #f5f5f5;
|
||||
|
||||
--brand-gmail: #ea4335;
|
||||
--brand-github: #333;
|
||||
--brand-npm: #cc3534;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-listenbrainz: #e97941;
|
||||
--brand-buy-me-a-coffee: #40dca5;
|
||||
--brand-rss: #f26522;
|
||||
|
||||
--moon: #6a5acd;
|
||||
--sun: #ffa500;
|
||||
|
||||
--article-light: #007272;
|
||||
--about-light: #e4513a;
|
||||
--books-light: #1a7b1a;
|
||||
--collected-light: #9a501a;
|
||||
--concerts-light: #cb426e;
|
||||
--country-light: #146a67;
|
||||
--error-light: #b81f1f;
|
||||
--favorite-light: #b03c72;
|
||||
--link-light: #7b5cba;
|
||||
--music-light: #1565c3;
|
||||
--newsletter-light: #37b0b0;
|
||||
--now-light: #cc1076;
|
||||
--search-light: #3a6b94;
|
||||
--tattoo-light: #951b1b;
|
||||
--tv-light: #cc3600;
|
||||
--warning-light: #cc6f00;
|
||||
--webrings-light: #b054b0;
|
||||
|
||||
--article-dark: #00ffff;
|
||||
--about-dark: #ff967d;
|
||||
--books-dark: #6fff6f;
|
||||
--collected-dark: #ffae73;
|
||||
--concerts-dark: #ff82aa;
|
||||
--country-dark: #80dcdc;
|
||||
--error-dark: #ff8b8b;
|
||||
--favorite-dark: #ff9ccd;
|
||||
--link-dark: #e2b8ff;
|
||||
--music-dark: #99ccff;
|
||||
--newsletter-dark: #91fffa;
|
||||
--now-dark: #ff82d5;
|
||||
--search-dark: #a0b8d9;
|
||||
--tattoo-dark: #ff7373;
|
||||
--tv-dark: #ff8f66;
|
||||
--warning-dark: #ffbf66;
|
||||
--webrings-dark: #ffb3ff;
|
||||
|
||||
--article: var(--article-light);
|
||||
--about: var(--about-light);
|
||||
--books: var(--books-light);
|
||||
--collected: var(--collected-light);
|
||||
--concerts: var(--concerts-light);
|
||||
--country: var(--country-light);
|
||||
--error: var(--error-light);
|
||||
--favorite: var(--favorite-light);
|
||||
--link: var(--link-light);
|
||||
--music: var(--music-light);
|
||||
--newsletter: var(--newsletter-light);
|
||||
--now: var(--now-light);
|
||||
--search: var(--search-light);
|
||||
--tattoo: var(--tattoo-light);
|
||||
--tv: var(--tv-light);
|
||||
--warning: var(--warning-light);
|
||||
--webrings: var(--webrings-light);
|
||||
|
||||
/* borders */
|
||||
--border-default: 1px solid var(--accent-color);
|
||||
--border-gray: 1px solid var(--gray-light);
|
||||
|
||||
/* fonts */
|
||||
--font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
|
||||
|
||||
/* text */
|
||||
--font-size-xs: .7rem;
|
||||
--font-size-sm: .85rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.15rem;
|
||||
--font-size-xl: 1.3rem;
|
||||
--font-size-2xl: 1.45rem;
|
||||
--font-size-3xl: 1.6rem;
|
||||
|
||||
--font-weight-base: 400;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-sm: 1;
|
||||
--line-height-md: 1.5;
|
||||
--line-height-base: 2;
|
||||
|
||||
/* sizing */
|
||||
--sizing-xs: .25rem;
|
||||
--sizing-sm: .5rem;
|
||||
--sizing-md: .75rem;
|
||||
--sizing-lg: 1rem;
|
||||
--sizing-base: 1.5rem;
|
||||
--sizing-xl: 1.75rem;
|
||||
--sizing-2xl: 2rem;
|
||||
--sizing-3xl: 2.25rem;
|
||||
|
||||
--sizing-svg-sm: 18px;
|
||||
--sizing-svg-base: 24px;
|
||||
|
||||
/* spacing */
|
||||
--spacing-xs: var(--sizing-xs);
|
||||
--spacing-sm: var(--sizing-sm);
|
||||
--spacing-md: var(--sizing-md);
|
||||
--spacing-lg: var(--sizing-lg);
|
||||
--spacing-base: var(--sizing-base);
|
||||
--spacing-xl: var(--sizing-xl);
|
||||
--spacing-2xl: var(--sizing-2xl);
|
||||
--spacing-3xl: var(--sizing-3xl);
|
||||
|
||||
--margin-vertical-base-horizontal-zero: var(--spacing-base) 0;
|
||||
|
||||
/* radii */
|
||||
--border-radius-slight: var(--sizing-xs);
|
||||
--border-radius-full: 9999px;
|
||||
|
||||
/* aspect ratios */
|
||||
--aspect-ratio-square: 1/1;
|
||||
--aspect-ratio-vertical: 2/3;
|
||||
--aspect-ratio-banner: 3/2;
|
||||
|
||||
/* grid columns */
|
||||
--grid-columns-two: repeat(2, minmax(0, 1fr));
|
||||
--grid-columns-three: repeat(3, minmax(0, 1fr));
|
||||
--grid-columns-four: repeat(4, minmax(0, 1fr));
|
||||
--grid-columns-six: repeat(6, minmax(0, 1fr));
|
||||
|
||||
--grid-poster: var(--grid-columns-two);
|
||||
--grid-square: var(--grid-columns-two);
|
||||
--grid-vertical: var(--grid-columns-three);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
--grid-poster: var(--grid-columns-three);
|
||||
--grid-square: var(--grid-columns-four);
|
||||
--grid-vertical: var(--grid-columns-six);
|
||||
}
|
||||
|
||||
/* transitions */
|
||||
--transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-duration-default: 300ms;
|
||||
|
||||
/* svgs */
|
||||
--stroke-width-default: 1.4;
|
||||
--stroke-width-bold: 2;
|
||||
--inline-margin-bottom: -5px;
|
||||
|
||||
/* shadows */
|
||||
--box-shadow-media: inset 0 -85px 60px -40px var(--black);
|
||||
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
|
||||
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
|
||||
/* modals */
|
||||
--modal-overlay-background-light: #ffffffbf;
|
||||
--modal-overlay-background-dark: #000000bf;
|
||||
--modal-overlay-background: var(--modal-overlay-background-light);
|
||||
|
||||
/* input accent color */
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* light theme */
|
||||
:root[data-theme="light"] {
|
||||
--text-color: var(--color-darkest);
|
||||
--background-color: var(--color-lightest);
|
||||
--text-color-inverted: var(--color-lightest);
|
||||
--background-color-inverted: var(--color-darkest);
|
||||
--accent-color: var(--blue-400);
|
||||
--accent-color-hover: var(--blue-600);
|
||||
--gray-light: var(--gray-300);
|
||||
--gray-lighter: var(--gray-200);
|
||||
--gray-dark: var(--gray-800);
|
||||
--modal-overlay-background: var(--modal-overlay-background-light);
|
||||
--brand-github: var(--brand-github-light);
|
||||
--article: var(--article-light);
|
||||
--about: var(--about-light);
|
||||
--books: var(--books-light);
|
||||
--collected: var(--collected-light);
|
||||
--concerts: var(--concerts-light);
|
||||
--country: var(--country-light);
|
||||
--error: var(--error-light);
|
||||
--favorite: var(--favorite-light);
|
||||
--link: var(--link-light);
|
||||
--music: var(--music-light);
|
||||
--newsletter: var(--newsletter-light);
|
||||
--now: var(--now-light);
|
||||
--search: var(--search-light);
|
||||
--tattoo: var(--tattoo-light);
|
||||
--tv: var(--tv-light);
|
||||
--warning: var(--warning-light);
|
||||
--webrings: var(--webrings-light);
|
||||
}
|
||||
|
||||
/* dark theme */
|
||||
:root[data-theme="dark"] {
|
||||
--text-color: var(--color-lightest);
|
||||
--background-color: var(--color-darkest);
|
||||
--text-color-inverted: var(--color-darkest);
|
||||
--background-color-inverted: var(--color-lightest);
|
||||
--accent-color: var(--blue-200);
|
||||
--accent-color-hover: var(--blue-100);
|
||||
--gray-light: var(--gray-600);
|
||||
--gray-lighter: var(--gray-700);
|
||||
--gray-dark: var(--gray-300);
|
||||
--modal-overlay-background: var(--modal-overlay-background-dark);
|
||||
--brand-github: var(--brand-github-dark);
|
||||
--article: var(--article-dark);
|
||||
--about: var(--about-dark);
|
||||
--books: var(--books-dark);
|
||||
--collected: var(--collected-dark);
|
||||
--concerts: var(--concerts-dark);
|
||||
--country: var(--country-dark);
|
||||
--error: var(--error-dark);
|
||||
--favorite: var(--favorite-dark);
|
||||
--link: var(--link-dark);
|
||||
--music: var(--music-dark);
|
||||
--newsletter: var(--newsletter-dark);
|
||||
--now: var(--now-dark);
|
||||
--search: var(--search-dark);
|
||||
--tattoo: var(--tattoo-dark);
|
||||
--tv: var(--tv-dark);
|
||||
--warning: var(--warning-dark);
|
||||
--webrings: var(--webrings-dark);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: var(--color-lightest);
|
||||
--background-color: var(--color-darkest);
|
||||
--text-color-inverted: var(--color-darkest);
|
||||
--background-color-inverted: var(--color-lightest);
|
||||
--accent-color: var(--blue-200);
|
||||
--accent-color-hover: var(--blue-100);
|
||||
--gray-light: var(--gray-600);
|
||||
--gray-lighter: var(--gray-700);
|
||||
--gray-dark: var(--gray-300);
|
||||
--modal-overlay-background: var(--modal-overlay-background-dark);
|
||||
--brand-github: var(--brand-github-dark);
|
||||
--article: var(--article-dark);
|
||||
--about: var(--about-dark);
|
||||
--books: var(--books-dark);
|
||||
--collected: var(--collected-dark);
|
||||
--concerts: var(--concerts-dark);
|
||||
--country: var(--country-dark);
|
||||
--error: var(--error-dark);
|
||||
--favorite: var(--favorite-dark);
|
||||
--link: var(--link-dark);
|
||||
--music: var(--music-dark);
|
||||
--newsletter: var(--newsletter-dark);
|
||||
--now: var(--now-dark);
|
||||
--search: var(--search-dark);
|
||||
--tattoo: var(--tattoo-dark);
|
||||
--tv: var(--tv-dark);
|
||||
--warning: var(--warning-dark);
|
||||
--webrings: var(--webrings-dark);
|
||||
}
|
||||
}
|
||||
57
src/assets/styles/feed.xsl
Normal file
57
src/assets/styles/feed.xsl
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
||||
<xsl:template match="/">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<title><xsl:value-of select="/rss/channel/title"/></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
|
||||
<link rel="stylesheet" href="/assets/styles/index.css" type="text/css" />
|
||||
</head>
|
||||
<body class="feed">
|
||||
<div class="main-wrapper">
|
||||
<main>
|
||||
<section class="main-title">
|
||||
<h1><a href="/feeds" tabindex="0"><xsl:value-of select="/rss/channel/title"/></a></h1>
|
||||
</section>
|
||||
<div class="default-wrapper">
|
||||
<p><xsl:value-of select="/rss/channel/description"/></p>
|
||||
<p><strong class="highlight-text">Subscribe by adding the URL below to your feed reader of choice.</strong></p>
|
||||
<p>
|
||||
<pre class="small">
|
||||
<code><xsl:value-of select="rss/channel/atom:link/@href"/></code>
|
||||
</pre>
|
||||
</p>
|
||||
<p><a href="/feeds">View more of the feeds from my site.</a></p>
|
||||
<hr />
|
||||
<section>
|
||||
<xsl:for-each select="/rss/channel/item">
|
||||
<div class="item">
|
||||
<p class="date">Published: <xsl:value-of select="pubDate"/></p>
|
||||
<h3>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="link"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="title"/>
|
||||
</a>
|
||||
</h3>
|
||||
<xsl:value-of select="description" disable-output-escaping="yes"/>
|
||||
<xsl:if test="enclosure">
|
||||
<img src="{enclosure/@url}" alt="{title}" />
|
||||
</xsl:if>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<hr />
|
||||
<p>Subscribe by adding <code><xsl:value-of select="rss/channel/atom:link/@href"/></code> to your feed reader of choice.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
40
src/assets/styles/index.css
Normal file
40
src/assets/styles/index.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@layer reset, defaults, base, page, components, plugins;
|
||||
|
||||
/* style resets */
|
||||
@import url('./reset.css') layer(reset);
|
||||
|
||||
/* core defaults */
|
||||
@import url('./defaults/fonts.css') layer(defaults);
|
||||
@import url('./defaults/vars.css') layer(defaults);
|
||||
|
||||
/* base styles */
|
||||
@import url('./base/index.css') layer(base);
|
||||
|
||||
/* plugins */
|
||||
@import url('./plugins/prism.css') layer(plugins);
|
||||
|
||||
/* page styles */
|
||||
@import url('./pages/about.css') layer(page);
|
||||
@import url('./pages/books.css') layer(page);
|
||||
@import url('./pages/blogroll.css') layer(page);
|
||||
@import url('./pages/contact.css') layer(page);
|
||||
@import url('./pages/feeds.css') layer(page);
|
||||
@import url('./pages/links.css') layer(page);
|
||||
@import url('./pages/music.css') layer(page);
|
||||
@import url('./pages/articles.css') layer(page);
|
||||
@import url('./pages/watching.css') layer(page);
|
||||
@import url('./pages/webrings.css') layer(page);
|
||||
|
||||
/* component styles */
|
||||
@import url('./components/badge-grid.css') layer(components);
|
||||
@import url('./components/banners.css') layer(components);
|
||||
@import url('./components/buttons.css') layer(components);
|
||||
@import url('./components/forms.css') layer(components);
|
||||
@import url('./components/mastodon-post.css') layer(components);
|
||||
@import url('./components/media-grid.css') layer(components);
|
||||
@import url('./components/menu.css') layer(components);
|
||||
@import url('./components/modal.css') layer(components);
|
||||
@import url('./components/music-chart.css') layer(components);
|
||||
@import url('./components/paginator.css') layer(components);
|
||||
@import url('./components/progress-bar.css') layer(components);
|
||||
@import url('./components/theme-toggle.css') layer(components);
|
||||
29
src/assets/styles/pages/about.css
Normal file
29
src/assets/styles/pages/about.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
:root {
|
||||
--avatar-size: 16rem;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
--avatar-size: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
|
||||
& .interior {
|
||||
display: flex;
|
||||
|
||||
& img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-title {
|
||||
text-align: center;
|
||||
}
|
||||
80
src/assets/styles/pages/articles.css
Normal file
80
src/assets/styles/pages/articles.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
article {
|
||||
margin-bottom: var(--spacing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.standalone .associated-media:last-of-type > hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& .post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& svg {
|
||||
stroke: var(--gray-dark);
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
|
||||
& time {
|
||||
color: var(--gray-dark);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p + .associated-media,
|
||||
img + .associated-media,
|
||||
.banner + .associated-media,
|
||||
.client-side ~ .associated-media,
|
||||
youtube-video + .associated-media {
|
||||
margin-top: var(--spacing-base);
|
||||
border-top: var(--border-gray);
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
& .footnotes-list {
|
||||
margin-bottom: 0;
|
||||
|
||||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .footnote-item > p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(~ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
padding-bottom: var(--spacing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
& ~ youtube-video {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
& + .associated-media {
|
||||
margin-top: var(--spacing-base);
|
||||
border-top: var(--border-gray);
|
||||
}
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
sup.footnote-ref a,
|
||||
.footnote-backref {
|
||||
text-decoration: none;
|
||||
}
|
||||
3
src/assets/styles/pages/blogroll.css
Normal file
3
src/assets/styles/pages/blogroll.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.blog-roll-icons {
|
||||
display: flex;
|
||||
}
|
||||
139
src/assets/styles/pages/books.css
Normal file
139
src/assets/styles/pages/books.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
.book-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
@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;
|
||||
|
||||
& .book-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);
|
||||
transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
& a:focus img,
|
||||
& a:focus-within img,
|
||||
& a:hover img,
|
||||
& a:active img {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .description {
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
max-width: 75%;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-entry,
|
||||
.book-focus {
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& p.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
& p.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-focus {
|
||||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
||||
& .book-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-base);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
width: auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
max-width: 50%;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
src/assets/styles/pages/contact.css
Normal file
46
src/assets/styles/pages/contact.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.contact-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& label.hp,
|
||||
& label > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& .column {
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.description {
|
||||
& p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-right: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-success-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
|
||||
& h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
47
src/assets/styles/pages/feeds.css
Normal file
47
src/assets/styles/pages/feeds.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
.feed {
|
||||
& .item {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: var(--border-gray);
|
||||
margin-bottom: var(--spacing-base);
|
||||
padding-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
& .date {
|
||||
display: block;
|
||||
color: var(--gray-dark);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-top: var(--sizing-base);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& ol > li p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& footer {
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
}
|
||||
}
|
||||
16
src/assets/styles/pages/links.css
Normal file
16
src/assets/styles/pages/links.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.link-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
& .link-box {
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
84
src/assets/styles/pages/music.css
Normal file
84
src/assets/styles/pages/music.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
.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);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
& .artist-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
& .artist-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& table + p {
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--spacing-base);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.concert-list {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
& li .modal-toggle {
|
||||
height: calc(var(--sizing-lg) * 1.6);
|
||||
}
|
||||
}
|
||||
|
||||
p.concerts + ul + hr {
|
||||
display: none;
|
||||
}
|
||||
101
src/assets/styles/pages/watching.css
Normal file
101
src/assets/styles/pages/watching.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
a:hover > .watching.hero::after,
|
||||
a:active > .watching.hero::after {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
.watching {
|
||||
&.hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: var(--spacing-sm);
|
||||
bottom: var(--spacing-sm);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
& .subheader {
|
||||
font-size: var(--font-size-sm);
|
||||
display: inline-flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
& .header,
|
||||
& .subheader {
|
||||
line-height: var(--line-height-md);
|
||||
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;
|
||||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .footnotes {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-link + .poster.grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
23
src/assets/styles/pages/webrings.css
Normal file
23
src/assets/styles/pages/webrings.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.webring-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .webring-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
111
src/assets/styles/plugins/prism.css
Normal file
111
src/assets/styles/plugins/prism.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
code,
|
||||
pre {
|
||||
color: var(--blue-100);
|
||||
background: none;
|
||||
border-radius: var(--border-radius-slight);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: var(--font-mono);
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: var(--line-height-md);
|
||||
tab-size: 2;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: var(--spacing-lg);
|
||||
margin: var(--sizing-xl) 0;
|
||||
overflow: auto;
|
||||
|
||||
& > code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding: var(--spacing-xs);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
background: var(--gray-900);
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #99ccff;
|
||||
}
|
||||
|
||||
.token {
|
||||
color: var(--blue-200);
|
||||
|
||||
&.comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata {
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--gray-300);
|
||||
}
|
||||
|
||||
&.boolean,
|
||||
&.number {
|
||||
color: var(--blue-400);
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.char,
|
||||
&.builtin,
|
||||
&.inserted {
|
||||
color: #6fff6f;
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url,
|
||||
&.variable {
|
||||
color: #99ccff;
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.function,
|
||||
&.class-name {
|
||||
color: #ff8f66;
|
||||
}
|
||||
|
||||
&.keyword {
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: #ff7373;
|
||||
}
|
||||
|
||||
&.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&.important,
|
||||
&.bold {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
18
src/assets/styles/reset.css
Normal file
18
src/assets/styles/reset.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--line-height-md);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
3
src/assets/styles/styles.json
Normal file
3
src/assets/styles/styles.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"eleventyExcludeFromCollections": true
|
||||
}
|
||||
Reference in a new issue