From a666face00ee9f4113c2bba2f90ce598ea9d4b50 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Wed, 28 Jul 2021 22:51:24 -0400 Subject: [PATCH] more styling & layout improvements --- assets/css/_basic-additions.scss | 79 ++++++++++ assets/css/_layout-top-navbar-main.scss | 2 +- assets/css/app.scss | 192 +++++++----------------- assets/js/main.js | 3 +- content-templates/content-article.php | 61 ++++---- custom-functions.php | 14 ++ index.php | 53 ++++--- search.php | 45 ------ 8 files changed, 216 insertions(+), 233 deletions(-) create mode 100644 assets/css/_basic-additions.scss delete mode 100644 search.php diff --git a/assets/css/_basic-additions.scss b/assets/css/_basic-additions.scss new file mode 100644 index 0000000..c673677 --- /dev/null +++ b/assets/css/_basic-additions.scss @@ -0,0 +1,79 @@ +/* general additional text style */ +.font-family-handbrush { + font-family: $font-family-handbrush; +} +.text-gray-100 { + color: $gray-100 !important; +} +.text-gray-200 { + color: $gray-200 !important; +} +.text-gray-300 { + color: $gray-300 !important; +} +.text-gray-400 { + color: $gray-400 !important; +} +.text-gray-500 { + color: $gray-500 !important; +} +.text-gray-600 { + color: $gray-600 !important; +} +.text-gray-700 { + color: $gray-700 !important; +} +.fs-larger { + font-size: larger; +} +.fs-smaller { + font-size: smaller; +} + +/* general additional spacing style */ +.mb-two-rem { + margin-bottom: 2rem !important; +} + +/* general additional border style */ +.border-bottom { + &.border-dashed { + border-bottom-style: dashed !important; + } + &.border-gray-300 { + border-bottom-color: $gray-300 !important; + } + &.border-gray-400 { + border-bottom-color: $gray-400 !important; + } + &.border-gray-500 { + border-bottom-color: $gray-500 !important; + } + &.border-gray-600 { + border-bottom-color: $gray-600 !important; + } + &.border-gray-700 { + border-bottom-color: $gray-700 !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; + } +} diff --git a/assets/css/_layout-top-navbar-main.scss b/assets/css/_layout-top-navbar-main.scss index ecce183..aa1106a 100644 --- a/assets/css/_layout-top-navbar-main.scss +++ b/assets/css/_layout-top-navbar-main.scss @@ -25,7 +25,7 @@ /* * main section layout */ -main.rdnyc-single-outer { +main.rdnyc-index-outer { @extend .container-lg; @extend .mt-4; @extend .mb-3; diff --git a/assets/css/app.scss b/assets/css/app.scss index 35849a1..d87d151 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -7,6 +7,9 @@ /*SVG ICON SYSTEM*/ @import "svg-icons"; +/* Basic style additions */ +@import "basic-additions"; + /* Navbar toggler icon override */ @import "nav-burger"; @@ -22,10 +25,11 @@ body { } /* links */ -a { - // @extend .text-decoration-none; +a, +#tsml a { + @extend .text-decoration-underline; color: $gray-200; - &:hover { + &:hover, &:focus { // @extend .text-decoration-underline; color: $primary; text-decoration-color: $gray-200 !important; @@ -33,85 +37,6 @@ a { } -/* general additional text style */ -.font-family-handbrush { - font-family: $font-family-handbrush; -} -.text-gray-100 { - color: $gray-100 !important; -} -.text-gray-200 { - color: $gray-200 !important; -} -.text-gray-300 { - color: $gray-300 !important; -} -.text-gray-400 { - color: $gray-400 !important; -} -.text-gray-500 { - color: $gray-500 !important; -} -.text-gray-600 { - color: $gray-600 !important; -} -.text-gray-700 { - color: $gray-700 !important; -} -.fs-larger { - font-size: larger; -} -.fs-smaller { - font-size: smaller; -} - -/* general additional spacing style */ -.mb-two-rem { - margin-bottom: 2rem !important; -} - -/* general additional border style */ -.border-bottom { - &.border-dashed { - border-bottom-style: dashed !important; - } - &.border-gray-300 { - border-bottom-color: $gray-300 !important; - } - &.border-gray-400 { - border-bottom-color: $gray-400 !important; - } - &.border-gray-500 { - border-bottom-color: $gray-500 !important; - } - &.border-gray-600 { - border-bottom-color: $gray-600 !important; - } - &.border-gray-700 { - border-bottom-color: $gray-700 !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 */ article.post.sticky { @@ -136,12 +61,17 @@ article.post.sticky { } } } -.post-header { - .post-title, .post-title a { +header.post-header { + h1, h2, h1 a, h2 a { -ms-word-wrap: break-word; word-wrap: break-word; } } +.article.post-body { + h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { + padding-top: 0.5rem; + } +} .more-link-outer { @extend .text-end; @@ -315,83 +245,71 @@ table, -/* search form */ -.form-control { - color: $gray-200; - background-color: $spaceblue-900 !important; - border-color: $spaceblue-600; -} -.form-control:focus { - border-color: $input-focus-border-color; -} -.form-control::-ms-clear, -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: $spaceblue-700 !important; -} -.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: $spaceblue-700 !important; - opacity: 1; -} -.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: $spaceblue-700 !important; - opacity: 1; -} -.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: $spaceblue-700 !important; -} -.form-control::-ms-input-placeholder { /* Microsoft Edge */ - color: $spaceblue-700 !important; -} -.form-control::placeholder { /* Most modern browsers support this now. */ - color: $spaceblue-700 !important; -} - - +/* forms and search */ label { @extend .form-label; } -input, -.wp-block-search .wp-block-search__input, -form input { - @extend .form-control; + +.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-clear, &::-ms-reveal { display: none; } - &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + &::-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 */ - color: $spaceblue-700 !important; - opacity: 1; - } + &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ &::-moz-placeholder { /* Mozilla Firefox 19+ */ color: $spaceblue-700 !important; opacity: 1; } - &:-ms-input-placeholder { /* Internet Explorer 10-11 */ +} + +input, +.wp-block-search .wp-block-search__input, +form input { + @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; } - &::-ms-input-placeholder { /* Microsoft Edge */ - color: $spaceblue-700 !important; - } - &::placeholder { /* Most modern browsers support this now. */ + &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ + &::-moz-placeholder { /* Mozilla Firefox 19+ */ color: $spaceblue-700 !important; + opacity: 1; } } + button, .wp-block-search .wp-block-search__button, form button { @extend .btn; @extend .btn-primary; } -select { - @extend .form-select; -} .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 { + @extend .form-select; +} diff --git a/assets/js/main.js b/assets/js/main.js index 4afd742..fe399cb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -5,8 +5,9 @@ import '../css/app.scss' import '../raw/rdnyc-logo.svg'; // rdnyc logo // other: import '../../node_modules/bootstrap-icons/icons/chevron-down.svg'; +import '../../node_modules/bootstrap-icons/icons/chevron-left.svg'; +import '../../node_modules/bootstrap-icons/icons/chevron-right.svg'; import '../../node_modules/bootstrap-icons/icons/search.svg'; -// import '../../node_modules/bootstrap-icons/icons/person.svg'; // Import Bootstrap JS import 'bootstrap/js/dist/collapse'; diff --git a/content-templates/content-article.php b/content-templates/content-article.php index 9e5e244..90e45e8 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -8,43 +8,44 @@ namespace WP_RDNYC; +// for singular page, no extra bottom margin... +$post_class = is_singular() ? '' : ' mb-two-rem '; +$post_class .= 'post border-bottom border-spaceblue-700 pb-4'; +$post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) ); + ?> -
- itemscope itemtype="https://schema.org/CreativeWork"> + +
' - : '

'); + // post/page header inner content (title, with link for query/index listings) + $h_inner = ( is_archive() || is_search() || is_home() ) ? + '' + . esc_html( get_the_title() ) . '' : + esc_html( get_the_title() ); - if ( is_archive() || is_search() || is_home() ) : - printf( '%s', - esc_url( get_the_permalink() ), - esc_html( get_the_title() ) - ); - else : echo esc_html( get_the_title() ); - endif; - - echo (is_page() ? '

' : ''); + // For pages we want a larger heading like an index/query listing + // otherwise, a regular article/post header + echo (is_page() ? get_page_multi_heading( $h_inner ) : get_post_single_heading( $h_inner )); ?> - -
- - '; - } - echo get_the_date('F j, Y'); - if (get_the_title() === '') { - echo ''; - } - ?> -
+ +
+ %s', + esc_url( get_the_permalink() ), + get_the_date('F j, Y') + ); + + else : + echo get_the_date('F j, Y'); + + endif; + ?> +
diff --git a/custom-functions.php b/custom-functions.php index 2ff0681..2ccb86b 100644 --- a/custom-functions.php +++ b/custom-functions.php @@ -1,5 +1,19 @@ ' . $content_str . ''; +} +function get_post_single_heading( $content_str = '' ) { + $class = 'fs-2 fw-600 mb-2'; + return '

' . $content_str . '

'; +} + + + /** * example inline SVG function atts array supported keys */ diff --git a/index.php b/index.php index 81556af..282af30 100644 --- a/index.php +++ b/index.php @@ -9,38 +9,53 @@ namespace WP_RDNYC; get_header(); ?> -
+
- -

- -

- - - - + // output listing pagination if not singular + if (!is_singular()) : ?> + + -
+ ?> + +
+ false)); diff --git a/search.php b/search.php deleted file mode 100644 index e538ad1..0000000 --- a/search.php +++ /dev/null @@ -1,45 +0,0 @@ - - -
-
- - -

- Search results for:

- - - - - - Search: nothing found'; - - printf( 'Sorry, no results for %s', - esc_html( get_search_query() ) - ); - endif; - ?> - -
-
-false));