From f085aeede6b631ec539dceef4ecd2f6bb8652acf Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Tue, 19 Sep 2017 14:28:28 -0300 Subject: [PATCH] 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). --- app/admin.php | 2 +- app/controllers/App.php | 6 +- app/setup.php | 8 +- package-lock.json | 12 +- package.json | 2 +- resources/assets/scripts/routes/common.js | 6 +- .../assets/styles/common/_functions.scss | 7 - resources/assets/styles/common/_global.scss | 83 ------ .../assets/styles/common/_variables.scss | 21 -- .../assets/styles/components/_buttons.scss | 53 ---- .../assets/styles/components/_forms.scss | 143 +++++---- .../assets/styles/components/_wp-classes.scss | 2 + resources/assets/styles/layouts/_footer.scss | 282 +++++------------- resources/assets/styles/layouts/_header.scss | 69 ++++- resources/assets/styles/layouts/_pages.scss | 85 ++++++ .../assets/styles/layouts/pages/_catalog.scss | 18 +- .../styles/layouts/pages/_front-page.scss | 38 +-- resources/assets/styles/main.scss | 4 +- resources/views/front-page.blade.php | 2 +- resources/views/partials/book.blade.php | 6 +- .../views/partials/contact-form.blade.php | 26 +- resources/views/partials/footer.blade.php | 18 +- resources/views/partials/header.blade.php | 12 +- ...e-block.blade.php => page-block.blade.php} | 0 yarn.lock | 16 +- 25 files changed, 370 insertions(+), 551 deletions(-) delete mode 100644 resources/assets/styles/common/_functions.scss delete mode 100644 resources/assets/styles/components/_buttons.scss rename resources/views/partials/{front-page-block.blade.php => page-block.blade.php} (100%) diff --git a/app/admin.php b/app/admin.php index 445b4b5..969f648 100644 --- a/app/admin.php +++ b/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'); } diff --git a/app/controllers/App.php b/app/controllers/App.php index 419d5ce..09537bf 100644 --- a/app/controllers/App.php +++ b/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() diff --git a/app/setup.php b/app/setup.php index 6dcf668..ef3529a 100644 --- a/app/setup.php +++ b/app/setup.php @@ -90,8 +90,8 @@ add_action('widgets_init', function () { $config = [ 'before_widget' => '
', 'after_widget' => '
', - 'before_title' => '

', - 'after_title' => '

' + 'before_title' => '

', + 'after_title' => '

' ]; register_sidebar([ 'name' => __('Front Page Content', 'aldine'), @@ -102,8 +102,8 @@ add_action('widgets_init', function () { 'id' => 'front-page-block', 'before_widget' => '
', 'after_widget' => '
', - 'before_title' => '

', - 'after_title' => '

' + 'before_title' => '

', + 'after_title' => '

' ]); register_sidebar([ 'name' => __('Network Footer Block 1', 'aldine'), diff --git a/package-lock.json b/package-lock.json index dafa0c6..bba0661 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" } diff --git a/package.json b/package.json index d5f7d1c..60b0b7f 100644 --- a/package.json +++ b/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" } } diff --git a/resources/assets/scripts/routes/common.js b/resources/assets/scripts/routes/common.js index 6a5a86e..a3587bc 100644 --- a/resources/assets/scripts/routes/common.js +++ b/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() { diff --git a/resources/assets/styles/common/_functions.scss b/resources/assets/styles/common/_functions.scss deleted file mode 100644 index 87f351b..0000000 --- a/resources/assets/styles/common/_functions.scss +++ /dev/null @@ -1,7 +0,0 @@ -@function rem($pixels, $context: $base-font-size) { - @return #{$pixels / $context}rem; -} - -@function percent($target, $context) { - @return ($target / $context) * 100%; -} diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss index 0f444de..e69de29 100644 --- a/resources/assets/styles/common/_global.scss +++ b/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); -} diff --git a/resources/assets/styles/common/_variables.scss b/resources/assets/styles/common/_variables.scss index 640d9b1..e69de29 100644 --- a/resources/assets/styles/common/_variables.scss +++ b/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; diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss deleted file mode 100644 index 40ea15d..0000000 --- a/resources/assets/styles/components/_buttons.scss +++ /dev/null @@ -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; - } -} diff --git a/resources/assets/styles/components/_forms.scss b/resources/assets/styles/components/_forms.scss index 6fe9608..5ba5392 100644 --- a/resources/assets/styles/components/_forms.scss +++ b/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); } } diff --git a/resources/assets/styles/components/_wp-classes.scss b/resources/assets/styles/components/_wp-classes.scss index 77657ee..b2851c3 100644 --- a/resources/assets/styles/components/_wp-classes.scss +++ b/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; diff --git a/resources/assets/styles/layouts/_footer.scss b/resources/assets/styles/layouts/_footer.scss index 4d95c32..a97ef5e 100644 --- a/resources/assets/styles/layouts/_footer.scss +++ b/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; } } } diff --git a/resources/assets/styles/layouts/_header.scss b/resources/assets/styles/layouts/_header.scss index a5235b1..6bc4007 100644 --- a/resources/assets/styles/layouts/_header.scss +++ b/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 { diff --git a/resources/assets/styles/layouts/_pages.scss b/resources/assets/styles/layouts/_pages.scss index 267f385..09a03be 100644 --- a/resources/assets/styles/layouts/_pages.scss +++ b/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); + } + } +} diff --git a/resources/assets/styles/layouts/pages/_catalog.scss b/resources/assets/styles/layouts/pages/_catalog.scss index c108d56..2411b99 100644 --- a/resources/assets/styles/layouts/pages/_catalog.scss +++ b/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); } } diff --git a/resources/assets/styles/layouts/pages/_front-page.scss b/resources/assets/styles/layouts/pages/_front-page.scss index 2e5468c..a52fc82 100644 --- a/resources/assets/styles/layouts/pages/_front-page.scss +++ b/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); } diff --git a/resources/assets/styles/main.scss b/resources/assets/styles/main.scss index 4441e9c..7d9eb21 100644 --- a/resources/assets/styles/main.scss +++ b/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"; diff --git a/resources/views/front-page.blade.php b/resources/views/front-page.blade.php index 00730cf..9c48803 100644 --- a/resources/views/front-page.blade.php +++ b/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 diff --git a/resources/views/partials/book.blade.php b/resources/views/partials/book.blade.php index 0b9738b..0562c54 100644 --- a/resources/views/partials/book.blade.php +++ b/resources/views/partials/book.blade.php @@ -4,14 +4,14 @@ data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}" > @if(isset($book['metadata']['keywords'])) -

+

{{ $book['metadata']['keywords'] }}

@endif -

+

{{ $book['metadata']['name'] }}

-

+

{{ __('About this book →', 'aldine') }}

diff --git a/resources/views/partials/contact-form.blade.php b/resources/views/partials/contact-form.blade.php index 5411ae3..470cde8 100644 --- a/resources/views/partials/contact-form.blade.php +++ b/resources/views/partials/contact-form.blade.php @@ -1,22 +1,22 @@ -
-

{{ $contact_form_title }}

-
+
+

{{ $contact_form_title }}

+ @if($contact_form_response) -

{{ $contact_form_response['message'] }}

+

{{ $contact_form_response['message'] }}

@endif -

+

-

-

+

+

-

-

+

+

-

-

+

+

-

-

+

+

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 6aedce9..46293ed 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -1,15 +1,15 @@ -