adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

cleaning up some of the custom styling

Browse source
This commit is contained in:
Adam Piontek 2021-07-29 18:46:27 -04:00
parent a666face00
commit 1e68eac502
9 changed files with 160 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
assets/css/_bs-custom-post.scss Normal file
View file

@ -0,0 +1,43 @@
// Merge the color maps
$theme-colors: map-merge($theme-colors, $custom-colors);
/* general styles */
$link-color: $gray-200;
$link-decoration: underline;
$link-shade-percentage: 20% !default;
$link-hover-color: $primary;
/* tables */
$table-bg: $dark;
/* buttons */
$btn-box-shadow: null;
/* figure captions */
$figure-caption-color: $gray-400;
/* form inputs */
$input-bg: $dark;
$input-focus-bg: $dark;
$input-border-color: $spaceblue-600;
$input-focus-color: $gray-100;
$input-placeholder-color: shade-color($spaceblue-600, 20%);
/* pagination */
$pagination-bg: $dark;
$pagination-border-color: $spaceblue-600;
$pagination-active-color: $dark;
$pagination-hover-color: tint-color($primary, 10%);
$pagination-hover-bg: tint-color($dark, 7%);
$pagination-hover-border-color: $spaceblue-600;
$pagination-focus-color: tint-color($primary, 10%);
$pagination-focus-bg: tint-color($dark, 7%);
/* dropdown menus */
$dropdown-dark-bg: $dark;
$dropdown-link-color: $light;
$dropdown-link-hover-color: tint-color($light, 10%);
$dropdown-link-hover-bg: $spaceblue-700;
// $dropdown-link-active-color: tint-color($dark, 10%);
// $dropdown-link-active-bg: $spaceblue-700;

9
assets/css/_bs-custom.scss → assets/css/_bs-custom-pre.scss
View file

@ -1,13 +1,4 @@
/* Bootstrap custom variable overrides */ /* Bootstrap custom variable overrides */
// Colors
$primary: #51A39F;
// $secondary: #9883E5;
$secondary: #955E42;
$success: #37B800;
$info: #0075F2;
$warning: #F9E900;
$danger: #DD1C1A;
// Typography // Typography
$font-size-base: 1.125rem; $font-size-base: 1.125rem;
$line-height-base: 1.35; $line-height-base: 1.35;

11
assets/css/_bs-load.scss
View file

@ -1,12 +1,17 @@
/* Bootstrap custom variable overrides */ /* Bootstrap custom variable overrides */
@import "bs-custom"; @import "bs-custom-pre";
// Required || Configuration // Required || Configuration :: bootstrap functions
@import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/functions";
/* Bootstrap custom variable overrides */
@import "bs-vars-pre";
// Required || Configuration :: bootstrap variables
@import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/variables";
/* Bootstrap custom variable overrides */ /* Bootstrap custom variable overrides */
@import "bs-colors"; @import "bs-custom-post";
// Required || Configuration -- CONTINUED // Required || Configuration -- CONTINUED
@import "../../node_modules/bootstrap/scss/mixins"; @import "../../node_modules/bootstrap/scss/mixins";

46
assets/css/_bs-colors.scss → assets/css/_bs-vars-pre.scss
View file

