Minor layout, color scheme and config updates

sanderlv · Apr 27, 2020 · da174d2 · da174d2
1 parent 63f4e5a
commit da174d2
Show file tree

Hide file tree

Showing 11 changed files with 255 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ _site/
 .sass-cache/
 .jekyll-cache/
 .jekyll-metadata
+.DS_Store
diff --git a/_config.yml b/_config.yml
@@ -52,12 +52,12 @@ defaults:
     scope:
       path: "_shared-guides"
     values:
-      layout: "shared-guide"
+      layout: "shared-guides-index"
 
 # Theme Settings
 
 # Logo
-logo: "/assets/images/just-the-docs.png"
+logo: "/assets/images/esphome-logo.svg"
 
 # Enable or disable the site search
 search_enabled: true
@@ -73,6 +73,3 @@ heading_anchors: true
 aux_links:
   "ESPHome-Configs.io on GitHub":
     - "//github.com/jonathanadams/esphome-configs"
-
-# Footer
-footer_content: "This site is generated with <a href=\"https://jekyllrb.com\">Jekyll</a> and powered by <a href=\"https://netlify.com\">Netlify</a>."
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,41 +1,41 @@
 <nav role="navigation" aria-label="Main navigation">
   <ul class="navigation-list">
-    
-    <li>
+
+    <li class="navigation-list-item">
       <a href="/devices" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">View All Devices</a>
     </li>
 
     <br>
-    <strong>Device Type</strong>
+    <h3>Device Type</h3>
     {% for type in site.device-types | sort: "title" %}
-      <li>
+      <li class="navigation-list-item">
         <a href="{{ type.url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ type.title }}</a>
       </li>
     {% endfor %}
 
     <br>
-    <strong>Electrical Standard</strong>
+    <h3>Electrical Standard</h3>
     {% for standard in site.device-standards | sort: "title" %}
-      <li>
+      <li class="navigation-list-item">
         <a href="{{ standard.url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ standard.title }}</a>
       </li>
     {% endfor %}
 
     <br>
-    <strong>Shared guides</strong>
+    <h3>Shared guides</h3>
     {% for guide in site.shared-guides | sort: "title" %}
-      <li>
+      <li class="navigation-list-item">
         <a href="{{ guide.url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ guide.title }}</a>
       </li>
     {% endfor %}
-    
+
     <br>
-    <strong>External Links</strong>
+    <h3>External Links</h3>
     {% for link in site.data.external_links %}
-      <li>
+      <li class="navigation-list-item">
         <a href="{{ link.url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ link.name }}</a>
       </li>
     {% endfor %}
-  
+
   </ul>
