5.6.1

CSS

- Made spacing between blocks more consistent by using owl selector `* + *`
- Moved styling for FAQ Block to Edje WP Library
- Changed Social Link icon into square, previously was circle

TEMPLATE

- Removed default social navigation.
- Removed support for widgets.
-
- [Single] Changed comment section into Group Block
- [Single] Removed link from author name

acf-json/group_5c05ed6e307b9.json

@@ -28,7 +28,7 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "6",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -47,7 +47,7 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "6",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -99,5 +99,5 @@
     "hide_on_screen": "",
     "active": 1,
     "description": "",
-    "modified": 1559354091
+    "modified": 1570714455
 }

functions/timber.php

@@ -16,11 +16,9 @@ function __construct() {
    */
   function add_to_context( array $context ) : array {
     $context['nav'] = new TimberMenu( 'main-nav' );
-    $context['social_nav'] = new TimberMenu( 'social-nav' );
 
     $context['site'] = $this;
     $context['home_url'] = home_url();
-    $context['footer_widgets'] = Timber::get_widgets( 'my-footer' );
 
     $root = get_template_directory_uri();
     $context['images'] = $root.'/assets/images';

js/app.js

@@ -77,11 +77,11 @@ var myNav = {
    * Toggle mobile nav
    */
   mobileNav() {
-    $('#nav-toggle').on( 'click', toggle );
+    $('#nav-toggle').on( 'click', _toggle );
     $('.nav-items').on( 'click', this.preventClose );
 
     //
-    function toggle( e ) {
+    function _toggle( e ) {
       e.preventDefault();
       e.stopPropagation();
       $('body').removeClass( 'has-active-cart' ).toggleClass( 'has-active-nav' );

page.php

@@ -2,4 +2,4 @@
 $context = Timber::get_context();
 $context['post'] = Timber::get_post();
 
-Timber::render(['page-' . $post->post_name . '.twig', 'page.twig'], $context);
+Timber::render(['page-' . $post->post_name . '.twig', 'page.twig'], $context);

sass/_edje/_index.scss

@@ -0,0 +1,126 @@
+// COLOR
+$h-colors: (
+  // Palette
+  'red': #d32f2f,
+  'red-dark': #b71c1c,
+  'red-light': #ffcdd2,
+
+  'orange': #fB8c00,
+  'orange-dark': #e65100,
+  'orange-light': #ffe0b2,
+
+  'yellow': #ffee58,
+  'yellow-dark': #ffd600,
+  'yellow-light': #fff9c4,
+
+  'green': #4caf50,
+  'green-dark': #2e7d32,
+  'green-light': #c8e6c9,
+
+  'blue': #1976d2,
+  'blue-dark': #1565c0,
+  'blue-light': #bbdefb,
+
+  'gray': #b0bec5,
+  'gray-dark': #90a4ae,
+  'gray-light': #eceff1,
+
+  'black': black,
+  'white': white,
+
+  // Named color
+  'main': var(--blue),
+  'main-dark': var(--blue-dark),
+  'main-light': var(--blue-light),
+
+  'sub': var(--gray),
+  'sub-dark': var(--gray-dark),
+  'sub-light': var(--gray-light),
+
+  // Typography
+  'text': #222,
+  'passive': #888,
+  'header': var(--text),
+
+  // Other
+  'body': #ffffff
+) !default;
+
+
+// FONT
+$font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-header : "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times","Source Serif Pro", serif !default;
+$font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+$font-weight : 400 !default;
+$font-line   : 1.65 !default;
+$font-size   : 16px !default;
+$color-link : inherit !default;
+$color-link-hover : var(--blue) !default;
+
+$header-line    : 1.25 !default;
+$header-weight  : 700 !default;
+$header-spacing : 0 !default;
+$header-transform : none !default;
+
+$h1: (base: 42px, s: 30px) !default;
+$h2: (base: 36px, s: 26px) !default;
+$h3: (base: 30px, s: 22px) !default;
+$h4: (base: 24px, s: 20px) !default;
+$h5: (base: 20px, s: 18px) !default;
+$h6: (base: $font-size, s: $font-size) !default;
+
+
+// LIST
+$ul-parent : disc !default;
+$ul-child  : circle !default;
+$ol-parent : decimal !default;
+$ol-child  : lower-alpha !default;
+
+
+// SIZING
+$size-xs : 480px !default;
+$size-s  : 767px !default;
+$size-m  : 960px !default;
+$size-l  : 1120px !default;
+
+$below-xs: "max-width:#{ $size-xs }" !default;
+$above-xs: "min-width:#{ $size-xs + 1px }" !default;
+$below-s: "max-width:#{ $size-s }" !default;
+$above-s: "min-width:#{ $size-s + 1px }" !default;
+$below-m: "max-width:#{ $size-m }" !default;
+$above-m: "min-width:#{ $size-m + 1px }" !default;
+$below-l: "max-width:#{ $size-l }" !default;
+$above-l: "min-width:#{ $size-l + 1px }" !default;
+
+$portrait: "orientation: portrait" !default;
+$landscape: "orientation: landscape" !default;
+$retina: "min-resolution: 192dpi" !default;
+
+
+///// GRID
+$grid-columns : 12 !default;
+$grid-gap     : 20px !default;
+$grid-rim     : 16px !default;
+$grid-max-width : $size-l !default;
+
+// Tile
+$tile-max : 8 !default;
+$tile-gap : 20px !default;
+
+
+// GLOBAL VAR
+$g-radius: 4px !default;
+$g-transition: all .25s ease-in-out !default;
+
+$shadow-z0: 0 0.5px 2px rgba(black, .18), 0 1.5px 6px rgba(black, .08) !default;
+$shadow-z1: 0 1.5px 4px rgba(black, .24), 0 1.5px 6px rgba(black, .12) !default;
+$shadow-z2: 0 3px 12px rgba(black, .23), 0 3px 12px rgba(black, .16) !default;
+$shadow-z3: 0 6px 12px rgba(black, .23), 0 10px 40px rgba(black, .19) !default;
+
+$h-custom: () !default;
+
+@import "utility-h";
+@import "utility";
+@import "functional-vars";
+@import "output";

sass/_edje/_output.scss

@@ -449,7 +449,6 @@ h-tile {
 %h5 { @include font-sizes( $h5 ); }
 %h6 { @include font-sizes( $h6 ); }
 
-
 @if $output-framework and $include-typography {
 
 body {

sass/_settings.scss

@@ -191,7 +191,4 @@ $social-colors: (
   youtube: #ff0100,
 );
 
-@import "_edje/utility-h";
-@import "_edje/utility";
-@import "_edje/functional-vars";
-@import "_edje/output";
+@import "_edje/index";

sass/app.sass

@@ -1,11 +1,12 @@
 // Put styles that are unique for this project here
 @import "settings"
-@import "app/nav"
+
+@import "app/header"
 @import "app/footer"
-@import "app/align"
 
+@import "app/blocks"
 @import "app/blocks-common"
 @import "app/blocks-layout"
 @import "app/blocks-formatting"
 @import "app/blocks-widget-embed"
-@import "app/blocks-custom"
+@import "app/blocks-custom"

sass/app/_blocks-common.sass

@@ -202,16 +202,11 @@ ul.blocks-gallery-grid
   +h( relative ph2 pv0_5 fs-m )
   border-left: 3px solid var(--text)
 
-  p,
-  li
-    +h( mb0 )
-
-  p + p,
-  li + li
+  > * + *
     +h( mt1 )
 
   cite
-    +h( d-block mt1 fs-s c-passive )
+    +h( d-block fs-s c-passive )
 
   &::after
     content: "\f122"
@@ -227,8 +222,6 @@ ul.blocks-gallery-grid
     border-top: 3px solid var(--text)
     border-bottom: 3px solid var(--text)
 
-    cite
-      +h( fs-body )
     &::after
       +h( left0 right0 mh-auto w3 )
       transform: translateY(-50%)
@@ -262,7 +255,6 @@ ul.blocks-gallery-grid
 
   audio
     +h( w100p )
-
   figcaption
     @extend %figcaption
 

sass/app/_blocks-formatting.sass

@@ -1,59 +1,7 @@
-
-
 ///// PULLQUOTE
 
-.wp-block-pullquote
-  +h( pv0 )
-  background-color: var(--bgColor)
-
-  blockquote
-    +h( d-flex fd-column ta-left )
-
-    > *
-      +h( order2 )
-
-  p, li
-    +h( ph1 mb0 fs-body h0 ov-hidden  transition )
-
-  cite
-    +h( d-flex order1 cursor-pointer relative pv0_5 ph1 bg-black_05 )
-    +h( fw700 fs-m  transition brad )
-    font-style: normal
-
-    &::before
-      content: "+"
-      +h( d-iblock mr1  ff-monospace )
-    &:hover
-      +h( bg-black_20 )
-    &:focus
-      outline: 1px dotted #212121
-      outline: 5px auto -webkit-focus-ring-color
-
-  &.--expanded
-    cite
-      +h( mb1 )
-
-    cite::before
-      content: "-"
-
-    p, li
-      +h( mb1 h-auto )
-
-
-.wp-block-pullquote.is-style-solid-color
-  +h( brad )
-
-  cite
-    +h( bg-transparent )
+// Default CSS is queued by Edje
   
-  cite:hover
-    +h( bg-white_25 )
-
-  &.--expanded
-    cite
-      +h( bg-transparent )
-
-
 ///// VERSE
 
 .wp-block-verse

sass/app/_blocks-layout.sass

@@ -7,8 +7,6 @@
     +h( pv0 )
   &:not(.has-background) + .alignfull
     +h( mt0 )
-  *:last-child
-    +h( mb0 )
 
 ///// BUTTON
 
@@ -103,14 +101,11 @@ a.wp-block-file__button
 .wp-block-media-text__content
   grid-area: text
 
-  > *:last-child
-    +h( mb0 )
-
 
 ///// SPACER
 
 .wp-block-spacer
-  +h( mb0 )
+  +h( mv0 )
 
 
 ///// SEPARATOR

sass/app/_blocks-widget-embed.sass

@@ -55,28 +55,31 @@ ul.wp-block-social-links
     +h( jc-center )
 
 .wp-social-link a
-  +h( d-flex ai-center jc-center mr0_5 mb0_5  )
-  +h( w42px h42px lh0  transition brad-circle )
+  +h( d-flex ai-center jc-center mr0_75 mb0_75  )
+  +h( w42px h42px b1-solid bc-black_20 bbw2px  lh0  transition brad )
   background-color: var(--color)
+  will-change: opacity
+
+  &:hover
+    +h( o70 )
+  &:active
+    +h( transition-none btw2px bbw1px )
 
   .is-style-logos-only &
-    +h( bg-transparent )
+    +h( bg-transparent bc-transparent mr0_5 )
     svg
       fill: var(--color)
+    &:hover
+      +h( bc-black_20 )
 
   .is-style-pill-shape &
     +h( brad-pill ph1 w-auto )
 
-  &:hover
-    +h( shadow1 )
-    transform: translateY(-2px)
-  &:active
-    +h( transition-none )
-    transform: translateY(-1px)
 
 .wp-social-link svg
   +h( w28px h28px )
   fill: white
+
 
 // color
 @each $name, $color in $social-colors
@@ -88,4 +91,7 @@ ul.wp-block-social-links
 .wp-social-link-feed,
 .wp-social-link-mail
   svg
-    fill: #382110
+    fill: #382110
+
+.wp-social-link-snapchat
+  stroke: black