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

More custom colors.

pull/13/head
Ned Zimmerman 7 years ago
parent
8719eba1d2
commit
ec2bf34fdf
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
14 changed files with 203 additions and 146 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. 113
      app/admin.php
  2. 8
      app/helpers.php
  3. 63
      app/setup.php
  4. 29
      resources/assets/styles/common/_global.scss
  5. 2
      resources/assets/styles/common/_variables.scss
  6. 60
      resources/assets/styles/components/_buttons.scss
  7. 2
      resources/assets/styles/components/_forms.scss
  8. 9
      resources/assets/styles/layouts/_footer.scss
  9. 18
      resources/assets/styles/layouts/_header.scss
  10. 29
      resources/assets/styles/layouts/_pages.scss
  11. 2
      resources/views/partials/contact-form.blade.php
  12. 2
      resources/views/partials/footer.blade.php
  13. 4
      resources/views/partials/front-page-block.blade.php
  14. 8
      resources/views/partials/front-page-catalog.blade.php

113
app/admin.php
Unescape View File

@ -16,36 +16,95 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
]); ]);
// Add settings // Add settings
$wp_customize->add_setting('pb_network_primary_color', [ foreach ([
'type' => 'option',
'default' => 'b01109',
'sanitize_callback' => 'Aldine\remove_hash',
]);
$wp_customize->add_control(new \WP_Customize_Color_Control(
$wp_customize,
'pb_network_primary_color',
[ [
'slug' => 'primary',
'hex' => '#b01109',
'label' => __('Primary Color', 'aldine'), 'label' => __('Primary Color', 'aldine'),
'section' => 'colors', 'description' => __('Used for primary elements.', 'aldine'),
'description' => __('Used for links and primary elements.', 'aldine'), ],
'settings' => 'pb_network_primary_color', [
] 'slug' => 'accent',
)); 'hex' => '#015d75',
$wp_customize->add_setting('pb_network_secondary_color', [ 'label' => __('Accent Color', 'aldine'),
'type' => 'option', 'description' => __('Used for accents.', 'aldine'),
'default' => '015d75', ],
'sanitize_callback' => 'Aldine\remove_hash', [
]); 'slug' => 'link',
$wp_customize->add_control(new \WP_Customize_Color_Control( 'hex' => '#b01109',
$wp_customize, 'label' => __('Link Color', 'aldine'),
'pb_network_secondary_color', 'description' => __('Used for links.', 'aldine'),
],
[
'slug' => 'header_link',
'hex' => '#b01109',
'label' => __('Header Link Color', 'aldine'),
'description' => __('Used for links in the header.', 'aldine'),
],
[
'slug' => 'block_border',
'hex' => '#b01109',
'label' => __('Block Border Color', 'aldine'),
'description' => __('Used for home button block border.', 'aldine'),
],
[
'slug' => 'fg',
'hex' => '#ffffff',
'label' => __('Foreground Color', 'aldine'),
'description' => __('Used for the foreground text of colored blocks.', 'aldine'),
],
[
'slug' => 'bg',
'hex' => '#015d75',
'label' => __('Background Color', 'aldine'),
'description' => __('Used for the background of colored blocks.', 'aldine'),
],
[
'slug' => 'btn_text',
'hex' => '#ffffff',
'label' => __('Button Text Color', 'aldine'),
'description' => __('Used for the foreground text of buttons.', 'aldine'),
],
[
'slug' => 'btn_active_text',
'hex' => '#b01109',
'label' => __('Button Active Text Color', 'aldine'),
'description' => __('Used for the foreground text of active buttons.', 'aldine'),
],
[
'slug' => 'btn_bg',
'hex' => '#b01109',
'label' => __('Button Background Color', 'aldine'),
'description' => __('Used for the background of buttons.', 'aldine'),
],
[
'slug' => 'btn_inverse_text',
'hex' => '#b01109',
'label' => __('Inverse Button Text Color', 'aldine'),
'description' => __('Used for the foreground text of buttons.', 'aldine'),
],
[ [
'label' => __('Secondary Color', 'aldine'), 'slug' => 'btn_inverse_active_text',
'section' => 'colors', 'hex' => '#ffffff',
'description' => __('Used for secondary elements.', 'aldine'), 'label' => __('Inverse Button Active Text Color', 'aldine'),
'settings' => 'pb_network_secondary_color', 'description' => __('Used for the background of buttons.', 'aldine'),
] ],
)); ] as $color) {
$wp_customize->add_setting("pb_network_color_{$color['slug']}", [
'type' => 'option',
'default' => $color['hex'],
]);
$wp_customize->add_control(new \WP_Customize_Color_Control(
$wp_customize,
"pb_network_color_{$color['slug']}",
[
'label' => $color['label'],
'section' => 'colors',
'description' => $color['description'],
'settings' => "pb_network_color_{$color['slug']}",
]
));
}
$wp_customize->add_section('pb_network_social', [ $wp_customize->add_section('pb_network_social', [
'title' => __('Social Media', 'aldine'), 'title' => __('Social Media', 'aldine'),
'priority' => 30, 'priority' => 30,

8
app/helpers.php
Unescape View File

@ -137,14 +137,6 @@ function locate_template($templates)
return \locate_template(filter_templates($templates)); return \locate_template(filter_templates($templates));
} }
/**
* Remove hash from hex color string
*/
function remove_hash($color)
{
return ltrim($color, '#');
}
/** /**
* *
* Catch a contact form submission. * Catch a contact form submission.

63
app/setup.php
Unescape View File

@ -167,22 +167,59 @@ add_action('after_setup_theme', function () {
}); });
add_action('wp_head', function () { add_action('wp_head', function () {
$primary = get_option('pb_network_primary_color'); $primary = get_option('pb_network_color_primary');
$secondary = get_option('pb_network_secondary_color'); $accent = get_option('pb_network_color_accent');
$header_text_color = get_header_textcolor(); $link = get_option('pb_network_color_link');
if ($primary || $secondary || $header_text_color) { ?> $header_link = get_option('pb_network_color_header_link');
$fg = get_option('pb_network_color_fg');
$bg = get_option('pb_network_color_bg');
$btn_text = get_option('pb_network_color_btn_text');
$btn_active_text = get_option('pb_network_color_btn_active_text');
$btn_bg = get_option('pb_network_color_btn_bg');
$btn_inverse_text = get_option('pb_network_color_btn_inverse_text');
$btn_inverse_active_text = get_option('pb_network_color_btn_inverse_active_text');
$block_border = get_option('pb_network_color_block_border');
$header_text = get_header_textcolor();
if ($primary || $accent || $header_text) { ?>
<style type="text/css">:root { <style type="text/css">:root {
<?php if ($primary) { <?php if ($primary) { ?>
$primary = '#' . $primary; ?> --primary: <?= $primary ?>;
--brand-primary: <?= $primary ?>;
<?php } <?php }
if ($secondary) { if ($accent) { ?>
$secondary = '#' . $secondary; ?> --accent: <?= $accent ?>;
--brand-secondary: <?= $secondary ?>;
<?php } <?php }
if ($header_text_color) { if ($link) { ?>
$header_text_color = '#' . $header_text_color; ?> --link: <?= $link ?>;
--brand-header-text: <?= $header_text_color; ?>; <?php }
if ($header_text) { ?>
--header-text: <?= $header_text ?>;
<?php }
if ($fg) { ?>
--fg: <?= $fg ?>;
<?php }
if ($bg) { ?>
--bg: <?= $bg ?>;
<?php }
if ($btn_text) { ?>
--btn-text: <?= $btn_text ?>;
<?php }
if ($btn_active_text) { ?>
--btn-active-text: <?= $btn_active_text ?>;
<?php }
if ($btn_bg) { ?>
--btn-bg: <?= $btn_bg ?>;
<?php }
if ($btn_inverse_text) { ?>
--btn-inverse-text: <?= $btn_inverse_text ?>;
<?php }
if ($btn_inverse_active_text) { ?>
--btn-inverse-active-text: <?= $btn_inverse_active_text ?>;
<?php }
if ($header_link) { ?>
--header-link: <?= $header_link ?>;
<?php }
if ($block_border) { ?>
--block-border: <?= $block_border ?>;
<?php } ?> <?php } ?>
}</style> }</style>
<?php } <?php }

29
resources/assets/styles/common/_global.scss
Unescape View File

@ -6,6 +6,7 @@ body {
margin: 0; margin: 0;
font-family: $font-family-serif; font-family: $font-family-serif;
font-size: rem(18); font-size: rem(18);
background: #fff;
} }
h1, h1,
@ -41,12 +42,22 @@ h2 {
} }
:root { :root {
--brand-primary: $brand-primary; --primary: $brand-primary;
--brand-secondary: $brand-secondary; --accent: $brand-accent;
--link: $brand-primary;
--header-text: $black;
--header-link: $brand-primary;
--fg: $white;
--bg: $brand-accent;
--block-border: $brand-primary;
--btn-text: $white;
--btn-bg: $brand-primary;
--btn-text-alt: $white;
--btn-bg-alt: $brand-accent;
} }
a { a {
color: var(--brand-primary, $brand-primary); color: var(--link, $brand-primary);
text-decoration: none; text-decoration: none;
} }
@ -62,14 +73,14 @@ a {
border-color: var(--brand-primary, $brand-primary); border-color: var(--brand-primary, $brand-primary);
} }
.secondary { .accent {
color: var(--brand-secondary, $brand-secondary); color: var(--brand-secondary, $brand-accent);
} }
.bg-secondary { .bg-accent {
background-color: var(--brand-secondary, $brand-secondary); background-color: var(--brand-secondary, $brand-accent);
} }
.b--secondary { .b--accent {
border-color: var(--brand-secondary, $brand-secondary); border-color: var(--brand-secondary, $brand-accent);
} }

2
resources/assets/styles/common/_variables.scss
Unescape View File

@ -1,6 +1,6 @@
/** Colors */ /** Colors */
$brand-primary: #b01109; $brand-primary: #b01109;
$brand-secondary: #015d75; $brand-accent: #015d75;
$dark-grey: #444; $dark-grey: #444;
$black: #000; $black: #000;
$white: #fff; $white: #fff;

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

@ -4,13 +4,13 @@
height: rem(65); height: rem(65);
margin-top: 2em; margin-top: 2em;
padding: rem(20); padding: rem(20);
border: 2px solid $black; border: 2px solid var(--btn-bg, $brand-primary);
border-radius: 3px; border-radius: 3px;
background: $black; background: var(--btn-bg, $brand-primary);
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: $white; color: var(--btn-text, $white);
line-height: normal; line-height: normal;
letter-spacing: rem(2); letter-spacing: rem(2);
text-align: center; text-align: center;
@ -22,7 +22,7 @@
&:hover, &:hover,
&:focus { &:focus {
background: $white; background: $white;
color: $black; color: var(--btn-active-text, $brand-primary);
} }
&.button-small { &.button-small {
@ -35,58 +35,14 @@
width: 19.0625rem; width: 19.0625rem;
} }
&.button-outline { &.button-inverse {
background: $white; background: $white;
color: $black; color: var(--btn-inverse-text, $brand-primary);
&:hover, &:hover,
&:focus { &:focus {
background: $black; color: var(--btn-inverse-active-text, $white);
color: $white; background: var(--btn-bg, $brand-primary);
}
}
&.button-primary {
border-color: var(--brand-primary, $brand-primary);
background: var(--brand-primary, $brand-primary);
&:hover,
&:focus {
background: $white;
color: var(--brand-primary, $brand-primary);
}
&.button-outline {
background: $white;
color: var(--brand-primary, $brand-primary);
&:hover,
&:focus {
color: $white;
background: var(--brand-primary, $brand-primary);
}
}
}
&.button-secondary {
border-color: var(--brand-secondary, $brand-secondary);
background: var(--brand-secondary, $brand-secondary);
&:hover,
&:focus {
background: $white;
color: var(--brand-secondary, $brand-secondary);
}
&.button-outline {
background: $white;
color: var(--brand-secondary, $brand-secondary);
&:hover,
&:focus {
color: $white;
background: var(--brand-secondary, $brand-secondary);
}
} }
} }
} }

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

