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

Simplify colors (fix #16).

pull/21/head
Ned Zimmerman 7 years ago
parent
a969791fae
commit
fe46e5d671
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
8 changed files with 65 additions and 152 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. 64
      app/admin.php
  2. 48
      app/setup.php
  3. 14
      resources/assets/styles/common/_global.scss
  4. 14
      resources/assets/styles/components/_buttons.scss
  5. 10
      resources/assets/styles/layouts/_footer.scss
  6. 16
      resources/assets/styles/layouts/_header.scss
  7. 27
      resources/assets/styles/layouts/pages/_catalog.scss
  8. 24
      resources/assets/styles/layouts/pages/_front-page.scss

64
app/admin.php
Unescape View File

@ -21,73 +21,25 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
'slug' => 'primary', 'slug' => 'primary',
'hex' => '#b01109', 'hex' => '#b01109',
'label' => __('Primary Color', 'aldine'), 'label' => __('Primary Color', 'aldine'),
'description' => __('Used for primary elements.', 'aldine'), 'description' => __('Primary color, used for links and other primary elements.', 'aldine'),
], ],
[ [
'slug' => 'accent', 'slug' => 'accent',
'hex' => '#015d75', 'hex' => '#015d75',
'label' => __('Accent Color', 'aldine'), 'label' => __('Accent Color', 'aldine'),
'description' => __('Used for accents.', 'aldine'), 'description' => __('Accent color, used for flourishes and secondary elements.', 'aldine'),
], ],
[ [
'slug' => 'link', 'slug' => 'primary_fg',
'hex' => '#b01109',
'label' => __('Link Color', 'aldine'),
'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', 'hex' => '#ffffff',
'label' => __('Button Text Color', 'aldine'), 'label' => __('Primary Foreground Color', 'aldine'),
'description' => __('Used for the foreground text of buttons.', 'aldine'), 'description' => __('Used for text on a primary background.', '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'),
], ],
[ [
'slug' => 'btn_inverse_active_text', 'slug' => 'accent_fg',
'hex' => '#ffffff', 'hex' => '#ffffff',
'label' => __('Inverse Button Active Text Color', 'aldine'), 'label' => __('Accent Foreground Color', 'aldine'),
'description' => __('Used for the background of buttons.', 'aldine'), 'description' => __('Used for text on an accent color background.', 'aldine'),
], ],
] as $color) { ] as $color) {
$wp_customize->add_setting("pb_network_color_{$color['slug']}", [ $wp_customize->add_setting("pb_network_color_{$color['slug']}", [

48
app/setup.php
Unescape View File

@ -169,18 +169,10 @@ add_action('after_setup_theme', function () {
add_action('wp_head', function () { add_action('wp_head', function () {
$primary = get_option('pb_network_color_primary'); $primary = get_option('pb_network_color_primary');
$accent = get_option('pb_network_color_accent'); $accent = get_option('pb_network_color_accent');
$link = get_option('pb_network_color_link'); $primary_fg = get_option('pb_network_color_primary_fg');
$header_link = get_option('pb_network_color_header_link'); $accent_fg = get_option('pb_network_color_accent_fg');
$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(); $header_text = get_header_textcolor();
if ($primary || $accent || $header_text) { ?> if ($primary || $accent || $primary_fg || $accent_fg || $header_text) { ?>
<style type="text/css">:root { <style type="text/css">:root {
<?php if ($primary) { ?> <?php if ($primary) { ?>
--primary: <?= $primary ?>; --primary: <?= $primary ?>;
@ -188,38 +180,14 @@ add_action('wp_head', function () {
if ($accent) { ?> if ($accent) { ?>
--accent: <?= $accent ?>; --accent: <?= $accent ?>;
<?php } <?php }
if ($link) { ?> if ($primary_fg) { ?>
--link: <?= $link ?>; --primary-fg: <?= $primary_fg ?>;
<?php }
if ($accent_fg) { ?>
--accent-fg: <?= $accent_fg ?>;
<?php } <?php }
if ($header_text) { ?> if ($header_text) { ?>
--header-text: <?= $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 }

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

@ -48,21 +48,13 @@ h2 {
:root { :root {
--primary: $brand-primary; --primary: $brand-primary;
--accent: $brand-accent; --accent: $brand-accent;
--link: $brand-primary; --primary-fg: $white;
--secondary-fg: $white;
--header-text: $black; --header-text: $black;
--header-link: $brand-primary;
--fg: $white;
--bg: $brand-accent;
--block-border: $brand-primary;
--btn-text: $white;
--btn-active-text: $brand-primary;
--btn-bg: $brand-primary;
--btn-inverse-text: $brand-primary;
--btn-inverse-active-text: $white;
} }
a { a {
color: var(--link, $brand-primary); color: var(--primary, $brand-primary);
text-decoration: none; text-decoration: none;
} }

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

@ -3,13 +3,13 @@
width: rem(250); width: rem(250);
height: rem(60); height: rem(60);
padding: rem(19); padding: rem(19);
border: 2px solid var(--btn-bg, $brand-primary); border: 2px solid var(--primary, $brand-primary);
border-radius: 3px; border-radius: 3px;
background: var(--btn-bg, $brand-primary); background: var(--primary, $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: var(--btn-text, $white); color: var(--primary-fg, $white);
line-height: normal; line-height: normal;
letter-spacing: rem(2); letter-spacing: rem(2);
text-align: center; text-align: center;
@ -21,7 +21,7 @@
&:hover, &:hover,
&:focus { &:focus {
background: $white; background: $white;
color: var(--btn-active-text, $brand-primary); color: var(--primary, $brand-primary);
} }
&.button-small { &.button-small {
@ -36,12 +36,12 @@
&.button-inverse { &.button-inverse {
background: $white; background: $white;
color: var(--btn-inverse-text, $brand-primary); color: var(--primary, $brand-primary);
&:hover, &:hover,
&:focus { &:focus {
color: var(--btn-inverse-active-text, $white); color: var(--primary-fg, $white);
background: var(--btn-bg, $brand-primary); background: var(--primary, $brand-primary);
} }
} }
} }

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

@ -4,8 +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: var(--fg, $white); color: var(--accent-fg, $white);
background: var(--bg, $brand-accent); background: var(--accent, $brand-accent);
ul { ul {
margin: 0; margin: 0;
@ -17,13 +17,13 @@
} }
a { a {
color: var(--fg, $white); color: var(--accent-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 var(--fg, $white); border-bottom: solid 1px var(--accent-fg, $white);
} }
} }
@ -36,7 +36,7 @@
} }
.network-footer-block { .network-footer-block {
border-top: solid 1px var(--fg, $white); border-top: solid 1px var(--accent-fg, $white);
} }
.network-footer-block-1 { .network-footer-block-1 {

16
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(--link, $brand-primary); background: var(--primary, $brand-primary);
&::before, &::before,
&::after { &::after {
width: 25px; width: 25px;
height: 3px; height: 3px;
content: ''; content: '';
background: var(--link, $brand-primary); background: var(--primary, $brand-primary);
} }
&::before { &::before {
@ -41,11 +41,11 @@
&.is-active .icon { &.is-active .icon {
// TODO // TODO
background: var(--fg, $white); background: var(--primary-fg, $white);
&::before, &::before,
&::after { &::after {
background: var(--fg, $white); background: var(--primary-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: var(--fg, $white); color: var(--primary-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(--bg, $brand-primary); background: var(--primary, $brand-primary);
a { a {
display: block; display: block;
width: 100%; width: 100%;
border-bottom: solid 1px var(--fg, $white); border-bottom: solid 1px var(--primary-fg, $white);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -139,7 +139,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: var(--header-link, $brand-primary); color: var(--primary, $brand-primary);
} }
&:nth-child(1) { &:nth-child(1) {

27
resources/assets/styles/layouts/pages/_catalog.scss
Unescape View File

@ -55,12 +55,12 @@
&:hover, &:hover,
&:focus { &:focus {
background: #fafdff; background: #fafdff;
color: var(--link, $brand-primary); color: var(--primary, $brand-primary);
} }
} }
.has-active-child > a { .has-active-child > a {
color: var(--link, $brand-primary); color: var(--primary, $brand-primary);
} }
ul { ul {
@ -93,7 +93,7 @@
a.is-active { a.is-active {
font-weight: 600; font-weight: 600;
color: var(--link, $brand-primary); color: var(--primary, $brand-primary);
.close { .close {
opacity: 1; opacity: 1;
@ -105,7 +105,7 @@
.arrow { .arrow {
path { path {
fill: var(--link, $brand-primary); fill: var(--primary, $brand-primary);
} }
} }
@ -183,8 +183,8 @@
height: rem(230); height: rem(230);
float: left; float: left;
padding: 1.5rem rem(8) rem(26); padding: 1.5rem rem(8) rem(26);
border: solid 2px var(--bg, $brand-accent); border: solid 2px var(--accent, $brand-accent);
background: var(--bg, $brand-accent); background: var(--accent, $brand-accent);
p { p {
margin: 0; margin: 0;
@ -192,7 +192,7 @@
a { a {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
color: $white; color: var(--accent-fg, $white);
text-decoration: none; text-decoration: none;
} }
@ -217,6 +217,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width: 100%;
margin-top: rem(83); margin-top: rem(83);
align-items: baseline; align-items: baseline;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@ -226,7 +227,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: var(--link, $brand-primary); color: var(--primary, $brand-primary);
} }
} }
@ -234,7 +235,7 @@
.next { .next {
display: block; display: block;
margin: 0 rem(26); margin: 0 rem(26);
font-family: Karla-Regular; font-family: $font-family-sans-serif;
font-size: rem(16); font-size: rem(16);
svg { svg {
@ -243,7 +244,7 @@
margin: 0 rem(6); margin: 0 rem(6);
path { path {
fill: var(--link, $brand-primary); fill: var(--primary, $brand-primary);
} }
} }
} }
@ -425,12 +426,12 @@
margin-top: rem(60); margin-top: rem(60);
> a { > a {
background: var(--link, $brand-primary); background: var(--primary, $brand-primary);
color: $white; color: var(--primary-fg, $white);
.arrow { .arrow {
path { path {
fill: $white; fill: var(--primary-fg, $white);
} }
} }
} }

24
resources/assets/styles/layouts/pages/_front-page.scss
Unescape View File

@ -29,26 +29,26 @@
.blocks.blocks-4 { .blocks.blocks-4 {
.widget_text:nth-child(2) { .widget_text:nth-child(2) {
color: var(--fg, $white); color: var(--accent-fg, $white);
background: var(--bg, $brand-accent); background: var(--accent, $brand-accent);
h3 { h3 {
color: var(--fg, $white); color: var(--accent-fg, $white);
&::before { &::before {
background: var(--fg, $white); background: var(--accent-fg, $white);
} }
} }
.button { .button {
color: var(--fg, $white); color: var(--accent-fg, $white);
border-color: var(--fg, $white); border-color: var(--accent-fg, $white);
background: transparent; background: transparent;
&:hover, &:hover,
&:focus { &:focus {
color: var(--bg, $brand-accent); color: var(--accent, $brand-accent);
background: var(--fg, $white); background: var(--accent-fg, $white);
} }
} }
} }
@ -57,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(--block-border, $brand-primary); border: solid 2px var(--primary, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
} }
@ -140,12 +140,12 @@
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: solid 2px var(--bg, $brand-accent); border: solid 2px var(--accent, $brand-accent);
background: var(--bg, $brand-accent); background: var(--accent, $brand-accent);
a { a {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
color: $white; color: var(--accent-fg, $white);
text-decoration: none; text-decoration: none;
} }

Write Preview
Loading…
Cancel
Save