Merge pull request #187 from SgtSilvio/improvement/site-logo

Improvement/site logo

_config.yml

@@ -21,6 +21,9 @@ url: "https://pmarsceill.github.io" # the base hostname & protocol for your site
 permalink: pretty
 exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
 
+# Set a path/url to a logo that will be displayed instead of the title
+#logo: "/assets/images/just-the-docs.png"
+
 # Enable or disable the site search
 search_enabled: true
 

_includes/title.html

@@ -1 +1,5 @@
-{{ site.title }}
+{% if site.logo %}
+  <div class="site-logo"></div>
+{% else %}
+  {{ site.title }}
+{% endif %}

_sass/layout.scss

@@ -125,12 +125,12 @@
 
 .site-header {
   display: flex;
+  min-height: $header-height;
   align-items: center;
 
   @include mq(md) {
     z-index: 101;
     height: $header-height;
-    min-height: $header-height;
     max-height: $header-height;
     border-bottom: $border $border-color;
   }
@@ -142,10 +142,26 @@
   display: flex;
   height: 100%;
   align-items: center;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
   color: $body-heading-color;
   @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
 }
 
 .menu-button {

assets/css/dark-mode-preview.scss

@@ -3,6 +3,10 @@
 # only Main files contain this front matter, not partials.
 ---
 
+{% if site.logo %}
+$logo: "{{ site.logo | absolute_url }}";
+{% endif %}
+
 //
 // Import external dependencies
 //

assets/css/just-the-docs.scss

@@ -3,6 +3,10 @@
 # only Main files contain this front matter, not partials.
 ---
 
+{% if site.logo %}
+$logo: "{{ site.logo | absolute_url }}";
+{% endif %}
+
 //
 // Import external dependencies
 //

docs/configuration.md

@@ -22,11 +22,18 @@ Just the Docs has some specific configuration parameters that can be defined in
 
 View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
 
-## Search enabled
+## Site logo
+
+```yaml
+# Set a path/url to a logo that will be displayed instead of the title
+logo: "/assets/images/just-the-docs.png"
+```
+
+## Search
 
 ```yaml
 # Enable or disable the site search
-# Support true (default) or false
+# Supports true (default) or false
 search_enabled: true
 ```
 
@@ -35,18 +42,17 @@ search_enabled: true
 ```yaml
 # Aux links for the upper right navigation
 aux_links:
-    "Just the Docs on GitHub":
-      - "//github.com/pmarsceill/just-the-docs"
+  "Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
 ```
 
 ## Heading anchor links
 
 ```yaml
-# Heading anchor links appear on hover over h1-h6 tags
-# in page content allowing users to deep link to a particular
-# heading on a page.
+# Heading anchor links appear on hover over h1-h6 tags in page content
+# allowing users to deep link to a particular heading on a page.
 #
-# Supprts true (default) or false/nil
+# Supports true (default) or false/nil
 heading_anchors: true
 ```