From 351299ba131dcf01cae0b9a166e4947732a70130 Mon Sep 17 00:00:00 2001 From: Nick Tchayka Date: Thu, 31 Aug 2023 15:50:07 +0100 Subject: Style a bit --- docusaurus.config.js | 5 ++-- src/components/CodeFrame.tsx | 60 ++++++++++++++++++++++++++++++++++++++++++++ src/components/Frame.tsx | 24 ++++++++++++------ src/css/custom.css | 21 ++++++++++------ src/pages/index.tsx | 52 ++++++++++++++++++++------------------ tailwind.config.js | 23 ++++++++++++++++- 6 files changed, 141 insertions(+), 44 deletions(-) create mode 100644 src/components/CodeFrame.tsx 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 ( +
+ + {children} + +
+ ); +}; + +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
{children}
; }; 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() {
-

- Don't fear shipping{" "} - +

+ Don't fear shipping +
+ the MVP.

- -

- From your head to the world in no time, without the fear of - future refactors.{" "} - NeoHaskell scales with your product. -

-

-
- - - -
+
+
+ +

+ From your head to the world in no time, without the fear of future + refactors. NeoHaskell scales with your product. +

+ +
+
+ + +
); @@ -54,17 +57,16 @@ export default function Home(): JSX.Element {
- -

Hello, World!

- -
- - {`module Main where + + {`module Main where main :: IO () main = putStrLn "Hello, World!"`} - -
+

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: [], -- cgit