SeaCMS/pico-theme
3
0
Fork 0
Code Issues Pull Requests Activity

Merge pull request #2 from picocms/pico-2.1

Browse Source 
Pico 2.1
This commit is contained in:
Daniel Rudolf 2019-11-25 01:16:04 +01:00 committed by GitHub
commit fdb4a2e693
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 132 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
CHANGELOG.md
View File

@ -8,6 +8,28 @@ Pico Default Theme Changelog
refer to both the UPGRADE and NEWS sections of the docs for more refer to both the UPGRADE and NEWS sections of the docs for more
details. 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 ### Version 2.0.5-beta.1
Released: 2019-01-03 Released: 2019-01-03

10
README.md
View File

@ -10,7 +10,7 @@ Please refer to [`picocms/Pico`](https://github.com/picocms/Pico) to get info ab
Screenshot Screenshot
---------- ----------
![Pico Screenshot](https://picocms.github.io/screenshots/pico-20.png) ![Pico Screenshot](https://picocms.github.io/screenshots/pico-21.png)
Install 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`. 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 ```yaml
--- ---
social: Logo: %theme_url%/img/pico-white.svg
Tagline: Making the web easy.
Social:
- title: Visit us on GitHub - title: Visit us on GitHub
url: https://github.com/picocms/Pico url: https://github.com/picocms/Pico
icon: octocat 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 Getting Help
------------ ------------

8
composer.json
View File

@ -6,6 +6,11 @@
"homepage": "http://picocms.org/", "homepage": "http://picocms.org/",
"license": "MIT", "license": "MIT",
"authors": [ "authors": [
{
"name": "Daniel Rudolf",
"email": "picocms.org@daniel-rudolf.de",
"role": "Lead Developer"
},
{ {
"name": "The Pico Community", "name": "The Pico Community",
"homepage": "http://picocms.org/" "homepage": "http://picocms.org/"
@ -26,7 +31,8 @@
"extra": { "extra": {
"installer-name": "default", "installer-name": "default",
"branch-alias": { "branch-alias": {
"dev-master": "2.0.x-dev" "dev-master": "2.0.x-dev",
"dev-pico-2.1": "2.1.x-dev"
} }
} }
} }

61
css/style.css
View File

@ -11,7 +11,7 @@
* @author Daniel Rudolf * @author Daniel Rudolf
* @link http://picocms.org * @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License * @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 { background: #2EAE9B; }
#header h1 { #title, #logo {
float: left; float: left;
font-size: 2rem; padding: 3em 3em 3em 0;
margin: 0;
padding: 1.5em 1em 1.5em 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 { #nav {
text-align: right;
padding: 3em 0; padding: 3em 0;
text-align: right;
} }
#nav ul { #nav ul {
list-style: none; list-style: none;
@ -127,13 +134,11 @@ body { display: flex; flex-direction: column; }
@media (max-width: 767px) { @media (max-width: 767px) {
#main { padding: 2em 0 1em; } #main { padding: 2em 0 1em; }
#header h1 { #title, #logo { padding: 2em 1.5em 2em 0; }
float: none; #logo { height: 8.8em; }
padding: 0.5em 0;
}
#nav { #nav {
clear: right; clear: both;
padding: 0; padding: 0;
} }
#nav ul { #nav ul {
@ -153,7 +158,7 @@ body { display: flex; flex-direction: column; }
display: block; display: block;
float: right; float: right;
width: 2em; width: 2em;
margin: 0.6667em 0 0.6667em 1.3333em; margin: 0.6667em 0;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2em; line-height: 2em;
text-align: center; text-align: center;
@ -185,7 +190,7 @@ p, td, th, li, dd {
word-wrap: break-word; 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; margin-bottom: 1em;
} }
@ -219,6 +224,29 @@ hr {
abbr { text-decoration: underline dotted; } 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 ***/ /*** TABLES ***/
table { border-spacing: 0; } table { border-spacing: 0; }
@ -269,7 +297,8 @@ code {
border-radius: 0.3em; border-radius: 0.3em;
background: #f5f5f5; background: #f5f5f5;
font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace; font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
font-size: 0.9rem; font-size: 0.85rem;
line-height: 1.9824;
} }
pre { pre {
@ -277,7 +306,6 @@ pre {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 0.3em; border-radius: 0.3em;
background: #f5f5f5; background: #f5f5f5;
line-height: 1.4;
} }
pre code { pre code {
display: block; display: block;
@ -286,6 +314,7 @@ pre code {
border: 0 none; border: 0 none;
background: transparent; background: transparent;
overflow-x: auto; overflow-x: auto;
line-height: 1.4;
} }
/*** BLOCKQUOTE ***/ /*** BLOCKQUOTE ***/

1
img/pico-white.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 353 B

1
img/pico.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 353 B

38
index.twig
View File

@ -7,7 +7,8 @@
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title> <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %} {% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" /> <meta name="description" content="{{ meta.description|striptags }}" />
{% endif %}{% if meta.robots %} {% endif %}
{% if meta.robots %}
<meta name="robots" content="{{ meta.robots }}" /> <meta name="robots" content="{{ meta.robots }}" />
{% endif %} {% endif %}
@ -21,31 +22,38 @@
</head> </head>
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}> <body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
<div id="header"> <div id="header" role="banner">
<div class="container"> <div class="container">
<a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1"> <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="icon-menu" aria-hidden="true"></span>
<span class="sr-only">Toggle Menu</span> <span class="sr-only">Toggle Menu</span>
</a> </a>
<h1> {% if pages["_meta"].meta.logo %}
<a href="{{ "index"|link }}">{{ site_title }}</a> <div id="logo" aria-hidden="true">
</h1> <a href="{{ "index"|link }}">
<div id="nav" role="region" tabindex="-1"> <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> <ul>
{% for page in pages if page.title and not page.hidden %} {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
{% set pageDepth = page.id|split('/')|length %} <li{% if page.id == current_page.id %} class="active"{% endif %}>
{% if (pageDepth == 2) and (page.id ends with "/index") or (pageDepth == 1) %} <a href="{{ page.url }}">{{ page.title }}</a>
<li{% if page.id == current_page.id %} class="active"{% endif %}> </li>
<a href="{{ page.url }}">{{ page.title }}</a>
</li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div id="main"> <div id="main" role="main">
<div class="container"> <div class="container">
{{ content }} {{ content }}
</div> </div>
@ -54,7 +62,7 @@
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">
<div class="social"> <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"> <a href="{{ social.url }}" title="{{ social.title }}" role="button">
<span class="icon-{{ social.icon }}" aria-hidden="true"></span> <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
<span class="sr-only">{{ social.title }}</span> <span class="sr-only">{{ social.title }}</span>

2
js/pico.js
View File

@ -6,7 +6,7 @@
* @author Daniel Rudolf * @author Daniel Rudolf
* @link http://picocms.org * @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License * @license http://opensource.org/licenses/MIT The MIT License
* @version 2.0 * @version 2.1
*/ */
function main() function main()

23
js/utils.js
View File

@ -6,7 +6,7 @@
* @author Daniel Rudolf * @author Daniel Rudolf
* @link http://picocms.org * @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License * @license http://opensource.org/licenses/MIT The MIT License
* @version 2.0 * @version 2.1
*/ */
utils = {}; utils = {};
@ -14,7 +14,7 @@ utils = {};
/** /**
* Checks whether the client's browser is able to slide elements or not * 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 () 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) * Slides a element up (i.e. hide a element by changing its height to 0px)
* *
* @param HTMLElement element the element to slide up * @param {HTMLElement} element the element to slide up
* @param function finishCallback function to call when the animation has * @param {function} finishCallback function to call when the animation has
* been finished (i.e. the element is hidden) * been finished (i.e. the element is hidden)
* @param function startCallback function to call when the animation starts * @param {function} startCallback function to call when the animation starts
* @return void
*/ */
utils.slideUp = function (element, finishCallback, startCallback) 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) * Slides a element down (i.e. show a hidden element)
* *
* @param HTMLElement element the element to slide down * @param {HTMLElement} element the element to slide down
* @param function finishCallback function to call when the animation has * @param {function} finishCallback function to call when the animation has
* been finished (i.e. the element is visible) * been finished (i.e. the element is visible)
* @param function startCallback function to call when the animation starts * @param {function} startCallback function to call when the animation starts
* @return void
*/ */
utils.slideDown = function (element, finishCallback, startCallback) utils.slideDown = function (element, finishCallback, startCallback)
{ {
@ -126,8 +124,9 @@ utils.slideDown = function (element, finishCallback, startCallback)
/** /**
* Checks whether a element is visible or not * Checks whether a element is visible or not
* *
* @param HTMLElement element the element to check * @param {HTMLElement} element the element to check
* @return boolean TRUE when the element is visible, FALSE otherwise *
* @return {bool} TRUE when the element is visible, FALSE otherwise
*/ */
utils.isElementVisible = function (element) utils.isElementVisible = function (element)
{ {

14
pico-theme.yml Normal file
View File

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