Plenty of changes

app/Controllers/App.php

@@ -17,7 +17,7 @@ public static function title()
             if ($home = get_option('page_for_posts', true)) {
                 return get_the_title($home);
             }
-            return __('Latest Posts', 'sage');
+            return __('Writings', 'sage');
         }
         if (is_archive()) {
             return get_the_archive_title();

app/filters.php

@@ -43,13 +43,22 @@
     // Find all the aligned blocks
     $blocks = $qp->find('.alignwide, .alignfull');
     // Add wrap
-    foreach ( $blocks as $block ) :
+    foreach ($blocks as $block) :
         $block->wrap('<div class="wrap"></div>');
     endforeach;
     // Return the modified post content
     return $qp->find('body')->html5();
 }, 9);
 
+/**
+ * Add "gutenberg" to post classes
+ */
+add_filter('post_class', function ($classes) {
+    global $post;
+    $classes[] = 'gutenberg';
+    return $classes;
+});
+
 /**
  * Add "… Continued" to the excerpt
  */

app/setup.php

@@ -37,7 +37,7 @@
      * Add theme support for Wide Alignment
      * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#wide-alignment
      */
-    add_theme_support( 'align-wide' );
+    add_theme_support('align-wide');
 
     /**
      * Add editor styles
@@ -51,13 +51,13 @@
      * Enable responsive embeds
      * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#responsive-embedded-content
      */
-    add_theme_support( 'responsive-embeds' );
+    add_theme_support('responsive-embeds');
 
     /**
      * Enable Editor color palette support
      * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#block-color-palettes
      */
