Browse Source

Use Tachyons.

pull/9/head
Ned Zimmerman 7 years ago
parent
commit
8928885d3e
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 5
      app/setup.php
  2. 4
      package.json
  3. 3
      resources/assets/styles/autoload/_fontawesome.scss
  4. 4
      resources/assets/styles/autoload/_tachyons.scss
  5. 2
      resources/assets/styles/common/_global.scss
  6. 2
      resources/assets/styles/components/_buttons.scss
  7. 6
      resources/assets/styles/layouts/_footer.scss
  8. 107
      resources/assets/styles/layouts/_header.scss
  9. 2
      resources/assets/styles/layouts/_pages.scss
  10. 2
      resources/views/layouts/app.blade.php
  11. 16
      resources/views/partials/footer.blade.php
  12. 18
      resources/views/partials/header.blade.php
  13. 10
      yarn.lock

5
app/setup.php

@ -18,7 +18,7 @@ add_action('wp_enqueue_scripts', function () {
null
);
wp_enqueue_style('aldine/main.css', asset_path('styles/main.css'), false, null);
wp_enqueue_style(
/* wp_enqueue_style(
'uio/normalize.css',
get_theme_file_uri() . '/lib/infusion/src/lib/normalize/css/normalize.css',
false,
@ -48,8 +48,9 @@ add_action('wp_enqueue_scripts', function () {
false,
null
);
wp_enqueue_script('aldine/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
wp_enqueue_script('uio.js', get_theme_file_uri() . '/lib/infusion/infusion-uiOptions.js', ['jquery'], null, true);
*/
wp_enqueue_script('aldine/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
wp_localize_script('aldine/main.js', 'SAGE_DIST_PATH', get_theme_file_uri() . '/dist/');
}, 100);

4
package.json

@ -127,7 +127,7 @@
"yargs": "~8.0"
},
"dependencies": {
"font-awesome": "^4.7.0",
"jquery": "1.12.4 - 3"
"jquery": "1.12.4 - 3",
"tachyons-sass": "~4.7"
}
}

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

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

4
resources/assets/styles/autoload/_tachyons.scss

@ -0,0 +1,4 @@
// `sage preset` installed this file automatically.
// Running `sage preset` again could result in automatic deletion of this file.
// Because of this, we do not recommend editing this file.
@import "~tachyons-sass/tachyons";

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

