Browse Source

Mobile navigation.

pull/3/head
Ned Zimmerman 7 years ago
parent
commit
faf5d08bd0
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 16
      dist/assets.json
  2. BIN
      dist/images/banner-one_bcd1d61f.jpg
  3. BIN
      dist/images/banner-two_a620635c.jpg
  4. BIN
      dist/images/logo@2x_7d05144c.png
  5. BIN
      dist/images/logo_10675684.png
  6. 0
      dist/scripts/customizer_1001ca05.js
  7. 1
      dist/scripts/main_1001ca05.js
  8. 1
      dist/scripts/main_d08f6b6b.js
  9. 1
      dist/styles/main_1001ca05.css
  10. 1
      dist/styles/main_d08f6b6b.css
  11. 1
      package.json
  12. BIN
      resources/assets/images/banner-one.jpg
  13. BIN
      resources/assets/images/banner-two.jpg
  14. BIN
      resources/assets/images/logo.png
  15. BIN
      resources/assets/images/logo@2x.png
  16. 5
      resources/assets/scripts/routes/common.js
  17. 3
      resources/assets/styles/autoload/_fontawesome.scss
  18. 5
      resources/assets/styles/common/_global.scss
  19. 7
      resources/assets/styles/common/_variables.scss
  20. 6
      resources/assets/styles/components/_grid.scss
  21. 154
      resources/assets/styles/layouts/_header.scss
  22. 102
      resources/assets/styles/layouts/_pages.scss
  23. 1
      resources/assets/styles/main.scss
  24. 37
      resources/views/index.blade.php
  25. 15
      resources/views/partials/header.blade.php
  26. 4
      yarn.lock

16
dist/assets.json vendored

@ -1,5 +1,15 @@
{
"scripts/customizer.js": "scripts/customizer_d08f6b6b.js",
"styles/main.css": "styles/main_d08f6b6b.css",
"scripts/main.js": "scripts/main_d08f6b6b.js"
"images/banner-one.jpg": "images/banner-one_bcd1d61f.jpg",
"images/banner-two.jpg": "images/banner-two_a620635c.jpg",
"images/logo.png": "images/logo_10675684.png",
"images/logo@2x.png": "images/logo@2x_7d05144c.png",
"vendor/fontawesome-webfont.eot": "vendor/fontawesome-webfont_674f50d2.eot",
"vendor/fontawesome-webfont.eot?v=4.7.0": "vendor/fontawesome-webfont_674f50d2.eot",
"vendor/fontawesome-webfont.svg?v=4.7.0": "vendor/fontawesome-webfont_912ec66d.svg",
"vendor/fontawesome-webfont.ttf?v=4.7.0": "vendor/fontawesome-webfont_b06871f2.ttf",
"vendor/fontawesome-webfont.woff2?v=4.7.0": "vendor/fontawesome-webfont_af7ae505.woff2",
"vendor/fontawesome-webfont.woff?v=4.7.0": "vendor/fontawesome-webfont_fee66e71.woff",
"scripts/customizer.js": "scripts/customizer_1001ca05.js",
"styles/main.css": "styles/main_1001ca05.css",
"scripts/main.js": "scripts/main_1001ca05.js"
}

BIN
dist/images/banner-one_bcd1d61f.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
dist/images/banner-two_a620635c.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
dist/images/logo@2x_7d05144c.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
dist/images/logo_10675684.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

0
dist/scripts/customizer_d08f6b6b.js → dist/scripts/customizer_1001ca05.js vendored

1
dist/scripts/main_1001ca05.js vendored