@ -1,12 +1,16 @@
// Colors // Colors
// now defined in bs-custom // scss-docs-start color-variables
// $primary: #51A39F; $blue: #0d6efd;
// // $secondary: #9883E5; $indigo: #6610f2;
// $secondary: #955E42; $purple: #6f42c1;
// $success: #37B800; $pink: #d63384;
// $info: #0075F2; $red: #dc3545;
// $warning: #F9E900; $orange: #fd7e14;
// $danger: #DD1C1A; $yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-end color-variables
// define black, white, gray // define black, white, gray
$white: #fff; $white: #fff;
@ -25,6 +29,7 @@ $gray-750: shade-color($gray, 50%);
$gray-800: shade-color($gray, 60%); $gray-800: shade-color($gray, 60%);
$gray-900: shade-color($gray, 80%); $gray-900: shade-color($gray, 80%);
// spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design // spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design
// background will be spaceblue-800 // background will be spaceblue-800
$spaceblue-100: #aebcd5; $spaceblue-100: #aebcd5;
@ -40,6 +45,18 @@ $spaceblue-850: #1c2536;
$spaceblue-900: #151c28; $spaceblue-900: #151c28;
// scss-docs-start theme-color-variables
$primary: #51A39F;
$secondary: $gray;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $spaceblue-100;
$dark: $spaceblue-900;
// scss-docs-end theme-color-variables
// Create your own map // Create your own map
$custom-colors: ( $custom-colors: (
"primary": $primary, "primary": $primary,
@ -54,14 +71,9 @@ $custom-colors: (
"gray-dark": $gray-800 "gray-dark": $gray-800
); );
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
// misc $body-bg: $spaceblue-800;
$navbar-dark-color: rgba($white, 0.75); $body-color: $gray-200;
$navbar-dark-hover-color: rgba($white, 0.9); $text-muted: $gray-400;
$navbar-dark-active-color: $white; $component-active-color: $dark;
$navbar-dark-disabled-color: rgba($white, 0.45);
$navbar-dark-toggler-border-color: rgba($white, 0.3);
$component-active-bg: $primary; $component-active-bg: $primary;
// $custom-dropdown-menu-background:

11
assets/css/_layout-top-navbar-main.scss
View file

@ -209,7 +209,6 @@ nav#top-navbar-grid-outer {
} }
} }
&.show { &.show {
// color: $primary;
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
@extend .text-decoration-none; @extend .text-decoration-none;
@ -224,22 +223,20 @@ nav#top-navbar-grid-outer {
} }
} }
.dropdown-menu.dropdown-menu-dark { .dropdown-menu.dropdown-menu-dark {
background-color: $spaceblue-900;
li.menu-item { li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link { .dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal; @extend .fw-normal;
// padding: 0.25rem 1rem 0 1rem !important;
text-transform: inherit !important; text-transform: inherit !important;
&:hover { &:hover {
@extend .text-decoration-none; @extend .text-decoration-none;
color: $spaceblue-800; color: $dropdown-link-hover-color;
background-color: $primary; background-color: $dropdown-link-hover-bg;
} }
} }
&.active { &.active {
.dropdown-item.top-navbar-grid-main-menu-item-link { .dropdown-item.top-navbar-grid-main-menu-item-link {
color: $spaceblue-100; color: $dropdown-link-active-color;
background-color: $spaceblue-600; background-color: $dropdown-link-active-bg;
} }
} }
} }

54
assets/css/_meetings-plugin.scss Normal file
View file

@ -0,0 +1,54 @@
#tsml {
.form-control {
border: 1px solid $primary;
}
& .btn, & .btn a {
text-decoration: none !important;
}
.btn-default {
color: $spaceblue-800;
background-color: $primary;
border: 1px solid $primary;
&:hover {
@extend .btn-primary, :hover;
}
&.toggle-view {
color: $primary;
background-color: inherit;
border: 1px solid $primary;
&:hover {
color: $spaceblue-900;
background-color: tint-color($primary, 30%);
border: 1px solid $primary;
}
&.active {
color: $spaceblue-900;
background-color: $primary;
border: 1px solid $primary;
&:hover {
color: $spaceblue-900;
background-color: $primary;
border: 1px solid $primary;
}
}
}
}
.table-wrapper {
color: #fff;
}
.dropdown-menu {
color: $gray-200;
// background-color: $spaceblue-900;
}
.dropdown-menu > li > a {
color: $gray-200 !important;
text-decoration: none !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover {
color: $spaceblue-900 !important;
text-decoration: none !important;
background-color: $primary !important;
}
}

108
assets/css/app.scss
View file

