@@ -16,7 +16,8 @@ One of the major changes in this version is that a lot of time was spent on reth | |||
- Added `full-width` YAML parameter to allow having full-width pages | |||
- Added `feed_show_excerpt` config setting to show/hide the post excerpts on the feed page | |||
- Added `feed_show_tags` config setting to show/hide the list of tags on post previews on the feed page | |||
- Added `share-title` YAML parameter to give control over the search engine/social media title | |||
- Added `share-title` YAML parameter to give control over the search engine/social media title | |||
- Added `last-updated` YAML parameter to show a "Last Updated on" date for blog posts | |||
- Added `before-content` and `after-content` YAML parameters that allow you to add some common HTML before the main content of a page (below the title) or after the main content (above the footer). Works in a similar way to `footer-extra`. | |||
- Added `head-extra` YAML parameter which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag | |||
- Added `site-js` config setting to provide JavaScript files that are used on all pages in the site | |||
@@ -27,7 +28,7 @@ One of the major changes in this version is that a lot of time was spent on reth | |||
- Added automatic navbar color detection (#702) | |||
- When `nav-short` is turned on, the avatar will also be shorter | |||
- Changed navbar and footer background colour to be slightly darker, for better contrast with the default white page background for accessibility reasons | |||
- Changed the behaviour of `site-css` to include site-wide CSS file **before** instead of after page-specific files | |||
- Changed the behaviour of `site-css` to include site-wide CSS file **before** instead of after page-specific files | |||
- Renamed internal css/js files from "main" to "beautifuljekyll" to make it easier for users to troubleshoot | |||
- Added alt text to all images for better accessibility | |||
@@ -163,6 +163,7 @@ social-share | By default, every blog post has buttons to share the page on soci | |||
nav-short | By default, the navigation bar gets shorter after scrolling down the page. If you want the navigation bar to always be short on a certain page, use `nav-short: true` | |||
gh-repo | If you want to show GitHub buttons at the top of a post, this sets the GitHub repo name (eg. `daattali/beautiful-jekyll`). You must also use the `gh-badge` parameter to specify what buttons to show. | |||
gh-badge | Select which GitHub buttons to display. Available options are: [star, watch, fork, follow]. You must also use the `gh-repo` parameter to specify the GitHub repo. | |||
last-updated | If you want to show that a blog post was updated after it was originally released, you can specify an "Updated on" date. | |||
layout | What type of page this is (default is `post` for blog posts and `page` for other pages). See _Page types_ section below for more information. | |||
## Advanced parameters | |||
@@ -255,7 +256,8 @@ Beautiful Jekyll is used by 50,000+ people with wildly varying degrees of web sk | |||
- ### How do I make small modifications to how my website looks? | |||
If you want to make any visual changes that are not in `_config.yml`, you'll need to add your own CSS rules to the file `assets/css/custom-styles.css` and enable the `site-css` setting in the config file. This will allow you to overwrite the default Beautiful Jekyll styles. If you don't know how to use CSS, I highly recommend spending 30 minutes to [learn the basics](https://www.w3schools.com/css/). | |||
If you want to make any visual changes that are not in `_config.yml`, you'll need to add your own CSS rules to the file `assets/css/custom-styles.css` and enable the ` | |||
s` setting in the config file. This will allow you to overwrite the default Beautiful Jekyll styles. If you don't know how to use CSS, I highly recommend spending 30 minutes to [learn the basics](https://www.w3schools.com/css/). | |||
- ### How do I use a custom domain for my site? | |||
@@ -28,21 +28,27 @@ | |||
<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1"> | |||
<div class="{{ include.type }}-heading"> | |||
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1> | |||
{% if page.subtitle %} | |||
{% if include.type == "page" %} | |||
<hr class="small"> | |||
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> | |||
{% else %} | |||
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> | |||
{% endif %} | |||
{% endif %} | |||
{% if page.subtitle %} | |||
{% if include.type == "page" %} | |||
<hr class="small"> | |||
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> | |||
{% else %} | |||
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> | |||
{% endif %} | |||
{% endif %} | |||
{% if include.type == "post" %} | |||
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> | |||
{% if page.readtime %} | |||
{% include readtime.html %} | |||
{% if include.type == "post" %} | |||
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> | |||
{% if page.last-updated %} | |||
<span class="post-meta"> | |||
<span class="d-none d-md-inline middot">·</span> | |||
Last updated {{ page.last-updated | date: date_format }} | |||
</span> | |||
{% endif %} | |||
{% if page.readtime %} | |||
{% include readtime.html %} | |||
{% endif %} | |||
{% endif %} | |||
{% endif %} | |||
</div> | |||
</div> | |||
</div> | |||
@@ -56,21 +62,27 @@ | |||
<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1"> | |||
<div class="{{ include.type }}-heading"> | |||
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1> | |||
{% if page.subtitle %} | |||
{% if include.type == "page" %} | |||
<hr class="small"> | |||
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> | |||
{% else %} | |||
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> | |||
{% endif %} | |||
{% endif %} | |||
{% if page.subtitle %} | |||
{% if include.type == "page" %} | |||
<hr class="small"> | |||
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> | |||
{% else %} | |||
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> | |||
{% endif %} | |||
{% endif %} | |||
{% if include.type == "post" %} | |||
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> | |||
{% if page.readtime %} | |||
{% include readtime.html %} | |||
{% if include.type == "post" %} | |||
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> | |||
{% if page.last-updated %} | |||
<span class="post-meta"> | |||
<span class="d-none d-md-inline middot">·</span> | |||
Last updated {{ page.last-updated | date: date_format }} | |||
</span> | |||
{% endif %} | |||
{% if page.readtime %} | |||
{% include readtime.html %} | |||
{% endif %} | |||
{% endif %} | |||
{% endif %} | |||
</div> | |||
</div> | |||
</div> | |||
@@ -6,10 +6,10 @@ | |||
{% assign number = finalReadTime | round %} | |||
{% if number >= 1 %} | |||
{% assign yesReadTime = number | append: " minute read" %} | |||
<span class="reader-time post-meta"><span class="d-none d-md-inline middot">·</span> {{ yesReadTime }}</span> | |||
<span class="post-meta"><span class="d-none d-md-inline middot">·</span> {{ yesReadTime }}</span> | |||
{% elsif number < 1 %} | |||
{% assign minReadTime = '< 1 minute read' %} | |||
<span class="reader-time post-meta"><span class="d-none d-md-inline middot">·</span> {{ minReadTime }}</span> | |||
<span class="post-meta"><span class="d-none d-md-inline middot">·</span> {{ minReadTime }}</span> | |||
{% else %} | |||
{% assign nilReadTime = number | replace:'0',' ' %} | |||
{{ nilReadTime }} | |||
@@ -475,6 +475,18 @@ footer .footer-custom-content { | |||
margin: 0 0 0.625rem; | |||
font-family: 'Lora', 'Times New Roman', serif; | |||
} | |||
.post-heading .post-meta { | |||
display: inline-block; | |||
} | |||
@media (max-width: 767px) { | |||
.post-heading .post-meta { | |||
display: block; | |||
margin-bottom: 0; | |||
} | |||
} | |||
.post-heading .post-meta .middot { | |||
margin: 0 0.625rem; | |||
} | |||
.post-preview .post-entry { | |||
width: 100%; | |||
} | |||
@@ -751,18 +763,6 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img { | |||
} | |||
} | |||
.reader-time { | |||
display: inline-block; | |||
} | |||
@media (max-width: 767px) { | |||
.reader-time { | |||
display: block; | |||
} | |||
} | |||
.reader-time .middot { | |||
margin: 0 0.625rem; | |||
} | |||
/* --- Pagination --- */ | |||
.pagination { | |||