@ -0,0 +1 @@
!function(t){function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="/app/themes/pressbooks-aldine/dist/",n(n.s=1)}([function(t,n){t.exports=jQuery},function(t,n,e){e(2),t.exports=e(8)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),function(t){var n=e(0),i=(e.n(n),e(3)),o=e(5),r=e(6),c=e(7),u=new i.a({common:o.a,home:r.a,aboutUs:c.a});t(document).ready(function(){return u.loadEvents()})}.call(n,e(0))},function(t,n,e){"use strict";var i=e(4),o=function(t){this.routes=t};o.prototype.fire=function(t,n,e){void 0===n&&(n="init"),""!==t&&this.routes[t]&&"function"==typeof this.routes[t][n]&&this.routes[t][n](e)},o.prototype.loadEvents=function(){var t=this;this.fire("common"),document.body.className.toLowerCase().replace(/-/g,"_").split(/\s+/).map(i.a).forEach(function(n){t.fire(n),t.fire(n,"finalize")}),this.fire("common","finalize")},n.a=o},function(t,n,e){"use strict";n.a=function(t){return""+t.charAt(0).toLowerCase()+t.replace(/[\W_]/g,"|").split("|").map(function(t){return""+t.charAt(0).toUpperCase()+t.slice(1)}).join("").slice(1)}},function(t,n,e){"use strict";(function(t){n.a={init:function(){t(".toggle-menu").click(function(n){n.preventDefault(),t(n.currentTarget).toggleClass("is-active"),t(".primary-navigation").toggleClass("is-visible")})},finalize:function(){}}}).call(n,e(0))},function(t,n,e){"use strict";n.a={init:function(){},finalize:function(){}}},function(t,n,e){"use strict";n.a={init:function(){}}},function(t,n){}]);

1
dist/scripts/main_d08f6b6b.js vendored

@ -1 +0,0 @@
!function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="/app/themes/pressbooks-aldine/dist/",n(n.s=1)}([function(t,n){t.exports=jQuery},function(t,n,e){e(2),t.exports=e(8)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),function(t){var n=e(0),o=(e.n(n),e(3)),i=e(5),r=e(6),u=e(7),c=new o.a({common:i.a,home:r.a,aboutUs:u.a});t(document).ready(function(){return c.loadEvents()})}.call(n,e(0))},function(t,n,e){"use strict";var o=e(4),i=function(t){this.routes=t};i.prototype.fire=function(t,n,e){void 0===n&&(n="init"),""!==t&&this.routes[t]&&"function"==typeof this.routes[t][n]&&this.routes[t][n](e)},i.prototype.loadEvents=function(){var t=this;this.fire("common"),document.body.className.toLowerCase().replace(/-/g,"_").split(/\s+/).map(o.a).forEach(function(n){t.fire(n),t.fire(n,"finalize")}),this.fire("common","finalize")},n.a=i},function(t,n,e){"use strict";n.a=function(t){return""+t.charAt(0).toLowerCase()+t.replace(/[\W_]/g,"|").split("|").map(function(t){return""+t.charAt(0).toUpperCase()+t.slice(1)}).join("").slice(1)}},function(t,n,e){"use strict";n.a={init:function(){},finalize:function(){}}},function(t,n,e){"use strict";n.a={init:function(){},finalize:function(){}}},function(t,n,e){"use strict";n.a={init:function(){}}},function(t,n){}]);

1
dist/styles/main_1001ca05.css vendored

File diff suppressed because one or more lines are too long

1
dist/styles/main_d08f6b6b.css vendored

@ -1 +0,0 @@
body{color:#444;font-family:Spectral,serif}h1,h2,h3,h4,h5,h6{font-family:Karla,sans-serif}h1{font-size:30px;font-weight:600;letter-spacing:2px;line-height:36px;text-transform:uppercase}h1,h2{margin:0}h2{font-size:16px;font-weight:400;line-height:30px}a{color:#b01109}.alignnone{height:auto;margin-left:0;margin-right:0;max-width:100%}.aligncenter{display:block;height:auto;margin:1rem auto}.alignleft,.alignright{height:auto;margin-bottom:1rem}@media (min-width:30rem){.alignleft{float:left;margin-right:1rem}.alignright{float:right;margin-left:1rem}}.screen-reader-text{background:#fff;border:0;clip:rect(0,0,0,0);color:#000;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:560px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.banner h1{text-align:center}.banner h1 a{text-decoration:none}.banner h2,.home .block h3{text-align:center}.home .block h3{font-size:30px;font-weight:600;letter-spacing:2px;line-height:36px;margin:0;text-transform:uppercase}.home .block h3:before{color:#b01109;display:block;height:5px;width:46px}body#tinymce{margin:12px!important}

1
package.json

@ -126,6 +126,7 @@
"yargs": "~8.0"
},
"dependencies": {
"font-awesome": "^4.7.0",
"jquery": "1.12.4 - 3"
}
}

