start of design system

jsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$components": ["src/lib/components"],
+			"$layout": ["src/lib/components/layout"],
+			"$layouts": ["src/lib/layouts"],
+			"$lib": ["src/lib"],
+			"$styles": ["src/lib/styles"],
+			"$stores": ["src/lib/stores"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package.json

@@ -15,19 +15,14 @@
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^4.19.0",
 		"@typescript-eslint/parser": "^4.19.0",
-		"autoprefixer": "^10.3.1",
-		"cssnano": "^5.0.6",
 		"eslint": "^7.22.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-svelte3": "^3.2.0",
 		"mdsvex": "^0.9.3",
-		"postcss": "^8.3.5",
-		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.2.1",
 		"prettier-plugin-svelte": "^2.2.0",
 		"svelte": "^3.38.2",
 		"svelte-preprocess": "^4.7.4",
-		"tailwindcss": "^2.2.4",
 		"tslib": "^2.0.0",
 		"typescript": "^4.0.0"
 	},

postcss.config.cjs

@@ -1,20 +0,0 @@
-const tailwindcss = require("tailwindcss");
-const autoprefixer = require("autoprefixer");
-const cssnano = require("cssnano");
-
-const mode = process.env.NODE_ENV;
-const dev = mode === "development";
-
-const config = {
-	plugins: [
-		//Some plugins, like postcss-nested, need to run before Tailwind,
-		tailwindcss(),
-		//But others, like autoprefixer, need to run after,
-		autoprefixer(),
-		!dev && cssnano({
-			preset: "default",
-		})
-	],
-};
-
-module.exports = config;

src/lib/components/layout/Header.svelte

@@ -43,6 +43,16 @@
 </header>
 
 <style>
