polish website

Author: huozhi

site/app/layout.tsx

@@ -9,21 +9,13 @@ export default function RootLayout({ children }) {
           {children}
         </main>
         <footer>
-          <nav aria-label="Footer links">
-            <div className="footer-group">
-              <span className="footer-label">Project</span>
+          <nav className="site-footer" aria-label="Footer links">
+            <div className="footer-links">
               <a href="https://github.com/huozhi/devjar" target="_blank" rel="noopener noreferrer">
-                Devjar repo
+                GitHub
               </a>
               <a href="https://github.com/huozhi/devjar/blob/main/API.md" target="_blank" rel="noopener noreferrer">
-                API
-              </a>
-            </div>
-            <span className="footer-divider" aria-hidden="true" />
-            <div className="footer-group">
-              <span className="footer-label">Author</span>
-              <a href="https://github.com/huozhi" target="_blank" rel="noopener noreferrer">
-                Huozhi
+                API.md
               </a>
               <a href="https://x.com/huozhi" target="_blank" rel="noopener noreferrer">
                 X

site/app/page.tsx

@@ -8,8 +8,8 @@ const codeSample = {
   import './styles.css'
 
   const site = {
-    name: 'Devjar',
-    cta: 'Wiggle',
+    name: 'DEVJAR',
+    cta: 'WIGGLE',
     accent: '#525252',
   }
 

site/styles.css

@@ -48,46 +48,42 @@ main {
 }
 
 footer {
-  margin-top: 3.5rem;
-  padding: 0 1rem 2rem;
+  margin-top: 4rem;
+  padding: 0 1rem 2.25rem;
   display: flex;
   justify-content: center;
 }
 
-footer nav {
-  display: inline-flex;
+.site-footer {
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.875rem;
-  flex-wrap: wrap;
+  gap: 1rem;
   max-width: 960px;
   width: 100%;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-  text-align: center;
-  color: #6b7280;
-  font-size: 0.875rem;
+  padding-top: 1.125rem;
+  border-top: 1px solid #e7e5e4;
+  color: #737373;
+  font-size: 0.8125rem;
   line-height: 1.5;
 }
 
-.footer-group {
+.footer-links {
   display: inline-flex;
   align-items: center;
-  gap: 0.625rem;
+  justify-content: center;
+  gap: 0.875rem;
+  flex-wrap: wrap;
 }
 
-.footer-label {
-  color: #a3a3a3;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.site-footer a {
+  text-decoration: none;
 }
 
-.footer-divider {
-  width: 1px;
-  height: 1rem;
-  background: #e5e7eb;
+.footer-links a:hover {
+  color: #171717;
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 .text-center {
@@ -132,15 +128,6 @@ footer nav {
   max-width: 760px;
 }
 
-footer a {
-  text-decoration: none;
-}
-
-footer a:hover {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
 .usage-section {
   width: 100%;
   max-width: 680px;
@@ -225,10 +212,21 @@ footer a:hover {
 }
 
 @media (max-width: 640px) {
-  main,
-  footer {
+  main {
     padding: 0 0.5rem;
   }
+  footer {
+    padding: 0 0.5rem 2rem;
+  }
+  .site-footer {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .footer-links {
+    justify-content: flex-start;
+    gap: 0.75rem;
+  }
   [data-codesandbox] .codesandbox-layout {
     flex-direction: column;
     min-height: auto;

site/ui/codesandbox.tsx

@@ -266,7 +266,7 @@ export function Codesandbox({
       <div className="preview" ref={previewRef} style={{ height: previewHeight }}>
         <div className={previewReady ? 'preview--loading is-hidden' : 'preview--loading'} aria-hidden="true">
           <div className="preview--loading-copy">
-            <h1>Devjar</h1>
+            <h1>DEVJAR</h1>
             <p className="preview--loading-kicker">
               <span className="preview--loading-measure">
                 React Live Preview in browser
@@ -275,8 +275,8 @@ export function Codesandbox({
             </p>
             <button className="preview--loading-button" type="button" tabIndex={-1}>
               <span className="preview--loading-measure">
-                Wiggle
-                <span className="preview--loading-noise">{renderLoaderCells('Wiggle', loaderFrame + 2)}</span>
+                WIGGLE
+                <span className="preview--loading-noise">{renderLoaderCells('WIGGLE', loaderFrame + 2)}</span>
               </span>
             </button>
           </div>