BIN
resources/assets/images/banner-one.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 568 KiB

BIN
resources/assets/images/banner-two.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
resources/assets/images/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
resources/assets/images/logo@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -1,6 +1,11 @@
export default {
init() {
// JavaScript to be fired on all pages
$('.toggle-menu').click((event) => {
event.preventDefault();
$(event.currentTarget).toggleClass('is-active');
$('.primary-navigation').toggleClass('is-visible');
});
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired

3
resources/assets/styles/autoload/_fontawesome.scss vendored

@ -0,0 +1,3 @@
$fa-font-path: '~font-awesome/fonts';
@import "~font-awesome/scss/font-awesome";

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

@ -1,4 +1,9 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
color: $dark-grey;
font-family: Spectral, serif;
}

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

@ -3,6 +3,13 @@ $brand-primary: #b01109;
$brand-secondary: #015d75;
$dark-grey: #444;
$black: #000;
$white: #fff;
/** Box Model */
$spacer: 2rem;
/** Breakpoints */
$small: 768px;
$medium: 960px;
$large: 1200px;
$extra-large: 1650px;

6
resources/assets/styles/components/_grid.scss

@ -0,0 +1,6 @@
.main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

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

@ -1,11 +1,127 @@
// TODO: .banner .nav li {}
// TODO: .banner .nav a {}
.banner {
background: url('../images/banner-one.jpg');
background-repeat: no-repeat;
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1435px;
height: 560px;
}
.toggle-menu {
display: block;
position: absolute;
top: 30px;
right: 17px;
z-index: 99;
text-indent: -9999em;
width: 25px;
height: 20px;
.icon {
display: block;
position: absolute;
top: 7px;
width: 25px;
height: 3px;
background: $brand-primary;
&::before,
&::after {
content: '';
width: 25px;
height: 3px;
background: $brand-primary;
}
&::before {
position: absolute;
top: -7px;
right: 0;
}
&::after {
position: absolute;
top: 7px;
right: 0;
}
}
&.is-active .icon {
background: $white;
&::before,
&::after {
background: $white;
}
}
}
.primary-navigation {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: 30px;
padding: 0 17px;
a {
font-family: Karla, sans-serif;
font-size: 24px;
color: $white;
letter-spacing: 0;
line-height: 80px;
text-decoration: none;
display: none;
&.brand {
display: block;
width: 109px;
height: 17px;
align-self: flex-start;
background-image: url('../images/logo.png');
background-size: 109px 17px;
text-indent: -9999em;
}
}
&.is-visible {
position: absolute;
z-index: 1;
background: $brand-primary;
justify-content: center;
height: 560px;
top: 0;
margin-top: 0;
padding: 0 52px;
a {
display: block;
width: 100%;
border-bottom: solid 1px $white;
&:last-child {
border-bottom: 0;
}
&.brand {
display: none;
}
}
}
}
.branding {
display: flex;
height: 364px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
.banner h1 {
@ -19,3 +135,35 @@
.banner h2 {
text-align: center;
}
@media (min-width: $medium) {
.banner nav {
width: auto;
display: flex;
a {
font-size: 18px;
}
}
.banner .catalog-navigation {
justify-content: flex-start;
}
.banner .meta-navigation {
justify-content: flex-end;
}
.banner h1 {
font-size: 72px;
letter-spacing: 1.8px;
line-height: 40px;
margin-bottom: 0.5em;
}
.banner h2 {
font-size: 30px;
letter-spacing: 0.75px;
line-height: 40px;
}
}

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

@ -1,5 +1,13 @@
.home {
.block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 445px;
background-color: $white;
h3 {
font-size: 30px;
font-weight: 600;
@ -16,5 +24,99 @@
color: $brand-primary;
}
}
p {
font-size: 16px;
line-height: 32px;
}
.inside {
width: 100%;
}
}
.one-two {
width: 100%;
display: flex;
flex-direction: column;
}
.block.one,
.block.two,
.block.three,
.block.four,
.block.five {
padding: 0 12.5px;
}
}
@media (min-width: $medium) {
.home {
.block {
width: 775px;
margin-bottom: 119px;
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
h3 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 18px;
line-height: 32px;
}
.inside {
width: 595px;
}
}
.one-two {
align-items: center;
}
}
}
@media (min-width: $large) {
.home {
.block {
width: 1115px;
height: 494px;
}
}
}
@media (min-width: $extra-large) {
.home {
.one-two {
flex-direction: row;
justify-content: space-between;
width: 1615px;
}
.block.one,
.block.two {
border-radius: 4px;
width: 775px;
.inside {
width: 595px;
}
}
.block.two {
color: $white;
background: $brand-secondary;
}
.block.three {
width: 100%;
}
.block.four {
width: 1115px;
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
}
}
}

