feat: design + perf + tags etc.

src/assets/styles/components/banners.css

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

src/assets/styles/components/forms.css

@@ -19,7 +19,7 @@ textarea {
   /* necessary for pagefind overrides */
 
   outline: none;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
   font-weight: 400 !important;
   line-height: var(--line-height-base);
   transition-property: border-color;
@@ -32,4 +32,32 @@ input[type="email"]:focus,
 input[type="search"]:focus,
 textarea:focus {
   border: 1px solid var(--accent-color-hover) !important;
+}
+
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
+  border-radius: var(--rounded-full);
+  padding: .5rem 1rem;
+  margin: 0 .25rem .75rem 0;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  font-size: var(--font-size-base);
+  font-weight: 700;
+  line-height: var(--line-height-base);
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  appearance: none;
+  border: none;
+  text-decoration: none;
+  transition-property: background-color;
+}
+
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
+  color: var(--color-lightest);
+  background-color: var(--accent-color-hover) !important;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
 }

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

@@ -1,7 +1,7 @@
 .mastodon-post-wrapper {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: .25rem;
 }
 
 dl {

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

@@ -5,8 +5,7 @@
 }
 
 .now__section--header {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+  margin: 2rem 0 1rem;
 }
 
 .media__grid {

src/assets/styles/components/pagefind.css

@@ -1,5 +1,5 @@
 .pagefind-ui {
-  margin-bottom: 2rem;
+  margin-bottom: 1.25rem;
   --pagefind-ui-primary: var(--accent-color);
   --pagefind-ui-text: var(--text-color);
   --pagefind-ui-background: var(--color-lightest);
@@ -60,6 +60,12 @@
   background-color: transparent !important;
 }
 
+.pagefind-ui__search-clear:hover,
+.pagefind-ui__search-clear:focus,
+.pagefind-ui__search-clear:active {
+  color: var(--accent-color-hover) !important;
+}
+
 .pagefind-ui__result-title {
   margin-bottom: .25rem !important;
 }

src/assets/styles/components/paginator.css

@@ -8,12 +8,12 @@
   padding-right: 0;
 }
 
-.pagination button > svg {
+.pagination a > svg {
   stroke: var(--accent-color);
   cursor: pointer;
 }
 
-.pagination button.disabled > svg {
+.pagination span.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

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