jspm · yowainwright · Apr 29, 2024 · May 4, 2024 · May 4, 2024 · May 15, 2024
diff --git a/chompfile.toml b/chompfile.toml
@@ -58,6 +58,7 @@ deps = [
   'generate:api:generator',
   'generate:api:import-map',
   'generate:api:jspm-cli',
+  'generate:api:css',
 ]
 engine = 'node'
 
@@ -93,3 +94,8 @@ custom-css = 'typedoc/typedoc-theme.css'
 plugins = './typedoc/typedoc-theme.cjs,typedoc-plugin-versions,typedoc-plugin-external-resolver'
 flags = '--lightHighlightTheme $TYPEDOC_SYNTAX_THEME --darkHighlightTheme $TYPEDOC_SYNTAX_THEME'
 out = 'public_html/docs/jspm-cli'
+
+[[task]]
+name = 'generate:api:css'
+run = 'tailwindcss -i ./public_html/styles/input.css -o ./public_html/style.main.css'
+invalidation = 'always'
diff --git a/package.json b/package.json
@@ -3,10 +3,13 @@
   "type": "module",
   "devDependencies": {
     "@ltd/j-toml": "^1.38.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.1",
     "js-yaml": "^4.1.0",
     "jsdom": "^16.7.0",
     "marked": "^4.3.0",
     "picocolors": "^1.0.0",
+    "tailwindcss": "^3.4.3",
     "toml": "^3.0.0",
     "typedoc": "0.23.25",
     "typedoc-plugin-external-resolver": "1.0.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,11 @@
+import cssnano from 'cssnano';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+  plugins: [
+    cssnano,
+    tailwindcss,
+    autoprefixer
+  ]
+}
diff --git a/public_html/styles/input.css b/public_html/styles/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["template.html", "./public_html/*.html"],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      themeTint: '#C2BEA9',
+      themeTitle: '#F9E566',
+      themeBackground: '#FEF9DD',
+    },
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/template.html b/template.html
@@ -1,78 +1,139 @@
-<!doctype html>
+<!DOCTYPE html>
 <html data-theme="light" lang="en">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="shortcut icon" href="/favicon.ico">
-<link rel="stylesheet" href="/style.css?v1">
-<link rel="preload" as="font" href="/sourcesans-light.woff2" type="font/woff2" crossorigin="anonymous">
-<script defer src="/script.js?v1"></script>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40327700-2"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'UA-40327700-2');
-</script>
-<body>
-<div class="topbar">
-  <a style="display: block" href="/">
-    <div class="logobox" href="/"></div>
-    <h1 class="logo">jspm</h1>
-  </a>
-  <ul class="toplinks">
-    <li><a target="_blank" href="https://generator.jspm.io">Online Generator</a></li>
-    <li><a target="_blank" href="https://status.jspm.io">CDN Status</a></li>
-    <li><a target="_blank" href="https://opencollective.com/jspm">Sponsor</a></li>
-    <li class="github"><a target="_blank" href="https://github.com/jspm/jspm" rel="noopener"></a></li>
-  </ul>
-  <div class="mobile-menu"></div>
-</div>
-<div class="sidebar">
-  <div class="toc">
-    <ul class="sections">
-      <li>
-        <a href="/getting-started">JSPM</a>
-        <ul class="section">
-          <li><a href="/getting-started">Getting Started</a></li>
-          <li><a href="/faq">FAQ</a></li>
-        </ul>
-      </li>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="shortcut icon" href="/favicon.ico" />
+	<link rel="stylesheet" href="/style.css?v1" />
+	<link rel="stylesheet" href="/style.main.css" />
+	<link
+		rel="preload"
+		as="font"
+		href="/sourcesans-light.woff2"
+		type="font/woff2"
+		crossorigin="anonymous"
+	/>
+	<script defer src="/script.js?v1"></script>
+	<!-- Google tag (gtag.js) -->
+	<script
+		async
+		src="https://www.googletagmanager.com/gtag/js?id=UA-40327700-2"
+	></script>
+	<script>
+		window.dataLayer = window.dataLayer || []
+		function gtag() {
+			dataLayer.push(arguments)
+		}
+		gtag('js', new Date())
+		gtag('config', 'UA-40327700-2')
+	</script>
+	<body class="p-0 m-0 font-sans bg-themeBackground overflow-hidden">
+		<nav
+			class="topbar flex items-center justify-between flex-wrap bg-themeBackground h-4 leflt-0 w-full border-b box-border"
+		>
+			<a class="flex items-center" href="/">
+				<div class="relative">
+					<div class="logobox h-6 w-6 bg-no-repeat"></div>
+					<figcaption>
+						<h1 class="logo font-sans text-grey-800 font-bold">jspm</h1>
+					</figcaption>
+				</div>
+			</a>
+			<ul class="flex items-center justify-between flex-wrap">
+				<li>
+					<a
+						class="color:inherit"
+						target="_blank"
+						href="https://generator.jspm.io"
+						>Online Generator</a
+					>
+				</li>
+				<li>
+					<a class="color:inherit" target="_blank" href="https://status.jspm.io"
+						>CDN Status</a
+					>
+				</li>
+				<li>
+					<a
+						class="color:inherit"
+						target="_blank"
+						href="https://opencollective.com/jspm"
+						>Sponsor</a
+					>
+				</li>
+				<li class="github">
+					<a
+						class="color:inherit"
+						target="_blank"
+						href="https://github.com/jspm/jspm"
+						rel="noopener"
+					></a>
+				</li>
+			</ul>
+			<div class="mobile-menu"></div>
+		</nav>
+		<div class="sidebar">
+			<div class="toc">
+				<ul class="sections">
+					<li>
+						<a href="/getting-started">JSPM</a>
+						<ul class="section">
+							<li><a href="/getting-started">Getting Started</a></li>
+							<li><a href="/faq">FAQ</a></li>
+						</ul>
+					</li>
 
