refine css

2 files changed, 195 insertions, 329 deletions

diff --git a/assets/app.css b/assets/app.css
index 25ab921..d655957 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -10,72 +10,68 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  height: 100%;
+@layer base {
+  html,
+  body {
+    @apply h-full;
+  }
+
+  body {
+    -webkit-tap-highlight-color: transparent;
+    background: #fbfbfb;
+
+    @apply dark:bg-black;
+  }
 }
 
-:root {
-  --light-bg: #fbfbfb;
-  --dark-bg: #000;
-}
+@layer components {
+  .btn {
+    @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black;
+  }
 
-body {
-  -webkit-tap-highlight-color: transparent;
-  background: var(--light-bg);
+  .link {
+    @apply duration-200 hover:text-black dark:hover:text-white;
+  }
 }
 
-.dark body {
-  background: var(--dark-bg);
-}
+@layer utilities {
+  .not-ready * {
+    @apply !transition-none;
+  }
 
-.not-ready,
-.not-ready * {
-  transition: none !important;
-}
+  .btn-menu::before,
+  .btn-menu::after {
+    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
+  }
 
-.btn {
-  @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black;
-}
+  .nav-wrapper {
+    background: #fbfbfb;
+  }
 
-.link {
-  @apply duration-200 hover:text-black dark:hover:text-white;
-}
+  .open {
+    @apply overflow-hidden;
+  }
 
-.btn-menu::before,
-.btn-menu::after {
-  @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
-}
+  .open .btn-menu::before {
+    @apply w-6 translate-y-[5.5px] rotate-45;
+  }
 
-.nav-wrapper {
-  background: var(--light-bg);
-}
+  .open .btn-menu::after {
+    @apply w-6 -translate-y-[5.5px] -rotate-45;
+  }
 
-.open {
-  @apply overflow-hidden;
-}
+  .open .nav-wrapper {
+    @apply top-0;
+  }
 
-.open .btn-menu::before {
-  @apply w-6 translate-y-[5.5px] rotate-45;
-}
-
-.open .btn-menu::after {
-  @apply w-6 -translate-y-[5.5px] -rotate-45;
-}
+  article pre {
+    @apply -mx-8 !p-8 shadow-lg;
+  }
 
-.open .nav-wrapper {
-  @apply top-0;
-}
-
-article pre {
-  @apply shadow-lg;
-
-  padding: theme('space.8') !important;
-  margin-inline: calc(theme('space.8') * -1);
-}
+  article blockquote {
+    padding-left: calc(theme('space.8') - 3px) !important;
+    margin-left: calc(theme('space.8') * -1) !important;
 
-article blockquote {
-  padding: 0 0 0 calc(theme('space.8') - 3px) !important;
-  margin: 0 0 0 calc(theme('space.8') * -1) !important;
-  border-color: theme('colors.zinc.800') !important;
+    @apply !border-black;
+  }
 }
diff --git a/assets/main.css b/assets/main.css
index b9ea39d..f3b23a6 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -425,6 +425,21 @@ video {
   height: auto;
 }
 
+html, 
+  body {
+  height: 100%;
+}
+
+body {
+  -webkit-tap-highlight-color: transparent;
+  background: #fbfbfb;
+}
+
+.dark body {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1204,39 +1219,51 @@ video {
   --tw-prose-invert-td-borders: #404040;
 }
 
-.prose-stone {
-  --tw-prose-body: #44403c;
-  --tw-prose-headings: #1c1917;
-  --tw-prose-lead: #57534e;
-  --tw-prose-links: #1c1917;
-  --tw-prose-bold: #1c1917;
-  --tw-prose-counters: #78716c;
-  --tw-prose-bullets: #d6d3d1;
-  --tw-prose-hr: #e7e5e4;
-  --tw-prose-quotes: #1c1917;
-  --tw-prose-quote-borders: #e7e5e4;
-  --tw-prose-captions: #78716c;
-  --tw-prose-code: #1c1917;
-  --tw-prose-pre-code: #e7e5e4;
-  --tw-prose-pre-bg: #292524;
-  --tw-prose-th-borders: #d6d3d1;
-  --tw-prose-td-borders: #e7e5e4;
-  --tw-prose-invert-body: #d6d3d1;
-  --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: #a8a29e;
-  --tw-prose-invert-links: #fff;
-  --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: #a8a29e;
-  --tw-prose-invert-bullets: #57534e;
-  --tw-prose-invert-hr: #44403c;
-  --tw-prose-invert-quotes: #f5f5f4;
-  --tw-prose-invert-quote-borders: #44403c;
-  --tw-prose-invert-captions: #a8a29e;
-  --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: #d6d3d1;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
-  --tw-prose-invert-th-borders: #57534e;
-  --tw-prose-invert-td-borders: #44403c;
+.btn {
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-duration: 100ms;
+}
+
+.btn:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dark .btn {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.link {
+  transition-duration: 200ms;
+}
+
+.link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.dark .link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .fixed {
@@ -1272,18 +1299,14 @@ video {
   top: 0px;
 }
 
-.bottom-16 {
-  bottom: 4rem;
+.bottom-20 {
+  bottom: 5rem;
 }
 
 .top-full {
   top: 100%;
 }
 
-.bottom-20 {
-  bottom: 5rem;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -1292,6 +1315,11 @@ video {
   z-index: 40;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1307,11 +1335,6 @@ video {
   margin-bottom: 0px !important;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1322,6 +1345,14 @@ video {
   margin-right: 1.5rem;
 }
 
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -1330,26 +1361,22 @@ video {
   margin-right: 1.25rem;
 }
 
-.mb-0\.5 {
-  margin-bottom: 0.125rem;
+.mt-1 {
+  margin-top: 0.25rem;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
+.mt-24 {
+  margin-top: 6rem;
 }
 
 .ml-auto {
   margin-left: auto;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1370,10 +1397,6 @@ video {
   margin-bottom: 0.25rem;
 }
 
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .ml-1\.5 {
   margin-left: 0.375rem;
 }
@@ -1394,26 +1417,6 @@ video {
   margin-right: -2rem;
 }
 
-.mb-24 {
-  margin-bottom: 6rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
-.-mt-4 {
-  margin-top: -1rem;
-}
-
 .block {
   display: block;
 }
@@ -1422,8 +1425,8 @@ video {
   display: flex;
 }
 
-.\!h-16 {
-  height: 4rem !important;
+.h-20 {
+  height: 5rem;
 }
 
 .h-\[5rem\] {
@@ -1442,16 +1445,12 @@ video {
   height: 2rem;
 }
 
-.\!h-20 {
-  height: 5rem !important;
-}
-
 .min-h-\[calc\(100\%-10rem\)\] {
   min-height: calc(100% - 10rem);
 }
 
-.\!w-16 {
-  width: 4rem !important;
+.w-20 {
+  width: 5rem;
 }
 
 .w-1\/2 {
@@ -1470,10 +1469,6 @@ video {
   width: 2rem;
 }
 
-.\!w-20 {
-  width: 5rem !important;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1554,55 +1549,24 @@ video {
   border-width: 1px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-black\/10 {
   border-color: rgb(0 0 0 / 0.1);
 }
 
-.border-black\/20 {
-  border-color: rgb(0 0 0 / 0.2);
-}
-
-.border-purple-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
-}
-
-.border-purple-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(233 213 255 / var(--tw-border-opacity));
-}
-
-.border-purple-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-border-opacity));
-}
-
-.border-black\/5 {
-  border-color: rgb(0 0 0 / 0.05);
-}
-
-.bg-black\/\[3\%\] {
-  background-color: rgb(0 0 0 / 3%);
-}
-
 .bg-white\/80 {
   background-color: rgb(255 255 255 / 0.8);
 }
 
-.p-6 {
-  padding: 1.5rem;
+.bg-black\/\[3\%\] {
+  background-color: rgb(0 0 0 / 3%);
 }
 
 .p-3 {
   padding: 0.75rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
+.p-6 {
+  padding: 1.5rem;
 }
 
 .px-8 {
@@ -1620,16 +1584,16 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.pb-1 {
-  padding-bottom: 0.25rem;
+.pt-20 {
+  padding-top: 5rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
+.pb-32 {
+  padding-bottom: 8rem;
 }
 
-.pb-40 {
-  padding-bottom: 10rem;
+.pb-1 {
+  padding-bottom: 0.25rem;
 }
 
 .pb-2 {
@@ -1648,25 +1612,13 @@ video {
   padding-bottom: 4rem;
 }
 
-.pt-20 {
-  padding-top: 5rem;
-}
-
-.pb-20 {
-  padding-bottom: 5rem;
-}
-
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
 .text-center {
   text-align: center;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+.text-9xl {
+  font-size: 8rem;
+  line-height: 1;
 }
 
 .text-sm {
@@ -1674,9 +1626,9 @@ video {
   line-height: 1.25rem;
 }
 
-.text-9xl {
-  font-size: 8rem;
-  line-height: 1;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-\[0\.9em\] {
@@ -1692,10 +1644,6 @@ video {
   font-weight: 700;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .\!leading-none {
   line-height: 1 !important;
 }
@@ -1722,34 +1670,12 @@ video {
   opacity: 0.6;
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.drop-shadow-2xl {
-  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.drop-shadow-xl {
-  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1758,99 +1684,12 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.\[background\:url\(\.\/theme\.svg\)_left_center\/cover_no-repeat\] {
-  background: url(./theme.svg) left center/cover no-repeat;
-}
-
-.\[background\:url\(\.\/theme\.png\)_left_\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] {
-  background: url(./theme.png) left / auto 1.5rem no-repeat;
-}
-
-.\[transition\:_background-position_0\.4s_steps\(5\)\] {
-  transition: background-position 0.4s steps(5);
-}
-
-.\[background\:var\(--url\)_center_center\/cover_no-repeat\] {
-  background: var(--url) center center/cover no-repeat;
-}
-
-.\[background\:url\(\.\/theme\.png\)_left_center\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] {
-  background: url(./theme.png) left center/ auto 1.5rem no-repeat;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-:root {
-  --light-bg: #fbfbfb;
-  --dark-bg: #000;
-}
-
-body {
-  -webkit-tap-highlight-color: transparent;
-  background: var(--light-bg);
-}
-
-.dark body {
-  background: var(--dark-bg);
-}
-
-.not-ready,
 .not-ready * {
-  transition: none !important;
-}
-
-.btn {
-  border-radius: 9999px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-duration: 100ms;
-}
-
-.btn:active {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.dark .btn {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.link {
-  transition-duration: 200ms;
-}
-
-.link:hover {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.dark .link:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  transition-property: none !important;
 }
 
 .btn-menu::before, 
-.btn-menu::after {
+  .btn-menu::after {
   display: block;
   height: 2px;
   width: 1.25rem;
@@ -1862,13 +1701,13 @@ body {
 }
 
 .dark .btn-menu::before, .dark 
-.btn-menu::after {
+  .btn-menu::after {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .nav-wrapper {
-  background: var(--light-bg);
+  background: #fbfbfb;
 }
 
 .open {
@@ -1894,17 +1733,35 @@ body {
 }
 
 article pre {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding: 2rem !important;
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  padding: 2rem !important;
-  margin-inline: calc(2rem * -1);
 }
 
 article blockquote {
-  padding: 0 0 0 calc(2rem - 3px) !important;
-  margin: 0 0 0 calc(2rem * -1) !important;
-  border-color: #27272a !important;
+  padding-left: calc(2rem - 3px) !important;
+  margin-left: calc(2rem * -1) !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
+}
+
+.\[background\:url\(\.\/theme\.svg\)_left_center\/cover_no-repeat\] {
+  background: url(./theme.svg) left center/cover no-repeat;
+}
+
+.\[background\:url\(\.\/theme\.png\)_left_center\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] {
+  background: url(./theme.png) left center/ auto 1.5rem no-repeat;
+}
+
+.\[transition\:_background-position_0\.4s_steps\(5\)\] {
+  transition: background-position 0.4s steps(5);
+}
+
+.\[background\:var\(--url\)_center_center\/cover_no-repeat\] {
+  background: var(--url) center center/cover no-repeat;
 }
 
 .first-of-type\:mt-0:first-of-type {
@@ -1915,6 +1772,23 @@ article blockquote {
   margin-bottom: 0px;
 }
 
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hover\:animate-spin:hover {
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -1934,10 +1808,6 @@ article blockquote {
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
-.dark .dark\:border-white\/20 {
-  border-color: rgb(255 255 255 / 0.2);
-}
-
 .dark .dark\:bg-white\/\[8\%\] {
   background-color: rgb(255 255 255 / 8%);
 }