Style headings nav

MiniDiscordThemes · Nov 3, 2023 · 113e70e · 113e70e
1 parent e1fa34a
commit 113e70e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -23,11 +23,13 @@ <h2 class="project-tagline">{{ page.description | default: site.description | de
       {% include steps-navigation.html %}
     </header>
 
-    {% include headings-navigation.html %}
+    <div class="page-wrapper">
+      {% include headings-navigation.html %}
 
-    <main id="content" class="main-content" role="main">
-      {{ content }}
-    </main>
+      <main id="content" class="main-content" role="main">
+        {{ content }}
+      </main>
+    </div>
 
     <footer class="site-footer">
       {% if site.github.is_project_page %}

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,18 +1,25 @@
 ---
 ---
+// Own additions
+$body-bg-color: #202020;
+$header-nav-width: 24rem;
 
 // Override defaults
 
+// Breakpoints
+$large-breakpoint: calc(64em + $header-nav-width);
+$medium-breakpoint: calc(42em + $header-nav-width);
+
 // Headers
-// $header-heading-color: #fff !default;
+$header-heading-color: #fff;
 $header-bg-color: #9b5816;
 $header-bg-color-secondary: #6c00c4;
 
 // Text
 $section-headings-color: #a47242;
 $body-text-color: #8a8a8a;
 $body-link-color: #8971bd;
-$blockquote-text-color: #819198 !default;
+$blockquote-text-color: #819198;
 
 // Code
 $code-bg-color: #2f2f2f;
@@ -23,9 +30,6 @@ $border-color: #544b57;
 $table-border-color: #544b57;
 $hr-border-color: #544b57;
 
-// Own additions
-$body-bg-color: #202020;
-
 @import "{{ site.theme }}";
 
 body {
@@ -43,17 +47,51 @@ body {
     justify-content: center;
 }
 
-@media screen and (min-width: 64em) {
-    .main-content {
-        max-width: 64rem;
+.page-wrapper {
+    display: flex;
+    align-items: flex-start;
+
+    @include large {
         padding: 2rem 6rem;
-        margin: 0 auto;
-        font-size: 1.1rem;
+        gap: 2rem;
+    }
+
+    @include medium {
+        padding: 2rem 4rem;
+        gap: 2rem;
+    }
+
+    @include small {
+        padding: 2rem 1rem;
+        gap: 2rem;
     }
 }
 
-// Headings navigation
 .headings-nav {
+    width: $header-nav-width;
+    font-size: 1.1rem;
+
+    li {
+        list-style: none;
+    }
+
+    a {
+        color: $section-headings-color;
+    }
+}
+
+.main-content {
+    @include large {
+        padding: 0;
+    }
+
+    @include medium {
+        padding: 0;
+    }
+
+    @include small {
+        padding: 0;
+    }
 }
 
 // Formatted code block

diff --git a/step/2.md b/step/2.md
@@ -9,11 +9,6 @@
 
 If you know some CSS, this is the place to start.
 
-### In this page
-- [2.1: Developer settings](#21-developer-settings)
-- [2.2: Writing Custom / Quick CSS](#22-writing-custom--quick-css)
-- [2.3: Writing a theme](#23-writing-a-theme)
-
 ### 2.1: Developer settings
 Before beginning, DevTools is a requirement to find class names and view Discord's default styles for those classes. Open DevTools with `Ctrl + Shift + I` (windows/linux) / `Cmd + Opt + I` (mac).