chore: split out styles + only load where needed

src/assets/styles/widgets/forms.css

@@ -0,0 +1,37 @@
+input[type="text"],
+input[type="email"],
+textarea {
+  color: var(--black);
+  background-color: var(--white);
+  width: 100%;
+  border: 1px solid var(--blue-600);
+  padding: .5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 400 !important;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+  outline: none;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  border: 1px solid var(--blue-800);
+}
+
+@media (prefers-color-scheme: dark) {
+  input[type="text"],
+  input[type="email"],
+  textarea {
+    color: var(--white);
+    background-color: var(--black);
+  }
+}

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

@@ -0,0 +1,101 @@
+.now__section--header {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.media__grid {
+  display: grid;
+  gap: .5rem;
+}
+
+.media__grid.square {
+  grid-template-columns: repeat(2,minmax(0,1fr));
+}
+
+.media__grid.vertical {
+  grid-template-columns: repeat(3,minmax(0,1fr));
+}
+
+.media__grid.vertical .item__wrapper {
+  max-width: 193px;
+}
+
+.media__grid .item__wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 1px solid var(--blue-600);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+.media__grid .item__wrapper:hover {
+  border-color: var(--blue-800)
+}
+
+.media__grid .item__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded-sm);
+}
+
+.media__grid .item__cover.gradient {
+  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(--white);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  overflow: visible;
+  display: -webkit-box;
+  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.media__grid .item__image,
+.media__grid .item__image > * {
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .media__grid.square {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+  }
+
+  .media__grid.vertical {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+  }
+
+  .media__grid.vertical .item__wrapper {
+    max-width: 121px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .media__grid .item__wrapper {
+    border-color: var(--blue-400);
+  }
+
+  .media__grid .item__wrapper:hover,
+  .media__grid .item__wrapper:focus,
+  .media__grid .item__wrapper:active {
+    border-color: var(--blue-200);
+  }
+}

src/assets/styles/widgets/paginator.css

@@ -0,0 +1,26 @@
+.pagination {
+  justify-content: space-between;
+}
+
+.pagination button {
+  background: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pagination button > svg {
+  cursor: pointer;
+}
+
+.pagination button.disabled > svg {
+  opacity: .5;
+  cursor: not-allowed;
+  stroke: var(--black);
+  stroke-width: var(--stroke-width-default);
+}
+
+@media (prefers-color-scheme: dark) {
+  .pagination button.disabled > svg {
+    stroke: var(--white);
+  }
+}

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

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

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

@@ -23,4 +23,10 @@
 .post-graph__progress,
 .post-graph__data {
   margin-left: .625rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-graph__progress {
+    background-color: var(--blue-400);
+  }
 }

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

@@ -0,0 +1,24 @@
+.progress-bar__wrapper {
+  display: flex;
+  background-color: rgba(217, 222, 228, .6);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  height: 1rem;
+  width: 100%;
+  margin-top: .25rem;
+  margin-bottom: .25rem;
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  white-space: nowrap;
+  background-color: var(--blue-600);
+}
+
+@media (prefers-color-scheme: dark) {
+  .progress-bar {
+    background-color: var(--blue-400);
+  }
+}

src/assets/styles/widgets/webmentions.css

@@ -0,0 +1,120 @@
+.webmentions {
+  border-top: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--gray-200);
+  margin-top: 1.5rem;
+  margin-bottom: 3.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.webmentions .interaction.comments {
+  flex-direction: column;
+}
+
+.webmentions .interaction {
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.webmentions .interaction .comment__wrapper {
+  width: 100%;
+  padding-bottom: 1rem;
+}
+
+.webmentions .interaction .comment__wrapper:last-child {
+  padding-bottom: 0;
+}
+
+.webmentions .interaction .avatar__wrapper:hover,
+.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
+  border-color: var(--blue-800);
+}
+
+.webmentions .interaction .comment__wrapper--interior {
+  justify-content: space-between;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment {
+  margin-left: .75rem;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment a {
+  color: var(--black);
+  text-decoration: none;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment p {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  margin: 0;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment time {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  margin-top: .25rem;
+}
+
+.webmentions .interaction ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 0 0 .75rem;
+  padding: 0;
+  list-style: none;
+}
+
+.webmentions .interaction li {
+  margin-left: -.75rem;
+  height: 3.5rem;
+}
+
+.webmentions .interaction .avatar__wrapper {
+  background-color: var(--black);
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 0;
+  overflow: hidden;
+  border-radius: var(--rounded-full);
+  border: 4px solid var(--white);
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+.webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded-full);
+}
+
+.webmentions .interaction .avatar__wrapper > picture {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .webmentions .interaction .comment__wrapper--interior .comment a {
+    color: var(--white);
+  }
+
+  .webmentions {
+    border-color: var(--gray-900);
+  }
+
+  .webmentions .interaction .avatar__wrapper {
+    background-color: var(--white);
+    border-color: var(--black);
+  }
+
+  .webmentions .interaction .avatar__wrapper:hover,
+  .webmentions .interaction .avatar__wrapper:focus,
+  .webmentions .interaction .avatar__wrapper:active,
+  .webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
+  .webmentions .interaction .comment__wrapper:focus .avatar__wrapper
+  .webmentions .interaction .comment__wrapper:active .avatar__wrapper {
+    border-color: var(--blue-200);
+  }
+}