Add support for `site.image` in mastnead

README.md

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

_includes/masthead.html

@@ -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 %}

_sass/basically-basic/_global.scss

@@ -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%;
+}

example/_config.yml

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