diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00e7ab5db83a80c60608a8d53436d66e0737445b..1eb43b6a80156666d79048918b05be4ce5c2541b 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 b1923dd10c1e347e58c7bdd8939f16a71bc7648a..56bf903eb13efb1b6356c03543802c9da9251987 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 `<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
---
-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 2c898d81dbc5e4eca219b98d59a59f76dbea0a1b..308f40ea4d3dc1d6fb126917fc4e363dd1deb54c 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 a90d7fe865ed8da8a0d9405ee06663b7c2617e16..3fe40d3d513cffa19e3380f97f030608241a4ca6 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 0000000000000000000000000000000000000000..972f72b841c883f28f77b373897045c207c5c1c8
--- /dev/null
+++ b/img/pico-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#ffffff" transform="translate(-138.85 -140.95)"/></svg>
diff --git a/img/pico.svg b/img/pico.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7294c2ea530ea5d376606924df9c278cb4349611
--- /dev/null
+++ b/img/pico.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="m298.4 194.7q0-14.15-.8-31.2l-.85-14.25h-51.05v89.95l8 1.1q9.6 1.05 17.6 1.05 7.95 0 17.5-1.05 4.8-.55 7.95-1.1 1.65-22.2 1.65-44.5m-69.75-45.8h-49.3v182.45l7.7.85q9.3.8 17 .8 12.3 0 24.6-1.65z" fill="#2eae9b" transform="translate(-138.85 -140.95)"/></svg>
diff --git a/index.twig b/index.twig
index 4f527f9026e6ad9d7a95b868a012b5ed8d5e4008..41d0055e40a2e4e3f9f6d8fdcb6fd1ee1e31ac98 100644
--- a/index.twig
+++ b/index.twig
@@ -7,7 +7,8 @@
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" />
- {% endif %}{% if meta.robots %}
+ {% endif %}
+ {% if meta.robots %}
<meta name="robots" content="{{ meta.robots }}" />
{% endif %}
@@ -21,31 +22,38 @@
</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 if page.title and not page.hidden %}
- {% set pageDepth = page.id|split('/')|length %}
- {% if (pageDepth == 2) and (page.id ends with "/index") or (pageDepth == 1) %}
- <li{% if page.id == current_page.id %} class="active"{% endif %}>
- <a href="{{ page.url }}">{{ page.title }}</a>
- </li>
- {% endif %}
+ {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
+ <li{% if page.id == current_page.id %} class="active"{% endif %}>
+ <a href="{{ page.url }}">{{ page.title }}</a>
+ </li>
{% endfor %}
</ul>
</div>
</div>
</div>
- <div id="main">
+ <div id="main" role="main">
<div class="container">
{{ content }}
</div>
@@ -54,7 +62,7 @@
<div id="footer">
<div class="container">
<div class="social">
- {% for social in pages._meta.meta.social %}
+ {% for social in pages["_meta"].meta.social %}
<a href="{{ social.url }}" title="{{ social.title }}" role="button">
<span class="icon-{{ social.icon }}" aria-hidden="true"></span>
<span class="sr-only">{{ social.title }}</span>
diff --git a/js/pico.js b/js/pico.js
index 492829d807c33536322c00e849a909dbd1f4dbaa..4ddb6adc7aed98a082998e719621b1d88bcc95d4 100644
--- a/js/pico.js
+++ b/js/pico.js
@@ -6,7 +6,7 @@
* @author Daniel Rudolf
* @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.0
+ * @version 2.1
*/
function main()
diff --git a/js/utils.js b/js/utils.js
index 09e3432bc79e24daed9a045c9daa7fd9bbf76d2c..62b65cce4c6c354420ba4219977273bcb623e61a 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -6,7 +6,7 @@
* @author Daniel Rudolf
* @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License
- * @version 2.0
+ * @version 2.1
*/
utils = {};
@@ -14,7 +14,7 @@ utils = {};
/**
* Checks whether the client's browser is able to slide elements or not
*
- * @return boolean TRUE when the browser supports sliding, FALSE otherwise
+ * @return {bool} TRUE when the browser supports sliding, FALSE otherwise
*/
utils.canSlide = function ()
{
@@ -24,11 +24,10 @@ utils.canSlide = function ()
/**
* Slides a element up (i.e. hide a element by changing its height to 0px)
*
- * @param HTMLElement element the element to slide up
- * @param function finishCallback function to call when the animation has
+ * @param {HTMLElement} element the element to slide up
+ * @param {function} finishCallback function to call when the animation has
* been finished (i.e. the element is hidden)
- * @param function startCallback function to call when the animation starts
- * @return void
+ * @param {function} startCallback function to call when the animation starts
*/
utils.slideUp = function (element, finishCallback, startCallback)
{
@@ -72,11 +71,10 @@ utils.slideUp = function (element, finishCallback, startCallback)
/**
* Slides a element down (i.e. show a hidden element)
*
- * @param HTMLElement element the element to slide down
- * @param function finishCallback function to call when the animation has
+ * @param {HTMLElement} element the element to slide down
+ * @param {function} finishCallback function to call when the animation has
* been finished (i.e. the element is visible)
- * @param function startCallback function to call when the animation starts
- * @return void
+ * @param {function} startCallback function to call when the animation starts
*/
utils.slideDown = function (element, finishCallback, startCallback)
{
@@ -126,8 +124,9 @@ utils.slideDown = function (element, finishCallback, startCallback)
/**
* Checks whether a element is visible or not
*
- * @param HTMLElement element the element to check
- * @return boolean TRUE when the element is visible, FALSE otherwise
+ * @param {HTMLElement} element the element to check
+ *
+ * @return {bool} TRUE when the element is visible, FALSE otherwise
*/
utils.isElementVisible = function (element)
{
diff --git a/pico-theme.yml b/pico-theme.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fc65b28e6e59b06a682264bb2bf4a30bc5a63030
--- /dev/null
+++ b/pico-theme.yml
@@ -0,0 +1,14 @@
+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
+
+twig_config: # Twig template engine config
+ autoescape: html # Let Twig escape variables by default
+ strict_variables: false # If set to true, Twig will bail out when unset variables are being used
+ charset: utf-8 # The charset used by Twig templates
+
+widescreen: false # Use more horicontal space (i.e. make the site container wider)