Version 3.0.0-alpha.1

``` * [New] Kick-start development of Pico 3.0 ```
Update CHANGELOG.md
2025-08-20 23:41:33 +02:00 · 2020-03-29 15:19:59 +02:00 · 2020-03-29 15:18:39 +02:00 · 2020-03-29 15:15:25 +02:00 · 2020-03-29 15:14:36 +02:00 · 2019-12-31 16:37:35 +01:00
10 changed files with 111 additions and 35 deletions
--- 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 3.0.0-alpha.1
+Released: 2020-03-29
+
+```
+* [New] Kick-start development of Pico 3.0
+```
+
+### Version 2.1.1
+Released: 2019-12-31
+
+No changes
+
+### 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

@@ -17,6 +39,7 @@ Released: 2019-11-03
 * [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
--- 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
 ----------

-![Pico Screenshot](https://picocms.github.io/screenshots/pico-20.png)
+![Pico Screenshot](https://picocms.github.io/screenshots/pico-21.png)

 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
 ------------

--- 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,8 +31,8 @@
    "extra": {
        "installer-name": "default",
        "branch-alias": {
-            "dev-master": "2.0.x-dev",
-            "dev-pico-2.1": "2.1.x-dev"
+            "dev-master": "2.1.x-dev",
+            "dev-pico-3.0": "3.0.x-dev"
        }
    }
 }
--- 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.1
+ * @version 3.0
 */

 * {
@@ -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;
@@ -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; }
--- a/img/pico-white.svg
+++ 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>
--- a/img/pico.svg
+++ 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>
--- 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,16 +22,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 +53,7 @@
        </div>
    </div>

-    <div id="main">
+    <div id="main" role="main">
        <div class="container">
            {{ content }}
        </div>
@@ -51,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>
--- 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.1
+ * @version 3.0
 */

 function main()
--- 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.1
+ * @version 3.0
 */

 utils = {};
--- a/pico-theme.yml
+++ b/pico-theme.yml
@@ -1,11 +1,14 @@
-api_version: 3
+api_version: 3                  # Use Pico's latest API version for themes

-meta:
-    Social: social
+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:
-    autoescape: html
-    strict_variables: false
-    charset: utf-8
+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)
Author	SHA1	Message	Date
Daniel Rudolf	85fe74b8db	Version 3.0.0-alpha.1 ``` * [New] Kick-start development of Pico 3.0 ```	2020-03-29 15:19:59 +02:00
Daniel Rudolf	9f2a61a315	Update CHANGELOG.md	2020-03-29 15:18:39 +02:00
Daniel Rudolf	6b328f96b0	Kick-start development of Pico 3.0	2020-03-29 15:15:25 +02:00
Daniel Rudolf	6b7f12db5e	Update composer.json branch aliases	2020-03-29 15:14:36 +02:00
Daniel Rudolf	a79b9875b1	Version 2.1.1 No changes	2019-12-31 16:37:35 +01:00
Daniel Rudolf	e4ea1fff62	Update CHANGELOG.md	2019-12-31 16:37:31 +01:00
Daniel Rudolf	fdb4a2e693	Merge pull request #2 from picocms/pico-2.1 Pico 2.1	2019-11-25 01:16:04 +01:00
Daniel Rudolf	53a90f7209	Version 2.1.0 ``` * [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 ```	2019-11-24 23:25:33 +01:00
Daniel Rudolf	1e6baa0d93	Update CHANGELOG.md	2019-11-24 22:19:07 +01:00
Daniel Rudolf	0acb570731	Replace `pages._meta` syntax by `pages["_meta"]` to match Pico's docs	2019-11-24 22:18:58 +01:00
Daniel Rudolf	8dee46917f	README.md: Update screenshot	2019-11-23 19:29:47 +01:00
Daniel Rudolf	5912d2f204	Update CHANGELOG.md	2019-11-23 19:26:32 +01:00
Daniel Rudolf	06d26ef852	Add some basic utility classes for typography and images	2019-11-23 19:26:32 +01:00
Daniel Rudolf	0071fef215	Add Pico's logo and tagline to the default theme	2019-11-23 19:26:32 +01:00
Daniel Rudolf	d7958c4849	Add whitened Pico logo for inverse usage Co-Authored-By: type76 <osmanjaro@gmail.com>	2019-11-23 19:26:32 +01:00
Daniel Rudolf	72c77ef5fc	Improve Pico's logo Remove clear spaces (for flexibility, clear spaces should be implemented using CSS paddings), reset `preserveAspectRatio` to default `xMidYMid`	2019-11-23 19:26:32 +01:00
type76	ab077e096c	🎉 Add new Pico logo See https://github.com/picocms/Pico/issues/499 and https://github.com/picocms/Pico/issues/499#issuecomment-544136977	2019-11-23 19:26:32 +01:00
Daniel Rudolf	2e5abc386d	Add comments to pico-theme.yml and mention it in README.md	2019-11-23 19:26:32 +01:00
Daniel Rudolf	dcd8ebe723	composer.json: Adding myself as lead dev	2019-11-11 18:33:39 +01:00
				`@@ -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>`