Browse Source

Add custom colours.

pull/11/head
Ned Zimmerman 7 years ago
parent
commit
3bbe4d0077
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 31
      app/admin.php
  2. 64
      app/setup.php
  3. 2
      resources/assets/scripts/routes/home.js
  4. 24
      resources/assets/styles/common/_global.scss
  5. 33
      resources/assets/styles/components/_buttons.scss
  6. 1
      resources/assets/styles/layouts/_footer.scss
  7. 8
      resources/assets/styles/layouts/_pages.scss
  8. 2
      resources/views/partials/footer.blade.php
  9. 4
      resources/views/partials/front-page-block.blade.php
  10. 8
      resources/views/partials/front-page-catalog.blade.php

31
app/admin.php

@ -14,6 +14,36 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
bloginfo('name'); bloginfo('name');
} }
]); ]);
$wp_customize->add_section('pb_network_colors', [
'title' => __('Color Scheme', 'aldine'),
'priority' => 20,
]);
$wp_customize->add_setting('pb_network_primary_color', [
'type' => 'option',
'default' => '#b01109',
]);
$wp_customize->add_control(new \WP_Customize_Color_Control(
$wp_customize,
'pb_network_primary_color',
[
'label' => __('Primary Color', 'aldine'),
'section' => 'pb_network_colors',
'settings' => 'pb_network_primary_color',
]
));
$wp_customize->add_setting('pb_network_secondary_color', [
'type' => 'option',
'default' => '#015d75',
]);
$wp_customize->add_control(new \WP_Customize_Color_Control(
$wp_customize,
'pb_network_secondary_color',
[
'label' => __('Secondary Color', 'aldine'),
'section' => 'pb_network_colors',
'settings' => 'pb_network_secondary_color',
]
));
$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,
@ -108,4 +138,5 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
*/ */
add_action('customize_preview_init', function () { add_action('customize_preview_init', function () {
wp_enqueue_script('aldine/customizer.js', asset_path('scripts/customizer.js'), ['customize-preview'], null, true); wp_enqueue_script('aldine/customizer.js', asset_path('scripts/customizer.js'), ['customize-preview'], null, true);
wp_localize_script('aldine/customizer.js', 'SAGE_DIST_PATH', get_theme_file_uri() . '/dist/');
}); });

64
app/setup.php

@ -159,3 +159,67 @@ add_action('after_setup_theme', function () {
return "<?= " . __NAMESPACE__ . "\\asset_path({$asset}); ?>"; return "<?= " . __NAMESPACE__ . "\\asset_path({$asset}); ?>";
}); });
}); });
add_action('wp_head', function () {
$primary = get_option('pb_network_primary_color');
$secondary = get_option('pb_network_secondary_color');
if ($primary || $secondary) { ?>
<style type="text/css">
<?php if ($primary) { ?>
a { color: <?= $primary ?>; }
.primary { color: <?= $primary ?>; }
.bg-primary { background-color: <?= $primary ?>; }
.b--primary { border-color: <?= $primary ?>; }
.button.button-primary {
border-color: <?= $primary ?>;
background: <?= $primary ?>;
}
.button.button-primary:hover,
.button.button-primary:focus {
color: <?= $primary ?>;
}
.button.button-primary.button-outline {
color: <?= $primary ?>;
}
.button.button-primary:hover,
.button.button-primary:focus {
background: <?= $primary ?>;
}
@media (min-width: 960px) {
.home .main > .block-2,
.home .one-two + .block {
border-color: <?= $primary ?>;
}
}
<?php }
if ($secondary) { ?>
.secondary { color: <?= $secondary ?>; }
.bg-secondary { background-color: <?= $secondary ?>; }
.b--secondary {
border-color: <?= $secondary ?>;
}
.button.button-secondary {
border-color: <?= $secondary ?>;
background: <?= $secondary ?>;
}
.button.button-secondary:hover,
.button.button-secondary:focus {
color: <?= $secondary ?>;
}
.button.button-secondary.button-outline {
color: <?= $secondary ?>;
}
.button.button-secondary:hover,
.button.button-secondary:focus {
background: <?= $secondary ?>;
}
.home .block h3::before {
background-color: <?= $secondary ?>;
}
.home .one-two .block-2 {
background: <?= $secondary ?>;
}
<?php } ?>
</style>
<?php }
});

2
resources/assets/scripts/routes/home.js

