From 0071fef215cca12fcbacab1c4f47e450471a9cc2 Mon Sep 17 00:00:00 2001
From: Daniel Rudolf <github.com@daniel-rudolf.de>
Date: Sat, 23 Nov 2019 19:20:44 +0100
Subject: [PATCH] Add Pico's logo and tagline to the default theme

---
 README.md      |  6 ++++--
 css/style.css  | 29 +++++++++++++++++------------
 index.twig     | 22 ++++++++++++++++------
 pico-theme.yml |  2 ++
 4 files changed, 39 insertions(+), 20 deletions(-)
diff --git a/README.md b/README.md
index d852447..3fd8c78 100644
--- a/README.md
+++ b/README.md
@@ -36,10 +36,12 @@ theme: my_theme
 
 You can now edit the theme's stylesheets and JavaScript to fit your needs. If you rather want to use a third-party theme, simply add the theme's directory to your `themes/` directory (e.g. `themes/some_other_theme/`) and update your `config/config.yml` accordingly. Pico's default theme is now completely disabled and won't ever interfere with your custom theme or your website in general anymore. If you want to use Pico's default theme again, either remove the line or replace it by `theme: default`.
 
-Anyway, since Pico's default theme is meant to be a starting point for your own theme, it demonstrates how themes can allow one to tweak a theme's behavior. For this reason it supports a "Widescreen" mode: By adding `theme_config.widescreen: true` to your `config/config.yml`, the theme's main container grows from 768px to 1152px breadth due to adding `class="widescreen"` to the website's `<body>` element. Pico's default theme furthermore supports adding social buttons to its footer. Rather than using Pico's config for this, it uses the YAML Frontmatter of the `content/_meta.md` Markdown file. Here's `content/_meta.md` from Pico's sample contents:
+Anyway, since Pico's default theme is meant to be a starting point for your own theme, it demonstrates how themes can allow one to tweak a theme's behavior. For this reason it supports a "Widescreen" mode: By adding `theme_config.widescreen: true` to your `config/config.yml`, the theme's main container grows from 768px to 1152px breadth due to adding `class="widescreen"` to the website's `<body>` element. Pico's default theme furthermore supports displaying both a logo and a tagline in its header, as well as adding social buttons to its footer. Rather than using Pico's config for this, it uses the YAML Frontmatter of the `content/_meta.md` Markdown file. Here's `content/_meta.md` from Pico's sample contents:
 
 ```yaml
 ---
+Logo: %theme_url%/img/pico-white.svg
+Tagline: Making the web easy.
 Social:
     - title: Visit us on GitHub
       url: https://github.com/picocms/Pico
@@ -50,7 +52,7 @@ Social:
 ---
 ```
 
-You should also check out the theme's `pico-theme.yml`: First of all it tells Pico to use the latest API version for themes and adjusts Pico's default Twig config. But more importantly it also registers the mentioned `widescreen` theme config as well as the meta header `Social`.
+You should also check out the theme's `pico-theme.yml`: First of all it tells Pico to use the latest API version for themes and adjusts Pico's default Twig config. But more importantly it also registers the mentioned `widescreen` theme config as well as the meta headers `Logo`, `Tagline` and `Social`.
 
 Getting Help
 ------------
diff --git a/css/style.css b/css/style.css
index 5a384e2..46e0578 100644
--- a/css/style.css
+++ b/css/style.css
@@ -65,17 +65,24 @@ body { display: flex; flex-direction: column; }
 
 #header { background: #2EAE9B; }
 
-#header h1 {
+#title, #logo {
     float: left;
-    font-size: 2rem;
-    margin: 0;
-    padding: 1.5em 1em 1.5em 0;
+    padding: 3em 3em 3em 0;
 }
-#header h1 a, #header h1 a:hover { color: #fff; }
+
+#title * { margin: 0; color: #fff; }
+#title p { font-style: italic; }
+
+#logo { height: 10.8em; }
+#logo * { display: block; height: 100%; }
+#logo img { min-width: 4.8em; }
+
+#logo + #title h1 { margin: 0.8rem 0; }
+#logo + #title.tagline h1 { margin: 0; }
 
 #nav {
-    text-align: right;
     padding: 3em 0;
+    text-align: right;
 }
 #nav ul {
     list-style: none;
@@ -127,13 +134,11 @@ body { display: flex; flex-direction: column; }
 @media (max-width: 767px) {
     #main { padding: 2em 0 1em; }
 
-    #header h1 {
-        float: none;
-        padding: 0.5em 0;
-    }
+    #title, #logo { padding: 2em 1.5em 2em 0; }
+    #logo { height: 8.8em; }
 
     #nav {
-        clear: right;
+        clear: both;
         padding: 0;
     }
     #nav ul {
@@ -153,7 +158,7 @@ body { display: flex; flex-direction: column; }
         display: block;
         float: right;
         width: 2em;
-        margin: 0.6667em 0 0.6667em 1.3333em;
+        margin: 0.6667em 0;
         font-size: 1.5rem;
         line-height: 2em;
         text-align: center;
diff --git a/index.twig b/index.twig
index f281186..6163cdb 100644
--- a/index.twig
+++ b/index.twig
@@ -21,16 +21,26 @@
 </head>
 <body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
 
-    <div id="header">
+    <div id="header" role="banner">
         <div class="container">
             <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                 <span class="icon-menu" aria-hidden="true"></span>
                 <span class="sr-only">Toggle Menu</span>
             </a>
-            <h1>
-                <a href="{{ "index"|link }}">{{ site_title }}</a>
-            </h1>
-            <div id="nav" role="region" tabindex="-1">
+            {% if pages._meta.meta.logo %}
+                <div id="logo" aria-hidden="true">
+                    <a href="{{ "index"|link }}">
+                        <img src="{{ pages._meta.meta.logo|url }}" alt="" />
+                    </a>
+                </div>
+            {% endif %}
+            <div id="title"{{ pages._meta.meta.tagline ? ' class="tagline"' }}>
+                <a href="{{ "index"|link }}">
+                    <h1>{{ site_title }}</h1>
+                    {{ pages._meta.meta.tagline|markdown }}
+                </a>
+            </div>
+            <div id="nav" role="navigation" tabindex="-1">
                 <ul>
                     {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
                         <li{% if page.id == current_page.id %} class="active"{% endif %}>
@@ -42,7 +52,7 @@
         </div>
     </div>
 
-    <div id="main">
+    <div id="main" role="main">
         <div class="container">
             {{ content }}
         </div>
diff --git a/pico-theme.yml b/pico-theme.yml
index 6b19ebe..fc65b28 100644
--- a/pico-theme.yml
+++ b/pico-theme.yml
@@ -1,6 +1,8 @@
 api_version: 3                  # Use Pico's latest API version for themes
 
 meta:                           # Register meta headers used by this theme
+    Logo: logo                  # The URL to your website's logo (value is passed to Pico's "url" Twig filter)
+    Tagline: tagline            # Your website's tag line, shown right below your site title (supports Markdown)
     Social: social              # A list of social icons that will be shown in your website's footer;
                                 #     You must specify a "title", "url" and "icon" per entry
 
