Add support for `site.image` in mastnead

This commit is contained in:
Michael Rose 2017-03-13 15:23:04 -04:00
parent eb065a23e2
commit d8a9ecc0fe
5 changed files with 26 additions and 10 deletions

View File

@ -59,7 +59,7 @@ Basically Basic is a [Jekyll theme](https://jekyllrb.com/docs/themes/) meant as
## Configuration
Configuration of site-wide elements (`lang`, `title`, `description`, `author`, etc.) happens in your project's `_config.yml`. See the [example configuration](example/_config.yml) in this repo for reference.
Configuration of site-wide elements (`lang`, `title`, `description`, `image`, `author`, etc.) happens in your project's `_config.yml`. See the [example configuration](example/_config.yml) in this repo for reference.
### Skin

View File

@ -1,18 +1,24 @@
{% if site.image contains '://' %}
{% assign site_image = site.image %}
{% else %}
{% assign site_image = site.image | relative_url %}
{% endif %}
<header id="masthead">
<div class="inner">
<div class="title-area">
{% if page.url == '/' %}
<h1 class="site-title">
<a href="{{ '/' | relative_url }}">
{% if site.image %}<img src="{{ site.image }}" alt="" class="site-image">{% endif %}
{{ site.title | escape }}
{% if site.image %}<img src="{{ site_image }}" alt="" class="site-image">{% endif %}
<span>{{ site.title | escape }}</span>
</a>
</h1>
{% else %}
<p class="site-title">
<a href="{{ '/' | relative_url }}">
{% if site.image %}<img src="{{ site.image }}" alt="" class="site-image">{% endif %}
{{ site.title | escape }}
{% if site.image %}<img src="{{ site_image }}" alt="" class="site-image">{% endif %}
<span>{{ site.title | escape }}</span>
</a>
</p>
{% endif %}

View File

@ -4,7 +4,7 @@
.site-title {
margin: 0;
padding: 1.35rem 1rem;
padding: 1.8125rem 1rem;
padding-right: calc(10vw + #{$navicon-width}); /* make room for sidebar toggle */
font-family: $base-font-family;
@include fluid-type($min-vw, $max-vw, 20px, 24px);
@ -20,7 +20,16 @@
}
a {
display: flex;
align-items: center;
color: $text-color;
text-decoration: none;
}
}
.site-image {
margin-right: 0.5rem;
width: 50px;
height: 50px;
border-radius: 50%;
}

View File

@ -28,6 +28,7 @@ author:
picture: https://api.adorable.io/avatars/285/johndoe.png
twitter_username: notareal_twitter
github_username: notareal_github
image: /assets/images/100x100.png # ~100x100px
# Build settings
markdown: kramdown

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB