Move headings nav

MiniDiscordThemes · Nov 3, 2023 · e1fa34a · e1fa34a
1 parent 2fffad5
commit e1fa34a
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 10 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,5 +3,13 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,
-  "singleQuote": false
+  "singleQuote": false,
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
 }
diff --git a/_includes/headings-navigation.html b/_includes/headings-navigation.html
@@ -0,0 +1,4 @@
+<nav class="headings-nav">
+    <h2 id="contents">In this page</h2>
+    <ul></ul>
+</nav>
diff --git a/_includes/navigation.html → _includes/steps-navigation.html b/_includes/navigation.html → _includes/steps-navigation.html
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -20,17 +20,15 @@
     <header class="page-header" role="banner">
       <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
       <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
-      {% include navigation.html %}
+      {% include steps-navigation.html %}
     </header>
 
+    {% include headings-navigation.html %}
+
     <main id="content" class="main-content" role="main">
       {{ content }}
     </main>
 
-    <nav class="headings-nav">
-      <ul></ul>
-    </nav>
-
     <footer class="site-footer">
       {% if site.github.is_project_page %}
         <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -43,9 +43,17 @@ body {
     justify-content: center;
 }
 
+@media screen and (min-width: 64em) {
+    .main-content {
+        max-width: 64rem;
+        padding: 2rem 6rem;
+        margin: 0 auto;
+        font-size: 1.1rem;
+    }
+}
+
 // Headings navigation
 .headings-nav {
-
 }
 
 // Formatted code block
@@ -61,5 +69,9 @@ body {
     padding: 2rem;
     display: flex;
     justify-content: space-between;
-    background-image: linear-gradient(120deg, transparentize(#6c00c4, 0.7), transparentize(#9b5816, 0.7))
-}
+    background-image: linear-gradient(
+        120deg,
+        transparentize(#6c00c4, 0.7),
+        transparentize(#9b5816, 0.7)
+    );
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,5 +1,5 @@
 $(function () {
-  $("main h1, main h2, main h3, main h4, main h5, main h6").each(function () {
+  $("main h3").each(function () {
     $("nav ul").append(
       "<li class='tag-" +
         this.nodeName.toLowerCase() +