adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

more styling & layout improvements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

79
assets/css/_basic-additions.scss Normal file
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;
}
}

2
assets/css/_layout-top-navbar-main.scss
View file

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

192
assets/css/app.scss
View file

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

3
assets/js/main.js
View file

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

61
content-templates/content-article.php
View file

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

14
custom-functions.php
View file

@ -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
View file

@ -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: &#8220;$search_query_str&#8221;" : $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( '&larr; Older' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></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: &#8220;$search_query_str&#8221;"; }
// finally, end the "if have_posts" section
endif;
?>
</div>
?>
</div>
</main>
<?php
get_footer('', array('frontpage'=>false));

45
search.php
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));