fix: adjust widget formatting

- use title block for h1 elements to consistently position sidebar
- add documentation for widgets
- adjust positioning for 404 page and other pages where flex-sibling
doesn't occupy full width

Author: rise-erpelding

README.md

@@ -210,6 +210,10 @@ By default, comments are turned off for pages, but can be enabled for pages indi
 1. Access the Page settings menu on the right side of the page
 1. Scroll down the menu to the option with the heading "Disucssion", check "Allow comments", and update the page
 
+### Widgets
+
+A footer widget area and a sidebar widget area (which appears below content on smaller screens) are built into the theme. Widgets can be added to these areas by navigating to Appearance > Widgets from the admin dashboard. Navigating to the widgets admin page will automatically fill the sidebar widget area with default content. Blocks can be added, edited, or removed here. If you wish to deactivate widgets but keep them available for later, widgets can be dragged and dropped into the Inactive widgets area. This is easiest done from the List View, which can be accessed via the button on the top left side of the page.
+
 ### Template Hierarchy
 
 This starter template covers the generic templates needed for things like single post pages, archive (or listing) pages, the 404 page, and the search page, but you can override those using [WordPress' template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/).

src/php/index.php

@@ -24,6 +24,8 @@
 $templates        = array( 'index.twig' );
 if ( is_home() && ! is_front_page() ) {
 	$context['title'] = single_post_title();
+} elseif ( ! $context['posts']->found_posts ) {
+	$context['title'] = 'Nothing Found';
 } else {
 	$context['title'] = 'Recent Posts';
 }

src/php/views/404.twig

@@ -1,7 +1,9 @@
 {% extends "layouts/base.twig" %}
 
+{% block title %}
+	<h1>Nothing Found</h1>
+{% endblock %}
+
 {% block content %}
-	<div class="obj-width-limiter">
-		{% include 'partials/content-none.twig' %}
-	</div>
+	{% include 'partials/content-none.twig' %}
 {% endblock %}

src/php/views/index.twig

@@ -1,12 +1,15 @@
 {% extends "layouts/base.twig" %}
 
+{% block title %}
+	<h1>{{ title }}</h1>
+{% endblock %}
+
 {% block content %}
-	<div class="obj-width-limiter">
+	<div>
 		{% if posts.found_posts %}
 
 			{# new block that can be overwritten #}
 			{% block posts_found %}
-				<h1>{{ title }}</h1>
 				{% for post in posts %}
 					{% include 'partials/content-single.twig' with {post: post} %}
 				{% endfor %}

src/php/views/layouts/base.twig

@@ -14,21 +14,24 @@
 
 		<main id="main">
 			<article id="post-{{ post.id }}" class="post-type-{{ post.post_type }} {{ function('get_post_class')|join(' ') }}">
-				{% if post.title %}
-					<div class="obj-width-limiter">
-						<h1>{{ post.title }}</h1>
-					</div>
-				{% endif %}
 
-				<div class="cmp-post-body">
+				<div class="obj-width-limiter">
+					{% block title %}
+						{% if post.title %}
+							<h1>{{ post.title }}</h1>
+						{% endif %}
+					{% endblock %}
+				</div>
+
+				<div class="cmp-post-body obj-width-limiter">
 					{# content block from child templates #}
 					{% block content %}
-						<div class="obj-width-limiter">
+						<div>
 							Sorry, no content
 						</div>
 					{% endblock %}
 					{% if sidebar_widget %}
-						<aside class="obj-width-limiter cmp-primary-sidebar">
+						<aside class="cmp-primary-sidebar">
 							{{ sidebar_widget }}
 						</aside>
 					{% endif %}

src/php/views/page.twig

@@ -1,7 +1,7 @@
 {% extends "layouts/base.twig" %}
 
 {% block content %}
-	<div class="obj-width-limiter">
+	<div>
 		<img
 			src="{{ post.thumbnail.src|resize(960) }}"
 			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}

src/php/views/partials/content-none.twig

@@ -1,8 +1,4 @@
 <section>
-	<header>
-		<h1>Nothing Found</h1>
-	</header>
-
 	<div>
 		{{ function('get_search_form') }}
 	</div>

src/php/views/search.twig

@@ -1,7 +1,6 @@
 {% extends "index.twig" %}
 
 {% block posts_found %}
-  <h1>{{ title }}</h1>
   {% for post in posts %}
     {% include 'partials/content-search.twig' with {post: post} %}
   {% endfor %}

src/php/views/single-password.twig

@@ -1,7 +1,5 @@
 {% extends "layouts/base.twig" %}
 
 {% block content %}
-	<div class="obj-width-limiter">
-		{{ function('get_the_password_form') }}
-	</div>
+	{{ function('get_the_password_form') }}
 {% endblock %}

src/scss/components/_primary-sidebar.scss

@@ -3,6 +3,8 @@
   padding: 1rem;
 
   @media (min-width: 50rem) {
+    margin-inline-start: auto;
     flex-basis: 18.75rem;
+    flex-shrink: 0;
   }
 }