From d87d734c04d0a095eed9fe99198d8f0ac2b2b380 Mon Sep 17 00:00:00 2001
From: intergrav <intergrav@proton.me>
Date: Fri, 12 Jul 2024 02:12:00 -0400
Subject: [PATCH] feat: addons

---
 README.md                | 24 ++++++++++++++++++++++--
 addon/.gitkeep           |  0
 addon/header-sidebar.css | 35 +++++++++++++++++++++++++++++++++++
 addon/header-sticky.css  |  8 ++++++++
 demo.html                | 16 ++++++++++++----
 dev.css                  | 13 +++++++++++++
 6 files changed, 90 insertions(+), 6 deletions(-)
 delete mode 100644 addon/.gitkeep
 create mode 100644 addon/header-sidebar.css
 create mode 100644 addon/header-sticky.css

diff --git a/README.md b/README.md
index 719241c..078c7e6 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ I also recommend adding a font through [intergrav/fonts](https://github.com/inte
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
 ```
 
-Recommended, monospace variant:
+Recommended monospace variant:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
@@ -60,7 +60,7 @@ Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a
 
 ### Footer
 
-Optionally, use the `<footer>` tag to create a large footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
+Optionally, use the `<footer>` tag to create a footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
 
 ### Text
 
@@ -91,6 +91,26 @@ The `<details>` element can make a toggle-able dropdown without using any JavaSc
 
 To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
 
+## Addons
+
+dev.css at the minimum is very basic. Addons are small CSS snippets that adjust or add on to the functionality of dev.css, based on what you want for your users. Examples include turning the header into a sidebar, or making the header sticky. If you are adding an addon, it must be added **after** the main dev.css file. You might also need order them in a specific way to make it work. Here are a few built-in addons.
+
+### `header-sticky.css`
+
+This makes the header sticky - always at the top of the screen. Keep in mind that I do not recommend using this if your header is large, as it could affect usability of your site since it'll always be onscreen and will take up a lot of space. Only use it if your header is small, e.g. only contains a one-line `<h1>` and `<nav>`.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
+```
+
+### `header-sidebar.css`
+
+This turns the header into a sidebar on displays that are wide enough to support it. It will list the navigation out vertically in this mode. It will responsively turn back into the default state if the viewport is too thin to contain everything. If you are using this with `header-sticky.css`, be sure to add it **after** that rather than before. To import it, add this line after `dev.css`:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
+```
+
 ## Themes
 
 You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
diff --git a/addon/.gitkeep b/addon/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/addon/header-sidebar.css b/addon/header-sidebar.css
new file mode 100644
index 0000000..dfccb8a
--- /dev/null
+++ b/addon/header-sidebar.css
@@ -0,0 +1,35 @@
+/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* warn: if using with the header-sticky addon, be sure to include this after it */
+
+@media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
+	/* unset header */
+	header {
+		all: unset;
+	}
+
+	header {
+		padding: 3rem 2rem;
+		padding-right: 0;
+		position: fixed;
+		top: 0;
+		left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
+		width: 16rem;
+		height: calc(100% - 6rem);
+		overflow-y: auto;
+	}
+
+	header nav ul {
+		padding-left: 1rem;
+		border-top: 1px solid var(--dc-bg-3);
+		padding-top: 1rem;
+		margin-top: 1rem;
+	}
+
+	header nav ul li {
+		display: list-item;
+	}
+
+	header nav ul li:not(:first-child)::before {
+		content: unset;
+	}
+}
diff --git a/addon/header-sticky.css b/addon/header-sticky.css
new file mode 100644
index 0000000..fb27f69
--- /dev/null
+++ b/addon/header-sticky.css
@@ -0,0 +1,8 @@
+/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* warn: if using with the header-sidebar addon, be sure to include this before it */
+/* warn: i do not recommend using this if your header is large, may affect usability */
+
+header {
+	position: sticky;
+	top: 0;
+}
diff --git a/demo.html b/demo.html
index 3d5a31e..d3ca910 100644
--- a/demo.html
+++ b/demo.html
@@ -21,10 +21,18 @@
 			<h1>demo</h1>
 			<p>This is the demo page for dev.css.</p>
 			<nav>
-				<a href="demo">demo</a> /
-				<a href="https://github.com/intergrav/dev.css">git</a> /
-				<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> /
-				<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/">jsdelivr</a>
+				<ul>
+					<li><a href="demo">demo</a></li>
+					<li><a href="https://github.com/intergrav/dev.css">git</a></li>
+					<li>
+						<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
+					</li>
+					<li>
+						<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
+							>jsdelivr</a
+						>
+					</li>
+				</ul>
 			</nav>
 		</header>
 
diff --git a/dev.css b/dev.css
index 2a40b79..ce8d4a7 100644
--- a/dev.css
+++ b/dev.css
@@ -275,6 +275,19 @@ header h6 {
 	font-size: 0.8rem;
 }
 
+header nav ul {
+	padding: 0;
+}
+
+header nav ul li {
+	display: inline-block;
+	margin: 0;
+}
+
+header nav ul li:not(:first-child)::before {
+	content: "• ";
+}
+
 /* 10. Footer */
 footer {
 	border-top: 1px solid var(--dc-bg-3);
-- 
2.51.2