From 2d37f563982541a26d3a8165164d3e0a1cfdcc2f Mon Sep 17 00:00:00 2001
From: Pk11 <epicpkmn11@outlook.com>
Date: Mon, 21 Dec 2020 18:54:25 -0600
Subject: [PATCH] Improve sidebar style and some general style

---
 _includes/language-alert.html |  6 ++--
 _layouts/default.html         |  7 ++--
 _layouts/wiki.html            | 67 ++++++++++++++++++-----------------
 assets/css/dark.scss          |  1 +
 assets/css/light.scss         |  1 +
 assets/css/style.scss         |  8 +++++
 6 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/_includes/language-alert.html b/_includes/language-alert.html
index 48299191..1ed7e774 100644
--- a/_includes/language-alert.html
+++ b/_includes/language-alert.html
@@ -1,5 +1,7 @@
 <div class="row">
-	<div class="alert alert-secondary alert-dismissible fade language-alert show d-none rounded-0" role="alert">
-		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+	<div class="col-12">
+		<div class="alert alert-secondary alert-dismissible fade language-alert show d-none mt-3 mb-0" role="alert">
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index ba0b25d4..07135eaf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,12 +10,13 @@ layout: compress
 	<div class="content">
 		{% include nav.html %}
 
+		
 		<main>
-			<div class="container-fluid">
+			<div class="container-fluid main-content">
 				{% include language-alert.html %}
 				<div class="row pt-5">
-					<div class="col-sm-2"></div>
-					<div class="col-sm-8">
+					<div class="col-sm-1"></div>
+					<div class="col-sm-10">
 						{% include anchor-headings.html html=content anchorBody="<small>#</small>" anchorClass="header-anchor" %}
 					</div>
 				</div>
diff --git a/_layouts/wiki.html b/_layouts/wiki.html
index 1ddbcafd..d8fc3733 100644
--- a/_layouts/wiki.html
+++ b/_layouts/wiki.html
@@ -10,44 +10,45 @@ layout: compress
 	<div class="content">
 		{% include nav.html %}
 
+		
 		<main>
-			<div class="container-fluid">
+			<div class="container-fluid main-content">
 				{% include language-alert.html %}
 				<div class="row pt-5">
-					<div class="col-md-1"></div>
-					<div class="col-md-3">
-						{% assign items = site[page.collection] | where: "section", page.section | sort: "category" %}
-						<ul class="list-unstyled">
-						<!-- First check for index -->
-						{% for item in items %}
-							{% if item.url contains "index.html" %}
-								<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
-							{% endif %}
-						{% endfor %}
-						{% for item in items %}
-							{% unless item.url contains "index.html" %}
-								{% if item.category and category != item.category %}
-								{% if category %}
-										</ul>
-										</li>
-										</details>
-									{% endif %}
-									{% assign category = item.category %}
-									<li>
-									<details {% if page.category == category %}open{% endif %}>
-									<summary>{{ category }}</summary>
-									<ul>
+					<div class="col-sm-3">
+						<div class="rounded-3 border sidebar-container mb-3 p-3">
+							{% assign items = site[page.collection] | where: "section", page.section | sort: "category" %}
+							<ul class="list-unstyled">
+							<!-- First check for index -->
+							{% for item in items %}
+								{% if item.url contains "index.html" %}
+									<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
 								{% endif %}
-								<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
-							{% endunless %}
-						{% endfor %}
-						{% if category %}
-							</ul>
-							</details>
-						{% endif %}
-						<div class="d-md-none"><hr></div>
+							{% endfor %}
+							{% for item in items %}
+								{% unless item.url contains "index.html" %}
+									{% if item.category and category != item.category %}
+									{% if category %}
+											</ul>
+											</li>
+											</details>
+										{% endif %}
+										{% assign category = item.category %}
+										<li>
+										<details {% if page.category == category %}open{% endif %}>
+										<summary>{{ category }}</summary>
+										<ul>
+									{% endif %}
+									<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
+								{% endunless %}
+							{% endfor %}
+							{% if category %}
+								</ul>
+								</details>
+							{% endif %}
+						</div>
 					</div>
-					<div class="col-md-7">
+					<div class="col-sm-9">
 						<h1>{{ page.title }}</h1>
 						<hr>
 						{% include anchor-headings.html html=content anchorBody="<small>#</small>" anchorClass="header-anchor" %}
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
index 74b4516c..35fb2d6b 100755
--- a/assets/css/dark.scss
+++ b/assets/css/dark.scss
@@ -7,6 +7,7 @@
 	--main-color: #ccc;
 	--header-color: #ddd;
 	--borders: #555;
+	--light-borders: #444;
 	--blockquote-color: #999;
 	--code-bg: #3f3f3f;
 	--code-color: #ddd;
diff --git a/assets/css/light.scss b/assets/css/light.scss
index 43af3b63..8806cf6b 100755
--- a/assets/css/light.scss
+++ b/assets/css/light.scss
@@ -7,6 +7,7 @@
 	--main-color: #222;
 	--header-color: #222;
 	--borders: #bbb;
+	--light-borders: #dee2e6;
 	--blockquote-color: #666;
 	--code-bg: #e9e9e9;
 	--code-color: #333;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3ace48eb..1d563a36 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -353,6 +353,14 @@ kbd.face {
 	border-radius: 15px;
 }
 
+// Sidebar
+.sidebar-container {
+	font-size: 0.9rem;
+}
+.sidebar-container li {
+	padding-bottom: 0.25rem;
+}
+
 @media only screen and (min-width: 576px) {
 	// Only right align language dropdown when sm+
 	.language-dropdown {