diff --git a/_config.yml b/_config.yml index d12d439..d722e9e 100644 --- a/_config.yml +++ b/_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 diff --git a/_includes/title.html b/_includes/title.html index f6d5669..8bd3fa8 100644 --- a/_includes/title.html +++ b/_includes/title.html @@ -1 +1,5 @@ -{{ site.title }} \ No newline at end of file +{% if site.logo %} + +{% else %} + {{ site.title }} +{% endif %} diff --git a/_sass/layout.scss b/_sass/layout.scss index 4c214ea..9ec8b07 100644 --- a/_sass/layout.scss +++ b/_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 { diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index 8b77da6..c524e81 100644 --- a/assets/css/dark-mode-preview.scss +++ b/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 // diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 6a2eefa..57d03aa 100644 --- a/assets/css/just-the-docs.scss +++ b/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 // diff --git a/docs/configuration.md b/docs/configuration.md index 14422fd..03e7e52 100644 --- a/docs/configuration.md +++ b/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 ```