diff --git a/app/controllers/App.php b/app/controllers/App.php index 7aa1dd2..09537bf 100644 --- a/app/controllers/App.php +++ b/app/controllers/App.php @@ -43,7 +43,7 @@ class App extends Controller 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/package-lock.json b/package-lock.json index c71f70c..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", diff --git a/package.json b/package.json index ba8dc7a..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.8", "wpapi": "^1.1.2" } } 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 daccc22..e69de29 100644 --- a/resources/assets/styles/common/_global.scss +++ b/resources/assets/styles/common/_global.scss @@ -1,99 +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(30); - font-weight: 600; - color: var(--primary, $brand-primary); - letter-spacing: 2px; - line-height: (36/30); - text-transform: uppercase; - text-align: center; - margin: 0; - - &::before { - content: ""; - display: block; - margin: 0 auto 1em; - width: 46px; - height: 5px; - background: var(--accent, $brand-accent); - } -} - -: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); -} - -@media (min-width: $medium) { - h2 { - font-size: rem(48); - line-height: (56/48); - - &::before { - width: 74px; - } - } -} 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 2d163c0..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: transparent; - 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/_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 3510f89..a97ef5e 100644 --- a/resources/assets/styles/layouts/_footer.scss +++ b/resources/assets/styles/layouts/_footer.scss @@ -1,247 +1,127 @@ -.footer { - .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); } + } - &__block { - 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 e94c9ef..6bc4007 100644 --- a/resources/assets/styles/layouts/_header.scss +++ b/resources/assets/styles/layouts/_header.scss @@ -137,7 +137,7 @@ } } -.page:not(.home) .banner .branding { +.page:not(.home) .banner__branding { display: none; } 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/_front-page.scss b/resources/assets/styles/layouts/pages/_front-page.scss index 6ae6819..a52fc82 100644 --- a/resources/assets/styles/layouts/pages/_front-page.scss +++ b/resources/assets/styles/layouts/pages/_front-page.scss @@ -340,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/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 9748d92..46293ed 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -31,8 +31,8 @@