Navigation Bar (#28)

* Set font in example pages * Add base nav-bars * Add nav-scroller scrollbar * Fix nav-bar checking * Add fixed nav-bar class * Add nav-bar docs * Move JS script to the bottom of the page * Use navigation bar in docs, edit titles * Minor position tweaks * Another minor tweak * Small addition and version bump * Nav-bar redesign * Add indentation links * Update index in docs
AlexFlipnote · Mar 26, 2020 · 57644ff · 57644ff
1 parent f16170f
commit 57644ff
Show file tree

Hide file tree

Showing 21 changed files with 272 additions and 41 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -8,7 +8,9 @@ GEM
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
+    ffi (1.12.2)
     ffi (1.12.2-x64-mingw32)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
@@ -49,19 +51,20 @@ GEM
       ffi (~> 1.0)
     rouge (3.17.0)
     safe_yaml (1.0.5)
+    sassc (2.2.1)
+      ffi (~> 1.9)
     sassc (2.2.1-x64-mingw32)
       ffi (~> 1.9)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     unicode-display_width (1.7.0)
-    wdm (0.1.1)
 
 PLATFORMS
+  ruby
   x64-mingw32
 
 DEPENDENCIES
   jekyll
-  wdm (>= 0.1.0)
 
 BUNDLED WITH
-   1.17.2
+   2.1.4
diff --git a/_layouts/docs.html b/_layouts/docs.html
@@ -1,12 +1,12 @@
 <!-- DEBUG: {{ page.path }} -->
 <html>
   <head>
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+    <title>{% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
 
     <!-- Meta data -->
-    <meta content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" property="og:title" />
+    <meta content="{% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %}" property="og:title" />
     {% if page.description %}
     <meta content="{{ page.description }}" property="og:description" />
     <meta content="{{ page.description }}" name="description" />
@@ -16,31 +16,33 @@
     <link href="css/modesta.css" type="text/css" rel="stylesheet">
     <link href="css/twemoji.css" type="text/css" rel="stylesheet">
     <link href="css/blobcat.css" type="text/css" rel="stylesheet">
-
-    <!-- JS -->
-    <script src="js/modesta.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body class="github-font-standard">
-    <h4 class="center secondary">{{ page.title }}</h4>
-    <div class="sidenav primary">
-      {% for pagedocs in site.pages %}
-        {% unless pagedocs.url contains "/examples/" %}
-          {% if page.title == pagedocs.title %}
-            <a href="{{ pagedocs.url }}" class="emerald-text">{{ pagedocs.title }}</a>
-              {% else %}
-            <a href="{{ pagedocs.url }}">{{ pagedocs.title }}</a>
-          {% endif %}
-        {% endunless %}
-      {% endfor %}
-    </div>
-    <style>
-      .sidenav { text-align: center; }
-      .sidenav a { font-size: 3.5vmin; margin-left: .5em; }
-    </style>
+    <header class="nav-bar">
+      <span class="nav-bars"></span>
+      <section class="nav">
+        <span class="nav-close"></span>
+        <div class="nav-scroller">
+          {% for pagedocs in site.pages %}
+            {% unless pagedocs.url contains "/examples/" %}
+              {% if page.title == pagedocs.title %}
+                <a href="{{ pagedocs.url }}" class="selected">{{ pagedocs.title }}</a>
+                  {% else %}
+                <a href="{{ pagedocs.url }}">{{ pagedocs.title }}</a>
+              {% endif %}
+            {% endunless %}
+          {% endfor %}
+        </div>
+      </section>
+      <h1>{{ site.title }} - {{ page.title }}</h1>
+    </header>
     <div class="markdown-container">
       {{ content }}
     </div>
 
+    <!-- JS -->
+    <script src="js/modesta.js" type="text/javascript" charset="utf-8"></script>
+
     <script>
       var headings = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]");
       for (var i = 0; i < headings.length; i++) {

diff --git a/_layouts/example.html b/_layouts/example.html
@@ -1,15 +1,15 @@
 <!-- DEBUG: {{ page.path }} -->
 <html>
   <head>
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+    <title>{% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
     <link href="../css/modesta.css" type="text/css" rel="stylesheet">
     <link href="../css/twemoji.css" type="text/css" rel="stylesheet">
     <link href="../css/blobcat.css" type="text/css" rel="stylesheet">
-    <script src="../js/modesta.js" type="text/javascript" charset="utf-8"></script>
   </head>
-  <body>
+  <body class="github-font-standard">
     {{ content }}
+    <script src="../js/modesta.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/_layouts/markdown.html b/_layouts/markdown.html
@@ -1,17 +1,17 @@
 <!-- DEBUG: {{ page.path }} -->
 <html>
   <head>
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+    <title>{% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
     <link href="../css/modesta.css" type="text/css" rel="stylesheet">
     <link href="../css/twemoji.css" type="text/css" rel="stylesheet">
     <link href="../css/blobcat.css" type="text/css" rel="stylesheet">
-    <script src="../js/modesta.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
     <div class="markdown-container github-font-standard">
       {{ content }}
     </div>
+    <script src="../js/modesta.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/_pages/docs/0index.md b/_pages/docs/0index.md
@@ -2,7 +2,7 @@
 layout: docs
 permalink: /
 
-title: ModestaCSS
+title: Home
 description: A clean CSS framework made to be dark, responsive and easy to build with.
 ---
 # ModestaCSS
@@ -64,6 +64,8 @@ Visit this link for docs: [https://modesta.alexflipnote.dev/](https://modesta.al
 ## Pages that uses ModestaCSS 2.0
 - [alexflipnote.dev](https://alexflipnote.dev/)
 - [AlexFlipnote/Homepage](https://alexflipnote.dev/homepage)
+- [HotImage](https://github.com/Snazzah/HotImage)
+- [Snazzah's API](https://api.snaz.in/docs)
 
 ## Pages that uses ModestaCSS 1.0
 - [Terminal Bot List](https://ls.terminal.ink/)

diff --git a/_pages/docs/nav_bar.md b/_pages/docs/nav_bar.md
@@ -0,0 +1,32 @@
+---
+layout: docs
+permalink: /nav_bar
+
+title: Navigation Bar
+description: The navigation bar in ModestaCSS
+---
+# Usage
+```html
+<header class="nav-bar">
+  <span class="nav-bars"></span>
+  <section class="nav">
+    <span class="nav-close"></span>
+    <div class="nav-scroller">
+      <a class="selected" href="#">Link 1</a>
+      <a href="#">Link 2</a>
+      <a href="#">Link 3</a>
+    </div>
+  </section>
+  <h1>Example Site</h1>
+</header>
+```
+<br>
+
+The collapsed navigation bar has a scroller inside, so you can add as many links as you want!  
+Having a title and an `<img>` in the nav-bar is optional, but the extra elements must be **after** the `nav` section.  
+You can also add the `fixed` class to the `nav-bar` header to have the header stay on top of the page. If you have a fixed nav-bar, then you can remove the `nav-close` element.
+
+You can also indent links by adding an `indent-NUM` class with the number being between 1 and 5.
+
+# Navigation Bar Example:
+[Click here](../examples/nav_bar)
diff --git a/_pages/examples/nav_bar.html b/_pages/examples/nav_bar.html
@@ -0,0 +1,51 @@
+---
+layout: example
+permalink: /examples/nav_bar
+
+title: Navigation Bar
+description: Navigation bar example
+---
+
+<header class="nav-bar fixed">
+  <span class="nav-bars"></span>
+  <section class="nav">
+    <span class="nav-close"></span>
+    <div class="nav-scroller">
+      <a class="selected" href="#">Link 1</a>
+      {% for num in (2..20) %}
+        <a href="#">Link {{ num }}</a>
+      {% endfor %}
+      {% for num in (1..5) %}
+        <a class="indent-{{ num }}" href="#">Link Indent {{ num }}</a>
+      {% endfor %}
+    </div>
+  </section>
+  <h1>Example Site</h1>
+</header>
+<div class="fullscreen">
+  <div class="background" style="background-image: url('https://i.alexflipnote.dev/7b89f3.png');"></div>
+  <div class="center-object">
+    <div class="container">
+      <h1 class="title center">Example Site</h1>
+    </div>
+    <div id="fade" class="arrow bounce">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.32 291.98" class="white-fill">
+        <path d="M466.5,15.5L466,15c-19.8-19.8-52-19.8-71.9,0L240.8,168.3L87.2,14.8C67.4-5,35.2-5,15.4,14.8l-0.5,0.5 C-5,35.2-5,67.4,14.8,87.2l186.6,186.6c0.9,1,1.8,2,2.7,3v0c3.8,3.8,8.1,6.9,12.7,9.3c17,9,38.1,7.7,53.9-3.9 c2.2-1.6,4.4-3.4,6.4-5.4L466.5,87.4C486.4,67.6,486.4,35.4,466.5,15.5z"/>
+      </svg>
+    </div>
+  </div>
+</div>
+<section class="container">
+  <h1>Lorem ipsum</h1>
+  {% for num in (1..4) %}
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique, sem at ultricies imperdiet, mi odio ultrices enim, eu accumsan erat metus faucibus enim. Pellentesque porttitor purus nec ex fringilla, efficitur fringilla turpis scelerisque. Pellentesque placerat egestas mi, sed tincidunt odio lobortis sit amet. Vestibulum laoreet nulla id arcu tincidunt, vel pellentesque velit semper. Duis faucibus id arcu id bibendum. Curabitur placerat et leo vel sodales. Phasellus a augue sem. Nulla id cursus nulla, in semper mauris.
+    </p>
+    <p>
+      Nam sed porttitor massa. Fusce ut massa non tortor pulvinar finibus. Mauris in hendrerit elit. Maecenas aliquet nisl justo, in gravida eros posuere in. Phasellus porta cursus suscipit. Nullam arcu est, porta quis semper nec, iaculis non magna. Mauris pellentesque ipsum erat, nec sagittis mi suscipit non. Suspendisse in enim ac massa aliquet rhoncus at in erat. Etiam augue libero, gravida a porttitor eget, mollis nec ante. Nulla eget lorem tincidunt, accumsan erat ut, facilisis nunc. Vestibulum consectetur commodo dui id tempor.
+    </p>
+    <p>
+      Nulla porttitor metus ac dui hendrerit condimentum sed sed tortor. In hac habitasse platea dictumst. Maecenas rhoncus sodales varius. Fusce bibendum tempor elit at vehicula. Phasellus eu tincidunt massa, sit amet dignissim ex. Nam laoreet lorem leo, vitae laoreet neque molestie ac. Integer imperdiet scelerisque semper.
+    </p>
+  {% endfor %}
+</section>
diff --git a/css/blobcat.css b/css/blobcat.css