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 ) ) ); + ?> -<article - <?php - $extra_post_class = is_singular() ? '' : ' mb-two-rem'; - echo post_class( 'post border-bottom border-spaceblue-700 pb-4' . $extra_post_class ); - ?> - itemscope itemtype="https://schema.org/CreativeWork"> + +<article id="post-<?php the_ID(); ?>" class="<?php echo $post_class; ?>" itemscope itemtype="https://schema.org/CreativeWork"> <header class="post-header"> <?php - echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">' - : '<h2 class="post-title fs-2 fw-600 mb-2">'); + // post/page header inner content (title, with link for query/index listings) + $h_inner = ( is_archive() || is_search() || is_home() ) ? + '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">' + . esc_html( get_the_title() ) . '</a>' : + esc_html( get_the_title() ); - if ( is_archive() || is_search() || is_home() ) : - printf( '<a href="%s" rel="bookmark">%s</a>', - esc_url( get_the_permalink() ), - esc_html( get_the_title() ) - ); - else : echo esc_html( get_the_title() ); - endif; - - echo (is_page() ? '</h1>' : '</h2>'); + // 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 )); ?> - <?php if (!is_page()) : ?> - <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;"> - <!-- inline_svg( 'bsi-clock', array( 'div_class' => 'icon baseline me-2' ) ) . --> - <?php - if (get_the_title() === '') { - echo '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">'; - } - echo get_the_date('F j, Y'); - if (get_the_title() === '') { - echo '</a>'; - } - ?> - </div> + <?php // when not a page, we also output the published date + if (!is_page()) : ?> + <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;"> + <?php + if (get_the_title() === '') : + printf( '<a href="%s" rel="bookmark">%s</a>', + esc_url( get_the_permalink() ), + get_the_date('F j, Y') + ); + + else : + echo get_the_date('F j, Y'); + + endif; + ?> + </div> <?php endif; ?> </header> 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 @@ <?php +/** + * standard "page/multi-post index/listing" & "single-blog-post" header styles + */ +function get_page_multi_heading( $content_str = '' ) { + $class = 'fw-light text-gray-400 mb-4 border-bottom border-dashed border-spaceblue-600'; + return '<h1 class="' . $class . '">' . $content_str . '</h1>'; +} +function get_post_single_heading( $content_str = '' ) { + $class = 'fs-2 fw-600 mb-2'; + return '<h2 class="' . $class . '">' . $content_str . '</h2>'; +} + + + /** * 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(); ?> -<main class="rdnyc-single-outer"> +<main class="rdnyc-index-outer"> <div class="content"> - <?php if (!is_singular()) : ?> - <h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600"> - <?php if (is_archive()) : get_the_archive_title(); - else : single_post_title(); - endif; - ?> - </h1> - <?php endif; ?> <?php + // grab search query if there is one + $search_query_str = is_search() ? esc_html( get_search_query() ) : false; + + // output super heading if not singular + if (!is_singular()) { + $title = is_archive() ? get_the_archive_title() : single_post_title( '', false ); + $title = $search_query_str ? "Search results for: “$search_query_str”" : $title; + echo get_page_multi_heading( $title ); + } + + // begin the "if have_posts" section if ( have_posts() ) : while ( have_posts() ) : the_post(); echo get_template_part( 'content-templates/content', 'article' ); endwhile; - ?> - <?php if (!is_singular()) : ?> - <nav class="d-flex justify-content-between" aria-label="Page navigation"> - <div class="nav-previous alignleft"><?php next_posts_link( '← Older' ); ?></div> - <div class="nav-next alignright"><?php previous_posts_link( 'Newer →' ); ?></div> - </nav> - <?php endif; ?> + // output listing pagination if not singular + if (!is_singular()) : ?> + <nav class="d-flex justify-content-between" aria-label="Page navigation"> + <div class="nav-previous alignleft"> + <?php echo inline_svg( 'bsi-chevron-left', array( 'div_class' => 'icon baseline' ) ); ?> + <?php next_posts_link( 'Older' ); ?> + </div> + <div class="nav-next alignright"> + <?php previous_posts_link( 'Newer' ); ?> + <?php echo inline_svg( 'bsi-chevron-right', array( 'div_class' => 'icon baseline' ) ); ?> + </div> + </nav> + <?php endif; - <?php + // if not have_posts, then handle if this is a search page + else : + if ($search_query_str) { echo "Search results for: “$search_query_str”"; } + + // finally, end the "if have_posts" section endif; - ?> - </div> + ?> + + </div> </main> + <?php get_footer('', array('frontpage'=>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 @@ -<?php -/** - * The template for displaying search results pages. - * - * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result - * - * @package WPRDNYC - */ - -get_header(); ?> - -<main class="container d-flex justify-content-center"> - <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3"> - - <?php if (have_posts()) : ?> - <h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed"> - Search results for: <?php echo esc_html( get_search_query() ); ?></h1> - - <?php - while ( have_posts() ) : - the_post(); - echo get_template_part( 'content-templates/content', 'article' ); - endwhile; - ?> - - <nav class="d-flex justify-content-between" aria-label="Page navigation"> - <div class="nav-previous alignleft"><?php next_posts_link( '← Older' ); ?></div> - <div class="nav-next alignright"><?php previous_posts_link( 'Newer →' ); ?></div> - </nav> - - <?php - else : - - echo '<h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed">Search: nothing found</h1>'; - - printf( 'Sorry, no results for %s', - esc_html( get_search_query() ) - ); - endif; - ?> - - </div> -</main> -<?php -get_footer('', array('frontpage'=>false));