+	nav {
+		padding: 2rem 0;
+	}
+	header {
+		background: var(--accent-color);
+		color: var(--header-text-color);
+		padding: 1.5rem 1rem;
+	}
+	@media (min-width: 1280px) {
+	}
 	@media print {
 		header {
 			display: none;

src/lib/components/layout/Link.svelte

@@ -9,7 +9,7 @@
 </li>
 
 <style>
-	a {
+	/* a {
 		color: black;
 		font-size: var(--font-100);
 		text-decoration: none;
@@ -30,7 +30,7 @@
 
 	li a:hover {
 		border-bottom: 4px solid var(--color);
-	}
+	} */
 	.active {
 		border-bottom: 4px solid var(--color);
 	}

src/lib/styles/globals.css

@@ -0,0 +1,56 @@
+body {
+	border-top: 6px solid var(--color);
+	font-family: Inter;
+}
+
+h1,
+h2,
+h3,
+h4 {
+	font-family: Overpass;
+	font-weight: bold;
+}
+
+h1 {
+	@apply text-5xl lg:text-7xl;
+}
+
+h2 {
+}
+
+a {
+	color: var(--color);
+}
+
+[href]:hover {
+	text-decoration: none;
+}
+
+figcaption {
+	font-size: var(--font-100);
+	font-style: italic;
+	margin-top: 1rem;
+	margin-left: 1rem;
+}
+
+blockquote {
+	padding-left: var(--font-200);
+	border-left: 5px solid;
+	font-style: italic;
+}
+
+::selection {
+	color: #fff;
+	background: rgba(0, 0, 0, 0.99);
+}
+
+.heading {
+	text-align: center;
+	margin: var(--space-600);
+	max-width: 60ch;
+}
+
+.container {
+	margin: 0 auto;
+	width: 100%;
+}

src/lib/styles/old-app.css

@@ -1,8 +1,3 @@
-@tailwind base;
-/* Write your global styles here, in PostCSS syntax */
-@tailwind components;
-@tailwind utilities;
-
 @font-face {
 	font-family: Inter;
 	src: url(/fonts/Inter-Regular.woff2);

src/lib/styles/reset.css

@@ -0,0 +1,239 @@
+/* @docs
+label: Core Remedies
+version: 0.1.0-beta.2
+note: |
+  These remedies are recommended
+  as a starter for any project.
+category: file
+*/
+
+/* @docs
+label: Box Sizing
+note: |
+  Use border-box by default, globally.
+category: global
+*/
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/* @docs
+label: Line Sizing
+note: |
+  Consistent line-spacing,
+  even when inline elements have different line-heights.
+links:
+  - https://drafts.csswg.org/css-inline-3/#line-sizing-property
+category: global
+*/
+html {
+	line-sizing: normal;
+}
+
+/* @docs
+label: Body Margins
+note: |
+  Remove the tiny space around the edge of the page.
+category: global
+*/
+body {
+	margin: 0;
+}
+
+/* @docs
+label: Hidden Attribute
+note: |
+  Maintain `hidden` behaviour when overriding `display` values.
+  category: global
+*/
+[hidden] {
+	display: none;
+}
+
+/* @docs
+label: Heading Sizes
+note: |
+  Switch to rem units for headings
+category: typography
+*/
+h1 {
+	font-size: 2rem;
+}
+h2 {
+	font-size: 1.5rem;
+}
+h3 {
+	font-size: 1.17rem;
+}
+h4 {
+	font-size: 1rem;
+}
+h5 {
+	font-size: 0.83rem;
+}
+h6 {
+	font-size: 0.67rem;
+}
+
+/* @docs
+label: H1 Margins
+note: |
+  Keep h1 margins consistent, even when nested.
+category: typography
+*/
+h1 {
+	margin: 0.67em 0;
+}
+
+/* @docs
+label: Pre Wrapping
+note: |
+  Overflow by default is bad...
+category: typography
+*/
+pre {
+	white-space: pre-wrap;
+}
+
+/* @docs
+label: Horizontal Rule
+note: |
+  1. Solid, thin horizontal rules
+  2. Remove Firefox `color: gray`
+  3. Remove default `1px` height, and common `overflow: hidden`
+category: typography
+*/
+hr {
+	border-style: solid;
+	border-width: 1px 0 0;
+	color: inherit;
+	height: 0;
+	overflow: visible;
+}
+
+/* @docs
+label: Responsive Embeds
+note: |
+  1. Block display is usually what we want
+  2. The `vertical-align` removes strange space-below in case authors overwrite the display value
+  3. Responsive by default
+  4. Audio without `[controls]` remains hidden by default
+category: embedded elements
+*/
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+	display: block;
+	vertical-align: middle;
+	max-width: 100%;
+}
+audio:not([controls]) {
+	display: none;
+}
+
+/* @docs
+label: Responsive Images
+note: |
+  These new elements display inline by default,
+  but that's not the expected behavior for either one.
+  This can interfere with proper layout and aspect-ratio handling.
+  1. Remove the unnecessary wrapping `picture`, while maintaining contents
+  2. Source elements have nothing to display, so we hide them entirely
+category: embedded elements
+*/
+picture {
+	display: contents;
+}
+source {
+	display: none;
+}
+
+/* @docs
+label: Aspect Ratios
+note: |
+  Maintain intrinsic aspect ratios when `max-width` is applied.
+  `iframe`, `embed`, and `object` are also embedded,
+  but have no intrinsic ratio,
+  so their `height` needs to be set explicitly.
+category: embedded elements
+*/
+img,
+svg,
+video,
+canvas {
+	height: auto;
+}
+
+/* @docs
+label: Audio Width
+note: |
+  There is no good reason elements default to 300px,
+  and audio files are unlikely to come with a width attribute.
+category: embedded elements
+*/
+audio {
+	width: 100%;
+}
+
+/* @docs
+label: Image Borders
+note: |
+  Remove the border on images inside links in IE 10 and earlier.
+category: legacy browsers
+*/
+img {
+	border-style: none;
+}
+
+/* @docs
+label: SVG Overflow
+note: |
+  Hide the overflow in IE 10 and earlier.
+category: legacy browsers
+*/
+svg {
+	overflow: hidden;
+}
+
+/* @docs
+label: HTML5 Elements
+note: |
+  Default block display on HTML5 elements.
+  For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)
+links:
+  - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/
+category: legacy browsers
+*/
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+	display: block;
+}
+
+/* @docs
+label: Checkbox & Radio Inputs
+note: |
+  1. Add the correct box sizing in IE 10
+  2. Remove the padding in IE 10
+category: legacy browsers
+*/
+[type='checkbox'],
+[type='radio'] {
+	box-sizing: border-box;
+	padding: 0;
+}

src/lib/styles/root.css

@@ -0,0 +1,75 @@
+@font-face {
+	font-family: Inter;
+	src: url(/fonts/Inter-Regular.woff2);
+	font-display: swap;
+}
+@font-face {
+	font-family: Overpass;
+	src: url(/fonts/Overpass-SemiBold.woff2);
+	font-display: swap;
+	font-weight: 600;
+}
+@font-face {
+	font-family: Overpass;
+	src: url(/fonts/Overpass-Bold.woff2);
+	font-display: swap;
+	font-weight: bold;
+}
+
+:root {
+	/************COLORS***************/
+	--primary: #ff3e00;
+	--secondary: #d13400;
+	--accent: #011627;
+	--orange: #f97316;
+	--gray: #c1cfda;
+	--black: #12130f;
+	--white: #f3f6f9;
+	--success: #29bf12;
+	--caution: #fcdc4d;
+	--error: #ff3e00;
+
+	/************UI COLORS***************/
+	--bg-color: var(--white);
+	--text-color: var(--accent);
+	--accent-color: var(--accent);
+	--link-color: var(--secondary);
+	--primary-color: var(--primary);
+	--header-text-color: var(--white);
+
+	/************FONTS***************/
+	--font-heading: 'Overpass', sans-serif;
+	--font-body: 'Inter', sans-serif;
+	--font-code: 'Fira Mono', monospace;
+
+	/************FONT SIZES***************/
+	--font-100: clamp(0.9894rem, 0.9072rem + 0.411vw, 1.2rem);
+	--font-200: clamp(1.1875rem, 1.0655rem + 0.6098vw, 1.5rem);
+	--font-300: clamp(1.425rem, 1.2494rem + 0.878vw, 1.875rem);
+	--font-400: clamp(1.71rem, 1.4627rem + 1.2366vw, 2.3438rem);
+	--font-500: clamp(2.0519rem, 1.7092rem + 1.7134vw, 2.93rem);
+	--font-600: clamp(2.4625rem, 1.9945rem + 2.3402vw, 3.6619rem);
+	--font-700: clamp(2.955rem, 2.3218rem + 3.1659vw, 4.5775rem);
+
+	/************SCREEN SIZES***************/
+  --mq-sm: '640px'
+  --mq-md: '768px'
+  --mq-lg: '1024px'
+  --mq-xl: '1280px'
+  --mq-2xl: '1536px'
+  --mq-3xl: '2000px'
+
+
+	/************BOX SHADOWS***************/
+	--shadow-dreamy: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+		0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
+		0 32px 64px rgba(0, 0, 0, 0.07);
+	--shadow-short: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
+		0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11);
+	--shadow-long: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09),
+		0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09);
+	--shadow-sharp: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.2),
+		0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.05);
+	--shadow-diffuse: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.12),
+		0 4px 4px rgba(0, 0, 0, 0.16), 0 8px 8px rgba(0, 0, 0, 0.2);
+}

