add full-width YAML option

daattali · daattali · commit f65e439025a7 · 2020-08-23T19:23:33.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,9 +8,9 @@ One of the major changes in this version is that a lot of time was spent on reth
 - **BREAKING CHANGE** Removed undocumented YAML options `meta-title` and `meta-description`
 - Added `share-title` YAML option to give control over the search engine/social media title
 - Added `head-extra` YAML option which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag
+- Added `full-width` YAML option to allow having full-width pages
 - Added automatic navbar color detection (#702)
-- Added better SEO and social media sharing by adding a `share-title` YAML option and utilizing the `description` option
-- Changed navbar and footer background colour to be slightly darker, for better contrast with white page background
+- Changed navbar and footer background colour to be slightly darker, for better contrast with the default white page background
 - Changed the behaviour of `site-css` to include site-wide CSS file **before** page-specific files 
 - Renamed internal css/js files from "main" to "beautifuljekyll" to make it easier for users to troubleshoot
 
diff --git a/README.md b/README.md
@@ -172,6 +172,7 @@ Parameter   | Description
 footer-extra | If you want to include extra information in the footer (below the social media icons), create an HTML file in the `_includes/` folder (for example `_includes/myinfo.html`) and set `footer-extra` to the name of the file (for example `footer-extra: myinfo.html`)
 head-extra   | Works in a similar way to `footer-extra`, but used if you have any HTML code that needs to be included in the `<head>` tag of the page.
 language    | HTML language code to be set on the page's &lt;html&gt; element.
+full-width  | By default, page content is constrained to a standard width. Use `full-width: true` to allow the content to span the entire width of the window.
 js          | List of local JavaScript files to include in the page (eg. `/assets/js/mypage.js`)
 ext-js      | List of external JavaScript files to include in the page (eg. `//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js`). External JavaScript files that support [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) can be specified using the `href` and `sri` parameters eg.<br/>`href: "//code.jquery.com/jquery-3.1.1.min.js"`<br/>`sri: "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="`
 css         | List of local CSS files to include in the page
diff --git a/_config.yml b/_config.yml
@@ -1,7 +1,7 @@
 # --- Required options --- #
 
 # Name of website
-title: My website
+title: My Website
 
 # Your name to show in the footer
 author: Some Person
diff --git a/_includes/head.html b/_includes/head.html
@@ -2,26 +2,26 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  {%- capture title -%}
+  {% capture title %}
     {%- if page.share-title -%}
       {{ page.share-title }}
     {%- elsif page.title -%}
       {{ page.title }}
     {%- else -%}
       {{ site.title }}
     {%- endif -%}
-  {%- endcapture -%}
+  {% endcapture %}
 
-  {%- capture description -%}
+  {% capture description %}
     {%- if page.share-description -%}
       {{ page.share-description }}
     {%- elsif page.subtitle -%}
       {{ page.subtitle }}
     {%- else -%}
-	  {% assign excerpt_length = site.excerpt_length | default: 50 %}
-      {{ page.content | strip_html | xml_escape | truncatewords: excerpt_length }}
+      {%- assign excerpt_length = site.excerpt_length | default: 50 -%}
+      {{ page.content | strip_html | xml_escape | truncatewords: excerpt_length | strip }}
     {%- endif -%}
-  {%- endcapture -%}
+  {% endcapture %}
 
   <title>{{ title }}</title>
 
@@ -134,9 +134,7 @@
   <meta name="twitter:image" content="{{ img | absolute_url }}">
   {% endif %}
 
-  {% if site.matomo %}
   {% include matomo.html %}
-  {% endif %}
 
   {% if page.comments and site.staticman.repository and site.staticman.branch %}
   <link rel="stylesheet" href="{{ "/assets/css/staticman.css" | relative_url }}">
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,6 +4,6 @@
 
 <div class="intro-header"></div>
 
-<div role="main" class="container-md">
+<div role="main" class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %}">
   {{ content }}
 </div>
diff --git a/_layouts/minimal.html b/_layouts/minimal.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <div role="main" class="container-md main-content">
+    <div role="main" class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %} main-content">
       {{ content }}
     </div>
 
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -4,9 +4,9 @@
 
 {% include header.html type="page" %}
 
-<div class="container-md" role="main">
+<div class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %}" role="main">
   <div class="row">
-    <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
+    <div class="{% if page.full-width %} col {% else %} col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 {% endif %}">
       {{ content }}
       {% include comments.html %}
     </div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,9 +4,9 @@
 
 {% include header.html type="post" %}
 
-<div class="container-md">
+<div class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %}">
   <div class="row">
-    <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
+    <div class="{% if page.full-width %} col {% else %} col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 {% endif %}">
 
       {% if page.gh-repo %}
         {% assign gh_split =  page.gh-repo | split:'/'  %}
diff --git a/index.html b/index.html
@@ -3,4 +3,3 @@
 title: My website
 subtitle: This is where I will tell my friends way too much about me
 ---
-
