feat: now playing web component

src/assets/styles/components/banner-old-post.css

@@ -0,0 +1,19 @@
+.banner__old-post {
+  margin: 1rem 0;
+  padding: .75rem;
+  border: 1px solid var(--gray-light);
+  border-radius: var(--rounded-lg);
+}
+
+.banner__old-post p {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  margin: 0;
+}
+
+.banner__old-post p > svg {
+  display: inline;
+  vertical-align: middle;
+  height: .875rem;
+  width: .875rem;
+}

src/assets/styles/components/forms.css

@@ -0,0 +1,35 @@
+::placeholder {
+  color: var(--text-color) !important;
+  opacity: .5 !important;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="search"],
+textarea {
+  /* necessary for pagefind overrides */
+  font-family: var(--font-sans) !important;
+  color: var(--text-color) !important;
+  background-color: var(--background-color) !important;
+  border: 1px solid var(--accent-color) !important;
+  padding: .5rem !important;
+  font-size: var(--font-size-base) !important;
+  width: 100% !important;
+  border-radius: var(--rounded-md) !important;
+  /* necessary for pagefind overrides */
+
+  outline: none;
+  margin-bottom: 1.5rem;
+  font-weight: 400 !important;
+  line-height: var(--line-height-base);
+  transition-property: border-color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="search"]:focus,
+textarea:focus {
+  border: 1px solid var(--accent-color-hover) !important;
+}

src/assets/styles/components/mastodon-post.css

@@ -0,0 +1,18 @@
+.mastodon-post-wrapper {
+  border-bottom: 1px solid var(--gray-light);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+}
+
+dl {
+  display: flex;
+  flex-direction: row;
+}
+
+dd {
+  margin-left: .25rem;
+}
+
+dd:not(:last-child) {
+  margin-right: 1rem;
+}

src/assets/styles/components/media-grid.css

@@ -0,0 +1,100 @@
+:root {
+  --grid-square: repeat(2,minmax(0,1fr));
+  --grid-vertical: repeat(3,minmax(0,1fr));
+  --item-wrapper-max-width: 193px;
+}
+
+.now__section--header {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.media__grid {
+  display: grid;
+  gap: .5rem;
+}
+
+.media__grid.square {
+  grid-template-columns: var(--grid-square);
+}
+
+.media__grid.square a {
+  aspect-ratio: 1/1;
+}
+
+.media__grid.vertical {
+  grid-template-columns: var(--grid-vertical);
+}
+
+.media__grid.vertical a {
+  aspect-ratio: 2/3;
+}
+
+.media__grid.square a,
+.media__grid.square a,
+.media__grid .item__wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+.media__grid.vertical .item__wrapper {
+  max-width: var(--item-wrapper-max-width);
+}
+
+.media__grid .item__wrapper {
+  position: relative;
+  border: 1px solid var(--accent-color);
+  border-radius: var(--rounded-md);
+  overflow: hidden;
+  transition-property: border-color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: 300ms;
+}
+
+.media__grid .item__wrapper:hover,
+.media__grid .item__wrapper:focus,
+.media__grid .item__wrapper:active {
+  border-color: var(--accent-color-hover)
+}
+
+.media__grid .item__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded-sm);
+  background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75));
+}
+
+.media__grid .item__meta-text {
+  position: absolute;
+  padding: 0 .375rem;
+  width: 90%;
+  bottom: .375rem;
+}
+
+.media__grid .item__meta-text .header,
+.media__grid .item__meta-text .subheader {
+  color: var(--color-lightest);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
+}
+
+.media__grid .item__meta-text .header {
+  font-weight: 700;
+}
+
+.media__grid img {
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  :root {
+    --grid-square: repeat(4,minmax(0,1fr));
+    --grid-vertical: repeat(6,minmax(0,1fr));
+    --item-wrapper-max-width: 121px;
+  }
+}

src/assets/styles/components/pagefind.css

