more styling & layout improvements
This commit is contained in:
parent
3eab6277ae
commit
a666face00
8 changed files with 216 additions and 233 deletions
79
assets/css/_basic-additions.scss
Normal file
79
assets/css/_basic-additions.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
/*
|
||||
* main section layout
|
||||
*/
|
||||
main.rdnyc-single-outer {
|
||||
main.rdnyc-index-outer {
|
||||
@extend .container-lg;
|
||||
@extend .mt-4;
|
||||
@extend .mb-3;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
53
index.php
53
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));
|
||||
|
|
|
|||
45
search.php
45
search.php
|
|
@ -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));
|
||||
Loading…
Reference in a new issue