@ -4,7 +4,6 @@
body {
margin: 0;
color: $dark-grey;
font-family: $font-family-serif;
font-size: #{$base-font-size}px;
}
@ -36,4 +35,5 @@ h2 {
a {
color: $brand-primary;
text-decoration: none;
}

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

@ -7,7 +7,7 @@
border: 2px solid $brand-primary;
border-radius: 3px;
background: $brand-primary;
font-family: Karla, sans-serif;
font-family: $font-family-sans-serif;
font-size: em(16);
font-weight: 600;
color: $white;

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

@ -3,7 +3,7 @@
background: $brand-secondary;
margin-bottom: 0;
padding: 60px 42.5px 40px;
font-family: Karla, sans-serif;
font-family: $font-family-sans-serif;
font-size: em(16);
color: $white;
@ -52,7 +52,7 @@
}
}
.network-footer-block-3 {
.network-footer-menu {
padding: 30px 7.5px 0;
}
@ -96,7 +96,7 @@
li,
a {
color: $white;
font-family: Karla, sans-serif;
font-family: $font-family-sans-serif;
text-decoration: none;
text-transform: none;
letter-spacing: normal;

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

@ -1,32 +1,19 @@
.banner {
background: url('../images/banner-mobile.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
background-image: url('../images/banner-mobile.jpg');
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1440px;
height: 560px;
}
.toggle-menu {
display: block;
position: absolute;
top: 30px;
right: 17px;
z-index: 99;
text-indent: -9999em;
width: 25px;
height: 20px;
z-index: 99;
text-indent: -9999em;
.icon {
display: block;
position: absolute;
top: 7px;
width: 25px;
height: 3px;
@ -34,9 +21,9 @@
&::before,
&::after {
content: '';
width: 25px;
height: 3px;
content: '';
background: $brand-primary;
}
@ -65,37 +52,25 @@
}
.brand {
display: block;
width: 109px;
height: 17px;
margin: 30px 0 0 17px;
align-self: flex-start;
background-image: url('../images/logo.png');
background-size: 109px 17px;
text-indent: -9999em;
}
.primary-navigation {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
top: 0;
width: 100%;
height: 560px;
margin: 0 0 0 -100%;
padding: 0 17px;
background: transparent;
transition: background 0.5s;
a {
font-family: Karla, sans-serif;
display: none;
font-family: $font-family-sans-serif;
font-size: em(24);
line-height: (80/24);
color: $white;
letter-spacing: 0;
line-height: (80/24);
text-decoration: none;
display: none;
}
.sep {
@ -103,11 +78,10 @@
}
&.is-visible {
z-index: 1;
background: $brand-primary;
justify-content: center;
margin: 0;
padding: 0 52px;
z-index: 1;
background: $brand-primary;
a {
display: block;
@ -117,74 +91,47 @@
&: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 {
text-align: center;
a {
text-decoration: none;
p {
font-family: $font-family-sans-serif;
}
}
}
.banner h2 {
text-align: center;
}
@media (min-width: $medium) {
@media #{$breakpoint-large} {
.banner {
background-image: url('../images/banner-desktop.jpg');
.container {
margin: 0 auto;
height: 880px;
}
.toggle-menu {
display: none;
margin: 0 auto;
}
.brand {
align-self: center;
margin-top: 40px;
width: 265px;
height: 40px;
margin-top: 40px;
background-image: url('../images/logo@2x.png');
background-size: 265px 40px;
}
.primary-navigation {
position: absolute;
width: 100%;
top: 40px;
max-width: 1440px;
height: 40px;
top: 40px;
margin: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-left: 0;
a {
font-size: em(18);
display: inline-block;
line-height: normal;
font-size: em(18);
color: $black;
line-height: normal;
&:hover,
&:focus {
@ -208,19 +155,19 @@
.branding {
height: 576px;
p {
font-size: em(30);
letter-spacing: 0.75px;
line-height: (40/30);
}
}
h1 {
margin-bottom: 0.5em;
font-size: em(72);
letter-spacing: 1.8px;
line-height: (40/72);
margin-bottom: 0.5em;
}
h2 {
font-size: em(30);
letter-spacing: 0.75px;
line-height: (40/30);
letter-spacing: 1.8px;
}
}
}

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

@ -65,7 +65,7 @@
// transition: 0.4s all;
a {
font-family: Karla, sans-serif;
font-family: $font-family-sans-serif;
color: $white;
text-decoration: none;
}

2
resources/views/layouts/app.blade.php

@ -1,7 +1,7 @@
<!doctype html>
<html @php(language_attributes())>
@include('partials.head')
<body @php(body_class())>
<body @php(body_class('no-js'))>
{{-- @include('partials.uio') --}}
@php(do_action('get_header'))
@include('partials.header')

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

@ -12,10 +12,14 @@
@endif
<div class="social-media">
@if($network_facebook)
<a class="facebook" href="{{ $network_facebook }}" title="{{ sprintf(__('%s on Facebook', 'aldine'), get_bloginfo('name', 'display')) }}"><i class="fa fa-facebook-official"></i></a>
<a class="link near-black hover-silver dib h2 w2 mr3" href="{{ $network_facebook }}" title="{{ sprintf(__('%s on Facebook', 'aldine'), get_bloginfo('name', 'display')) }}">
<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>
@endif
@if($network_twitter)
<a class="twitter" href="{{ $network_twitter }}" title="{{ sprintf(__('%s on Twitter', 'aldine'), get_bloginfo('name', 'display')) }}"><i class="fa fa-twitter"></i></a>
<a class="link near-black hover-silver dib h2 w2 mr3" href="{{ $network_twitter }}" title="{{ sprintf(__('%s on Twitter', 'aldine'), get_bloginfo('name', 'display')) }}">
<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>
@endif
</div>
</div>
@ -35,8 +39,12 @@
</ul>
</div>
<div class="social-media">
<a class="facebook" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}"><i class="fa fa-facebook-official"></i></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="{{ __('Pressbooks on Twitter', 'aldine') }}"><i class="fa fa-twitter"></i></a>
<a class="link hover-silver near-black dib h1 w1" 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') }}">
<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>
</section>
</div>

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

@ -1,8 +1,8 @@
<header class="banner">
<div class="container">
<a class="toggle-menu" href="#primary-navigation">Toggle menu<span class="icon"></span></a>
<a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
<nav id="primary-navigation" class="primary-navigation">
<section class="banner bg-bottom cover">
<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') }}</a></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">
<a class="catalog" href="{{ home_url('/catalog') }}">Catalog</a>
<a class="contact" href="#contact">Contact</a>
@if(!is_user_logged_in())
@ -15,9 +15,9 @@
<a class="signin" href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
@endif
</nav>
<div class="branding">
<header class="branding flex flex-column justify-start items-center tc">
<h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
<h2>{{ get_bloginfo('description', 'display') }}</h2>
<p>{{ get_bloginfo('description', 'display') }}</p>
</header>
</div>
</div>
</header>
</section>

10
yarn.lock

@ -6074,6 +6074,16 @@ 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"
dependencies:
tachyons "^4.7.4"
tachyons@^4.7.4:
version "4.8.1"
resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.8.1.tgz#9a3183feecb3240c4dcefee7feecc8259acd7381"
tapable@^0.2.7, tapable@~0.2.5:
version "0.2.8"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"

Loading…
Cancel
Save