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

Add Pico's logo and tagline to the default theme

Browse Source
This commit is contained in:
Daniel Rudolf 2019-11-23 19:20:44 +01:00
parent d7958c4849
commit 0071fef215
No known key found for this signature in database
GPG Key ID: A061F02CD8DE4538
4 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -36,10 +36,12 @@ 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
---
Logo: %theme_url%/img/pico-white.svg
Tagline: Making the web easy.
Social:
- title: Visit us on GitHub
url: https://github.com/picocms/Pico
@ -50,7 +52,7 @@ 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 header `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
------------

29
css/style.css
View File

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

22
index.twig
View File

@ -21,16 +21,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 +52,7 @@
</div>
</div>
<div id="main">
<div id="main" role="main">
<div class="container">
{{ content }}
</div>

2
pico-theme.yml
View File

@ -1,6 +1,8 @@
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