remove tailwind+daisyui, use pure css, WIP

wighawag · Dec 17, 2023 · 949b88a · 949b88a
1 parent d41fd4f
commit 949b88a
Show file tree

Hide file tree

Showing 12 changed files with 334 additions and 573 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/package.json b/web/package.json
@@ -7,22 +7,14 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "1.27.6",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
     "abitype": "^0.10.2",
-    "autoprefixer": "^10.4.16",
-    "daisyui": "^4.4.9",
     "eip-1193": "^0.4.7",
     "ipfs-gateway-emulator": "4.2.1-ipfs.2",
-    "postcss": "^8.4.31",
-    "postcss-load-config": "^4.0.2",
     "prettier": "^3.1.0",
     "prettier-plugin-svelte": "^3.1.2",
     "pwag": "0.2.0",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.2",
-    "svelte-preprocess": "^5.1.1",
-    "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.3.2",
     "vite": "^4.5.0",

diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
diff --git a/web/src/app.css b/web/src/app.css
@@ -0,0 +1,162 @@
+/* ------------------------------------------------- */
+/* BASIC RESET mostly from  */
+/* ------------------------------------------------- */
+
+/* border-box */
+
+/* the following do not work in web-components, see: https://konnorrogers.com/posts/2023/revisiting-box-sizing-best-practices/ */
+/* html {
+	box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+} */
+/* so we use this */
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+/* flush body */
+body {
+	margin: 0;
+	padding: 0;
+}
+
+/* Taming Overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+p,
+ul,
+ol,
+blockquote,
+figure {
+	overflow-wrap: break-word;
+}
+
+/* we default to block element for some element */
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+	display: block;
+}
+/* plus by default we restrict their size */
+:where(img, svg, video) {
+	max-inline-size: 100%;
+	block-size: auto;
+}
+
+/* fix pointers */
+:where(
+		a[href],
+		area,
+		button,
+		input:not([type='text'], [type='email'], [type='number'], [type='password'], [type=''], [type='tel'], [type='url']),
+		label[for],
+		select,
+		summary,
+		[tabindex]:not([tabindex*='-'])
+	) {
+	cursor: pointer;
+}
+
+:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
+	touch-action: manipulation;
+	-webkit-tap-highlight-color: transparent;
+}
+
+/* form styling inherit */
+:where(input, button, textarea, select),
+:where(input[type='file'])::-webkit-file-upload-button {
+	font: inherit;
+	font-size: inherit;
+	color: inherit;
+	letter-spacing: inherit;
+}
+
+/* mobile font size fix */
+
+html {
+	-moz-text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+/* we allow wrapper to use viewport height */
+html,
+body {
+	height: 100%;
+}
+
+/* ------------------------------------------------- */
+
+/* 
+taken from tailwind
+hide element so that only screen-reader can "see" them
+*/
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+/* used for svg icon so they are by default the size of the font*/
+.font-icon {
+	min-height: 1rem;
+	min-width: 1rem;
+	display: inline-block;
+}
+
+/* ------------------------------------------------- */
+/* VARIABLES */
+/* ------------------------------------------------- */
+
+/* Colors */
+:root {
+	--color-text-base: white;
+	--color-background-base: hsl(231.43 15% 18%);
+
+	--color-background-base-1: hsl(231.43 15% 16%);
+
+	--color-text-primary: white;
+	--color-background-primary: hsl(325.52 100% 74%);
+
+	--color-link-base: white;
+}
+
+/* ------------------------------------------------- */
+
+/* ------------------------------------------------- */
+/* BASIC STYLES */
+/* ------------------------------------------------- */
+:root {
+	background-color: var(--color-background-base);
+	color: var(--color-text-base);
+}
+
+a {
+	color: var(--color-link-base);
+	text-decoration: underline;
+}
+a:visited {
+	color: var(--color-link-base);
+}
+a:hover {
+	/* font-weight: 900; */
+	text-decoration: initial;
+}
+/* ------------------------------------------------- */
diff --git a/web/src/app.postcss b/web/src/app.postcss
diff --git a/web/src/lib/components/daisyui/NavTabs.svelte b/web/src/lib/components/daisyui/NavTabs.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
 	import PageLink from '$lib/components/navigation/PageLink.svelte';
-
-	let className = 'bg-base-100 tabs-boxed';
-	export {className as class};
-	export let tabClass: string = 'tab text-base-content';
-	export let whenSelected: string = 'tab-active font-black';
-	export let whenUnselected: string = '';
-
 	export let pages: {pathname: string; title: string}[];
 </script>
 
-<div class={`tabs ${className}`}>
-	{#each pages as page}
-		<PageLink class={tabClass} {whenUnselected} {whenSelected} href={page.pathname}>{page.title}</PageLink>
-	{/each}
-</div>
+<nav>
+	<ol>
+		{#each pages as page}
+			<li><PageLink href={page.pathname}>{page.title}</PageLink></li>
+		{/each}
+	</ol>
+</nav>
+
+<style>
+	nav ol {
+		display: flex;
+		justify-content: flex-start;
+		gap: 16px;
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+</style>
diff --git a/web/src/lib/components/navigation/PageLink.svelte b/web/src/lib/components/navigation/PageLink.svelte
@@ -3,17 +3,21 @@
 	import {route, isParentRoute, isSameRoute} from '$lib/utils/path';
 
 	export let href: string;
-	let className = '';
-	export {className as class};
-	export let whenSelected: string = '';
-	export let whenUnselected: string = '';
+
+	$: current = href === '/' ? isSameRoute($page.url.pathname, href) : isParentRoute($page.url.pathname, href);
 </script>
 
-<a
-	href={route(href)}
-	class={`${className} ${
-		(href === '/' ? isSameRoute($page.url.pathname, href) : isParentRoute($page.url.pathname, href))
-			? whenSelected
-			: whenUnselected
-	}`}><slot /></a
->
+<a class:current href={route(href)}><slot /></a>
+
+<style>
+	a {
+		display: inline-block;
+		padding: 0.5em;
+		color: var(--color-text-base);
+	}
+
+	.current {
+		color: var(--color-text-primary);
+		background-color: var(--color-background-primary);
+	}
+</style>
diff --git a/web/src/lib/components/structure/Footer.svelte b/web/src/lib/components/structure/Footer.svelte
@@ -0,0 +1,65 @@
+<footer>
+	<div class="links">
+		<a href="https://twitter.com/wighawag" target="_blank" rel="noreferrer noopener">
+			<span class="sr-only">Twitter</span>
+			<svg class="font-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+				<path
+					d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
+				/>
+			</svg>
+		</a>
+		<a href="https://github.com/wighawag" target="_blank" rel="noreferrer noopener">
+			<span class="sr-only">GitHub</span>
+			<svg class="font-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+				<path
+					fill-rule="evenodd"
+					d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</a>
+		<a href="https://ronan.eth.limo" target="_blank" rel="noreferrer noopener">
+			<span class="sr-only">Web</span>
+			<svg
+				class="font-icon"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+				/>
+			</svg>
+		</a>
+	</div>
+	<div class="author">
+		<p>
+			Created by <a href="https://ronan.eth.limo" target="_blank" rel="noreferrer noopener">Ronan Sandford.</a>
+		</p>
+	</div>
+</footer>
+
+<style>
+	footer {
+		padding: 10px;
+		display: flex;
+		gap: 1rem;
+		flex-direction: row-reverse;
+
+		& .author {
+			margin-right: auto;
+		}
+
+		& .links {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+		}
+
+		background-color: var(--color-background-base-1);
+	}
+</style>