-    add_theme_support( 'editor-color-palette', array(
+    add_theme_support('editor-color-palette', array(
         array(
             'name' => __( 'strong magenta', 'sage' ),
             'slug' => 'strong-magenta',

resources/assets/styles/burrow/tachyons/_forms.scss

@@ -27,3 +27,7 @@
     padding: 0;
   }
 }
+
+@mixin no-outline {
+  outline: none;
+}

resources/assets/styles/burrow/tachyons/_skins.scss

@@ -50,6 +50,7 @@
 @mixin light-gray {    color: $light-gray; }
 @mixin near-white {    color: $near-white; }
 @mixin white {         color: $white; }
+@mixin color-initial {       color: initial; }
 
 @mixin dark-red { color: $dark-red; }
 @mixin red { color: $red; }
@@ -114,6 +115,8 @@
 @mixin bg-near-white {    background-color: $near-white; }
 @mixin bg-white {         background-color: $white; }
 @mixin bg-transparent {   background-color: $transparent; }
+@mixin bg-primary {       background-color: $color-primary; }
+@mixin bg-secondary {     background-color: $color-secondary; }
 
 @mixin bg-dark-red { background-color: $dark-red; }
 @mixin bg-red { background-color: $red; }

resources/assets/styles/components/_buttons.scss

@@ -1,79 +1,62 @@
 @mixin button {
+  @include dib;
   @include pb0;
-  @include f7;
   @include ttu;
+  @include bg-transparent;
+  @include gray;
+  @include pointer;
+  @include nowrap;
+  @include tc;
+  @include no-underline;
+  @include fw3;
+  @include o-90;
 
-  background-color: transparent;
-  border: 0.07rem solid $gray;
+  border: 0.05rem solid $gray;
   border-radius: 0.2rem;
-  color: $gray;
-  cursor: pointer;
-  display: inline-block;
-  font-weight: 500;
   letter-spacing: 0.5ch;
-  line-height: 1.5rem;
-  padding: 0 0.8rem 0 1rem;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
+  padding: 0.4rem 0.8rem 0.4rem 1rem;
   transition: background-color ease-in-out 0.3s;
 
   &:focus,
   &:hover {
-    background-color: $color-primary;
-    border-color: $color-primary;
-    color: $color-initial;
-    outline: 0;
+    @include bg-primary;
+    @include b--primary;
+    @include white;
+    @include no-outline;
+
     transition: background-color ease-in-out 0.3s;
   }
 
   &[disabled] {
-    cursor: default;
-    opacity: 0.5;
+    @include o-50;
+
+    cursor: disabled;
 
     &:focus,
     &:hover {
-      background-color: $color-primary;
-      border-color: $color-primary;
+      @include bg-primary;
+      @include b--primary;
     }
   }
 
   &.button-outline {
-    background-color: transparent;
-    color: $color-primary;
-
-    &:focus,
-    &:hover {
-      background-color: transparent;
-      border-color: $color-secondary;
-      color: $color-secondary;
-    }
+    @include bg-transparent;
 
-    &[disabled] {
-      &:focus,
-      &:hover {
-        border-color: inherit;
-        color: $color-primary;
-      }
-    }
-  }
-
-  &.button-clear {
-    background-color: transparent;
-    border-color: transparent;
     color: $color-primary;
 
     &:focus,
     &:hover {
-      background-color: transparent;
-      border-color: transparent;
+      @include bg-transparent;
+      @include b--secondary;
+
       color: $color-secondary;
     }
 
     &[disabled] {
       &:focus,
       &:hover {
-        color: $color-primary;
+        @include b--white;
+        @include bg-gray;
       }
     }
   }

resources/assets/styles/components/_comments.scss

@@ -41,18 +41,19 @@ article > main.entry-content + footer {
   }
 
   .comment-content * {
-    @include f7;
+    @include f6;
   }
 
-  a.comment-reply-link {
+  a.comment-reply-link,
+  a.comment-edit-link {
     @include button;
-    @include pb0;
-    @include f7;
-    @include ttu;
+  }
+
+  a.comment-edit-link {
+    @include ml2;
   }
 
   .comment-respond {
-    @include pt2;
     @include mv4;
   }
 }

resources/assets/styles/components/_gutenberg.scss

@@ -1,34 +1,14 @@
-main > article > main {
-  > * {
-    @include ml-auto;
-    @include mr-auto;
-    @include mw6-m;
-    @include mw7-l;
-    @include ph2;
-    @include mv4;
-  }
-
-  > .wrap {
-    @include w-100;
-    @include mw-none;
-    @include mh0;
-    @include ph0;
-  }
-
-  > .wrap > .alignfull {
-    @include w-100;
-    @include mw-100;
-    @include ma0;
-    @include ph0;
-  }
-
-  > .wrap > .alignwide {
-    @include vw-90-m;
-    @include vw-80-l;
-    @include mv0;
-    @include ml-auto;
-    @include mr-auto;
-  }
+.gutenberg {
+  @import "blocks/wrapper";
+  @import "blocks/wp-block-columns";
+  @import "blocks/wp-block-separator";
+  @import "blocks/wp-block-gallery";
+  @import "blocks/wp-block-button";
+  @import "blocks/wp-block-quote";
+  @import "blocks/wp-block-cover";
+  @import "blocks/wp-block-images";
+  @import "blocks/media";
+  @import "blocks/lists";
+  @import "blocks/dropcap";
+  @import "blocks/preformatted";
 }
-
-@import "wp-blocks/wp-blocks.scss";

resources/assets/styles/components/blocks/_dropcap.scss

@@ -0,0 +1,7 @@
+> .has-drop-cap::first-letter {
+  @include f-subheadline;
+  @include fl;
+  @include mr3;
+
+  line-height: 4.4rem;
+}

resources/assets/styles/components/wp-blocks/_wp-block-cover.scss → resources/assets/styles/components/blocks/_wp-block-cover.scss

@@ -3,12 +3,16 @@
   @include items-center;
   @include justify-center;
   @include relative;
-  @include pv6;
+  @include pv7;
+  @include cover;
+  @include bg-center;
+
+  background-size: 100%;
 
   h2,
   .wp-block-cover-text {
     @include relative;
-    @include pv5;
+    @include pv6;
     @include white;
     @include z-3;
 
@@ -18,7 +22,7 @@
   }
 
   &.has-parallax {
-    @include fixed;
+    background-attachment: fixed;
   }
 
   &.has-background-dim::before {

resources/assets/styles/components/blocks/_wrapper.scss

@@ -0,0 +1,31 @@
+> * {
+  @include ml-auto;
+  @include mr-auto;
+  @include mw6-m;
+  @include mw7-l;
+  @include ph2;
+  @include mv4;
+}
+
+> .wrap {
+  @include w-100;
+  @include mw-none;
+  @include mh0;
+  @include ph0;
+}
+
+> .wrap > .alignfull {
+  @include w-100;
+  @include w-100;
+  @include ma0;
+  @include ph0;
+}
+
+> .wrap > .alignwide {
+  @include w-100-m;
+  @include ml2;
+  @include mr2;
+  @include mv0;
+  @include ml-auto;
+  @include mr-auto;
+}

resources/assets/styles/components/links.scss

@@ -0,0 +1,12 @@
+a {
+  @include black;
+  @include fw7;
+}
+
+p > a {
+  @include bw5;
+  @include bb;
+  @include bl-0;
+  @include br-0;
+  @include bt-0;
+}

resources/assets/styles/layouts/_header.scss

@@ -22,7 +22,7 @@ body {
     > h4,
     > h5,
     > h6 {
-      @include f-headline;
+      @include f1;
       @include sans-serif;
     }
 
@@ -38,7 +38,6 @@ body {
 
     > h1 {
       @include f1;
-      @include f-headline;
     }
 
     > h1 > span {

resources/assets/styles/layouts/_posts.scss

@@ -12,7 +12,7 @@ body > main > article {
 
   .byline.author.vcard {
     @include mt3;
-    @include mb5;
+    @include mb3;
   }
 
   .entry-jump a {

resources/assets/styles/main.scss

@@ -8,6 +8,7 @@
 /** Molecules */
 @import "common/global";
 @import "common/typography";
+@import "components/links";
 @import "components/buttons";
 @import "components/comments";
 @import "components/gutenberg";