-      <li>
-        <a href="/docs/jspm-cli">Documentation</a>
-        <ul class="section">
-          <li><a href="/docs/jspm-cli">JSPM CLI</a></li>
-          <li><a href="/docs/generator">JSPM Generator</a></li>
-          <li><a href="/docs/integrations">Integrations</a></li>
-          <li><a href="/docs/cdn-resolution">CDN Resolution</a></li>
-        </ul>
-      </li>
+					<li>
+						<a href="/docs/jspm-cli">Documentation</a>
+						<ul class="section">
+							<li><a href="/docs/jspm-cli">JSPM CLI</a></li>
+							<li><a href="/docs/generator">JSPM Generator</a></li>
+							<li><a href="/docs/integrations">Integrations</a></li>
+							<li><a href="/docs/cdn-resolution">CDN Resolution</a></li>
+						</ul>
+					</li>
 
-      <li>
-        <a href="/cdn/jspm-io">CDN</a>
-        <ul class="section">
-          <li><a href="/cdn/jspm-io">jspm.io</a></li>
-          <li><a href="/cdn/api">API</a></li>
-        </ul>
-      </li>
+					<li>
+						<a href="/cdn/jspm-io">CDN</a>
+						<ul class="section">
+							<li><a href="/cdn/jspm-io">jspm.io</a></li>
+							<li><a href="/cdn/api">API</a></li>
+						</ul>
+					</li>
 
-      <li class="blog">
-        <a href="/jspm-cli">Blog</a>
-        <ul class="section">
-          <li class="blog-link"><a href="/jspm-dev-deprecation"><em>Deprecating jspm.dev<span class="date">13/01/24</span></em></a></li>
-          <li class="blog-link"><a href="/jspm-cli"><em>JSPM CLI Relaunch<span class="date">04/04/23</span></em></a></li>
-          <li class="blog-link"><a href="/import-map-cdn"><em>Import Map CDN Launch<span class="date">02/03/21</span></em></a></li>
-        </ul>
-      </li>
-    </ul>
-    <!-- <div class="footer"></div> -->
-  </div>
-</div>
-<div class="content-container">
-  <div class="content">
-    <!-- Content will be added here -->
-  </div>
-</div>
-</body>
+					<li class="blog">
+						<a href="/jspm-cli">Blog</a>
+						<ul class="section">
+							<li class="blog-link">
+								<a href="/jspm-dev-deprecation"
+									><em
+										>Deprecating jspm.dev<span class="date">13/01/24</span></em
+									></a
+								>
+							</li>
+							<li class="blog-link">
+								<a href="/jspm-cli"
+									><em
+										>JSPM CLI Relaunch<span class="date">04/04/23</span></em
+									></a
+								>
+							</li>
+							<li class="blog-link">
+								<a href="/import-map-cdn"
+									><em
+										>Import Map CDN Launch<span class="date">02/03/21</span></em
+									></a
+								>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<!-- <div class="footer"></div> -->
+			</div>
+		</div>
+		<div class="content-container">
+			<div class="content">
+				<!-- Content will be added here -->
+			</div>
+		</div>
+	</body>
 </html>