Styling cleanup

package.json

@@ -10,28 +10,28 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^1.0.0-next.13",
+		"@sveltejs/adapter-static": "next",
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^4.19.0",
 		"@typescript-eslint/parser": "^4.19.0",
-		"autoprefixer": "^10.2.5",
+		"autoprefixer": "^10.3.1",
-		"cssnano": "^5.0.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.2.10",
+		"postcss": "^8.3.5",
-		"postcss-load-config": "^3.0.1",
+		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.2.1",
 		"prettier-plugin-svelte": "^2.2.0",
 		"svelte": "^3.38.2",
-		"svelte-preprocess": "^4.7.1",
+		"svelte-preprocess": "^4.7.4",
 		"tslib": "^2.0.0",
 		"typescript": "^4.0.0",
-		"vite": "^2.2.3"
+		"tailwindcss": "^2.2.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-highlight": "^2.0.0"
+		"svelte-highlight": "^3.1.0"
 	}
 }

postcss.config.cjs

@@ -1,15 +1,20 @@
+const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
 const cssnano = require("cssnano");
 
 const mode = process.env.NODE_ENV;
 const dev = mode === "development";
 
-module.exports = {
+const config = {
 	plugins: [
-		autoprefixer,
+		//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/app.postcss

@@ -1,59 +1,7 @@
-*,
+@tailwind base;
-*::before,
+/* Write your global styles here, in PostCSS syntax */
-*::after {
+@tailwind components;
-	box-sizing: border-box;
+@tailwind utilities;
-}
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-	margin: 0;
-}
-ul[role='list'],
-ol[role='list'] {
-	list-style: none;
-}
-html:focus-within {
-	scroll-behavior: smooth;
-}
-body {
-	min-height: 100vh;
-	text-rendering: optimizeSpeed;
-	line-height: 1.5;
-}
-a:not([class]) {
-	text-decoration-skip-ink: auto;
-}
-img,
-picture {
-	max-width: 100%;
-	display: block;
-}
-input,
-button,
-textarea,
-select {
-	font: inherit;
-}
-@media (prefers-reduced-motion: reduce) {
-	html:focus-within {
-		scroll-behavior: auto;
-	}
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
-}
 
 @font-face {
 	font-family: Inter;
@@ -136,48 +84,12 @@ select {
 
 body {
 	border-top: 6px solid var(--color);
-	color: black;
 	font-family: Inter;
-	font-size: var(--font-200);
 }
 
-h1,
+h1, h2, h3, h4 {
-h2,
-h3,
-h4 {
 	font-family: Overpass;
-	font-style: normal;
 	font-weight: bold;
-	line-height: 1.3;
-}
-
-h1,
-h2 {
-	font-weight: bold;
-}
-
-h1 {
-	font-size: var(--font-700);
-}
-
-h2 {
-	font-size: var(--font-500);
-}
-
-h3 {
-	font-size: var(--font-400);
-}
-
-/**
-* WRAPPER
-* Sets a max width, adds a consistent gutter and horizontally
-* centers the contents
-*/
-.wrapper {
-	width: clamp(16rem, 90vw, 70rem);
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
 }
 
 a {
@@ -188,13 +100,8 @@ a {
 	text-decoration: none;
 }
 
-img {
-	max-width: min(55rem, 100%);
-}
-
 figcaption {
 	font-size: var(--font-100);
-
 	font-style: italic;
 	margin-top: 1rem;
 	margin-left: 1rem;

src/lib/components/ComponentIndex/Card.svelte

@@ -77,10 +77,10 @@
 
 <div class="card" class:active id="component-{escape(title)}">
   <h3>
-    <a href={url}>{title}</a>
+    <a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
     {#if npm}<Tag click={() => copyToClipboard(`npm install ${npm}`)} variant="copy" title={clipboardCopy ? 'copied!' : `npm install ${npm}`}/>{/if}
   </h3>
-  <p class="flex-grow"><a href="#component-{escape(title)}">#</a> {description}</p>
+  <p class="flex-grow">{description}</p>
   <div class="card__tags">
     {#each tags as tag}
       <Tag title={tag} variant='blue' />

src/lib/components/ComponentIndex/CardList.svelte

@@ -9,6 +9,7 @@
     font-weight: 600;
     line-height: 150%;
     margin-bottom: 1rem;
+    @apply text-4xl;
   }
   .grid {
     display: grid;

src/routes/_Footer.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div class="shaded">
-	<footer class="wrapper">
+	<footer class="container mx-auto">
 		<div class="centered">&copy; {year} Svelte Society
 			•
 			<a href="/about">Code of Conduct</a>

src/routes/_Header/Header.svelte

@@ -15,8 +15,8 @@
 </script>
 
 <div class="shaded" id="title">
-	<header class="wrapper">
+	<header class="container mx-auto">
-		<nav>
+		<nav class="pt-8 pb-8">
 			<ul>
 				{#each linksLeft as [path, name]}
 					<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}

src/routes/__layout.svelte

@@ -1,15 +1,15 @@
 <script>
-	import Header from './_Header/Header.svelte';
+    import "../app.postcss";
-	import Footer from './_Footer.svelte';
+    import Header from './_Header/Header.svelte';
-	import metatags from '$lib/stores/metatags';
+    import Footer from './_Footer.svelte';
-	import '../app.postcss';
+    import metatags from '$lib/stores/metatags';
 </script>
 
 <svelte:head>
 	{#each Object.entries($metatags) as [property, content]}
 		{#if content}
 			{#if ['title', 'description', 'image'].includes(property)}
-				<meta name={property} {content} />
+				<meta name="{property}" {content} />
 			{:else}
 				<meta {property} {content} />
 			{/if}
@@ -17,23 +17,17 @@
 	{/each}
 </svelte:head>
 
-<div class="container">
+<Header />
-	<Header />
+	<div class="container mx-auto">
-	<main>
+		<main>
-		<slot />
+			<slot />
-	</main>
+		</main>
-	<Footer />
+	</div>
-</div>
+<Footer />
 
 <style>
-	div {
-		min-height: calc(100vh - 6px);
-		display: grid;
-		grid-template-rows: 0fr 1fr 0fr;
-	}
 	.container main {
 		padding-left: 1rem;
 		padding-bottom: 1rem;
 	}
-
 </style>

src/routes/boilerplates/index.svelte

@@ -43,6 +43,10 @@
 </script>
 
 <style>
+  h1 {
+    @apply text-5xl;
+  }
+
   .controls {
     display: flex;
     justify-content: space-between;

src/routes/components/index.svelte

@@ -42,7 +42,11 @@
   $: categories = Array.from(new Set(dataToDisplay.map(item => item.category)))
 </script>
 
-<style>
+<style> 
+  h1 {
+    @apply text-5xl;
+  }
+
   .controls {
     display: flex;
     justify-content: space-between;

src/routes/index.svelte

@@ -14,20 +14,19 @@
 	<title>Home - Svelte Society</title>
 </svelte:head>
 
-<div class="wrapper">
+<div class="text-2xl">
-	<h1>Welcome to Svelte Society!</h1>
+	<h1 class="text-7xl mt-20 mb-10">Welcome to Svelte Society!</h1>
-	<p>
+	<p class="mb-4">
 		We are a volunteer global network of Svelte fans that strive to promote Svelte and its
-		ecosystem. As a service to the community, this site is a central index of <a href="/events"
+		ecosystem. As a service to the community, this site is a central index of <a href="/events">events</a>,
-			>events</a
+		a <a href="/components">components directory</a>, as well as <a href="/receipes">recipes</a> and
-		>, a <a href="/components">components directory</a>, as well as <a href="/receipes">recipes</a> and
 		other useful resources. Join us or help us out!
 	</p>
-	<p>
+	<p class="mb-4">
 		If you want to reach out to us or find like-minded people from around the world you can check
 		out the resources below:
 	</p>
-	<ul>
+	<ul class="mt-10 mb-14 ml-40 mr-40">
 		<Link path="https://youtube.com/SvelteSociety" image="images/youtube.svg" alt="YouTube icon"
 			>YouTube</Link
 		>
@@ -44,7 +43,7 @@
 			>Podcast</Link
 		>
 	</ul>
-	<p>
+	<p class="mb-4">
 		We also run the biannual <a href="https://sveltesummit.com/">Svelte Summit</a> conference and
 		host <a href="https://www.svelteradio.com/">the Svelte Radio podcast</a>.
 	</p>
@@ -53,20 +52,18 @@
 <style>
 	h1 {
 		text-align: center;
-		margin-bottom: var(--space-300);
 	}
 	p {
-		margin: 0 auto;
+		margin-left: auto;
+		margin-right: auto;
 		line-height: 1.6;
 		max-width: 60ch;
-		margin-bottom: var(--space-300);
 	}
 	ul {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 		grid-gap: var(--space-600);
 		list-style-type: none;
-		margin: calc(var(--space-600) * 3) 0;
 		padding: 0;
 	}
 </style>

src/routes/recipes/index.svelte

@@ -7,7 +7,7 @@
 
 <div class="content-wrap">
   <div class="my-1">
-    <h1>Cookbook</h1>
+    <h1 class="text-5xl mt-6 mb-4">Cookbook</h1>
     <p class="intro">
       This cookbook serves shows users how best-in-practice code is written in
       Svelte. You’ll learn how to import third-party libraries, external scripts

src/routes/tooling/__layout.svelte

@@ -5,18 +5,43 @@
   <slot />
 </div>
 
-<style>
+<style global>
   .wrapper {
     max-width: 65ch;
   }
-  .wrapper :global(h2), .wrapper :global(h3) {
+
-    margin-top: 2rem;
+  .wrapper p {
     margin-bottom: 1.25rem;
   }
-  .wrapper :global(p) {
+
-    margin-bottom: 1.25rem;
+  .wrapper ul {
+    @apply list-disc;
+    @apply list-inside;
   }
-  .wrapper :global(li) {
+  .wrapper li {
     margin-bottom: 1.1rem;
   }
+  .wrapper ul ul {
+    @apply mt-4;
+    @apply ml-4;
+  }
+
+  .wrapper h1 {
+    font-weight: 700;
+    @apply text-6xl;
+    @apply mb-4;
+  }
+
+  .wrapper h2 {
+    font-weight: 700;
+    @apply text-4xl;
+    @apply mt-6;
+    @apply mb-4;
+  }
+
+  .wrapper h3 {
+    font-weight: 600;
+    @apply text-2xl;
+    @apply mb-2;
+  }
 </style>

src/routes/tooling/index.svx

@@ -8,8 +8,7 @@
 - [esbuild-svelte](https://github.com/EMH333/esbuild-svelte)
   - esbuild plugin
 - [rollup-plugin-svelte-hot](https://github.com/rixo/rollup-plugin-svelte-hot)
-  - Rollup plugin
+  - Rollup plugin with HMR support
-  - HMR
 - [parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte)
   - Parcel plugin
 - [sveltify](https://github.com/tehshrike/sveltify)

svelte.config.js

@@ -7,7 +7,9 @@ const extensions = [`.svelte`, '.md', `.mdx`, '.svx'];
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: [
-		preprocess(),
+		preprocess({
+			"postcss": true
+		}),
 		mdsvex({
 			extensions: extensions,
 			layout: {
@@ -21,7 +23,14 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+		vite: {
+			optimizeDeps: {
+				// workaround Vite issue to fix highlighting on cheatsheet
+				// https://github.com/metonym/svelte-highlight/issues/158
+				include: ["highlight.js/lib/core"],
+			}
+		}
 	}
 };
 

tailwind.config.cjs

@@ -0,0 +1,12 @@
+const config = {
+	mode: "jit",
+	purge: [
+		"./src/**/*.{html,js,svelte,ts}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
+
+module.exports = config;