From fc865f752e54f092729049adc25c50a7dc29a623 Mon Sep 17 00:00:00 2001 From: James Acklin Date: Thu, 30 Sep 2021 09:23:38 -0400 Subject: [PATCH] initial commit, base styles --- README.md | 31 ++----- package-lock.json | 6 +- package.json | 6 +- pages/_app.js | 6 +- pages/api/hello.js | 5 -- pages/index.js | 74 +--------------- postcss.config.js | 2 +- public/favicon.ico | Bin 15086 -> 5430 bytes public/vercel.svg | 4 - styles/globals.css | 211 +++++++++++++++++++++++++++++++++++++++++++++ tailwind.config.js | 65 +++++++++++++- 11 files changed, 291 insertions(+), 119 deletions(-) delete mode 100644 pages/api/hello.js delete mode 100644 public/vercel.svg create mode 100644 styles/globals.css diff --git a/README.md b/README.md index 59df509..0354b49 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,8 @@ -# Next.js + Tailwind CSS Example +# Urbit Developers Portal -This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). +To develop locally: -It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS. - -## Preview - -Preview the example live on [StackBlitz](http://stackblitz.com/): - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npx create-next-app --example with-tailwindcss with-tailwindcss-app -# or -yarn create next-app --example with-tailwindcss with-tailwindcss-app ``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). +yarn install +yarn dev +``` diff --git a/package-lock.json b/package-lock.json index 9f2e56e..b13650d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,9 @@ "react-dom": "^17.0.2" }, "devDependencies": { - "autoprefixer": "^10.2.6", - "postcss": "^8.3.5", - "tailwindcss": "^2.2.4" + "autoprefixer": "^10.3.6", + "postcss": "^8.3.8", + "tailwindcss": "^2.2.16" } }, "node_modules/@babel/code-frame": { diff --git a/package.json b/package.json index d30b715..fefa900 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "react-dom": "^17.0.2" }, "devDependencies": { - "autoprefixer": "^10.2.6", - "postcss": "^8.3.5", - "tailwindcss": "^2.2.4" + "autoprefixer": "^10.3.6", + "postcss": "^8.3.8", + "tailwindcss": "^2.2.16" } } diff --git a/pages/_app.js b/pages/_app.js index 1040120..2fc3e07 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,7 +1,7 @@ -import 'tailwindcss/tailwind.css' +import "../styles/globals.css"; function MyApp({ Component, pageProps }) { - return + return ; } -export default MyApp +export default MyApp; diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index f163396..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function helloAPI(req, res) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/index.js b/pages/index.js index 6b67e91..342fb2e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,82 +1,16 @@ -import Head from 'next/head' +import Head from "next/head"; export default function Home() { return (
- Create Next App + Urbit Developers
-

- Welcome to{' '} - - Next.js! - -

- -

- Get started by editing{' '} - - pages/index.js - -

- - +

Hello world!

