diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00e7ab5..1eb43b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,28 @@ Pico Default Theme Changelog
refer to both the UPGRADE and NEWS sections of the docs for more
details.
+### Version 2.1.0
+Released: 2019-11-24
+
+```
+* [New] Add Pico's official logo and tagline
+* [New] Add some utility classes for typography and images
+* [Changed] Improve documentation of `pico-theme.yml`
+* [Changed] Various small improvements
+```
+
+### Version 2.1.0-beta.1
+Released: 2019-11-03
+
+```
+* [Changed] Add basic `pico-theme.yml` to use API v3, enable Twig's autoescape
+ feature (no changes necessary) and register `Social` meta header
+* [Changed] Use Pico's `pages` Twig function to create the main navigation
+* [Changed] Improve formatting of definition lists and inline code snippets
+* [Changed] Improve JSDoc class docs
+* [Changed] Various small improvements
+```
+
### Version 2.0.5-beta.1
Released: 2019-01-03
diff --git a/README.md b/README.md
index b1923dd..56bf903 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Please refer to [`picocms/Pico`](https://github.com/picocms/Pico) to get info ab
Screenshot
----------
-
+
Install
-------
@@ -36,11 +36,13 @@ 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 `` 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 `` 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
---
-social:
+Logo: %theme_url%/img/pico-white.svg
+Tagline: Making the web easy.
+Social:
- title: Visit us on GitHub
url: https://github.com/picocms/Pico
icon: octocat
@@ -50,6 +52,8 @@ 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/composer.json b/composer.json
index 2c898d8..308f40e 100644
--- a/composer.json
+++ b/composer.json
@@ -6,6 +6,11 @@
"homepage": "http://picocms.org/",
"license": "MIT",
"authors": [
+ {
+ "name": "Daniel Rudolf",
+ "email": "picocms.org@daniel-rudolf.de",
+ "role": "Lead Developer"
+ },
{
"name": "The Pico Community",
"homepage": "http://picocms.org/"
@@ -26,7 +31,8 @@
"extra": {
"installer-name": "default",
"branch-alias": {
- "dev-master": "2.0.x-dev"
+ "dev-master": "2.0.x-dev",
+ "dev-pico-2.1": "2.1.x-dev"
}
}
}
diff --git a/css/style.css b/css/style.css
index a90d7fe..3fe40d3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,7 +11,7 @@
* @author Daniel Rudolf
* @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.0
+ * @version 2.1
*/
* {
@@ -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;
@@ -185,7 +190,7 @@ p, td, th, li, dd {
word-wrap: break-word;
}
-p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote, fieldset {
+p, hr, table, .table-responsive, ol, ul, dl, dd, pre, blockquote, fieldset {
margin-bottom: 1em;
}
@@ -219,6 +224,29 @@ hr {
abbr { text-decoration: underline dotted; }
+/*** UTILITIES ***/
+
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.align-justify { text-align: justify; }
+
+.image { display: block; margin: 0 auto; }
+.image.xsmall { width: 20%; }
+.image.small { width: 40%; }
+.image.large { width: 60%; }
+.image.xlarge { width: 80%; }
+.image.float-left { float: left; margin: 1em 2em 1em 0; }
+.image.float-right { float: right; margin: 1em 0 1em 2em; }
+.image img { display: block; width: 100%; }
+
+@media (max-width: 767px) {
+ .image.xsmall { width: 60%; }
+ .image.small { width: 80%; }
+ .image.large, .image.xlarge { width: 100%; }
+ .image.float-left, .image.float-right { float: none; margin: 0 auto; }
+}
+
/*** TABLES ***/
table { border-spacing: 0; }
@@ -269,7 +297,8 @@ code {
border-radius: 0.3em;
background: #f5f5f5;
font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
- font-size: 0.9rem;
+ font-size: 0.85rem;
+ line-height: 1.9824;
}
pre {
@@ -277,7 +306,6 @@ pre {
border: 1px solid #ccc;
border-radius: 0.3em;
background: #f5f5f5;
- line-height: 1.4;
}
pre code {
display: block;
@@ -286,6 +314,7 @@ pre code {
border: 0 none;
background: transparent;
overflow-x: auto;
+ line-height: 1.4;
}
/*** BLOCKQUOTE ***/
diff --git a/img/pico-white.svg b/img/pico-white.svg
new file mode 100644
index 0000000..972f72b
--- /dev/null
+++ b/img/pico-white.svg
@@ -0,0 +1 @@
+{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}
{% if meta.description %}
-