Improve sidebar style and some general style

This commit is contained in:
Pk11 2020-12-21 18:54:25 -06:00
parent 507c35f2a4
commit 2d37f56398
6 changed files with 52 additions and 38 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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" %}

View File

@ -7,6 +7,7 @@
--main-color: #ccc;
--header-color: #ddd;
--borders: #555;
--light-borders: #444;
--blockquote-color: #999;
--code-bg: #3f3f3f;
--code-color: #ddd;

View File

@ -7,6 +7,7 @@
--main-color: #222;
--header-color: #222;
--borders: #bbb;
--light-borders: #dee2e6;
--blockquote-color: #666;
--code-bg: #e9e9e9;
--code-color: #333;

View File

@ -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 {