@ -69,7 +69,7 @@
&:focus { &:focus {
outline: none; outline: none;
border-bottom: solid 2px var(--brand-primary, $brand-primary); border-bottom: solid 2px var(--accent, $brand-accent);
} }
} }
} }

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

@ -4,7 +4,8 @@
padding: 60px 42.5px 40px; padding: 60px 42.5px 40px;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: rem(16); font-size: rem(16);
color: $white; color: var(--fg, $white);
background: var(--bg, $brand-accent);
ul { ul {
margin: 0; margin: 0;
@ -16,13 +17,13 @@
} }
a { a {
color: $white; color: var(--fg, $white);
text-decoration: none; text-decoration: none;
border-bottom: solid 1px transparent; border-bottom: solid 1px transparent;
&:hover, &:hover,
&:focus { &:focus {
border-bottom: solid 1px $white; border-bottom: solid 1px var(--fg, $white);
} }
} }
@ -35,7 +36,7 @@
} }
.network-footer-block { .network-footer-block {
border-top: solid 1px $white; border-top: solid 1px var(--fg, $white);
} }
.network-footer-block-1 { .network-footer-block-1 {

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

@ -16,14 +16,14 @@
top: 7px; top: 7px;
width: 25px; width: 25px;
height: 3px; height: 3px;
background: var(--brand-primary, $brand-primary); background: var(--link, $brand-primary);
&::before, &::before,
&::after { &::after {
width: 25px; width: 25px;
height: 3px; height: 3px;
content: ''; content: '';
background: var(--brand-primary, $brand-primary); background: var(--link, $brand-primary);
} }
&::before { &::before {
@ -41,11 +41,11 @@
&.is-active .icon { &.is-active .icon {
// TODO // TODO
background: $white; background: var(--fg, $white);
&::before, &::before,
&::after { &::after {
background: $white; background: var(--fg, $white);
} }
} }
} }
@ -73,7 +73,7 @@
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: rem(24); font-size: rem(24);
line-height: (80/24); line-height: (80/24);
color: $white; color: var(--fg, $white);
letter-spacing: 0; letter-spacing: 0;
} }
@ -85,12 +85,12 @@
margin: 0; margin: 0;
padding: 0 52px; padding: 0 52px;
z-index: 1; z-index: 1;
background: var(--brand-primary, $brand-primary); background: var(--bg, $brand-primary);
a { a {
display: block; display: block;
width: 100%; width: 100%;
border-bottom: solid 1px $white; border-bottom: solid 1px var(--fg, $white);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -134,12 +134,12 @@
a { a {
display: inline-block; display: inline-block;
font-size: rem(18); font-size: rem(18);
color: $black; color: var(--header-text, $black);
line-height: normal; line-height: normal;
&:hover, &:hover,
&:focus { &:focus {
color: var(--brand-primary, $brand-primary); color: var(--header-link, $brand-primary);
} }
&:nth-child(1) { &:nth-child(1) {

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

@ -22,32 +22,33 @@
.widget_text:nth-child(2) { .widget_text:nth-child(2) {
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
border: solid 2px var(--brand-primary, $brand-primary); border: solid 2px var(--primary, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
} }
.blocks.blocks-4 { .blocks.blocks-4 {
.widget_text:nth-child(2) { .widget_text:nth-child(2) {
color: $white; color: var(--fg, $white);
background: var(--brand-secondary, $brand-secondary); background: var(--bg, $brand-accent);
h3 { h3 {
color: $white; color: var(--fg, $white);
&::before { &::before {
background-color: $white; background: var(--fg, $white);
} }
} }
.button { .button {
border-color: $white; color: var(--fg, $white);
border-color: var(--fg, $white);
background: transparent; background: transparent;
&:hover, &:hover,
&:focus { &:focus {
color: var(--brand-secondary, $brand-secondary); color: var(--bg, $brand-accent);
background: $white; background: var(--fg, $white);
} }
} }
} }
@ -56,7 +57,7 @@
margin-top: 2rem; margin-top: 2rem;
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
border: solid 2px var(--brand-primary, $brand-primary); border: solid 2px var(--block-border, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
} }
@ -93,7 +94,7 @@
h3 { h3 {
font-size: rem(30); font-size: rem(30);
font-weight: 600; font-weight: 600;
color: var(--brand-primary, $brand-primary); color: var(--primary, $brand-primary);
letter-spacing: 2px; letter-spacing: 2px;
line-height: (36/30); line-height: (36/30);
margin: 0; margin: 0;
@ -104,7 +105,7 @@
margin: 0 auto 1em; margin: 0 auto 1em;
width: 46px; width: 46px;
height: 5px; height: 5px;
background-color: var(--brand-secondary, $brand-secondary); background: var(--accent, $brand-accent);
} }
} }
} }
@ -137,8 +138,8 @@
height: 24.125rem; height: 24.125rem;
margin: 0 0 2rem; margin: 0 0 2rem;
padding: 1.5rem 1.85rem 2.1875rem; padding: 1.5rem 1.85rem 2.1875rem;
border-style: solid; border: solid 2px var(--bg, $brand-accent);
border-width: 2px; background: var(--bg, $brand-accent);
a { a {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@ -170,7 +171,7 @@
svg { svg {
path { path {
fill: var(--brand-secondary, $brand-secondary); fill: var(--primary, $brand-primary);
} }
} }
} }

2
resources/views/partials/contact-form.blade.php
Unescape View File

@ -17,6 +17,6 @@
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif"> <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif">
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label> <label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
<textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p> <textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
<p class="tc"><input class="button-reset button button-small button-secondary button-outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> <p class="tc"><input class="button-reset button button-small button-inverse input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
</form> </form>
</section> </section>

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

@ -3,7 +3,7 @@
@if(get_option('pb_network_contact_form')) @if(get_option('pb_network_contact_form'))
@include('partials.contact-form') @include('partials.contact-form')
@endif @endif
<section class="network-footer bg-secondary"> <section class="network-footer">
<div class="network-footer-block {{ App::networkFooter(1) }}"> <div class="network-footer-block {{ App::networkFooter(1) }}">
@if(App::networkFooter(1) !== 'empty') @if(App::networkFooter(1) !== 'empty')
@php(dynamic_sidebar('network-footer-block-1')) @php(dynamic_sidebar('network-footer-block-1'))

4
resources/views/partials/front-page-block.blade.php
Unescape View File

@ -1,7 +1,7 @@
<div class="block flex flex-column items-center justify-center p-0 w-100"> <div class="block flex flex-column items-center justify-center p-0 w-100">
<div class="inside tc"> <div class="inside tc">
<h3 class="tc ttu primary">{{ $title }}</h3> <h3 class="tc ttu">{{ $title }}</h3>
{{ $slot }} {{ $slot }}
<a class="button button-primary" href="{{ $button_url }}">{{ $button_title }}</a> <a class="button" href="{{ $button_url }}">{{ $button_title }}</a>
</div> </div>
</div> </div>

8
resources/views/partials/front-page-catalog.blade.php
Unescape View File

@ -3,7 +3,7 @@
<div class="track flex flex-row flex-wrap justify-center items-center"> <div class="track flex flex-row flex-wrap justify-center items-center">
<div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2"> <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
@foreach(FrontPage::latestBooks( $current_page, 3 ) as $book) @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
<div class="book flex flex-column justify-end w-100 bg-secondary b--secondary"> <div class="book flex flex-column justify-end w-100">
@if(isset($book['metadata']['keywords'])) @if(isset($book['metadata']['keywords']))
<p class="subject tc ma0"> <p class="subject tc ma0">
<a href="#">{{ $book['metadata']['keywords'] }}</a> <a href="#">{{ $book['metadata']['keywords'] }}</a>
@ -18,10 +18,10 @@
</div> </div>
@endforeach @endforeach
</div> </div>
@if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif @if($previous_page)<a class="previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
@if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif @if($next_page)<a class="next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
</div> </div>
<div class="catalog-link tc"> <div class="catalog-link tc">
<a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a> <a class="button button-inverse button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save