1
resources/assets/styles/main.scss

@ -16,6 +16,7 @@
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";

37
resources/views/index.blade.php

@ -1,19 +1,46 @@
@extends('layouts.app')
@section('content')
<div class="block block-one">
<div class="banner-one"></div>
<div class="banner-two"></div>
<div class="one-two">
<div class="block one">
<div class="inside">
@if(is_active_sidebar('home-block-one'))
@php(dynamic_sidebar('home-block-one'))
@else
<h3>{{ __('Welcome', 'pressbooks-aldine')}}</h3>
<p>{{ __('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 'pressbooks-aldine')}}</p>
@endif
</div>
<div class="block block-two">
</div>
@if(is_active_sidebar('home-block-two'))
<div class="block two">
<div class="inside">
@php(dynamic_sidebar('home-block-two'))
</div>
<div class="block block-three">
</div>
@endif
</div>
@if(is_active_sidebar('home-block-three'))
<div class="block three">
<div class="inside">
@php(dynamic_sidebar('home-block-three'))
</div>
<div class="block block-four">
</div>
@endif
@if(is_active_sidebar('home-block-four'))
<div class="block four">
<div class="inside">
@php(dynamic_sidebar('home-block-four'))
</div>
<div class="block block-five">
</div>
@endif
@if(is_active_sidebar('home-block-five'))
<div class="block five">
<div class="inside">
@php(dynamic_sidebar('home-block-five'))
</div>
</div>
@endif
@endsection

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

@ -1,11 +1,16 @@
<header class="banner">
<div class="container">
<a class="toggle-menu" href="#primary-navigation">Toggle menu<span class="icon"></span></a>
<nav id="primary-navigation" class="primary-navigation">
<a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
<a href="{{ home_url('/catalog') }}">Catalog</a>
<a href="#contact">Contact</a>
<a href="{{ wp_login_url() }}">{{ __('Sign in') }}</a>
<a href="{{ network_home_url('/wp-signup.php') }}">{{ __('Sign up') }}</a>
</nav>
<div class="branding">
<h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
<h2>{{ get_bloginfo('description', 'display') }}</h2>
<nav class="nav-primary">
@if (has_nav_menu('primary_navigation'))
{!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
@endif
</nav>
</div>
</div>
</header>

4
yarn.lock

@ -2238,6 +2238,10 @@ flatten@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
font-awesome@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
for-in@^0.1.3:
version "0.1.8"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"

Loading…
Cancel
Save