Style a bit

6 files changed, 141 insertions, 44 deletions

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4130b6a..69afc6e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require("prism-react-renderer/themes/shadesOfPurple");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -150,8 +149,8 @@ const config = {
       },
       prism: {
         theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
         additionalLanguages: ["haskell"],
+        defaultLanguage: "haskell",
       },
     }),
 };
diff --git a/src/components/CodeFrame.tsx b/src/components/CodeFrame.tsx
new file mode 100644
index 0000000..957eb5b
--- /dev/null
+++ b/src/components/CodeFrame.tsx
@@ -0,0 +1,60 @@
+import React, { ReactElement } from "react";
+import Button from "./Button";
+import classNames from "classnames";
+import CodeBlock from "@theme/CodeBlock";
+
+type FrameType = {
+  children?: string;
+  language?: string;
+  title?: string;
+  rainbow?: boolean;
+  shadowClass?: string;
+  width?: "fit" | "full" | "1/2" | "1/3";
+};
+
+const widthClasses = {
+  fit: "w-fit",
+  full: "w-full",
+  "1/2": "w-1/2",
+  "1/3": "w-1/3",
+};
+
+const dimensionClasses = ["border-4"];
+
+const lightModeClasses = ["bg-white", "text-black", "border-black"];
+
+const darkModeClasses = [
+  "bg-slate-950",
+  "text-white",
+  "border-white",
+  "shadow-neowhite",
+].map((className) => `dark:${className}`);
+
+const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
+
+const Frame = ({
+  rainbow,
+  children,
+  language,
+  title,
+  width,
+  shadowClass = "shadow-neoblack",
+}: FrameType) => {
+  const s = rainbow
+    ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
+    : classes;
+  const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" ");
+  return (
+    <div className={cls}>
+      <CodeBlock
+        className="!rounded-none h-full"
+        language={language}
+        title={title}
+      >
+        {children}
+      </CodeBlock>
+    </div>
+  );
+};
+
+export default Frame;
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
index 4a7ee54..62467b6 100644
--- a/src/components/Frame.tsx
+++ b/src/components/Frame.tsx
@@ -5,17 +5,20 @@ import classNames from "classnames";
 type FrameType = {
   children?: ReactElement | ReactElement[];
   rainbow?: boolean;
+  shadowClass?: string;
   width?: "fit" | "full" | "1/2" | "1/3";
 };
 
+const widthClasses = {
+  fit: "w-fit",
+  full: "w-full",
+  "1/2": "w-1/2",
+  "1/3": "w-1/3",
+};
+
 const dimensionClasses = ["px-8", "py-4", "dark:bg-slate-950", "border-4"];
 