-</nav>
+</nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,102 @@
+---
+layout: table_wrappers
+---
+
+<!DOCTYPE html>
+
+<html lang="{{ site.lang | default: "en-US" }}">
+{% include head.html %}
+<body>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="link" viewBox="0 0 16 16">
+      <title>Link</title>
+      <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+    </symbol>
+  </svg>
+
+  <div class="page-wrap">
+    <div class="side-bar">
+      <div class="site-header">
+        <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
+        <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
+      </div>
+
+      <div class="navigation main-nav js-main-nav">
+        {% include nav.html %}
+      </div>
+      <footer class="site-footer">
+        <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll and is powered by <a href="https://netlify.com">Netlify</a>.</p>
+      </footer>
+    </div>
+    <div class="main-content-wrap js-main-content" tabindex="0">
+      <div class="main-content">
+        <div class="page-header js-page-header">
+          {% if site.search_enabled != false %}
+          <div class="search">
+            <div class="search-input-wrap">
+              <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+              <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+            </div>
+            <div class="js-search-results search-results-wrap"></div>
+          </div>
+          {% endif %}
+          {% if site.aux_links != nil %}
+            <ul class="list-style-none text-small aux-nav">
+              {% for link in site.aux_links %}
+                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </div>
+        <div class="page">
+          {% unless page.url == "/" %}
+            {% if page.parent %}
+              <nav class="breadcrumb-nav">
+                <ol class="breadcrumb-nav-list">
+                  {% if page.grand_parent %}
+                    <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+                    <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+                  {% else %}
+                    <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+                  {% endif %}
+                  <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+                </ol>
+              </nav>
+            {% endif %}
+          {% endunless %}
+          <div id="main-content" class="page-content" role="main">
+            {% if site.heading_anchors != false %}
+              {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
+            {% else %}
+              {{ content }}
+            {% endif %}
+
+          {% if page.has_children == true and page.has_toc != false %}
+            <hr>
+            <h2 class="text-delta">Table of contents</h2>
+            {% assign children_list = site.pages | sort:"nav_order" %}
+            <ul>
+              {% for child in children_list %}
+                {% if child.parent == page.title and child.title != page.title %}
+                <li>
+                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+                </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+          {% endif %}
+
+            <hr>
+            <footer role="contentinfo">
+              <p class="text-small text-grey-dk-000 mb-0">
+                <a href="https://github.com/jonathanadams/esphome-configs/tree/master/{{ page.path }}">Edit on GitHub</a>
+              </p>
+            </footer>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/_layouts/device.html b/_layouts/device.html
@@ -5,5 +5,3 @@
 <h1>{{ page.title }}</h1>
 
 {{ content }}
-
-<a href="https://github.com/jonathanadams/esphome-configs/tree/master/{{ page.relative_path }}">Edit on GitHub</a>
diff --git a/_layouts/shared-guide.html → _layouts/shared-guides-index.html b/_layouts/shared-guide.html → _layouts/shared-guides-index.html
diff --git a/_sass/_overrides.scss b/_sass/_overrides.scss
@@ -0,0 +1,7 @@
+.navigation-list h3 {
+  margin-top: 0;
+}
+
+.navigation-list a {
+  color: #44434d;
+}
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -0,0 +1,129 @@
+////
+//// Typography
+////
+
+//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
+//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
+//$root-font-size: 16px;         // Base font-size for rems
+//$body-line-height: 1.4;
+//$content-line-height: 1.5;
+//$body-heading-line-height: 1.15;
+
+////
+//// Colors
+////
+
+//$white: #fff;
+
+//$grey-dk-000: #959396;
+//$grey-dk-100: #5c5962;
+//$grey-dk-200: #44434d;
+//$grey-dk-250: #302d36;
+//$grey-dk-300: #27262b;
+
+//$grey-lt-000: #f5f6fa;
+//$grey-lt-100: #eeebee;
+//$grey-lt-200: #ecebed;
+//$grey-lt-300: #e6e1e8;
+
+//$purple-000: #7253ed;
+//$purple-100: #5e41d0;
+//$purple-200: #4e26af;
+//$purple-300: #381885;
+
+//$blue-000: #2c84fa;
+//$blue-100: #2869e6;
+//$blue-200: #264caf;
+//$blue-300: #183385;
+
+//$green-000: #41d693;
+//$green-100: #11b584;
+//$green-200: #009c7b;
+//$green-300: #026e57;
+
+//$yellow-000: #ffeb82;
+//$yellow-100: #fadf50;
+//$yellow-200: #f7d12e;
+//$yellow-300: #e7af06;
+
+//$red-000: #f77e7e;
+//$red-100: #f96e65;
+//$red-200: #e94c4c;
+//$red-300: #dd2e2e;
+
+//$body-background-color: $white;
+$sidebar-color: #f7f7f7;
+//$search-background-color: $white;
+//$table-background-color: $white;
+$code-background-color: #f7f7f7;;
+
+//$body-text-color: $grey-dk-100;
+//$body-heading-color: $grey-dk-300;
+//$search-result-preview-color: $grey-dk-000;
+//$nav-child-link-color: $grey-dk-100;
+$link-color: $blue-200;
+//$btn-primary-color: $purple-100;
+//$base-button-color: #f7f7f7;
+
+////
+//// Spacing
+////
+
+//$spacing-unit: 1rem; // 1rem == 16px
+
+//$spacers: (
+//sp-0: 0,
+//sp-1: $spacing-unit * 0.25,
+//sp-2: $spacing-unit * 0.5,
+//sp-3: $spacing-unit * 0.75,
+//sp-4: $spacing-unit,
+//sp-5: $spacing-unit * 1.5,
+//sp-6: $spacing-unit * 2,
+//sp-7: $spacing-unit * 2.5,
+//sp-8: $spacing-unit * 3,
+//sp-9: $spacing-unit * 3.5,
+//sp-10: $spacing-unit * 4
+//);
+
+//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
+//$sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
+//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
+//$sp-4: map-get($spacers, sp-4); // 1    rem == 16px
+//$sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
+//$sp-6: map-get($spacers, sp-6); // 2    rem == 32px
+//$sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
+//$sp-8: map-get($spacers, sp-8); // 3    rem == 48px
+//$sp-9: map-get($spacers, sp-9); // 4    rem == 48px
+//$sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
+
+////
+//// Borders
+////
+
+//$border: 1px solid;
+//$border-radius: 4px;
+//$border-color: $grey-lt-100;
+
+////
+//// Grid system
+////
+
+//$gutter-spacing: $sp-6;
+//$gutter-spacing-sm: $sp-4;
+//$nav-width: 264px;
+//$nav-width-md: 248px;
+//$content-width: 800px;
+//$header-height: 60px;
+//$search-results-width: 500px;
+
+////
+//// Media queries in pixels
+////
+
+//$media-queries: (
+//xs: 320px,
+//sm: 500px,
+//md: $content-width,
+//lg: $content-width + $nav-width,
+//xl: 1400px
+//);
diff --git a/assets/images/esphome-logo.svg b/assets/images/esphome-logo.svg
diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico
diff --git a/favicon.ico b/favicon.ico
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,5 +5,3 @@
		<h1>{{ page.title }}</h1>

		{{ content }}

		<a href="https://github.com/jonathanadams/esphome-configs/tree/master/{{ page.relative_path }}">Edit on GitHub</a>