@ -14,7 +14,7 @@ export default {
const page = parseInt($('.books').attr('data-next-page')); const page = parseInt($('.books').attr('data-next-page'));
pb.books().perPage(3).page(page).then(function(data) { pb.books().perPage(3).page(page).then(function(data) {
data.forEach((book) => { data.forEach((book) => {
books.slick('slickAdd', `<div class="book w-100"> books.slick('slickAdd', `<div class="book w-100 bg-secondary b--secondary">
<p class="subject tc ma0"><a href="">Fiction</a></p> <p class="subject tc ma0"><a href="">Fiction</a></p>
<p class="title tc ma0"><a href="${book.link}">${book.metadata.name}</a></p> <p class="title tc ma0"><a href="${book.link}">${book.metadata.name}</a></p>
<p class="read-more tl ma0"><a href="${book.link}">About this book &rarr;</a></p> <p class="read-more tl ma0"><a href="${book.link}">About this book &rarr;</a></p>

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

@ -37,3 +37,27 @@ a {
color: $brand-primary; color: $brand-primary;
text-decoration: none; text-decoration: none;
} }
.primary {
color: $brand-primary;
}
.bg-primary {
background-color: $brand-primary;
}
.secondary {
color: $brand-secondary;
}
.bg-secondary {
background-color: $brand-secondary;
}
.b--primary {
border-color: $brand-primary;
}
.b--secondary {
border-color: $brand-secondary;
}

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

@ -4,9 +4,9 @@
height: 60px; height: 60px;
margin-top: 2em; margin-top: 2em;
padding: 1.25em; padding: 1.25em;
border: 2px solid $brand-primary; border: 2px solid $black;
border-radius: 3px; border-radius: 3px;
background: $brand-primary; background: $black;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: em(16); font-size: em(16);
font-weight: 600; font-weight: 600;
@ -20,7 +20,7 @@
&:hover, &:hover,
&:focus { &:focus {
background: $white; background: $white;
color: $brand-primary; color: $black;
} }
&.button-wide { &.button-wide {
@ -29,19 +29,38 @@
&.button-outline { &.button-outline {
background: $white; background: $white;
color: $black;
&:hover,
&:focus {
background: $black;
color: $white;
}
}
&.button-primary {
border-color: $brand-primary;
background: $brand-primary;
&:hover,
&:focus {
background: $white;
color: $brand-primary;
}
&.button-outline {
color: $brand-primary; color: $brand-primary;
&:hover, &:hover,
&:focus { &:focus {
background: $brand-primary; background: $brand-primary;
color: $white; }
} }
} }
&.button-secondary { &.button-secondary {
border: 2px solid $brand-secondary; border-color: $brand-secondary;
background: $brand-secondary; background: $brand-secondary;
color: $white;
&:hover, &:hover,
&:focus { &:focus {
@ -50,13 +69,11 @@
} }
&.button-outline { &.button-outline {
background: $white;
color: $brand-secondary; color: $brand-secondary;
&:hover, &:hover,
&:focus { &:focus {
background: $brand-secondary; background: $brand-secondary;
color: $white;
} }
} }
} }

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

@ -1,6 +1,5 @@
.content-info { .content-info {
.network-footer { .network-footer {
background: $brand-secondary;
margin-bottom: 0; margin-bottom: 0;
padding: 60px 42.5px 40px; padding: 60px 42.5px 40px;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;

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

@ -8,7 +8,6 @@
font-weight: 600; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;
line-height: (36/30); line-height: (36/30);
color: $brand-primary;
margin: 0; margin: 0;
&::before { &::before {
@ -41,8 +40,6 @@
.navigation { .navigation {
a { a {
color: $brand-secondary;
&.slick-disabled { &.slick-disabled {
opacity: 0; opacity: 0;
} }
@ -57,8 +54,7 @@
height: 386px; height: 386px;
margin: 45px 0 0; margin: 45px 0 0;
padding: 0 29.5px; padding: 0 29.5px;
border: solid 2px $brand-secondary; border: solid 2px;
background-color: $brand-secondary;
a { a {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@ -120,7 +116,7 @@
width: 100vw; width: 100vw;
height: 600px; height: 600px;
z-index: -1; z-index: -1;
background: url('../images/banner-two.jpg'); // background: url('../images/banner-two.jpg');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;

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

@ -1,6 +1,6 @@
<footer class="content-info"> <footer class="content-info">
<div class="container"> <div class="container">
<section class="network-footer"> <section class="network-footer bg-secondary">
<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

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

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

@ -3,7 +3,7 @@
<h3 class="tc ttu">{{ $latest_books_title }}</h3> <h3 class="tc ttu">{{ $latest_books_title }}</h3>
<div class="books flex flex-column justify-center flex-row-m justify-between-m" data-total-pages="{{ $total_pages }}" data-next-page="2"> <div class="books flex flex-column justify-center flex-row-m justify-between-m" 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 w-100"> <div class="book w-100 bg-secondary b--secondary">
<p class="subject tc ma0"> <p class="subject tc ma0">
<a href="">Fiction</a> <a href="">Fiction</a>
</p> </p>
@ -17,11 +17,11 @@
@endforeach @endforeach
</div> </div>
<nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}"> <nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}">
<a class="previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a> <a class="secondary previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
<a class="next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a> <a class="secondary next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
</nav> </nav>
<div class="catalog-link tc"> <div class="catalog-link tc">
<a class="button button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a> <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save