Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Use Tachyons.

pull/9/head
Ned Zimmerman 7 years ago
parent
3338e40ef4
commit
8928885d3e
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
13 changed files with 74 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 105
      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
Unescape View File

@ -18,7 +18,7 @@ add_action('wp_enqueue_scripts', function () {
null null
); );
wp_enqueue_style('aldine/main.css', asset_path('styles/main.css'), false, null); wp_enqueue_style('aldine/main.css', asset_path('styles/main.css'), false, null);
wp_enqueue_style( /* wp_enqueue_style(
'uio/normalize.css', 'uio/normalize.css',
get_theme_file_uri() . '/lib/infusion/src/lib/normalize/css/normalize.css', get_theme_file_uri() . '/lib/infusion/src/lib/normalize/css/normalize.css',
false, false,
@ -48,8 +48,9 @@ add_action('wp_enqueue_scripts', function () {
false, false,
null 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('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/'); wp_localize_script('aldine/main.js', 'SAGE_DIST_PATH', get_theme_file_uri() . '/dist/');
}, 100); }, 100);

4
package.json
Unescape View File

@ -127,7 +127,7 @@
"yargs": "~8.0" "yargs": "~8.0"
}, },
"dependencies": { "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
Unescape View File

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

4
resources/assets/styles/autoload/_tachyons.scss
Unescape View File

@ -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
Unescape View File

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

2
resources/assets/styles/components/_buttons.scss
Unescape View File

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

6
resources/assets/styles/layouts/_footer.scss
Unescape View File

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

105
resources/assets/styles/layouts/_header.scss
Unescape View File

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

2
resources/assets/styles/layouts/_pages.scss
Unescape View File

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

2
resources/views/layouts/app.blade.php
Unescape View File

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

16
resources/views/partials/footer.blade.php
Unescape View File

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

18
resources/views/partials/header.blade.php
Unescape View File

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

10
yarn.lock
Unescape View File

@ -6074,6 +6074,16 @@ table@^4.0.1:
slice-ansi "0.0.4" slice-ansi "0.0.4"
string-width "^2.0.0" 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: tapable@^0.2.7, tapable@~0.2.5:
version "0.2.8" version "0.2.8"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"

Write Preview
Loading…
Cancel
Save