Browse Source

Use Block Element Modifier naming conventions (#22)

* Books & blocks.

* Fix catalog.

* Update Tachyons.

* Clean up contact form.

* Update header.

* Some header and footer improvements.

* Add pages (closes #18).
pull/25/head
Ned Zimmerman 7 years ago committed by GitHub
parent
commit
f085aeede6
  1. 2
      app/admin.php
  2. 6
      app/controllers/App.php
  3. 8
      app/setup.php
  4. 12
      package-lock.json
  5. 2
      package.json
  6. 6
      resources/assets/scripts/routes/common.js
  7. 7
      resources/assets/styles/common/_functions.scss
  8. 83
      resources/assets/styles/common/_global.scss
  9. 21
      resources/assets/styles/common/_variables.scss
  10. 53
      resources/assets/styles/components/_buttons.scss
  11. 143
      resources/assets/styles/components/_forms.scss
  12. 2
      resources/assets/styles/components/_wp-classes.scss
  13. 282
      resources/assets/styles/layouts/_footer.scss
  14. 69
      resources/assets/styles/layouts/_header.scss
  15. 85
      resources/assets/styles/layouts/_pages.scss
  16. 18
      resources/assets/styles/layouts/pages/_catalog.scss
  17. 38
      resources/assets/styles/layouts/pages/_front-page.scss
  18. 4
      resources/assets/styles/main.scss
  19. 2
      resources/views/front-page.blade.php
  20. 6
      resources/views/partials/book.blade.php
  21. 26
      resources/views/partials/contact-form.blade.php
  22. 18
      resources/views/partials/footer.blade.php
  23. 12
      resources/views/partials/header.blade.php
  24. 0
      resources/views/partials/page-block.blade.php
  25. 16
      yarn.lock

2
app/admin.php

@ -9,7 +9,7 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
// Add postMessage support
$wp_customize->get_setting('blogname')->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial('blogname', [
'selector' => '.brand',
'selector' => '.branding h1 a',
'render_callback' => function () {
bloginfo('name');
}

6
app/controllers/App.php

@ -38,12 +38,12 @@ class App extends Controller
|| get_option('pb_network_twitter')
|| is_active_sidebar("network-footer-block-$index")
) {
return "network-footer-block-$index";
return "network-footer__block--$index";
} else {
return 'empty';
return 'network-footer__block--empty';
}
}
return (is_active_sidebar("network-footer-block-$index")) ? "network-footer-block-$index" : 'empty';
return (is_active_sidebar("network-footer-block-$index")) ? "network-footer__block--$index" : 'network-footer__block--empty';
}
public static function title()

8
app/setup.php

@ -90,8 +90,8 @@ add_action('widgets_init', function () {
$config = [
'before_widget' => '<section class="widget %1$s %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="tc ttu">',
'after_title' => '</h3>'
'before_title' => '<h2>',
'after_title' => '</h2>'
];
register_sidebar([
'name' => __('Front Page Content', 'aldine'),
@ -102,8 +102,8 @@ add_action('widgets_init', function () {
'id' => 'front-page-block',
'before_widget' => '<section class="block %1$s %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="tc ttu">',
'after_title' => '</h3>'
'before_title' => '<h2>',
'after_title' => '</h2>'
]);
register_sidebar([
'name' => __('Network Footer Block 1', 'aldine'),

12
package-lock.json generated

@ -110,6 +110,12 @@
}
}
},
"aetna": {
"version": "github:pressbooks/aetna#3a0a32315b48877bf7ef30c384fad9d3b92f875f",
"requires": {
"tachyons-sass": "4.8.1"
}
},
"after": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/after/-/after-0.8.1.tgz",
@ -12416,9 +12422,9 @@
"integrity": "sha512-sh/LFb9MoPt76sBKUSHP1MlMVRBw6zDiv11Ag/t5M4wS1mxQhFnNkDzhGdH6/xIwPO5tqwlNnXfiTI5XwDCJzA=="
},
"tachyons-sass": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/tachyons-sass/-/tachyons-sass-4.7.4.tgz",
"integrity": "sha512-Z03O0dVpHxGfKxkkk8QSQKdHYGqpS47URS0aV2q7S+3hYxomsvGq5g4AoR0VMkOMvGOpSmXCZnbm1gE5pbO8eQ==",
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/tachyons-sass/-/tachyons-sass-4.8.1.tgz",
"integrity": "sha512-2lyzsFRpFVCjAi7FzuhD6nRUkj6wVH81850AGvxPD5C9G8n58ok5iIuwIm+s/8CaNiqzcnGXzGthJ4Kiq2Y5Og==",
"requires": {
"tachyons": "4.8.1"
}

2
package.json

@ -103,10 +103,10 @@
"stylelint-webpack-plugin": "^0.8.0"
},
"dependencies": {
"aetna": "github:pressbooks/aetna#3a0a323",
"isotope-layout": "^3.0.4",
"jquery": "1.12.4 - 3",
"jquery-bridget": "^2.0.1",
"tachyons-sass": "~4.7",
"wpapi": "^1.1.2"
}
}

6
resources/assets/scripts/routes/common.js

@ -2,10 +2,10 @@ export default {
init() {
// JavaScript to be fired on all pages
$('body').removeClass('no-js').addClass('js');
$('.toggle-menu').click((event) => {
$('.toggle').click((event) => {
event.preventDefault();
$(event.currentTarget).toggleClass('is-active');
$('.primary-navigation').toggleClass('is-visible');
$(event.currentTarget).toggleClass('toggle--active');
$('.banner__navigation').toggleClass('banner__navigation--visible');
});
},
finalize() {

7
resources/assets/styles/common/_functions.scss

@ -1,7 +0,0 @@
@function rem($pixels, $context: $base-font-size) {
@return #{$pixels / $context}rem;
}
@function percent($target, $context) {
@return ($target / $context) * 100%;
}

83
resources/assets/styles/common/_global.scss

@ -1,83 +0,0 @@
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: $font-family-serif;
font-size: rem(18);
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family-sans-serif;
}
h1 {
font-size: rem(30);
font-weight: 600;
letter-spacing: rem(2);
line-height: (36/30);
margin: 0;
}
h2 {
font-size: rem(16);
font-weight: normal;
line-height: (30/16);
margin: 0;
}
.ml-auto {
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
:root {
--primary: $brand-primary;
--accent: $brand-accent;
--primary-fg: $white;
--accent-fg: $white;
--header-text: $black;
}
a {
color: var(--primary, $brand-primary);
text-decoration: none;
}
.primary {
color: var(--brand-primary, $brand-primary);
}
.bg-primary {
background-color: var(--brand-primary, $brand-primary);
}
.b--primary {
border-color: var(--brand-primary, $brand-primary);
}
.accent {
color: var(--brand-secondary, $brand-accent);
}
.bg-accent {
background-color: var(--brand-secondary, $brand-accent);
}
.b--accent {
border-color: var(--brand-secondary, $brand-accent);
}

21
resources/assets/styles/common/_variables.scss

@ -1,21 +0,0 @@
/** Colors */
$brand-primary: #b01109;
$brand-accent: #015d75;
$light-gray: #ececec;
$dark-grey: #444;
$black: #000;
$white: #fff;
/** Box Model */
$spacer: 2rem;
/** Breakpoints */
$small: 768px;
$medium: 960px;
$large: 1200px;
$extra-large: 1650px;
/** Fonts */
$font-family-sans-serif: 'Karla', sans-serif;
$font-family-serif: 'Spectral', serif;
$base-font-size: 16;

53
resources/assets/styles/components/_buttons.scss

@ -1,53 +0,0 @@
.button {
display: inline-block;
width: rem(250);
height: rem(60);
padding: rem(19);
border: 2px solid var(--primary, $brand-primary);
border-radius: 3px;
background: var(--primary, $brand-primary);
font-family: $font-family-sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--primary-fg, $white);
line-height: normal;
letter-spacing: rem(2);
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s;
vertical-align: middle;
&:hover,
&:focus {
background: $white;
color: var(--primary, $brand-primary);
}
&.button--small {
width: rem(150);
height: rem(40);
padding: rem(6.5);
}
&.button--wide {
width: 19.0625rem;
}
&.button--outline {
background: $white;
color: var(--primary, $brand-primary);
&:hover,
&:focus {
color: var(--primary-fg, $white);
background: var(--primary, $brand-primary);
}
}
}
@media (min-width: $medium) {
.button {
width: 275px;
}
}

143
resources/assets/styles/components/_forms.scss

@ -1,98 +1,97 @@
/** Search form */
// TODO: .search-form {}
// TODO: .search-form label {}
// TODO: .search-form .search-field {}
// TODO: .search-form .search-submit {}
::placeholder {
color: $black;
}
.contact {
background: #f6f6f6;
padding: rem(65) 0 rem(120);
.form {
width: rem(354);
h3 {
color: var(--primary, $brand-primary);
&::before {
content: '';
display: block;
margin: 0 auto 1rem;
width: rem(46);
height: rem(5);
background: var(--accent, $brand-accent);
}
::placeholder {
color: $black;
}
p {
&__notice {
margin-bottom: 2rem;
font-size: 0.875rem;
font-weight: 600;
font-family: $font-family-sans-serif;
&:last-child {
margin-top: rem(47);
&--error {
color: $dark-red;
}
}
.success {
color: $dark-green;
}
.error {
color: $dark-red;
&--success {
color: $dark-green;
}
}
form {
width: 22.125rem;
&__row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
.error > input[type="text"],
.error > input[type="email"],
.error > textarea {
&--error > input[type="text"],
&--error > input[type="email"],
&--error > textarea {
border-bottom: solid 2px $dark-red;
}
.error > ::placeholder {
&--error > ::placeholder {
color: $dark-red;
}
}
label {
margin-bottom: 1rem;
&:last-child {
margin-top: rem(48);
}
}
}
label,
input[type="text"],
input[type="email"],
textarea {
font-size: 0.875rem;
font-weight: 600;
font-family: $font-family-sans-serif;
background: transparent;
}
label {
margin-bottom: 1rem;
}
.button {
background: transparent;
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
flex-grow: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: solid 2px $black;
padding: 0 0 1em;
font-size: 0.875rem;
font-weight: 600;
font-family: $font-family-sans-serif;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
&:focus {
outline: none;
border-bottom: solid 2px var(--accent, $brand-accent);
}
}
textarea {
height: 7.5em; // TODO
resize: none;
}
textarea {
height: 7.5em;
resize: none;
}
input[type="text"],
input[type="email"],
textarea {
flex-grow: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: solid 2px $black;
padding: 0 0 1em;
&:focus {
outline: none;
border-bottom: solid 2px var(--accent, $brand-accent);
}
input[type="submit"] {
cursor: pointer;
}
// Contact form
.contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: rem(65) 0 rem(120);
background: #f6f6f6;
h2 {
font-size: rem(24);
margin-bottom: rem(40);
}
}

2
resources/assets/styles/components/_wp-classes.scss

@ -3,6 +3,8 @@
* @see http://codex.wordpress.org/CSS#WordPress_Generated_Classes
*/
$spacer: 2rem;
/** Media alignment */
.alignnone {
margin-left: 0;

282
resources/assets/styles/layouts/_footer.scss

@ -1,247 +1,127 @@
.content-info {
.network-footer {
margin-bottom: 0;
padding: 60px 42.5px 40px;
font-family: $font-family-sans-serif;
font-size: rem(16);
color: var(--accent-fg, $white);
background: var(--accent, $brand-accent);
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-weight: 600;
line-height: (36/16);
}
.network-footer {
margin-bottom: 0;
padding: 60px 42.5px 40px;
font-family: $font-family-sans-serif;
font-size: rem(16);
color: var(--accent-fg, $white);
background-color: var(--accent, $brand-accent);
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-weight: 600;
line-height: (36/16);
}
a {
color: var(--accent-fg, $white);
text-decoration: none;
border-bottom: solid 1px transparent;
a {
color: var(--accent-fg, $white);
text-decoration: none;
border-bottom: solid 1px transparent;
&:hover,
&:focus {
border-bottom: solid 1px var(--accent-fg, $white);
}
&:hover,
&:focus {
border-bottom: solid 1px var(--accent-fg, $white);
}
}
.network-footer-block.empty {
display: none;
}
&__block {
border-top: solid 1px var(--accent-fg, $white);
.network-footer-block:first-of-type {
&:first-of-type {
border-top: 0;
}
}
.network-footer-block {
border-top: solid 1px var(--accent-fg, $white);
}
.network-footer-block-1 {
margin: 0 -5px;
padding: 0 0 40px;
}
&__block--1 {
margin: 0 -5px;
padding: 0 0 40px;
}
.network-footer-block-2 {
padding: 30px 7.5px;
&__block--2 {
padding: 30px 7.5px;
.widget {
margin-bottom: 1em;
}
.widget {
margin-bottom: 1em;
}
}
.network-footer-menu {
padding: 30px 7.5px 0;
}
&__menu {
padding: 30px 7.5px 0;
}
.network-footer-block .social-media {
margin-top: 0;
width: 100%;
&__block .social-media {
margin-top: 0;
width: 100%;
a {
margin: 0 0.5em 0 0;
border-bottom: none;
a {
margin: 0 0.5em 0 0;
border-bottom: none;
&:hover,
&:focus {
border-bottom: none;
}
&:hover,
&:focus {
border-bottom: none;
}
}
}
}
.social-media {
margin-top: 1em;
.social-media {
margin-top: 1em;
a {
font-size: rem(32);
margin: 0 0.25em;
transition: all 0.4s;
}
a {
font-size: rem(32);
margin: 0 0.25em;
transition: all 0.4s;
}
}
.pressbooks-footer {
@media (min-width: $medium) {
.network-footer {
display: flex;
position: relative;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 125px;
background-color: $dark-grey;
h1,
li,
a {
color: $white;
font-family: $font-family-sans-serif;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
}
h1 {
font-size: rem(16);
font-weight: normal;
margin-bottom: 0;
.pressbooks {
font-weight: 600;
}
}
h1 a {
border-bottom: solid 1px $dark-grey;
transition: all 0.4s;
&:hover,
&:focus {
border-bottom: solid 1px $white;
}
}
ul {
display: none;
margin: 0;
font-size: rem(14);
}
.pressbooks-icon {
display: none;
text-align: left;
}
.pressbooks-links {
&__block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 142.5px;
margin: 0;
padding: 0 69.5px;
border-top: 0;
border-right: solid 1px var(--accent-fg, $white);
}
}
}
@media (min-width: $medium) {
.content-info {
.network-footer {
display: flex;
flex-direction: row;
align-items: center;
&__block--2 {
flex-direction: column;
justify-content: center;
ul {
text-align: left;
}
.network-footer-block {
display: flex;
align-items: center;
height: 142.5px;
margin: 0;
padding: 0 69.5px;
border-top: 0;
border-right: solid 1px $white;
}
.network-footer-block-2 {
flex-direction: column;
justify-content: center;
}
.network-footer-block:last-of-type {
border-right: 0;
}
}
.social-media {
a {
font-size: rem(24);
margin: 0 0.5em 0 0;
}
&__block:last-of-type {
border-right: 0;
}
}
.pressbooks-footer {
flex-direction: row;
justify-content: space-between;
height: 106.76px;
padding: 0 38px;
h1 {
font-weight: 600;
margin-bottom: 11px;
}
ul {
display: block;
list-style: none;
li {
display: inline-block;
&::after {
content: "|";
color: $white;
display: inline-block;
margin: 0 0.5em;
}
&:last-child {
&::after {
content: "";
display: none;
}
}
}
}
.pressbooks-icon {
display: block;
line-height: 1;
svg path {
fill: $white;
}
}
.social-media {
margin-top: 0;
a {
margin: 0 0 0 0.5em;
}
}
.social-media {
a {
font-size: rem(24);
margin: 0 0.5em 0 0;
}
}
}
@media (min-width: $extra-large) {
.content-info {
.network-footer {
ul {
li {
display: inline-block;
margin-right: 3em;
}
.network-footer {
ul {
li {
display: inline-block;
margin-right: 3em;
}
}
}

69
resources/assets/styles/layouts/_header.scss

@ -1,10 +1,21 @@
.banner {
background-position: bottom;
background-size: cover;
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 560px;
width: 100%;
max-width: 100%;
max-width: 1440px;
}
.toggle-menu {
.toggle {
display: block;
position: absolute;
top: 30px;
right: 17px;
width: 25px;
@ -12,7 +23,9 @@
z-index: 99;
text-indent: -9999em;
.icon {
&__icon {
display: block;
position: absolute;
top: 7px;
width: 25px;
height: 3px;
@ -39,18 +52,21 @@
}
}
&.is-active .icon {
// TODO
background: var(--primary-fg, $white);
&::before,
&::after {
&--active {
.toggle__icon {
background: var(--primary-fg, $white);
&::before,
&::after {
background: var(--primary-fg, $white);
}
}
}
}
.brand {
&__brand {
display: block;
align-self: flex-start;
width: 6.5625rem;
height: auto;
margin: 30px 0 0 17px;
@ -63,10 +79,18 @@
}
}
.primary-navigation {
&__navigation {
display: flex;
position: absolute;
flex-direction: column;
justify-content: center;
align-items: flex-start;
top: 0;
width: 100%;
height: 560px;
margin: 0 0 0 -100%;
padding: 0 17px;
background: transparent;
a {
display: none;
@ -81,7 +105,7 @@
display: none;
}
&.is-visible {
&--visible {
margin: 0;
padding: 0 52px;
z-index: 1;
@ -99,8 +123,13 @@
}
}
.branding {
&__branding {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 364px;
text-align: center;
p {
font-family: $font-family-sans-serif;
@ -108,7 +137,7 @@
}
}
.page:not(.home) .banner .branding {
.page:not(.home) .banner__branding {
display: none;
}
@ -119,17 +148,25 @@
margin: 0 auto;
}
.brand {
.toggle {
display: none;
}
&__brand {
align-self: center;
width: 16.5625rem;
height: auto;
margin-top: 40px;
}
.primary-navigation {
&__navigation {
top: 40px;
height: 40px;
max-width: 1440px;
margin: 0 auto;
flex-direction: row;
justify-content: flex-start;
align-items: center;
a {
display: inline-block;
@ -157,7 +194,7 @@
}
}
.branding {
&__branding {
height: 576px;
p {

85
resources/assets/styles/layouts/_pages.scss

@ -1,2 +1,87 @@
@import 'pages/front-page';
@import 'pages/catalog';
.page {
.page-header {
h1 {
font-size: rem(30);
font-weight: 600;
color: var(--primary, $brand-primary);
letter-spacing: 2px;
line-height: (36/30);
text-transform: uppercase;
text-align: center;
margin: 0;
padding-top: 1rem;
&::before {
content: "";
display: block;
margin: 0 auto 1em;
width: 46px;
height: 5px;
background: var(--accent, $brand-accent);
}
}
}
.wrap {
padding: 0 rem(8);
}
.content {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0.78125rem;
display: flex;
height: auto;
min-height: rem(445);
background-color: $white;
margin: rem(-400) auto 0;
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
text-align: center;
p {
font-size: rem(18);
line-height: (32/16);
}
}
}
@media (min-width: $medium) {
.page {
.wrap {
margin-top: rem(-366);
}
.page-header h1 {
font-size: rem(48);
line-height: (56/48);
}
.content {
width: rem(775);
min-height: rem(494);
margin: rem(-600) auto rem(119);
padding: 0 90px;
&:last-child {
margin-bottom: 4.0625rem;
}
p {
font-size: rem(18);
line-height: (32/18);
}
}
}
}
@media (min-width: $large) {
.page {
.content {
width: rem(1115);
}
}
}

18
resources/assets/styles/layouts/pages/_catalog.scss

@ -196,19 +196,19 @@
text-decoration: none;
}
.subject {
&__subject {
height: rem(44);
font-size: rem(14);
}
.title {
&__title {
height: rem(118);
font-size: rem(16);
font-weight: 600;
line-height: (20/16);
}
.read-more {
&__read-more {
font-size: rem(14);
}
}
@ -320,19 +320,19 @@
margin: 0 percent(15, 735) 2rem 0;
padding: 0 rem(14) rem(21.35);
.subject {
&__subject {
height: rem(45.85);
font-size: rem(18);
}
.title {
&__title {
height: rem(147.65);
font-size: rem(22);
font-weight: 600;
line-height: (40/30);
}
.read-more {
&__read-more {
font-size: rem(16);
}
}
@ -470,19 +470,19 @@
margin: 0 0 2rem percent(39.5, 1221.5);
padding: 1.5rem 1.85rem 2.1875rem;
.subject {
&__subject {
height: 4.625rem;
font-size: rem(24);
}
.title {
&__title {
height: 13rem;
font-size: rem(30);
font-weight: 500;
line-height: (40/30);
}
.read-more {
&__read-more {
font-size: rem(18);
}
}

38
resources/assets/styles/layouts/pages/_front-page.scss

@ -89,27 +89,6 @@
}
}
.block,
.latest-books {
h3 {
font-size: rem(30);
font-weight: 600;
color: var(--primary, $brand-primary);
letter-spacing: 2px;
line-height: (36/30);
margin: 0;
&::before {
content: "";
display: block;
margin: 0 auto 1em;
width: 46px;
height: 5px;
background: var(--accent, $brand-accent);
}
}
}
.latest-books {
height: auto;
padding: 0 0 rem(154);
@ -165,14 +144,14 @@
text-align: center;
}
.subject {
&__subject {
height: 4.625rem;
margin: 0;
font-size: rem(24);
text-align: center;
}
.title {
&__title {
height: 13rem;
margin: 0;
font-size: rem(30);
@ -181,7 +160,7 @@
text-align: left;
}
.read-more {
&__read-more {
margin: 0;
font-size: rem(18);
text-align: left;
@ -238,15 +217,6 @@
margin-bottom: 4.0625rem;
}
h3 {
font-size: rem(48);
line-height: (56/48);
&::before {
width: 74px;
}
}
p {
font-size: rem(18);
line-height: (32/18);
@ -370,7 +340,7 @@
@media (min-width: $extra-large) {
.home {
.block {
width: 1115px;
width: rem(1115);
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
}

4
resources/assets/styles/main.scss

@ -6,12 +6,10 @@
* Prefix your imports with `~` to grab from node_modules/
* @see https://github.com/webpack-contrib/sass-loader#imports
*/
@import "~tachyons-sass/tachyons";
@import '~aetna/assets/styles/aetna.scss';
/** Import theme styles */
@import "common/functions";
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";

2
resources/views/front-page.blade.php

@ -5,7 +5,7 @@
@if(is_active_sidebar('front-page-block'))
@php(dynamic_sidebar('front-page-block'))
@else
@component('front-page-block')
@component('page-block')
@slot('title')
{{ __('About Pressbooks', 'aldine') }}
@endslot

6
resources/views/partials/book.blade.php

@ -4,14 +4,14 @@
data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}"
>
@if(isset($book['metadata']['keywords']))
<p class="subject">
<p class="book__subject">
<a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
</p>
@endif
<p class="title">
<p class="book__title">
<a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
</p>
<p class="read-more">
<p class="book__read-more">
<a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
</p>
</div>

26
resources/views/partials/contact-form.blade.php

@ -1,22 +1,22 @@
<section class="contact flex flex-column justify-center items-center w-100" id="contact">
<h3 class="tc ttu">{{ $contact_form_title }}</h3>
<form action="{{ network_home_url('/#contact') }}" method="post">
<section class="contact" id="contact">
<h2>{{ $contact_form_title }}</h2>
<form class="form" action="{{ network_home_url('/#contact') }}" method="post">
@if($contact_form_response)
<p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
<p class="form__notice form__notice--{{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
@endif
<input type="hidden" name="submitted" value="1">
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif">
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_name'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label>
<input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif">
<input type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label>
<input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif">
<input type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label>
<input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif">
<input type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
<p class="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif">
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
<textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
<p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
<textarea type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
<p class="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
</form>
</section>

18
resources/views/partials/footer.blade.php

@ -1,15 +1,15 @@
<footer class="content-info">
<footer class="footer">
<div class="container">
@if(get_option('pb_network_contact_form'))
@include('partials.contact-form')
@endif
<section class="network-footer">
<div class="network-footer-block {{ App::networkFooter(1) }}">
<div class="network-footer__block {{ App::networkFooter(1) }}">
@if(App::networkFooter(1) !== 'empty')
@php(dynamic_sidebar('network-footer-block-1'))
@endif
</div>
<div class="network-footer-block {{ App::networkFooter(2) }}">
<div class="network-footer__block {{ App::networkFooter(2) }}">
@if(App::networkFooter(2) !== 'empty')
@php(dynamic_sidebar('network-footer-block-2'))
@endif
@ -26,13 +26,13 @@
@endif
</div>
</div>
<div class="network-footer-block network-footer-menu">
<div class="network-footer__block network-footer__menu">
@php(wp_nav_menu('network-footer-menu'))
</div>
</section>
<section class="pressbooks-footer">
<a class="pressbooks-icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))</a>
<div class="pressbooks-links">
<a class="pressbooks-footer__icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))</a>
<div class="pressbooks-footer__links">
<h1><a href="https://pressbooks.com">{!! sprintf(__('Powered by %s', 'aldine'), '<span class="pressbooks">Pressbooks</span>') !!}</a></h1>
<ul>
<li><a href="https://pressbooks.org">{{ __('Open Source', 'aldine') }}</a></li>
@ -41,11 +41,11 @@
<li><a href="https://pressbooks.com/about">{{ __('Learn More', 'aldine') }}</a></li>
</ul>
</div>
<div class="social-media">
<a class="link hover-silver near-black dib h1 w1" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}">
<div class="pressbooks-footer__social">
<a href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
</a>
<a class="link hover-silver near-black dib h1 w1" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="{{ __('Pressbooks on Twitter', 'aldine') }}">
<a href="https://twitter.com/intent/follow?screen_name=pressbooks" title="{{ __('Pressbooks on Twitter', 'aldine') }}">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
</a>
</div>

12
resources/views/partials/header.blade.php

@ -1,12 +1,12 @@
<section class="banner bg-bottom cover" style="background-image: url(@if(is_front_page())
<section class="banner" style="background-image: url(@if(is_front_page())
@php(header_image())
@else
@asset('images/catalog-header.jpg')
@endif);">
<div class="container flex flex-column justify-between items-center w-100 mw-100">
<a class="toggle-menu db dn-l absolute" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon db absolute"></span></a>
<a class="brand db self-start self-center-l" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
<nav id="primary-navigation" class="primary-navigation absolute flex flex-column justify-center items-start top-0 w-100 bg-transparent bg-animate flex-row-l justify-start-l items-center-l">
<div class="container">
<a class="toggle" href="#navigation">{{ __('Toggle menu', 'aldine') }}<span class="toggle__icon"></span></a>
<a class="banner__brand" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
<nav class="banner__navigation" id="navigation">
<a href="{{ home_url('/catalog') }}">Catalog</a>
<a href="#contact">Contact</a>
@if(!is_user_logged_in())
@ -19,7 +19,7 @@
<a href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
@endif
</nav>
<header class="branding flex flex-column justify-start items-center tc">
<header class="banner__branding">
<h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
<p>{{ get_bloginfo('description', 'display') }}</p>
</header>

0
resources/views/partials/front-page-block.blade.php → resources/views/partials/page-block.blade.php

16
yarn.lock

@ -63,6 +63,12 @@ adjust-sourcemap-loader@^1.1.0:
object-path "^0.9.2"
regex-parser "^2.2.1"
"aetna@github:pressbooks/aetna#825dc3e":
version "0.1.0"
resolved "https://codeload.github.com/pressbooks/aetna/tar.gz/825dc3e585b98b72c7d47d883afa56f2a4d4b810"
dependencies:
tachyons-sass "~4.8"
after@0.8.1:
version "0.8.1"
resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
@ -6869,13 +6875,13 @@ table@^4.0.1:
slice-ansi "0.0.4"
string-width "^2.0.0"
tachyons-sass@~4.7:
version "4.7.4"
resolved "https://registry.yarnpkg.com/tachyons-sass/-/tachyons-sass-4.7.4.tgz#47199472f444f1451692ec4509c5da700569ea57"
tachyons-sass@~4.8:
version "4.8.1"
resolved "https://registry.yarnpkg.com/tachyons-sass/-/tachyons-sass-4.8.1.tgz#5e7b85eb8a1e3cccf45acdff09e97f4ad1844d59"
dependencies:
tachyons "^4.7.4"
tachyons "^4.8.1"
tachyons@^4.7.4:
tachyons@^4.8.1:
version "4.8.1"
resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.8.1.tgz#9a3183feecb3240c4dcefee7feecc8259acd7381"

Loading…
Cancel
Save