mirror of
https://github.com/picocms/pico-theme.git
synced 2025-08-19 23:11:53 +02:00
Compare commits
57 Commits
v2.0.0-bet
...
master
Author | SHA1 | Date | |
---|---|---|---|
|
7eabd4cfb9 | ||
|
780b9484f1 | ||
|
cb01f6c60c | ||
|
d4ec8df283 | ||
|
ca41b7b91a | ||
|
6821662127 | ||
|
e385f2ba0e | ||
|
8b606f6df7 | ||
|
9154fcaeb7 | ||
|
622396045d | ||
|
52af9b5fe3 | ||
|
6b7f12db5e | ||
|
a79b9875b1 | ||
|
e4ea1fff62 | ||
|
fdb4a2e693 | ||
|
53a90f7209 | ||
|
1e6baa0d93 | ||
|
0acb570731 | ||
|
8dee46917f | ||
|
5912d2f204 | ||
|
06d26ef852 | ||
|
0071fef215 | ||
|
d7958c4849 | ||
|
72c77ef5fc | ||
|
ab077e096c | ||
|
2e5abc386d | ||
|
dcd8ebe723 | ||
|
6c0491a918 | ||
|
abae4acd5b | ||
|
0a9321047d | ||
|
ac5e65b7a4 | ||
|
83a9b6ad59 | ||
|
8df986b02e | ||
|
fc941aab0c | ||
|
777f852a06 | ||
|
138a88e05f | ||
|
470a734034 | ||
|
e66eab238e | ||
|
23a907d23b | ||
|
b33fe258b0 | ||
|
db2e386a57 | ||
|
316a531f64 | ||
|
7c1d14dda8 | ||
|
c366649243 | ||
|
02b112b072 | ||
|
6ad42dbbd2 | ||
|
8f8cd50936 | ||
|
5af338c408 | ||
|
f59f639f97 | ||
|
e1e4cc644f | ||
|
b1e423c691 | ||
|
ba0ac88e14 | ||
|
a75986d269 | ||
|
3799bc14ed | ||
|
db2463c9b6 | ||
|
1526e6eb47 | ||
|
182431ce45 |
28
.github/workflows/stale.yml
vendored
Normal file
28
.github/workflows/stale.yml
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
name: "Mark or close stale issues and PRs"
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 12 * * *"
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/stale@v3
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
days-before-stale: 7
|
||||
days-before-close: 2
|
||||
stale-issue-message: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed in two days if no further activity
|
||||
occurs. Thank you for your contributions! :+1:
|
||||
stale-pr-message: >
|
||||
This pull request has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed in two days if no further activity
|
||||
occurs. Thank you for your contributions! :+1:
|
||||
stale-pr-label: "info: Stale"
|
||||
stale-issue-label: "info: Stale"
|
||||
exempt-issue-labels: "type: Bug,type: Enhancement,type: Feature,type: Idea,type: Release,info: Pinned"
|
||||
exempt-pr-labels: "type: Bug,type: Enhancement,type: Feature,type: Idea,type: Release,info: Pinned"
|
||||
remove-stale-when-updated: true
|
||||
|
79
CHANGELOG.md
79
CHANGELOG.md
@@ -8,6 +8,85 @@ Pico Default Theme Changelog
|
||||
refer to both the UPGRADE and NEWS sections of the docs for more
|
||||
details.
|
||||
|
||||
### Version 2.1.4
|
||||
Released: 2020-08-29
|
||||
|
||||
```
|
||||
* [Changed] Don't setup nav toggle JavaScript when there's no menu
|
||||
```
|
||||
|
||||
### Version 2.1.3
|
||||
Released: 2020-07-10
|
||||
|
||||
No changes
|
||||
|
||||
### Version 2.1.2
|
||||
Released: 2020-04-10
|
||||
|
||||
No changes
|
||||
|
||||
### 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
|
||||
|
||||
```
|
||||
* [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
|
||||
|
||||
```
|
||||
* [New] Add `2.0.x-dev` alias for master branch to `composer.json`
|
||||
```
|
||||
|
||||
### Version 2.0.4
|
||||
Released: 2018-12-17
|
||||
|
||||
No changes
|
||||
|
||||
### Version 2.0.3
|
||||
Released: 2018-12-03
|
||||
|
||||
No changes
|
||||
|
||||
### Version 2.0.2
|
||||
Released: 2018-08-12
|
||||
|
||||
No changes
|
||||
|
||||
### Version 2.0.1
|
||||
Released: 2018-07-29
|
||||
|
||||
No changes
|
||||
|
||||
### Version 2.0.0
|
||||
Released: 2018-07-01
|
||||
|
||||
```
|
||||
* [New] Add Bountysource
|
||||
* [Changed] Improve documentation
|
||||
```
|
||||
|
||||
### Version 2.0.0-beta.3
|
||||
Released: 2018-04-07
|
||||
|
||||
|
14
README.md
14
README.md
@@ -10,7 +10,7 @@ Please refer to [`picocms/Pico`](https://github.com/picocms/Pico) to get info ab
|
||||
Screenshot
|
||||
----------
|
||||
|
||||

|
||||

|
||||
|
||||
Install
|
||||
-------
|
||||
@@ -36,20 +36,24 @@ 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.yml` Markdown file. Here's `content/_meta.yml` 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
|
||||
- title: Join us on Freenode IRC Webchat
|
||||
url: https://webchat.freenode.net/?channels=%23picocms
|
||||
- title: Join us on Libera.Chat
|
||||
url: https://web.libera.chat/#picocms
|
||||
icon: chat
|
||||
---
|
||||
```
|
||||
|
||||
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
|
||||
------------
|
||||
|
||||
|
@@ -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-dev"
|
||||
"dev-master": "2.1.x-dev",
|
||||
"dev-pico-3.0": "3.0.x-dev"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
13
css/fontello.css
vendored
13
css/fontello.css
vendored
@@ -1,11 +1,11 @@
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../icon/fontello.eot?13793670');
|
||||
src: url('../icon/fontello.eot?13793670#iefix') format('embedded-opentype'),
|
||||
url('../icon/fontello.woff2?13793670') format('woff2'),
|
||||
url('../icon/fontello.woff?13793670') format('woff'),
|
||||
url('../icon/fontello.ttf?13793670') format('truetype'),
|
||||
url('../icon/fontello.svg?13793670#fontello') format('svg');
|
||||
src: url('../icon/fontello.eot?29729916');
|
||||
src: url('../icon/fontello.eot?29729916#iefix') format('embedded-opentype'),
|
||||
url('../icon/fontello.woff2?29729916') format('woff2'),
|
||||
url('../icon/fontello.woff?29729916') format('woff'),
|
||||
url('../icon/fontello.ttf?29729916') format('truetype'),
|
||||
url('../icon/fontello.svg?29729916#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -58,3 +58,4 @@
|
||||
.icon-chat:before { content: '\e800'; } /* '' */
|
||||
.icon-octocat:before { content: '\f09b'; } /* '' */
|
||||
.icon-menu:before { content: '\f0c9'; } /* '' */
|
||||
.icon-dollar:before { content: '\f155'; } /* '' */
|
||||
|
@@ -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; }
|
||||
@@ -234,7 +262,7 @@ th {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
td, th { border: solid 1px #ccc; }
|
||||
td, th { border: 1px solid #ccc; }
|
||||
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
|
||||
thead tr:last-child th { border-bottom: 0 none; }
|
||||
td:not(:last-child), th:not(:last-child) { border-right: 0 none; }
|
||||
@@ -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 ***/
|
||||
@@ -302,7 +331,7 @@ blockquote {
|
||||
label, fieldset legend { font-weight: bold; }
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
|
||||
border: solid 1px #ccc;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.3em;
|
||||
background: #fff;
|
||||
-webkit-transition: none .2s ease-in;
|
||||
|
@@ -14,10 +14,10 @@ Font license info
|
||||
|
||||
## Font Awesome
|
||||
|
||||
Copyright (C) 2012 by Dave Gandy
|
||||
Copyright (C) 2016 by Dave Gandy
|
||||
|
||||
Author: Dave Gandy
|
||||
License: SIL OFL 1.1 <http://scripts.sil.org/OFL>
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
Icons: menu, github-circled ("octocat"), chat
|
||||
Icons: chat, github-circled ("octocat"), menu, dollar
|
||||
|
@@ -1,4 +1,4 @@
|
||||
Copyright (c) 2012, Dave Gandy <http://fontawesome.io>,
|
||||
Copyright (c) 2016, Dave Gandy <http://fontawesome.io>,
|
||||
with Reserved Font Name Font Awesome.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
|
Binary file not shown.
@@ -1,7 +1,7 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
|
||||
<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
@@ -11,6 +11,8 @@
|
||||
<glyph glyph-name="octocat" unicode="" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="menu" unicode="" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="dollar" unicode="" d="M546 189q0-86-56-147t-144-77v-97q0-8-5-13t-13-5h-75q-7 0-13 5t-5 13v97q-37 5-71 18t-57 25-41 26-26 21-10 10q-9 12-1 23l58 76q3 5 12 6 9 1 14-5l1-1q63-55 135-70 21-4 42-4 45 0 79 24t35 68q0 16-9 30t-18 23-33 21-37 18-45 18q-21 9-34 14t-34 15-35 17-32 20-29 24-25 27-20 32-11 37-5 44q0 77 55 135t142 75v100q0 7 5 13t13 5h75q8 0 13-5t5-13v-98q32-3 62-13t48-19 36-20 21-17 9-7q9-11 3-22l-46-81q-4-9-12-9-8-2-15 4-2 2-9 7t-21 14-33 18-42 15-47 6q-53 0-87-24t-33-62q0-14 4-27t17-23 22-18 31-18 34-15 39-15q30-11 45-17t43-20 42-24 34-28 30-35 18-43 7-52z" horiz-adv-x="571.4" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
1
img/pico-white.svg
Normal file
1
img/pico-white.svg
Normal 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>
|
After Width: | Height: | Size: 353 B |
1
img/pico.svg
Normal file
1
img/pico.svg
Normal 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>
|
After Width: | Height: | Size: 353 B |
38
index.twig
38
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 not page.hidden %}
|
||||
<li{% if page.id == current_page.id %} class="active"{% endif %}>
|
||||
<a href="{{ page.url }}">{{ page.title ?: page.id }}</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>
|
||||
|
22
js/pico.js
22
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()
|
||||
@@ -28,10 +28,12 @@ function main()
|
||||
|
||||
// responsive menu
|
||||
var menu = document.getElementById('nav'),
|
||||
menuToggle = document.getElementById('nav-toggle'),
|
||||
toggleMenuEvent = function (event) {
|
||||
menuToggle = document.getElementById('nav-toggle');
|
||||
|
||||
if (menu && menuToggle) {
|
||||
function toggleMenuEvent(event) {
|
||||
if (event.type === 'keydown') {
|
||||
if ((event.keyCode != 13) && (event.keyCode != 32)) {
|
||||
if ((event.keyCode !== 13) && (event.keyCode !== 32)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -49,8 +51,9 @@ function main()
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
utils.slideUp(menu);
|
||||
}
|
||||
},
|
||||
onResizeEvent = function () {
|
||||
}
|
||||
|
||||
function onResizeEvent() {
|
||||
if (utils.isElementVisible(menuToggle)) {
|
||||
menu.className = 'hidden';
|
||||
menuToggle.addEventListener('click', toggleMenuEvent);
|
||||
@@ -61,10 +64,11 @@ function main()
|
||||
menuToggle.removeEventListener('click', toggleMenuEvent);
|
||||
menuToggle.removeEventListener('keydown', toggleMenuEvent);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.addEventListener('resize', onResizeEvent);
|
||||
onResizeEvent();
|
||||
window.addEventListener('resize', onResizeEvent);
|
||||
onResizeEvent();
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
23
js/utils.js
23
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)
|
||||
{
|
||||
|
14
pico-theme.yml
Normal file
14
pico-theme.yml
Normal 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)
|
Reference in New Issue
Block a user