From 3eab6277ae28abc80825a87d3b38fb3a2d9c0422 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Wed, 28 Jul 2021 19:05:47 -0400 Subject: [PATCH] more styling & layout improvements --- assets/css/_bs-colors.scss | 49 +++-- assets/css/_bs-custom.scss | 17 +- assets/css/_layout-top-navbar-main.scss | 40 ++-- assets/css/app.scss | 236 +++++++++--------------- content-templates/content-article.php | 4 +- index.php | 2 +- 6 files changed, 132 insertions(+), 216 deletions(-) diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss index 0fdcded..af40eb1 100644 --- a/assets/css/_bs-colors.scss +++ b/assets/css/_bs-colors.scss @@ -1,30 +1,32 @@ // Colors -// -- now defined in bs-custom -- -// $primary: #e48663; -// $secondary: #00b0b0; -// $success: #99c24d; -// $info: #b489c7; -// $warning: #f4d35e; +// now defined in bs-custom +// $primary: #51A39F; +// // $secondary: #9883E5; +// $secondary: #955E42; +// $success: #37B800; +// $info: #0075F2; +// $warning: #F9E900; +// $danger: #DD1C1A; -// gray scale based off 'pale silver' #bebfb0 which was text color in Lester's original design -// however, i think a lighter text is more readable, going 1 lighter for this design +// define black, white, gray $white: #fff; -$gray-010: #e3dfdd; -$gray-100: #d1cac7; -$gray-200: #beb5b0; -$gray-300: #aca09a; -$gray-400: #9a8b84; -$gray-500: #87776e; -$gray-600: #70635c; -$gray-700: #5a4f49; -$gray-750: #4f4540; -$gray-800: #433b37; -$gray-900: #2d2825; $black: #000; +$gray: #7d756c; // 6c757d 7d756c + +// define gray scale +$gray-100: tint-color($gray, 80%); +$gray-200: tint-color($gray, 60%); +$gray-300: tint-color($gray, 40%); +$gray-400: tint-color($gray, 20%); +$gray-500: $gray; +$gray-600: shade-color($gray, 20%); +$gray-700: shade-color($gray, 40%); +$gray-750: shade-color($gray, 50%); +$gray-800: shade-color($gray, 60%); +$gray-900: shade-color($gray, 80%); // spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design // background will be spaceblue-800 - $spaceblue-100: #aebcd5; $spaceblue-200: #93a6c8; $spaceblue-300: #788fba; @@ -37,9 +39,6 @@ $spaceblue-800: #212c40; $spaceblue-850: #1c2536; $spaceblue-900: #151c28; -$light: $spaceblue-200; -$dark: $spaceblue-800; - // Create your own map $custom-colors: ( @@ -51,8 +50,8 @@ $custom-colors: ( "danger": $danger, "light": $light, "dark": $dark, - "gray": $gray-600, - "gray-dark": $gray-800, + "gray": $gray-600, + "gray-dark": $gray-800 ); // Merge the maps diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index ed210d7..0fbae16 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -1,4 +1,12 @@ /* Bootstrap custom variable overrides */ +// Colors +$primary: #51A39F; +// $secondary: #9883E5; +$secondary: #955E42; +$success: #37B800; +$info: #0075F2; +$warning: #F9E900; +$danger: #DD1C1A; // Typography $font-size-base: 1.125rem; @@ -38,12 +46,3 @@ $font-family-base: $font-family-sans-serif; // Features $enable-shadows: true; $enable-negative-margins: true; - -// init colors for some vars -$primary: #51A39F; -// $secondary: #9883E5; -$secondary: #955E42; -$success: #37B800; -$info: #0075F2; -$warning: #F9E900; -$danger: #DD1C1A \ No newline at end of file diff --git a/assets/css/_layout-top-navbar-main.scss b/assets/css/_layout-top-navbar-main.scss index ef3c4fc..ecce183 100644 --- a/assets/css/_layout-top-navbar-main.scss +++ b/assets/css/_layout-top-navbar-main.scss @@ -12,15 +12,11 @@ padding-left: var(--bs-gutter-x, 4rem); } @include media-breakpoint-up(xxl) { - // min-width: 1400px; max-width: 1400px; } } } .container-lg { - // @include media-breakpoint-up(lg) { - // min-width: 960px; - // } @include media-breakpoint-up(xl) { max-width: 960px; } @@ -63,16 +59,6 @@ nav#top-navbar-grid-outer { @include media-breakpoint-up(xxl) { margin-bottom: 4rem !important; } - // @include media-breakpoint-up(xxl) { - // margin-bottom: 5rem !important; - // } - // @include media-breakpoint-up(md) { - // padding-right: var(--bs-gutter-x, 1.25rem); - // padding-left: var(--bs-gutter-x, 1.25rem); - // } - // @extend .px-3; - // @extend .px-sm-4; - // @extend .px-md-5; @extend .d-grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto; @@ -200,12 +186,15 @@ nav#top-navbar-grid-outer { @extend .text-decoration-none; color: $gray-300; &:hover { - @extend .text-decoration-underline; - text-decoration-color: $primary !important; - color: $gray-300; + @extend .text-decoration-none; + color: $primary; } &.active { - color: $primary; + opacity: 0.5; + &:hover { + @extend .text-decoration-none; + color: $gray-300; + } } } .dropdown-toggle { @@ -220,7 +209,8 @@ nav#top-navbar-grid-outer { } } &.show { - color: $primary; + // color: $primary; + opacity: 0.5; &:hover { @extend .text-decoration-none; } @@ -234,7 +224,7 @@ nav#top-navbar-grid-outer { } } .dropdown-menu.dropdown-menu-dark { - background-color: shade-color($gray-800, 50%); + background-color: $spaceblue-900; li.menu-item { .dropdown-item.top-navbar-grid-main-menu-item-link { @extend .fw-normal; @@ -242,18 +232,14 @@ nav#top-navbar-grid-outer { text-transform: inherit !important; &:hover { @extend .text-decoration-none; - color: $gray-900; + color: $spaceblue-800; background-color: $primary; } } &.active { .dropdown-item.top-navbar-grid-main-menu-item-link { - color: $gray-900; - background-color: shade-color($primary, 25%); - &:hover { - @extend .text-decoration-none; - background-color: $primary; - } + color: $spaceblue-100; + background-color: $spaceblue-600; } } } diff --git a/assets/css/app.scss b/assets/css/app.scss index e411269..35849a1 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -16,17 +16,19 @@ /* main */ html, body { - color: $gray-100; + color: $gray-200; background-color: $spaceblue-800; height: 100%; } /* links */ a { - @extend .text-decoration-none; + // @extend .text-decoration-none; + color: $gray-200; &:hover { - @extend .text-decoration-underline; + // @extend .text-decoration-underline; color: $primary; + text-decoration-color: $gray-200 !important; } } @@ -36,25 +38,25 @@ a { font-family: $font-family-handbrush; } .text-gray-100 { - color: $gray-100; + color: $gray-100 !important; } .text-gray-200 { - color: $gray-200; + color: $gray-200 !important; } .text-gray-300 { - color: $gray-300; + color: $gray-300 !important; } .text-gray-400 { - color: $gray-400; + color: $gray-400 !important; } .text-gray-500 { - color: $gray-500; + color: $gray-500 !important; } .text-gray-600 { - color: $gray-600; + color: $gray-600 !important; } .text-gray-700 { - color: $gray-700; + color: $gray-700 !important; } .fs-larger { font-size: larger; @@ -88,12 +90,27 @@ a { &.border-gray-700 { border-bottom-color: $gray-700 !important; } - &.border-gray-750 { - border-bottom-color: $gray-750 !important; - } &.border-gray-800 { border-bottom-color: $gray-800 !important; } + &.border-spaceblue-300 { + border-bottom-color: $spaceblue-300 !important; + } + &.border-spaceblue-400 { + border-bottom-color: $spaceblue-400 !important; + } + &.border-spaceblue-500 { + border-bottom-color: $spaceblue-500 !important; + } + &.border-spaceblue-600 { + border-bottom-color: $spaceblue-600 !important; + } + &.border-spaceblue-700 { + border-bottom-color: $spaceblue-700 !important; + } + &.border-spaceblue-800 { + border-bottom-color: $spaceblue-800 !important; + } } /* post styling */ @@ -135,56 +152,6 @@ article.post.sticky { } } -// a { -// color: rgba($white, 0.75); -// // border-bottom: $gray-600 2px solid; -// // text-decoration: none; -// text-decoration-color: $gray-600; -// &.navbar-brand, -// &.nav-link { -// border-bottom: none; -// } -// &:visited { -// color: $info; -// .post-title & { -// color: $gray-100; -// } -// } -// &:hover { -// color: $primary; -// // text-decoration: none; -// // border-bottom: $secondary 3px solid; -// text-decoration-color: $secondary; -// &.navbar-brand { -// border-bottom: none; -// } -// } -// } -// .wp-block-separator { -// border-top: none !important; -// border-bottom: none !important; -// } - -// /* more */ -// .border-gray-900 { -// border-color: $gray-900 !important; -// } -// .border-10 { -// border-width: 10px !important; -// } -// .border-20 { -// border-width: 20px !important; -// } -// .font-handbrush { -// font-family: $font-family-handbrush; -// } -// .fw-500 { -// font-weight: 500; -// } -// .fw-600 { -// font-weight: 600; -// } - /* blockquote handling */ blockquote, @@ -213,7 +180,7 @@ blockquote.wp-block-quote { } cite { @extend .blockquote-footer; - @extend .text-gray-300; + color: $gray-300; @extend .my-0; @extend .py-0; font-size: 0.85em; @@ -249,7 +216,10 @@ figure.wp-block-pullquote { } /* other wp styling */ -.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img { +.wp-block-image.alignfull img, +.wp-block-image.alignwide img, +.wp-block-image img, +.wp-block-media-text__media img { height: auto; } .btn-primary { @@ -281,33 +251,49 @@ figure.wp-block-pullquote { @extend .text-end; } } -table { + +table, +.wp-block-table table, +.wp-block-calendar table { @extend .table; @extend .table-dark; -} -.wp-block-table { - table { - @extend .table; - @extend .table-dark; + caption { + @extend .text-gray-400; } - &.is-style-stripes { - table { - @extend .table-striped; + thead th, + tbody td { + border: none !important; + } + thead tr { + border-bottom: 1px solid $gray-600; + } + tbody tr { + border-bottom: 1px solid $gray-800; + &:last-child { + border-bottom: none !important; } } } +.wp-block-calendar table, +.wp-block-table.is-style-stripes table { + @extend .table-striped; +} + .post-page-numbers { + @extend .text-decoration-none; @extend .page-item; &.current { @extend .active; & .page-link { - background-color: shade-color($primary, 25%) !important; - border-color: shade-color($primary, 25%) !important; - color: $gray-100; + @extend .text-decoration-none; + color: $spaceblue-100 !important; + background-color: $spaceblue-600 !important; + border-color: $spaceblue-600 !important; &:hover { - background-color: shade-color($primary, 25%) !important; - border-color: shade-color($primary, 25%) !important; - color: $gray-100; + @extend .text-decoration-none; + color: $spaceblue-100 !important; + background-color: $spaceblue-600 !important; + border-color: $spaceblue-600 !important; } } } @@ -315,77 +301,23 @@ table { @extend .text-decoration-none; } & .page-link { - border: 1px solid shade-color($primary, 25%); + @extend .text-decoration-none; + color: $gray-200; background-color: inherit !important; + border: 1px solid $spaceblue-600; &:hover { - border: 1px solid #51A39F; - background-color: #51A39F !important; color: $spaceblue-800; + background-color: $primary !important; + border: 1px solid $spaceblue-600; } } } -// &:not(.is-style-outline) { - // @extend .btn-primary; - // } - // &.is-style-outline { - // @extend .btn-outline-primary; - // } -// /* blog */ -// .post-title a { -// color: $gray-100; -// text-decoration: none; -// border-bottom: none; -// &:hover { -// color: $primary; -// // border-bottom: $secondary 3px solid; -// text-decoration: underline; -// text-decoration-color: $secondary; -// } -// } -// .post-lede, -// .post-body { -// h2, h3, h4, h5, h6 { -// color: $gray-200; -// margin-top: 2rem; -// } -// } -// .post li { -// line-height: 1.75rem; -// } -// .more-link { -// @extend .fs-6; -// } - -// /* widget styling */ -// #footer-widgets { -// background-color: $gray-750; -// border-radius: .5em; -// .widgettitle { -// @extend .fs-4; -// } -// .wp-block-group { -// @extend .px-3; -// @extend .py-3; -// max-width: 25rem; -// } -// ul { -// padding-inline-start: 2rem; -// } -// .wp-block-loginout { -// display: list-item; -// margin-left: 2rem; -// list-style-type: disc; -// } -// } -// .wp-block-tag-cloud { -// @extend .mb-0; -// } /* search form */ .form-control { - color: $gray-100 !important; + color: $gray-200; background-color: $spaceblue-900 !important; border-color: $spaceblue-600; } @@ -397,24 +329,24 @@ input.form-control::-ms-clear, .form-control::-ms-reveal, input.form-control::-ms-reveal { display: none; } .form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: $gray-750 !important; + color: $spaceblue-700 !important; opacity: 1; } .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: $gray-750 !important; + color: $spaceblue-700 !important; opacity: 1; } .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } .form-control::-ms-input-placeholder { /* Microsoft Edge */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } .form-control::placeholder { /* Most modern browsers support this now. */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } @@ -431,24 +363,24 @@ form input { &::-ms-clear &::-ms-reveal { display: none; } &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: $gray-750 !important; + color: $spaceblue-700 !important; opacity: 1; } &::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: $gray-750 !important; + color: $spaceblue-700 !important; opacity: 1; } &:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } &::-ms-input-placeholder { /* Microsoft Edge */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } &::placeholder { /* Most modern browsers support this now. */ - color: $gray-750 !important; + color: $spaceblue-700 !important; } } button, diff --git a/content-templates/content-article.php b/content-templates/content-article.php index 6a2a48a..9e5e244 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -12,13 +12,13 @@ namespace WP_RDNYC;
itemscope itemtype="https://schema.org/CreativeWork">
' + echo (is_page() ? '

' : '

'); if ( is_archive() || is_search() || is_home() ) : diff --git a/index.php b/index.php index 946cba8..81556af 100644 --- a/index.php +++ b/index.php @@ -13,7 +13,7 @@ get_header(); ?>
-

+