src/routes/__layout.svelte

@@ -1,7 +1,10 @@
 <script>
-	import '../app.css';
+	// import '../app.css';
-	import Header from './_Header/Header.svelte';
+	import '$styles/reset.css';
-	import Footer from './_Footer.svelte';
+	import '$styles/root.css';
+	import '$styles/globals.css';
+	import Header from '$layout/Header.svelte';
+	import Footer from '$layout/Footer.svelte';
 	import metatags from '$lib/stores/metatags';
 </script>
 

src/routes/index.svelte

@@ -1,5 +1,6 @@
 <script>
-	import Link from './_SocialLinks/Link.svelte';
+	// import Link from '../lib/components/_SocialLinks/Link.svelte';
+	import Link from '$layout/Link.svelte';
 	import { page } from '$app/stores';
 	import metatags from '$lib/stores/metatags';
 
@@ -28,26 +29,32 @@
 		</p>
 	</section>
 	<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
-		<Link path="https://discord.gg/svelte" image="images/discord.svg" alt="Discord icon"
+		<Link path="https://discord.gg/svelte">
-			>Discord</Link
+			<img src="images/discord.svg" alt="" />
-		>
+			Discord
-		<Link path="https://youtube.com/SvelteSociety" image="images/youtube.svg" alt="YouTube icon"
+		</Link>
-			>YouTube</Link
+		<Link path="https://youtube.com/SvelteSociety">
-		>
+			<img src="images/youtube.svg" alt="" />
-		<Link path="https://twitter.com/sveltesociety" image="images/twitter.svg" alt="Twitter icon"
+			YouTube
-			>Twitter</Link
+		</Link>
-		>
+		<Link path="https://twitter.com/sveltesociety">
+			<img src="images/twitter.svg" alt="" />
+			Twitter
+		</Link>
 	</ul>
 	<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
