diff --git a/README.md b/README.md
index d852447fb32ab7dd392193eeb27b388147f6b464..3fd8c781e4cef6efe91062e04716704351cb2022 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 5a384e247ec1dee50757a68ab667d362e3abe2d4..46e0578cb818467b035e4a144d77e86efb97c98d 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 f28118667346a708553fb2851325852a07709804..6163cdb0f1018d2a0e5a994ea1b987bd7279adeb 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 6b19ebec22f8e24007ad36f12da23fa6a62f1aa8..fc65b28e6e59b06a682264bb2bf4a30bc5a63030 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