@ -19,19 +19,13 @@
/* main */ /* main */
html, html,
body { body {
color: $gray-200;
background-color: $spaceblue-800;
height: 100%; height: 100%;
} }
/* links */ /* links */
a, a,
#tsml a { #tsml a {
@extend .text-decoration-underline;
color: $gray-200;
&:hover, &:focus { &:hover, &:focus {
// @extend .text-decoration-underline;
color: $primary;
text-decoration-color: $gray-200 !important; text-decoration-color: $gray-200 !important;
} }
} }
@ -121,8 +115,6 @@ blockquote.wp-block-quote {
} }
} }
figure.wp-block-pullquote { figure.wp-block-pullquote {
// @extend .my-3;
// @extend .py-3;
margin: 2em !important; margin: 2em !important;
@extend .p-5; @extend .p-5;
&:not(.is-style-solid-color) { &:not(.is-style-solid-color) {
@ -153,7 +145,7 @@ figure.wp-block-pullquote {
height: auto; height: auto;
} }
.btn-primary { .btn-primary {
color: $spaceblue-800; color: $dark;
} }
.has-drop-cap:not(:focus)::first-letter { .has-drop-cap:not(:focus)::first-letter {
font-size: 5em; font-size: 5em;
@ -181,123 +173,61 @@ figure.wp-block-pullquote {
@extend .text-end; @extend .text-end;
} }
} }
.wp-caption-text {
@extend .text-muted;
}
/* tables */
table, table,
.wp-block-table table, .wp-block-table table,
.wp-block-calendar table { .wp-block-calendar table {
@extend .table; @extend .table;
@extend .table-dark; @extend .table-dark;
caption { caption {
@extend .text-gray-400; @extend .text-muted;
} }
thead th, thead th,
tbody td { tbody td {
border: none !important; border: none !important;
} }
thead tr { thead tr {
border-bottom: 1px solid $gray-600; border-bottom: 1px solid $spaceblue-600;
} }
tbody tr { tbody tr {
border-bottom: 1px solid $gray-800; border-bottom: 1px solid $spaceblue-800;
&:last-child { &:last-child {
border-bottom: none !important; border-bottom: none !important;
} }
} }
} }
.wp-block-calendar table, .wp-block-calendar table,
.wp-block-table.is-style-stripes table { .wp-block-table.is-style-stripes {
border-bottom: none;
table {
@extend .table-striped; @extend .table-striped;
border-bottom: none;
}
} }
/* post page pagination */
.post-page-numbers { .post-page-numbers {
@extend .text-decoration-none; @extend .text-decoration-none;
@extend .page-item; @extend .page-item;
&.current { &.current {
@extend .active; @extend .page-item, .active;
& .page-link {
@extend .text-decoration-none;
color: $spaceblue-100 !important;
background-color: $spaceblue-600 !important;
border-color: $spaceblue-600 !important;
&:hover {
@extend .text-decoration-none;
color: $spaceblue-100 !important;
background-color: $spaceblue-600 !important;
border-color: $spaceblue-600 !important;
}
}
}
&:hover {
@extend .text-decoration-none;
}
& .page-link {
@extend .text-decoration-none;
color: $gray-200;
background-color: inherit !important;
border: 1px solid $spaceblue-600;
&:hover {
color: $spaceblue-800;
background-color: $primary !important;
border: 1px solid $spaceblue-600;
}
} }
} }
/* forms and search */ /* forms and search */
label { label {
@extend .form-label; @extend .form-label;
} }
.form-control,
input.form-control {
color: $gray-200;
background-color: $spaceblue-900 !important;
border-color: $spaceblue-600;
&:focus {
border-color: $input-focus-border-color;
color: $gray-200;
}
&::-ms-clear,
&::-ms-reveal { display: none; }
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
&::-ms-input-placeholder, /* Microsoft Edge */
&::placeholder /* Most modern browsers support this now. */
{
color: $spaceblue-700 !important;
}
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $spaceblue-700 !important;
opacity: 1;
}
}
input, input,
.wp-block-search .wp-block-search__input, .wp-block-search .wp-block-search__input,
form input { form input {
@extend .form-control; @extend .form-control;
color: $gray-200;
&:focus {
border-color: $input-focus-border-color;
color: $gray-200;
}
&::-ms-clear,
&::-ms-reveal { display: none; }
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
&::-ms-input-placeholder, /* Microsoft Edge */
&::placeholder /* Most modern browsers support this now. */
{
color: $spaceblue-700 !important;
}
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $spaceblue-700 !important;
opacity: 1;
}
} }
button, button,
@ -306,10 +236,10 @@ form button {
@extend .btn; @extend .btn;
@extend .btn-primary; @extend .btn-primary;
} }
.btn-primary, button, .wp-block-search .wp-block-search__button, form button, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
box-shadow: inherit;
}
select { select {
@extend .form-select; @extend .form-select;
} }
/* Meetings plugin styling changes */
@import "meetings-plugin";

2
custom-functions.php
View file

@ -4,7 +4,7 @@
* standard "page/multi-post index/listing" & "single-blog-post" header styles * standard "page/multi-post index/listing" & "single-blog-post" header styles
*/ */
function get_page_multi_heading( $content_str = '' ) { function get_page_multi_heading( $content_str = '' ) {
$class = 'fw-light text-gray-400 mb-4 border-bottom border-dashed border-spaceblue-600'; $class = 'fw-light text-muted mb-4 border-bottom border-dashed border-spaceblue-600';
return '<h1 class="' . $class . '">' . $content_str . '</h1>'; return '<h1 class="' . $class . '">' . $content_str . '</h1>';
} }
function get_post_single_heading( $content_str = '' ) { function get_post_single_heading( $content_str = '' ) {

2
searchform.php
View file

@ -19,7 +19,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
<form role="search" <?php echo $seventythreek_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form flex-fill flex-sm-grow-0" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <form role="search" <?php echo $seventythreek_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form flex-fill flex-sm-grow-0" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="d-flex flex-nowrap"> <div class="d-flex flex-nowrap">
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label> <label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" /> <input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search&hellip;" />
<button type="submit" class="btn btn-primary" title="Search"> <button type="submit" class="btn btn-primary" title="Search">
<?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?> <?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?>
</button> </button>