feat: use article in aside, multi-sidebar

you can use multiple articles in the aside element to allow for multiple containers in a sidebar.

also, the second aside element will now appear on the right of the page

Author: intergrav

README.md

@@ -92,25 +92,27 @@ For your main content, or the actual content of the page, it is heavily recommen
 
 ### Sidebar
 
-Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag. You must put it above the `<main>` content. Here's an example:
+Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then put an `<article>` inside. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. Here's an example:
 
 ```html
 <aside>
-	<h1>Sidebar</h1>
-	<nav>
-		<ul>
-			<li><a href="https://example.com">Page 1</a></li>
-			<li>
-				<a href="https://example.com">Page 2</a>
-				<ul>
-					<li><a href="https://example.com">Page 2.1</a></li>
-					<li><a href="https://example.com">Page 2.2</a></li>
-				</ul>
-			</li>
-			<li><a href="https://example.com">Page 3</a></li>
-			<li><a href="https://example.com">Page 4</a></li>
-		</ul>
-	</nav>
+	<article>
+		<h1>Sidebar</h1>
+		<nav>
+			<ul>
+				<li><a href="https://example.com">Page 1</a></li>
+				<li>
+					<a href="https://example.com">Page 2</a>
+					<ul>
+						<li><a href="https://example.com">Page 2.1</a></li>
+						<li><a href="https://example.com">Page 2.2</a></li>
+					</ul>
+				</li>
+				<li><a href="https://example.com">Page 3</a></li>
+				<li><a href="https://example.com">Page 4</a></li>
+			</ul>
+		</nav>
+	</article>
 </aside>
 ```
 

dev.css

@@ -104,7 +104,6 @@ h6 {
 address,
 area,
 article,
-aside,
 audio,
 blockquote,
 datalist,
@@ -270,33 +269,22 @@ footer nav ul li:not(:first-child)::before {
 }
 
 main,
-aside {
+article {
 	padding: 1.5rem;
 	background: var(--dc-bg-1);
 	border: 1px solid var(--dc-bg-3);
 	border-radius: 0.25rem;
 }
 
-article {
-	padding: 1rem;
+main article {
 	background: var(--dc-bg-2);
-	border: 1px solid var(--dc-bg-3);
-	border-radius: 0.375rem;
 }
 
-article > *:last-child,
-aside > *:last-child,
-main > *:last-child {
+main > *:last-child,
+article > *:last-child {
 	margin-bottom: 0;
 }
 
-aside h1,
-aside h2,
-aside h3 {
-	padding-bottom: 0;
-	border-bottom: none;
-}
-
 @media only screen and (max-width: 48rem) {
 	main {
 		margin: -1rem;
@@ -317,17 +305,21 @@ aside h3 {
 	}
 
 	main,
-	aside {
+	article {
 		padding: 1rem;
 	}
 }
 
 @media only screen and (min-width: 82rem) {
 	aside {
 		position: absolute;
-		left: calc(50% - ((48rem) / 2) - (16rem));
 		width: 16rem;
-		overflow-y: auto;
+	}
+	aside:nth-child(even) {
+		left: calc(50% - ((48rem) / 2) - (16rem));
+	}
+	aside:nth-child(odd) {
+		right: calc(50% - ((48rem) / 2) - (16rem));
 	}
 }