- -
- ) + ); } diff --git a/postcss.config.js b/postcss.config.js index 3fa0a95..3687d28 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -5,4 +5,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/public/favicon.ico b/public/favicon.ico index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..9776cab5f91c182327e342c97a16b0146072c5e1 100644 GIT binary patch literal 5430 zcmeI$u?>JA5QX8VaR5fR$}ooGIE{0-r9MIng^kVqmt24s8ouHRq(!Srk=M|N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- - - \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..aaa8812 --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,211 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500;600;700;800&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --tray-time: 0ms; +} + +html, +body { + padding: 0; + margin: 0; + /* Make all text wall-600 by default */ + @apply text-wall-600; +} + +/* Reset a tags */ +a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +/* Links in p tags should be green */ +p a { + @apply text-green-400 font-semibold; +} + +/* Reduce b and strong tag weight default */ +b, +strong { + @apply font-semibold; +} + +/* Typography */ + +h1, +.type-h1 { + @apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600; +} + +h2, +.type-h2 { + @apply text-3xl lg:text-4xl font-bold leading-tight; +} + +h3, +.type-h3 { + @apply text-xl font-semibold; +} + +h4, +.type-ui { + @apply text-lg font-semibold; +} + +h5, +.type-h5, +.type-bold { + @apply text-base font-semibold leading-relaxed; +} + +p, +.type-p { + @apply text-base leading-relaxed; +} + +.type-sub { + @apply text-sm; +} + +.type-sub-bold { + @apply text-sm font-semibold; +} + +code .type-code { + @apply bg-wall-100 p-4 font-mono; +} + +/* Utils */ + +.layout-narrow { + @apply w-full md:w-8/12 lg:w-6/12; +} + +.layout { + @apply w-full md:w-10/12 lg:w-8/12; +} + +.measure { + max-width: 34em; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.bg-img { + background-repeat: no-repeat; + background-position: center center; + @apply bg-wall-100; +} + +.button-sm { + @apply flex-center px-3 h-10 rounded-lg type-ui; +} + +.button-lg { + @apply flex-center px-6 py-1 rounded-xl h-14 type-ui; +} + +.badge-sm { + @apply flex-center text-base font-medium px-3 h-8 rounded-full; +} + +.badge-lg { + @apply flex-center type-ui px-5 h-12 rounded-full; +} + +.button-sm:hover, +.button-text:hover, +.button-lg:hover, +a:hover { + opacity: 0.66; +} + +/* BEM Classes - Use sparingly */ + +.port-hero-card-height { + height: 36em; +} + +.port-hero-image-height { + height: 32em; +} + +.port-hero-image { + transform: translateX(8%); + background-image: linear-gradient( + to right, + rgba(255, 255, 255, 0) 85%, + rgba(255, 255, 255, 1) 100% + ), + url("https://media.urbit.org/port.svg"); + background-size: cover; +} + +.tray-menu-open { + transform: translateX(0); + transition: transform var(--tray-time); +} + +.tray-menu-closed { + transform: translateX(-110vw); + transition: transform var(--tray-time); +} + +.tray-menu-width { + width: calc(100vw - 4rem - 1rem - 1rem); +} + +.mobile-search-button-width { + width: calc(100vw - 4rem - 1rem - 1rem - 1rem - 1rem); +} + +.tray-overlay-open { + opacity: 1; + transition: opacity var(--tray-time); +} + +.tray-overlay-closed { + opacity: 0; + transition: opacity var(--tray-time); +} + +.menu-open { + left: 0; + visibility: visible; + display: block; +} + +.menu-closed { + left: -100vw; + visibility: hidden; + display: none; +} + +.dot::before { + width: 0.5rem; + height: 0.5rem; + border-radius: 99px; + content: ""; + position: absolute; + left: -0.75rem; + top: 0.4rem; + @apply bg-green-400; +} + +.sidebar figure, +.sidebar img { + width: auto !important; + margin: 0 auto !important; + left: 0 !important; + display: block !important; + position: static !important; + border-radius: 0 !important; +} diff --git a/tailwind.config.js b/tailwind.config.js index 211048f..e4eacc4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,12 +1,69 @@ module.exports = { - mode: 'jit', - purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], + purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], darkMode: false, // or 'media' or 'class' theme: { - extend: {}, + colors: { + // Wall + "wall-100": "#F3F2F0", // Primary + "wall-200": "#E3E0DB", + "wall-300": "#C8C4BD", + "wall-400": "#918C84", + "wall-500": "#5A564F", + "wall-600": "#24221E", + washedWall: "rgba(240, 239, 236, .8)", // for overlays + // Greens (Theme Primary Color) + "green-100": "#E5F7F1", + "green-200": "#BFEBDB", + "green-300": "#80D8B8", + "green-400": "#00B171", // Primary + "green-500": "#006842", + "green-600": "#001F13", + // Yellows + "yellow-100": "#FFFCF1", + "yellow-200": "#FEEBAA", + "yellow-300": "#FCDB63", // Primary + "yellow-400": "#CE9645", + "yellow-500": "#A15A2D", + "yellow-600": "#602010", + // Blues + "blue-100": "#F1F9FF", + "blue-200": "#BAE9FF", + "blue-300": "#7ED8FF", + "blue-400": "#219DFF", // Primary + "blue-500": "#193C90", + "blue-600": "#070821", + // Util + black: "#000", + white: "#FFF", + transparent: "rgba(0,0,0,0)", + // Syntax highlighting + purple: "rgba(157,82,255,0.8)", + red: "#ff4136", + // White semi-opaques + washedWhite: "rgba(255,255,255, 0.5)", + midWhite: "rgba(255,255,255, 0.8)", + }, + fontFamily: { + sans: ["Inter", "-apple-system", "sans-serif"], + mono: ["Source Code Pro", "monospace"], + }, + extend: { + fontSize: { + xs: "0.75rem", + sm: "0.875rem", + base: "1rem", + lg: "1.125rem", + xl: "1.25rem", + "2xl": "1.5rem", + "3xl": "1.875rem", + "4xl": "2.25rem", + "5xl": "3rem", + "6xl": "4rem", + }, + }, }, variants: { extend: {}, }, plugins: [], -} +};