more styling & layout improvements

This commit is contained in:
Adam Piontek 2021-07-28 22:51:24 -04:00
parent 3eab6277ae
commit a666face00
8 changed files with 216 additions and 233 deletions

View file

@ -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;
}
}

View file

@ -25,7 +25,7 @@
/* /*
* main section layout * main section layout
*/ */
main.rdnyc-single-outer { main.rdnyc-index-outer {
@extend .container-lg; @extend .container-lg;
@extend .mt-4; @extend .mt-4;
@extend .mb-3; @extend .mb-3;

View file

@ -7,6 +7,9 @@
/*SVG ICON SYSTEM*/ /*SVG ICON SYSTEM*/
@import "svg-icons"; @import "svg-icons";
/* Basic style additions */
@import "basic-additions";
/* Navbar toggler icon override */ /* Navbar toggler icon override */
@import "nav-burger"; @import "nav-burger";
@ -22,10 +25,11 @@ body {
} }
/* links */ /* links */
a { a,
// @extend .text-decoration-none; #tsml a {
@extend .text-decoration-underline;
color: $gray-200; color: $gray-200;
&:hover { &:hover, &:focus {
// @extend .text-decoration-underline; // @extend .text-decoration-underline;
color: $primary; color: $primary;
text-decoration-color: $gray-200 !important; 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 */ /* post styling */
article.post.sticky { article.post.sticky {
@ -136,12 +61,17 @@ article.post.sticky {
} }
} }
} }
.post-header { header.post-header {
.post-title, .post-title a { h1, h2, h1 a, h2 a {
-ms-word-wrap: break-word; -ms-word-wrap: break-word;
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 { .more-link-outer {
@extend .text-end; @extend .text-end;
@ -315,83 +245,71 @@ table,
/* search form */ /* forms and search */
.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;
}
label { label {
@extend .form-label; @extend .form-label;
} }
input,
.wp-block-search .wp-block-search__input, .form-control,
form input { input.form-control {
@extend .form-control; color: $gray-200;
background-color: $spaceblue-900 !important;
border-color: $spaceblue-600;
&:focus { &:focus {
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
color: $gray-200;
} }
&::-ms-clear &::-ms-clear,
&::-ms-reveal { display: none; } &::-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; color: $spaceblue-700 !important;
} }
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
color: $spaceblue-700 !important;
opacity: 1;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */ &::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $spaceblue-700 !important; color: $spaceblue-700 !important;
opacity: 1; 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; color: $spaceblue-700 !important;
} }
&::-ms-input-placeholder { /* Microsoft Edge */ &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
color: $spaceblue-700 !important; &::-moz-placeholder { /* Mozilla Firefox 19+ */
}
&::placeholder { /* Most modern browsers support this now. */
color: $spaceblue-700 !important; color: $spaceblue-700 !important;
opacity: 1;
} }
} }
button, button,
.wp-block-search .wp-block-search__button, .wp-block-search .wp-block-search__button,
form button { form button {
@extend .btn; @extend .btn;
@extend .btn-primary; @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 { .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; box-shadow: inherit;
} }
select {
@extend .form-select;
}

View file

@ -5,8 +5,9 @@ import '../css/app.scss'
import '../raw/rdnyc-logo.svg'; // rdnyc logo import '../raw/rdnyc-logo.svg'; // rdnyc logo
// other: // other:
import '../../node_modules/bootstrap-icons/icons/chevron-down.svg'; 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/search.svg';
// import '../../node_modules/bootstrap-icons/icons/person.svg';
// Import Bootstrap JS // Import Bootstrap JS
import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/collapse';

View file

@ -8,43 +8,44 @@
namespace WP_RDNYC; 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 <article id="post-<?php the_ID(); ?>" class="<?php echo $post_class; ?>" itemscope itemtype="https://schema.org/CreativeWork">
$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">
<header class="post-header"> <header class="post-header">
<?php <?php
echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">' // post/page header inner content (title, with link for query/index listings)
: '<h2 class="post-title fs-2 fw-600 mb-2">'); $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() ) : // For pages we want a larger heading like an index/query listing
printf( '<a href="%s" rel="bookmark">%s</a>', // otherwise, a regular article/post header
esc_url( get_the_permalink() ), echo (is_page() ? get_page_multi_heading( $h_inner ) : get_post_single_heading( $h_inner ));
esc_html( get_the_title() )
);
else : echo esc_html( get_the_title() );
endif;
echo (is_page() ? '</h1>' : '</h2>');
?> ?>
<?php if (!is_page()) : ?> <?php // when not a page, we also output the published date
<div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;"> if (!is_page()) : ?>
<!-- inline_svg( 'bsi-clock', array( 'div_class' => 'icon baseline me-2' ) ) . --> <div class="post-date text-gray-400 mb-3" style="margin-top: -.33rem;">
<?php <?php
if (get_the_title() === '') { if (get_the_title() === '') :
echo '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">'; printf( '<a href="%s" rel="bookmark">%s</a>',
} esc_url( get_the_permalink() ),
echo get_the_date('F j, Y'); get_the_date('F j, Y')
if (get_the_title() === '') { );
echo '</a>';
} else :
?> echo get_the_date('F j, Y');
</div>
endif;
?>
</div>
<?php endif; ?> <?php endif; ?>
</header> </header>

View file

@ -1,5 +1,19 @@
<?php <?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 * example inline SVG function atts array supported keys
*/ */

View file

@ -9,38 +9,53 @@
namespace WP_RDNYC; namespace WP_RDNYC;
get_header(); ?> get_header(); ?>
<main class="rdnyc-single-outer">
<main class="rdnyc-index-outer">
<div class="content"> <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 <?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: &#8220;$search_query_str&#8221;" : $title;
echo get_page_multi_heading( $title );
}
// begin the "if have_posts" section
if ( have_posts() ) : if ( have_posts() ) :
while ( have_posts() ) : while ( have_posts() ) :
the_post(); the_post();
echo get_template_part( 'content-templates/content', 'article' ); echo get_template_part( 'content-templates/content', 'article' );
endwhile; endwhile;
?>
<?php if (!is_singular()) : ?> // output listing pagination if not singular
<nav class="d-flex justify-content-between" aria-label="Page navigation"> if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( '&larr; Older' ); ?></div> <nav class="d-flex justify-content-between" aria-label="Page navigation">
<div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></div> <div class="nav-previous alignleft">
</nav> <?php echo inline_svg( 'bsi-chevron-left', array( 'div_class' => 'icon baseline' ) ); ?>
<?php endif; ?> <?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: &#8220;$search_query_str&#8221;"; }
// finally, end the "if have_posts" section
endif; endif;
?>
</div>
?>
</div>
</main> </main>
<?php <?php
get_footer('', array('frontpage'=>false)); get_footer('', array('frontpage'=>false));

View file

@ -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( '&larr; Older' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></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));