-		<Link path="https://svelte.substack.com/" image="images/newsletter.svg" alt="Newsletter icon"
+		<Link path="https://svelte.substack.com/">
-			>Newsletter</Link
+			<img src="images/newsletter.svg" alt="" />
-		>
+			Newsletter
-		<Link path="https://www.reddit.com/r/sveltejs/" image="images/reddit.svg" alt="Reddit icon"
+		</Link>
-			>Reddit</Link
+		<Link path="https://www.reddit.com/r/sveltejs/">
-		>
+			<img src="images/reddit.svg" alt="" />
-		<Link path="https://www.svelteradio.com/" image="images/radio.svg" alt="Radio icon"
+			Reddit
-			>Podcast</Link
+		</Link>
-		>
+		<Link path="https://www.svelteradio.com/">
+			<img src="images/radio.svg" alt="" />
+			Podcast
+		</Link>
 	</ul>
 	<p>
 		We also run the <a href="https://sveltesummit.com/">Svelte Summit</a> conference and host

svelte.config.js

@@ -1,15 +1,12 @@
 import adapter from '@sveltejs/adapter-static';
-import preprocess from 'svelte-preprocess';
 import { mdsvex } from 'mdsvex';
+import path from 'path';
 
 const extensions = [`.svelte`, '.md', `.mdx`, '.svx'];
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: [
-		preprocess({
-			"postcss": true
-		}),
 		mdsvex({
 			extensions: extensions,
 			layout: {
@@ -28,7 +25,17 @@ const config = {
 			optimizeDeps: {
 				// workaround Vite issue to fix highlighting on cheatsheet
 				// https://github.com/metonym/svelte-highlight/issues/158
-				include: ["highlight.js/lib/core"],
+				include: ['highlight.js/lib/core']
+			},
+			resolve: {
+				alias: {
+					// these are the aliases and paths to them
+					$components: path.resolve('./src/lib/components'),
+					$layout: path.resolve('./src/lib/components/layout'),
+					$layouts: path.resolve('./src/lib/layouts'),
+					$styles: path.resolve('./src/lib/styles'),
+					$stores: path.resolve('./src/lib/stores')
+				}
 			}
 		}
 	}

tailwind.config.cjs

@@ -1,60 +0,0 @@
-const config = {
-	mode: 'jit',
-	purge: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		fontFamily: {
-			sans: ['Inter', 'ui-sans-serif'],
-			heading: ['Overpass', 'ui-sans-serif']
-		},
-		extend: {
-			boxShadow: {
-				'shadow-dreamy': `0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
-        0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
-        0 32px 64px rgba(0, 0, 0, 0.07)`,
-				'shadow-short': `0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
-        0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11)`,
-				'shadow-long': `0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09),
-        0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09)`,
-				'shadow-sharp': `0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.2),
-        0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.05)`,
-				'shadow-diffuse': `0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.12),
-        0 4px 4px rgba(0, 0, 0, 0.16), 0 8px 8px rgba(0, 0, 0, 0.2)`
-			},
-			colors: {
-				transparent: 'transparent',
-				current: 'currentColor',
-				accent: '#ff3e000b',
-				primary: '#f97316',
-				secondary: 'hsl(204, 100%, 38%)',
-				'secondary-accent': '#40b3ff0b',
-				error: '#f15856',
-				success: '#6ecb44',
-				caution: '#ffba29',
-				basics: {
-					50: '#fff',
-					100: '#f3f6f9',
-					200: '#e9e9e9',
-					300: '#5E5e5E',
-					400: '#444444',
-					500: '#434343',
-					600: '#323232',
-					700: '#2B2B2B',
-					800: '#ff3e000b',
-					900: '#111111'
-				}
-			},
-			fontSize: {
-				100: 'clamp(0.9894rem, 0.9072rem + 0.411vw, 1.2rem)',
-				200: 'clamp(1.1875rem, 1.0655rem + 0.6098vw, 1.5rem)',
-				300: 'clamp(1.425rem, 1.2494rem + 0.878vw, 1.875rem)',
-				400: 'clamp(1.71rem, 1.4627rem + 1.2366vw, 2.3438rem)',
-				500: 'clamp(2.0519rem, 1.7092rem + 1.7134vw, 2.93rem)',
-				600: 'clamp(2.4625rem, 1.9945rem + 2.3402vw, 3.6619rem)',
-				700: 'clamp(2.955rem, 2.3218rem + 3.1659vw, 4.5775rem)'
-			}
-		}
-	},
-	plugins: []
-};
-
-module.exports = config;