Merge pull request #84 from piperhaywood/dev

v2.1.5

README.md

@@ -36,4 +36,6 @@ The shortcode `[notebooklist]` displays a chronological list of posts.
 
 ## Development
 
-I prefer to keep this theme separate from my WordPress installation when working on this locally. To do this, set up a WordPress site locally using this [multi-environment `wp-config.php` gist](https://gist.github.com/piperhaywood/2a7217964335e22574784153eab1d38b) if useful. Once you’ve set up the site, symlink the theme folder `/notebook-ph` within this repo in to your WP site’s `/wp-content/themes` directory. Back in the root of this repo, run `npm i` to install dependencies. Run `gulp` to build the theme or `gulp dev` for development. The command `gulp dev` will compile the files and then use BrowserSync for live reloading. To set a BrowserSync proxy other than the default `localhost:8888`, run `gulp dev --proxy custom-proxy` (replace `custom-proxy`).
+To set this repo up, install WordPress in a separate directory using this [multi-environment `wp-config.php` gist](https://gist.github.com/piperhaywood/2a7217964335e22574784153eab1d38b) if useful, then symlink the theme folder `/notebook-ph` within this repo in to your WP site’s `/wp-content/themes` directory. You can do this with multiple WordPress installations, which can be useful for testing styles against different content. I use this with one WordPress installation that reflects [piperhaywood.com](https://piperhaywood.com) and another that uses WordPress’s theme testing database.
+
+Once you have the WordPress installation set up and the theme symlinked, run `npm i` from the root of this repo to install dependencies. Run `gulp` to build the theme or `gulp dev` for development. The command `gulp dev` will compile the files and then use BrowserSync for live reloading. To set a BrowserSync proxy other than the default `localhost:8888`, run `gulp dev --proxy custom-proxy` (replace `custom-proxy`).

css/_base.scss

@@ -108,3 +108,12 @@ hr {
   color: black;
   height: 1px;
 }
+
+label {
+  a {
+    text-decoration: underline;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}

css/_blocks.button.scss

@@ -0,0 +1,29 @@
+.wp-block-button {
+  @include container;
+}
+
+.wp-block-button__link,
+.wp-block-file .wp-block-file__button {
+  background-color: $black;
+  border: 1px solid $black;
+  font-size: inherit;
+  padding: 0.5rem 1.25rem;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    background-color: $white !important;
+    color: $black;
+  }
+}
+
+.is-style-outline {
+  .wp-block-button__link {
+    background-color: $white !important;
+    border: 1px solid $black;
+    &:hover,
+    &:focus {
+      background-color: $black;
+      color: $white;
+    }
+  }
+}

css/_blocks.columns.scss

@@ -0,0 +1,68 @@
+@mixin columns($cols) {
+  &.has-#{$cols}-columns {
+    max-width: calc(#{$container-width} * #{$cols});
+  }
+}
+
+// See typography file for text styles
+
+.wp-block-columns {
+  margin-bottom: 0 !important;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0 !important;
+  max-width: $container-width;
+  padding: 0 var(--gutter);
+  &.alignwide {
+    @include columns(2);
+    @include columns(3);
+    @include columns(4);
+    @include columns(5);
+    @include columns(6);
+  }
+  &.alignfull {
+    max-width: none;
+  }
+
+  .wp-block-image {
+    padding: 0;
+  }
+
+  ~ p,
+  ~ ul,
+  ~ ol {
+    margin-top: 0 !important;
+  }
+}
+
+.wp-block-column {
+  margin-bottom: 1.5rem;
+}
+
+.wp-block-media-text {
+  align-items: start;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $container-width;
+  &.small {
+    grid-template-columns: 8rem auto;
+    .wp-block-media-text__media {
+      padding-right: calc(var(--gutter) / 2);
+    }
+    .wp-block-media-text__content {
+      padding-left: calc(var(--gutter) / 2);
+    }
+  }
+  &.alignfull {
+    max-width: none;
+  }
+  .wp-block-media-text__content {
+    padding: var(--gutter);
+    > *:first-child {
+      margin-top: 0;
+    }
+  }
+  .wp-block-media-text__media {
+    padding: var(--gutter);
+  }
+}

css/_blocks.cover.scss

@@ -0,0 +1,61 @@
+.wp-block-cover,
+.wp-block-cover-image {
+  clear: both;
+  .wp-block-cover-image-text,
+  .wp-block-cover-text,
+  h2 {
+    font-size: inherit;
+  }
+  &.aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: calc(40rem - (var(--gutter) * 2));
+  }
+  &.alignleft,
+  &.alignright {
+    margin-left: var(--gutter);
+    margin-right: var(--gutter);
+    max-width: calc(100vw - (var(--gutter) * 2));
+    width: 100%;
+  }
+  &.alignleft {
+    @media (min-width: 540px) {
+      float: left;
+      max-width: $max-aligned-width;
+    }
+    @media (min-width: 640px) {
+      margin-left: calc(((100vw - #{$container-width}) / 2) + var(--gutter));
+    }
+    @media (min-width: 900px) {
+      margin-left: calc(
+        ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) +
+          var(--gutter)
+      );
+    }
+    @media (min-width: 1180px) {
+      margin-left: calc(
+        ((100vw - #{$container-width}) / 2) - #{$max-aligned-width}
+      );
+    }
+  }
+  &.alignright {
+    @media (min-width: 540px) {
+      float: right;
+      max-width: $max-aligned-width;
+    }
+    @media (min-width: 640px) {
+      margin-right: calc(((100vw - #{$container-width}) / 2) + var(--gutter));
+    }
+    @media (min-width: 900px) {
+      margin-right: calc(
+        ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) +
+          var(--gutter)
+      );
+    }
+    @media (min-width: 1180px) {
+      margin-right: calc(
+        ((100vw - #{$container-width}) / 2) - #{$max-aligned-width}
+      );
+    }
+  }
+}

css/_blocks.embeds.scss

@@ -0,0 +1,13 @@
+.wp-block-embed {
+  @include container;
+  figcaption {
+    color: $grey;
+    font-size: inherit;
+    text-align: left;
+  }
+  &.alignfull {
+    iframe {
+      width: 100%;
+    }
+  }
+}

css/_blocks.gallery.scss

@@ -0,0 +1,16 @@
+.wp-block-gallery {
+  margin-bottom: 0;
+  &.alignfull,
+  &.alignwide {
+    max-width: none !important;
+  }
+  &.alignleft,
+  &.alignright {
+    max-width: 40rem;
+  }
+  ~ p,
+  ~ ul,
+  ~ ol {
+    margin-top: 0.5rem !important;
+  }
+}

css/_blocks.image.scss

@@ -0,0 +1,112 @@
+.wp-block-image {
+  @include container;
+  &.is-resized {
+    @include container;
+  }
+  figcaption {
+    color: $grey; // WP override
+    font-size: inherit; // WP override
+    text-align: left;
+  }
+
+  > img {
+    display: block;
+  }
+
+  &.alignfull img {
+    padding: 0;
+  }
+
+  .aligncenter,
+  .alignleft,
+  .alignright &.is-resized {
+    display: block;
+    > figcaption {
+      display: block; // WP override
+    }
+  }
+
+  .aligncenter {
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    figcaption {
+      @include container;
+      text-align: center;
+    }
+  }
+
+  .alignleft,
+  .alignright {
+    float: none;
+    margin: 0;
+    width: 100%;
+    figcaption {
+      text-align: left;
+    }
+    img {
+      min-width: $max-aligned-width;
+    }
+  }
+
+  .alignleft {
+    margin-right: var(--gutter);
+  }
+
+  .alignright {
+    margin-left: var(--gutter);
+  }
+
+  &.alignwide {
+    max-width: none;
+  }
+
+  &.alignfull {
+    max-width: none;
+    padding: 0;
+  }
+}
+
+@media (min-width: 640px) {
+  .wp-block-image .alignleft,
+  .wp-block-image .alignright {
+    max-width: $max-aligned-width;
+    width: auto;
+  }
+  .wp-block-image .alignleft {
+    float: left;
+  }
+  .wp-block-image .alignright {
+    float: right;
+  }
+}
+@media (min-width: 940px) {
+  .wp-block-image .alignleft {
+    margin-left: calc(((#{$max-aligned-width} / 2) + var(--gutter)) * -1);
+  }
+  .wp-block-image .alignright {
+    margin-right: calc(((#{$max-aligned-width} / 2) + var(--gutter)) * -1);
+  }
+}
+@media (min-width: 1200px) {
+  .wp-block-image .alignleft,
+  .wp-block-image .alignright {
+    img {
+      padding: 0;
+    }
+  }
+  .wp-block-image .alignleft {
+    margin-left: calc((#{$max-aligned-width} + var(--gutter)) * -1);
+    figcaption {
+      padding: 0;
+    }
+  }
+  .wp-block-image .alignright {
+    margin-right: calc((#{$max-aligned-width} + var(--gutter)) * -1);
+    figcaption {
+      padding: 0;
+    }
+  }
+}

css/_blocks.quotes.scss

@@ -0,0 +1,27 @@
+.wp-block-quote {
+  padding: var(--gutter);
+  &.is-large,
+  &.is-style-large {
+    padding: var(--gutter);
+    p {
+      font-style: normal;
+    }
+    footer,
+    cite {
+      font-size: inherit;
+    }
+  }
+}
+
+.wp-block-pullquote {
+  blockquote {
+    border: none !important;
+    text-align: center !important;
+  }
+  p {
+    margin-bottom: 1rem !important;
+  }
+  cite {
+    font-style: italic !important;
+  }
+}