From bcbbcee3933794068f1236b4ec0443cc7810f9c1 Mon Sep 17 00:00:00 2001 From: Kelly Mears Date: Sun, 13 Jan 2019 09:54:43 -0800 Subject: [PATCH] Plenty of changes --- app/Controllers/App.php | 2 +- app/filters.php | 11 ++- app/setup.php | 6 +- .../assets/styles/burrow/tachyons/_forms.scss | 4 ++ .../assets/styles/burrow/tachyons/_skins.scss | 3 + .../assets/styles/components/_buttons.scss | 71 +++++++------------ .../assets/styles/components/_comments.scss | 13 ++-- .../assets/styles/components/_gutenberg.scss | 46 ++++-------- .../styles/components/blocks/_dropcap.scss | 7 ++ .../{wp-blocks => blocks}/_lists.scss | 0 .../{wp-blocks => blocks}/_media.scss | 0 .../{wp-blocks => blocks}/_preformatted.scss | 0 .../_wp-block-button.scss | 0 .../_wp-block-columns.scss | 0 .../_wp-block-cover.scss | 10 ++- .../_wp-block-gallery.scss | 0 .../_wp-block-images.scss | 0 .../_wp-block-quote.scss | 0 .../_wp-block-separator.scss | 0 .../styles/components/blocks/_wrapper.scss | 31 ++++++++ resources/assets/styles/components/links.scss | 12 ++++ .../components/wp-blocks/wp-blocks.scss | 12 ---- resources/assets/styles/layouts/_header.scss | 3 +- resources/assets/styles/layouts/_posts.scss | 2 +- resources/assets/styles/main.scss | 1 + resources/views/front-page.blade.php | 8 +++ resources/views/index.blade.php | 2 +- resources/views/page.blade.php | 4 +- .../views/partials/content-page.blade.php | 6 +- resources/views/partials/content.blade.php | 2 +- 30 files changed, 142 insertions(+), 114 deletions(-) create mode 100644 resources/assets/styles/components/blocks/_dropcap.scss rename resources/assets/styles/components/{wp-blocks => blocks}/_lists.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_media.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_preformatted.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-button.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-columns.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-cover.scss (89%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-gallery.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-images.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-quote.scss (100%) rename resources/assets/styles/components/{wp-blocks => blocks}/_wp-block-separator.scss (100%) create mode 100644 resources/assets/styles/components/blocks/_wrapper.scss create mode 100644 resources/assets/styles/components/links.scss delete mode 100644 resources/assets/styles/components/wp-blocks/wp-blocks.scss create mode 100644 resources/views/front-page.blade.php diff --git a/app/Controllers/App.php b/app/Controllers/App.php index 6766ef3..a3dc0e2 100644 --- a/app/Controllers/App.php +++ b/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(); diff --git a/app/filters.php b/app/filters.php index 2961144..bece7df 100644 --- a/app/filters.php +++ b/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('
'); 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 */ diff --git a/app/setup.php b/app/setup.php index ba14d12..932a0a7 100644 --- a/app/setup.php +++ b/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', diff --git a/resources/assets/styles/burrow/tachyons/_forms.scss b/resources/assets/styles/burrow/tachyons/_forms.scss index ac40152..03d5836 100644 --- a/resources/assets/styles/burrow/tachyons/_forms.scss +++ b/resources/assets/styles/burrow/tachyons/_forms.scss @@ -27,3 +27,7 @@ padding: 0; } } + +@mixin no-outline { + outline: none; +} diff --git a/resources/assets/styles/burrow/tachyons/_skins.scss b/resources/assets/styles/burrow/tachyons/_skins.scss index 97ebcda..d601516 100644 --- a/resources/assets/styles/burrow/tachyons/_skins.scss +++ b/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; } diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss index 9f7c604..00e7565 100644 --- a/resources/assets/styles/components/_buttons.scss +++ b/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; } } } diff --git a/resources/assets/styles/components/_comments.scss b/resources/assets/styles/components/_comments.scss index 1ecadb2..345e51c 100644 --- a/resources/assets/styles/components/_comments.scss +++ b/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; } } diff --git a/resources/assets/styles/components/_gutenberg.scss b/resources/assets/styles/components/_gutenberg.scss index 8b9b291..fe25d53 100644 --- a/resources/assets/styles/components/_gutenberg.scss +++ b/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"; diff --git a/resources/assets/styles/components/blocks/_dropcap.scss b/resources/assets/styles/components/blocks/_dropcap.scss new file mode 100644 index 0000000..3e18b53 --- /dev/null +++ b/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; +} diff --git a/resources/assets/styles/components/wp-blocks/_lists.scss b/resources/assets/styles/components/blocks/_lists.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_lists.scss rename to resources/assets/styles/components/blocks/_lists.scss diff --git a/resources/assets/styles/components/wp-blocks/_media.scss b/resources/assets/styles/components/blocks/_media.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_media.scss rename to resources/assets/styles/components/blocks/_media.scss diff --git a/resources/assets/styles/components/wp-blocks/_preformatted.scss b/resources/assets/styles/components/blocks/_preformatted.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_preformatted.scss rename to resources/assets/styles/components/blocks/_preformatted.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-button.scss b/resources/assets/styles/components/blocks/_wp-block-button.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-button.scss rename to resources/assets/styles/components/blocks/_wp-block-button.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-columns.scss b/resources/assets/styles/components/blocks/_wp-block-columns.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-columns.scss rename to resources/assets/styles/components/blocks/_wp-block-columns.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-cover.scss b/resources/assets/styles/components/blocks/_wp-block-cover.scss similarity index 89% rename from resources/assets/styles/components/wp-blocks/_wp-block-cover.scss rename to resources/assets/styles/components/blocks/_wp-block-cover.scss index e9cc228..9224ec7 100644 --- a/resources/assets/styles/components/wp-blocks/_wp-block-cover.scss +++ b/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 { diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-gallery.scss b/resources/assets/styles/components/blocks/_wp-block-gallery.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-gallery.scss rename to resources/assets/styles/components/blocks/_wp-block-gallery.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-images.scss b/resources/assets/styles/components/blocks/_wp-block-images.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-images.scss rename to resources/assets/styles/components/blocks/_wp-block-images.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-quote.scss b/resources/assets/styles/components/blocks/_wp-block-quote.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-quote.scss rename to resources/assets/styles/components/blocks/_wp-block-quote.scss diff --git a/resources/assets/styles/components/wp-blocks/_wp-block-separator.scss b/resources/assets/styles/components/blocks/_wp-block-separator.scss similarity index 100% rename from resources/assets/styles/components/wp-blocks/_wp-block-separator.scss rename to resources/assets/styles/components/blocks/_wp-block-separator.scss diff --git a/resources/assets/styles/components/blocks/_wrapper.scss b/resources/assets/styles/components/blocks/_wrapper.scss new file mode 100644 index 0000000..79ae136 --- /dev/null +++ b/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; +} diff --git a/resources/assets/styles/components/links.scss b/resources/assets/styles/components/links.scss new file mode 100644 index 0000000..3d58933 --- /dev/null +++ b/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; +} diff --git a/resources/assets/styles/components/wp-blocks/wp-blocks.scss b/resources/assets/styles/components/wp-blocks/wp-blocks.scss deleted file mode 100644 index 6a9be13..0000000 --- a/resources/assets/styles/components/wp-blocks/wp-blocks.scss +++ /dev/null @@ -1,12 +0,0 @@ -body > main > article > main { - @import "wp-block-columns"; - @import "wp-block-separator"; - @import "wp-block-gallery"; - @import "wp-block-button"; - @import "wp-block-quote"; - @import "wp-block-cover"; - @import "wp-block-images"; - @import "media"; - @import "lists"; - @import "preformatted"; -} diff --git a/resources/assets/styles/layouts/_header.scss b/resources/assets/styles/layouts/_header.scss index 8c09fde..84166a0 100644 --- a/resources/assets/styles/layouts/_header.scss +++ b/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 { diff --git a/resources/assets/styles/layouts/_posts.scss b/resources/assets/styles/layouts/_posts.scss index 47b6de7..61a33df 100644 --- a/resources/assets/styles/layouts/_posts.scss +++ b/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 { diff --git a/resources/assets/styles/main.scss b/resources/assets/styles/main.scss index 5d251f7..f2ee546 100644 --- a/resources/assets/styles/main.scss +++ b/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"; diff --git a/resources/views/front-page.blade.php b/resources/views/front-page.blade.php new file mode 100644 index 0000000..cf50c8b --- /dev/null +++ b/resources/views/front-page.blade.php @@ -0,0 +1,8 @@ +@extends('layouts.app') + +@section('content') + @while(have_posts()) @php the_post() @endphp + @include('partials.page-header') + @include('partials.content-page') + @endwhile +@endsection diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index fd4f820..ef07f76 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -4,7 +4,7 @@ @include('partials.page-header') @if (!have_posts()) -
+
{{ __('Sorry, no results were found.', 'sage') }}
{!! get_search_form(false) !!} diff --git a/resources/views/page.blade.php b/resources/views/page.blade.php index dd7d9e1..8344861 100644 --- a/resources/views/page.blade.php +++ b/resources/views/page.blade.php @@ -2,9 +2,9 @@ @section('content') @while(have_posts()) @php the_post() @endphp -
+
@include('partials.page-header') @include('partials.content-page') -
+
@endwhile @endsection diff --git a/resources/views/partials/content-page.blade.php b/resources/views/partials/content-page.blade.php index 805ae71..fbf59f1 100644 --- a/resources/views/partials/content-page.blade.php +++ b/resources/views/partials/content-page.blade.php @@ -1,6 +1,4 @@ -
+
@php the_content() @endphp -
- + \ No newline at end of file diff --git a/resources/views/partials/content.blade.php b/resources/views/partials/content.blade.php index abf6a90..7c9e4a0 100644 --- a/resources/views/partials/content.blade.php +++ b/resources/views/partials/content.blade.php @@ -1,7 +1,7 @@
+ @include('partials/entry-meta-time')

{{ get_the_title() }}

- @include('partials/entry-meta')
@php the_excerpt() @endphp