-const lightModeClasses = [
-  "bg-white",
-  "text-black",
-  "border-black",
-  "shadow-neoblack",
-];
+const lightModeClasses = ["bg-white", "text-black", "border-black"];
 
 const darkModeClasses = [
   "bg-slate-950",
@@ -26,11 +29,16 @@ const darkModeClasses = [
 
 const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
 
-const Frame = ({ rainbow, children, width }: FrameType) => {
+const Frame = ({
+  rainbow,
+  children,
+  width,
+  shadowClass = "shadow-neoblack",
+}: FrameType) => {
   const s = rainbow
     ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
     : classes;
-  const cls = [...s, `w-${width}`].join(" ");
+  const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" ");
   return <div className={cls}>{children}</div>;
 };
 
diff --git a/src/css/custom.css b/src/css/custom.css
index ca57fbc..93885b7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,12 +4,16 @@
  * work well for content-centric websites.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@900&family=Ubuntu&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@600&family=Ubuntu&display=swap');
 @tailwind base;
 
 @tailwind components;
 @tailwind utilities;
 
+.tracking-supatight{
+  letter-spacing: -0.095em;
+}
+
 body {
   background-color: theme('colors.lightbackground');
 }
@@ -24,7 +28,6 @@ h1, h2, h3, h4, h5, h6 {
 
 .underline {
   text-decoration-skip-ink: none !important;
-  text-underline-offset: 2rem;
 }
 
 p, li {
@@ -65,20 +68,23 @@ p, li {
   font-size: 1.5rem;
 }
 
-.navbar__link {
-  text-decoration: underline;
-  text-decoration-style: wavy;
-}
 
 .navbar__link--active {
   font-weight: bolder;
   text-decoration-thickness: 2px;
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-decoration-skip-ink: none !important;
+  text-underline-offset: 0.2em;
 }
 
 
 .navbar__link:hover {
+  text-decoration-skip-ink: none !important;
   text-decoration: underline;
   text-decoration-style: wavy;
+  text-underline-offset: 0.2em;
+  color: inherit;
 }
 
 /*
@@ -108,10 +114,11 @@ p, li {
 .navbar__logo > img {
   padding: 18px;
 }
+*/
 
 .navbar__items--right > .navbar__item > svg {
   display: none;
-} */
+}
 
 /* You can override the default Infima variables here. */
 :root {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1448b3b..6ee548c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import CodeBlock from "@theme/CodeBlock";
 import styles from "./index.module.css";
 import Frame from "../components/Frame";
 import Button from "../components/Button";
+import CodeFrame from "../components/CodeFrame";
 
 const dynC = (className: string, color: string) =>
   `dark:${className}-dark${color} ${className}-light${color}`;
@@ -20,28 +21,30 @@ function HomepageHeader() {
       <div className="px-8 my-24">
         <div className="mb-10">
           <div className="">
-            <h1 className="md:leading-snug text-center leading-normal mb-20 md:text-7xl text-5xl">
-              Don't fear shipping{" "}
-              <span className="dark:text-darkprimary text-lightsecondary underline decoration-wavy">
+            <h1 className="text-center tracking-supatight leading-relaxed lg:text-7xl md:text-6xl sm:text-5xl text-3xl">
+              Don't fear shipping
+              <br />
+              <span className="dark:text-darkprimary text-lightsecondary underline decoration-wavy underline-offset-8">
                 the MVP.
               </span>
             </h1>
-            <Frame rainbow>
-              <p className="text-center text-2xl justify-normal my-10 mx-auto md:w-2/3">
-                From your head to the world in no time, without the fear of
-                future refactors.{" "}
-                <strong>NeoHaskell scales with your product.</strong>
-              </p>
-            </Frame>
           </div>
         </div>
-        <div className="text-center mx-auto p-5">
-          <Link to="/docs/intro">
-            <Button color="yellow" rounded="full" size="lg">
-              <h2 className="mx-4 my-2">Get Started!</h2>
-            </Button>
-          </Link>
-        </div>
+      </div>
+      <div className="mx-auto mb-4 md:w-1/2">
+        <Frame rainbow>
+          <p className="text-center md:text-2xl sm:text-xl text-lg justify-normal my-10 mx-auto md:w-2/3">
+            From your head to the world in no time, without the fear of future
+            refactors. <strong>NeoHaskell scales with your product.</strong>
+          </p>
+        </Frame>
+      </div>
+      <div className="relative text-center mx-auto my-24">
+        <Link to="/docs/intro">
+          <Button color="yellow" rounded="full" size="lg">
+            <h2 className="mx-4 my-2 text-2xl">Get Started!</h2>
+          </Button>
+        </Link>
       </div>
     </header>
   );
@@ -54,17 +57,16 @@ export default function Home(): JSX.Element {
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
         <div className="container grid grid-cols-1 gap-4">
-          <Frame width="full">
-            <h2 className="text-3xl font-bold">Hello, World!</h2>
-          </Frame>
-          <div className="place-content-left">
-            <CodeBlock language="haskell" title="src/Main.hs" showLineNumbers>
-              {`module Main where
+          <CodeFrame
+            language="haskell"
+            shadowClass="shadow-neocyan"
+            width="full"
+          >
+            {`module Main where
 
 main :: IO ()
 main = putStrLn "Hello, World!"`}
-            </CodeBlock>
-          </div>
+          </CodeFrame>
 
           <p className="text-red-500 font-extrabold text-5xl">
             If you're reading this, you probably found it by accident. This is a
diff --git a/tailwind.config.js b/tailwind.config.js
index 8251c04..f25d42b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,18 @@ const dark = Object.keys(darkColors).reduce((acc, key) => {
   return acc;
 }, {});
 
+const shadow = (px, py, color) => `${px}px ${py}px 0px ${color}`;
+const simpleShadow = (px, color) => shadow(px, px, color);
+const borderedShadow = (px, color) => {
+  const offset = 2;
+  const actualShadow = simpleShadow(px, color);
+  const rightBorder = simpleShadow(px + offset, "black");
+  const leftBorder = simpleShadow(px - offset, "black");
+  const leftCorner = shadow(px - offset, px + offset, "black");
+  const rightCorner = shadow(px + offset, px - offset, "black");
+  return `${actualShadow}, ${rightBorder}, ${leftBorder}, ${leftCorner}, ${rightCorner}`;
+};
+
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
   darkMode: ["class", '[data-theme="dark"]'],
@@ -35,12 +47,21 @@ module.exports = {
       boxShadow: {
         neoblack: "8px 8px 0px rgba(0,0,0,1)",
         neowhite: "8px 8px 0px rgba(255,0,0,1)",
-        rainbow: `8px 8px 0px ${colors.cyan["400"]}, 16px 16px 0px ${colors.yellow["400"]}, 24px 24px 0px ${colors.violet["400"]}`,
+        rainbow: `${borderedShadow(8, colors.cyan["400"])}, ${borderedShadow(
+          8 * 2,
+          colors.yellow["400"]
+        )}, ${borderedShadow(8 * 3, colors.violet["400"])}`,
+        neocyan: borderedShadow(8, colors.cyan["400"]),
+        neoyellow: borderedShadow(8, colors.yellow["400"]),
+        neoviolet: borderedShadow(8, colors.violet["400"]),
       },
       colors: {
         ...light,
         ...dark,
       },
+      tracking: {
+        supatight: "-0.5em",
+      },
     },
   },
   plugins: [],