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
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 ### 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"> <header id="masthead">
<div class="inner"> <div class="inner">
<div class="title-area"> <div class="title-area">
{% if page.url == '/' %} {% if page.url == '/' %}
<h1 class="site-title"> <h1 class="site-title">
<a href="{{ '/' | relative_url }}"> <a href="{{ '/' | relative_url }}">
{% if site.image %}<img src="{{ site.image }}" alt="" class="site-image">{% endif %} {% if site.image %}<img src="{{ site_image }}" alt="" class="site-image">{% endif %}
{{ site.title | escape }} <span>{{ site.title | escape }}</span>
</a> </a>
</h1> </h1>
{% else %} {% else %}
<p class="site-title"> <p class="site-title">
<a href="{{ '/' | relative_url }}"> <a href="{{ '/' | relative_url }}">
{% if site.image %}<img src="{{ site.image }}" alt="" class="site-image">{% endif %} {% if site.image %}<img src="{{ site_image }}" alt="" class="site-image">{% endif %}
{{ site.title | escape }} <span>{{ site.title | escape }}</span>
</a> </a>
</p> </p>
{% endif %} {% endif %}

View File

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

View File

@ -16,18 +16,19 @@
lang: en-US lang: en-US
title: Your awesome title that could be long title: Your awesome title that could be long
email: your-email@domain.com email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:" description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description. Google search results) and in your feed.xml site description.
baseurl: "/example" # the subpath of your site, e.g. /blog baseurl: "/example" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com url: "" # the base hostname & protocol for your site, e.g. http://example.com
author: author:
name: John Doe name: John Doe
twitter: notareal_twitter twitter: notareal_twitter
picture: https://api.adorable.io/avatars/285/johndoe.png picture: https://api.adorable.io/avatars/285/johndoe.png
twitter_username: notareal_twitter twitter_username: notareal_twitter
github_username: notareal_github github_username: notareal_github
image: /assets/images/100x100.png # ~100x100px
# Build settings # Build settings
markdown: kramdown markdown: kramdown

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB