Merge pull request #38 from piperhaywood/dev

v2.0.0

.gitignore

@@ -1,12 +1,11 @@
-.DS_Store
+*.DS_Store
 node_modules
 .sass-cache
 *.map
 
 /*
 !/.gitignore
 !/gulpfile.js
-!/bower.json
 !/package.json
 !/README.md
 !/favicon.ico

README.md

@@ -1 +1,15 @@
-Piper's notes
+# Notebook theme for WordPress
+
+This is a simple WordPress theme for keeping notes. It is currently in use on [piperhaywood.com](https://piperhaywood.com).
+
+Post titles are second-class citizens by design. For Standard posts (longer format writing), titles are displayed in the body of the content. For all other formats (aside, image, quote, etc.), titles are only displayed on the post permalink as a breadcrumb.
+
+The Browse page template offers search, year-based post lists, and a tag cloud. The tag cloud displays only tags with greater than one post count. The tag opacity is relative to the tag’s post count (the fewer the posts, the lighter the tag).
+
+The theme makes use of the [Infinite Scroll](https://infinite-scroll.com/) library by Metafizzy under the open source license [GPLv3](https://www.gnu.org/licenses/gpl-3.0.html). The theme uses [Prism.js](https://prismjs.com/index.html) for syntax highlighting.
+
+There are a few additional theme modification options on the WordPress Customizer. “Rainbow” will enable date-specific colours across the site. A theme credit can optionally be removed, and author links can be hidden.
+
+The theme isn’t currently translation-ready. I’ll try to get to this at some point.
+
+The accessibility is nowhere near where I want it to be. That needs to be the priority for the next update.

css/_base.scss

@@ -0,0 +1,112 @@
+:root {
+  --tag-color: $black;
+  --color: $black;
+  --gutter: $container-padding-mobile;
+  @media (min-width: 500px) {
+    --gutter: $container-padding;
+  }
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-size: 1em;
+}
+
+html {
+  font-size: 87.5%;
+}
+
+button,
+select,
+textarea,
+input {
+  font-size: 16px;
+}
+
+@media (min-width: 500px) {
+  html {
+    font-size: 100%;
+  }
+
+  button,
+  select,
+  textarea,
+  input {
+    font-size: 100%;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+  margin: 0;
+}
+
+body {
+  @include style-body;
+  color: $black;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  display: inline-block;
+  height: auto;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+}
+
+button,
+[type="submit"] {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+svg {
+  display: inline-block;
+  height: auto;
+  vertical-align: middle;
+}
+
+summary {
+  cursor: pointer;
+}
+
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) input:focus,
+body:not(.user-is-tabbing) select:focus,
+body:not(.user-is-tabbing) textarea:focus,
+body:not(.user-is-tabbing) summary:focus {
+  outline: none;
+}
+
+iframe {
+  max-width: 100%;
+}

css/_browse.scss

@@ -0,0 +1,19 @@
+.years {
+  margin-bottom: 2em;
+}
+
+.year-posts {
+  margin-bottom: 1em;
+}
+
+.year-post {
+  display: block;
+}
+
+.year-post {
+  padding: .25em .5em;
+}
+
+.tagcloud .post__tag {
+  color: var(--tag-color);
+}

css/_components.menu.scss

@@ -0,0 +1,57 @@
+.menu-header-container ul {
+  list-style-type: none;
+}
+
+.menu > ul {
+  padding-left: 0;
+}
+
+.menu li {
+  @include style-h1;
+}
+
+.menu a {
+  display: inline-block;
+  margin: 0 0 1rem;
+}
+
+.menu a:hover {
+  text-decoration: underline;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+.open-menu:hover .open-menu__button {
+  text-decoration: underline;
+}
+
+.open-menu__button--close {
+  display: none;
+}
+
+#menu-toggle:checked ~ .open-menu .open-menu__button--open {
+  display: none;
+}
+
+#menu-toggle:checked ~ .open-menu .open-menu__button--close {
+  display: inline;
+}
+
+.open-menu {
+  cursor: pointer;
+  height: $header-height;
+  padding: $container-padding var(--gutter);
+  position: fixed;
+  right: calc((100vw - #{$container-width}) / 2);
+  top: 0;
+  z-index: 70;
+  @media (max-width: $container-width) {
+    right: 0;
+  }
+}
+
+.admin-bar .open-menu {
+  top: 32px;
+}

css/_components.pagination.scss

@@ -0,0 +1,17 @@
+.pagination {
+  margin-bottom: 2em;
+  padding-top: 10vh;
+}
+
+.pagination__label {
+  margin-bottom: .5rem;
+}
+
+.pagination__link {
+  @include style-h1;
+}
+
+.pagination--post .pagination__link a {
+  display: inline-block;
+  width: 100%;
+}

css/_components.searchform.scss

@@ -0,0 +1,34 @@
+.searchform {
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+.searchform label {
+  @include visuallyhidden;
+}
+
+.searchform input[type="text"] {
+  border: 1px solid transparent;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(100vw - (var(--gutter) * 2));
+  padding: $container-padding 0 $container-padding $container-padding;
+  width: 100%;
+}
+
+.searchform input[type="submit"] {
+  background: white;
+  cursor: pointer;
+  padding: 1rem;
+}
+
+.searchform input[type="submit"]:hover {
+  text-decoration: underline;
+}
+
+.searchform__group {
+  border: 1px solid black;
+  display: flex;
+  margin-bottom: .5rem;
+}

css/_components.site-footer.scss

@@ -0,0 +1,26 @@
+.site-footer {
+  @include container;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  position: relative;
+  width: 100%;
+  z-index: 55;
+}
+
+.infinite-loading,
+.infinite-end {
+  display: none;
+  margin-bottom: 2em;
+  padding-top: 10vh;
+}
+
+.infinite-loading.show,
+.infinite-end.show {
+  display: block;
+}
+
+.infinite-end a:hover {
+  text-decoration: underline;
+}

css/_components.site-header.scss

@@ -0,0 +1,70 @@
+.header__inner {
+  background: white;
+  height: $header-height;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 60;
+}
+
+.header__description code {
+  @include code;
+}
+
+#menu-toggle:checked ~ .header .header__inner {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+#menu-toggle:checked ~ .header .header,
+#menu-toggle:checked ~ .header .header__inner {
+  height: 100%;
+  background: white;
+}
+
+#menu-toggle:checked ~ .wrapper, {
+  opacity: .5;
+}
+
+.header__title {
+  display: inline-block;
+  font-size: inherit;
+  font-weight: inherit;
+  overflow: hidden;
+  padding-bottom: $container-padding;
+  padding-top: $container-padding;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 34em;
+  @media (max-width: $container-width) {
+    width: calc(100vw - 6em);
+  }
+}
+
+.header__link:hover {
+  text-decoration: underline;
+}
+
+#menu-toggle:checked ~ .header .header__title {
+  overflow: visible;
+  white-space: normal;
+}
+
+.smallprint {
+  color: $grey;
+  margin-bottom: 1em;
+}
+
+.smallprint a:hover {
+  text-decoration: underline;
+}
+
+.admin-bar .header__inner {
+  top: 32px;
+}
+
+.header .searchform {
+  margin-top: .75rem;
+}