Feat/css tweaks

src/app/docs/[slug]/not-found.tsx

@@ -3,7 +3,7 @@ import { Container } from "@/app/styles";
 
 export default function PostNotFound() {
   return (
-    <Container sideBar>
+    <Container sideBar hasBackground>
       <NotFound text="Uh oh! This document couldn't be found. 🤷‍♂️" />
     </Container>
   );

src/app/docs/[slug]/page.tsx

@@ -22,7 +22,7 @@ export default async function Docs({ params }: Props) {
   if (!doc) return notFound();
 
   return (
-    <Container sideBar>
+    <Container sideBar hasBackground>
       <Doc doc={doc} />
     </Container>
   );

src/app/page.module.css

@@ -2,11 +2,13 @@ div.Container {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: 100dvh;
 }
 
 div.Container_hasBackground_true {
-  background: var(--color-bg) url("/background.png") center no-repeat fixed;
-  background-size: contain;
+  background-color: var(--color-bg);
+  background-image: radial-gradient(#fff4 0, var(--color-bg) 1px);
+  background-size: 12px 12px;
 }
 
 main.Hero {
@@ -68,6 +70,7 @@ main.Hero ul li a {
   font-size: large;
   padding: 18px;
   color: var(--color-fg);
+  backdrop-filter: blur(1px);
   border: 2px solid var(--color-grey);
   border-radius: 4px;
   font-weight: bold;
@@ -120,7 +123,8 @@ main.Hero ul li a svg {
 
 main.Hero p.Version {
   font-size: 1rem;
-  color: var(--color-grey);
+  color: var(--color-fg);
+  opacity: 0.25;
   margin: 0;
   padding: 0;
   text-align: center;

src/app/page.tsx

@@ -20,7 +20,7 @@ const first = categories[0].docs[0];
 export default async function Home() {
   const version = await getPackageVersion("@phantomstudios/css-components");
   return (
-    <Container>
+    <Container hasBackground>
       <Hero id="hero">
         <Image
           src="/logo.svg"

src/components/CodeClipboard/index.tsx

@@ -16,11 +16,12 @@ const CodeClipboard = ({ text }: Props) => {
   const [isCopied, setIsCopied] = useState(false);
 
   const copy = () => {
+    // Allows animation to play on mobile
     navigator.clipboard.writeText(text);
     setIsCopied(true);
     setTimeout(() => {
       setIsCopied(false);
-    }, 300);
+    }, 150);
   };
 
   return (

src/components/CodeClipboard/styles.module.scss

@@ -0,0 +1,27 @@
+span.CodeClipboard {
+  display: flex;
+  gap: 10px;
+
+  background-color: var(--color-bg-dark);
+  color: inherit;
+
+  font-family: monospace;
+  font-size: 16px;
+
+  border-radius: 4px;
+  padding: 12px 32px;
+
+  cursor: pointer;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-teal);
+    color: var(--color-bg);
+    box-shadow: 0 12px 48px black;
+  }
+}
+
+span.CodeClipboard_copied_true:hover {
+  transform: translateY(4px);
+  box-shadow: 0 4px 16px black;
+}

src/components/CodeClipboard/styles.ts

@@ -1,6 +1,6 @@
 import { styled } from "@phantomstudios/css-components";
 
-import css from "./styles.module.css";
+import css from "./styles.module.scss";
 
 export const CodeClipboardWrapper = styled("span", {
   css: css.CodeClipboard,

src/components/CodeExample/styles.module.css

@@ -18,6 +18,7 @@ ul.CodeSections {
 
 li.CodeSection {
   margin: 0 -1rem;
+  backdrop-filter: blur(1px);
   border: 2px solid var(--color-grey);
   border-radius: 4px;
   transition: all 0.3s ease-in-out;

src/components/NavLinks/index.tsx

@@ -32,16 +32,15 @@ const NavLinks = ({ categories }: Props) => {
           <h2>{category.title}</h2>
           <Docs>
             {category.docs.map((doc, i) => (
-              <List active={pathName?.endsWith(doc.slug)} key={i}>
-                <Link
-                  href={`/docs/${doc.slug}`}
-                  onClick={() => {
-                    setOpen(false);
-                  }}
-                >
-                  {doc.title}
-                </Link>
-              </List>
+              <Link
+                key={i}
+                href={`/docs/${doc.slug}`}
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <List active={pathName?.endsWith(doc.slug)}>{doc.title}</List>
+              </Link>
             ))}
           </Docs>
         </li>

src/components/Stats/styles.module.css

@@ -33,11 +33,6 @@ li.statCard {
   width: 240px;
   height: 200px;
   background-color: var(--color-bg-dark);
-  transition: 0.2s;
-}
-
-li.statCard:hover {
-  background-color: var(--color-bg-darker);
 }
 
 li.statCard h3 {