Improve sidebar style and some general style

_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">
+	<div class="col-12">
-		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+		<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>

_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-1"></div>
-					<div class="col-sm-8">
+					<div class="col-sm-10">
 						{% include anchor-headings.html html=content anchorBody="<small>#</small>" anchorClass="header-anchor" %}
 					</div>
 				</div>

_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-sm-3">
-					<div class="col-md-3">
+						<div class="rounded-3 border sidebar-container mb-3 p-3">
-						{% assign items = site[page.collection] | where: "section", page.section | sort: "category" %}
+							{% assign items = site[page.collection] | where: "section", page.section | sort: "category" %}
-						<ul class="list-unstyled">
+							<ul class="list-unstyled">
-						<!-- First check for index -->
+							<!-- First check for index -->
-						{% for item in items %}
+							{% for item in items %}
-							{% if item.url contains "index.html" %}
+								{% if item.url contains "index.html" %}
-								<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
+									<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>
 								{% endif %}
-								<li {% unless item contains category %}class="li-bullet"{% endunless %}><a href="{{ item.url }}">{{ item.title }}</a></li>
+							{% endfor %}
-							{% endunless %}
+							{% for item in items %}
-						{% endfor %}
+								{% unless item.url contains "index.html" %}
-						{% if category %}
+									{% if item.category and category != item.category %}
-							</ul>
+									{% if category %}
-							</details>
+											</ul>
-						{% endif %}
+											</li>
-						<div class="d-md-none"><hr></div>
+											</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" %}

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;

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;

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 {