@@ -0,0 +1,99 @@
+.pagefind-ui {
+  margin-bottom: 2rem;
+  --pagefind-ui-primary: var(--accent-color);
+  --pagefind-ui-text: var(--text-color);
+  --pagefind-ui-background: var(--color-lightest);
+  --pagefind-ui-border: var(--gray-light);
+  --pagefind-ui-tag: var(--gray-light);
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 0;
+  --pagefind-ui-image-border-radius: 0;
+  --pagefind-ui-image-box-ratio: 3 / 2;
+  --pagefind-ui-font: var(--font-sans);
+}
+
+.pagefind-ui,
+.pagefind-ui__filter-name,
+.pagefind-ui__filter-label,
+.pagefind-ui__result-excerpt,
+.pagefind-ui__message,
+.pagefind-ui__button {
+  font-size: var(--font-size-base) !important;
+}
+
+.pagefind-ui__form:before {
+  opacity: 1 !important;
+  top: calc(19px * var(--pagefind-ui-scale)) !important;
+}
+
+.pagefind-ui__result-title {
+  color: var(--accent-color);
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-2xl);
+  font-weight: 900;
+  text-decoration: none;
+  margin: 0;
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__result-title:hover,
+.pagefind-ui__result-title:focus,
+.pagefind-ui__result-title:active {
+  color: var(--accent-color-hover);
+}
+
+:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
+  padding-left: 2.375rem !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: calc(53px * var(--pagefind-ui-scale)) !important;
+}
+
+.pagefind-ui__search-clear {
+  color: var(--text-color);
+  background-color: transparent !important;
+}
+
+.pagefind-ui__result-title {
+  margin-bottom: .25rem !important;
+}
+
+.pagefind-ui__result-link {
+  font-size: var(--font-size-2xl) !important;
+  color: var(--accent-color) !important;
+  text-decoration: none !important;
+}
+
+.pagefind-ui__result-link:hover,
+.pagefind-ui__result-link:focus,
+.pagefind-ui__result-link:active {
+  color: var(--accent-color-hover) !important;
+}
+
+.pagefind-ui__button {
+  color: var(--color-lightest) !important;
+  line-height: var(--line-height-base);
+  border-radius: var(--rounded-full) !important;
+  padding: .5rem 1rem !important;
+  margin: 0 .25rem .75rem 0;
+  cursor: pointer !important;
+  height: unset !important;
+  text-decoration: none;
+  background-color: var(--accent-color) !important;
+  transition-property: background-color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__search-clear {
+  height: calc(48px * var(--pagefind-ui-scale)) !important;
+}
+
+.pagefind-ui__button:hover,
+.pagefind-ui__button:active,
+.pagefind-ui__button:focus {
+  color: var(--color-lightest) !important;
+  background-color: var(--accent-color-hover) !important;
+}

src/assets/styles/components/paginator.css

@@ -0,0 +1,20 @@
+.pagination {
+  justify-content: space-between;
+}
+
+.pagination button {
+  background: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pagination button > svg {
+  stroke: var(--accent-color);
+  cursor: pointer;
+}
+
+.pagination button.disabled > svg {
+  cursor: not-allowed;
+  stroke: color-mix(in srgb, var(--text-color), transparent 50%);
+  stroke-width: var(--stroke-width-default);
+}

src/assets/styles/components/popular-posts.css

@@ -0,0 +1,4 @@
+.popular-posts h2 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}

src/assets/styles/components/post-graph.css

@@ -0,0 +1,25 @@
+.post-graph {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.post-graph__wrapper {
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  margin-bottom: .375rem;
+}
+
+.post-graph__progress {
+  background-color: var(--accent-color);
+  height: 100%;
+}
+
+.post-graph__year {
+  font-family: var(--font-mono);
+}
+
+.post-graph__progress,
+.post-graph__data {
+  margin-left: .625rem;
+}

src/assets/styles/components/progress-bar.css

@@ -0,0 +1,13 @@
+.progress-bar__wrapper {
+  display: flex;
+  background-color: rgba(217, 222, 228, .6);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  height: 1rem;
+  width: 100%;
+  margin-bottom: .25rem;
+}
+
+.progress-bar {
+  background-color: var(--accent-color);
+}

src/assets/styles/components/share-button.css

@@ -0,0 +1,21 @@
+button {
+  background: transparent;
+  padding: 0;
+}
+
+button,
+button > svg {
+  cursor: pointer;
+}
+
+input {
+  border-radius: var(--rounded-md);
+  padding: .25rem;
+  border: 1px solid var(--gray-light);
+}
+
+label {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  height: 1rem;
+}