progress on styling news/blog listing & content

This commit is contained in:
Adam Piontek 2021-07-27 19:12:18 -04:00
parent ae29e9d98d
commit 64598f4aad
15 changed files with 282 additions and 135 deletions

View file

@ -32,7 +32,9 @@ $spaceblue-400: #5d79ac;
$spaceblue-500: #4c6594;
$spaceblue-600: #3e5379;
$spaceblue-700: #31415e;
$spaceblue-750: #2a3751;
$spaceblue-800: #212c40;
$spaceblue-850: #1c2536;
$spaceblue-900: #151c28;
$light: $spaceblue-200;

View file

@ -6,11 +6,10 @@ $line-height-base: 1.35;
$line-height-sm: 1.15;
$line-height-lg: 1.75;
// 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
$font-family-sans-serif:
// custom theme font
Overpass,
"Open Sans",
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
@ -30,10 +29,11 @@ $font-family-sans-serif:
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
$font-family-base: $font-family-sans-serif;
// handbrush / handwriting / special / emphasis font stack
$font-family-handbrush: "Permanent Marker", Caveat, Besom, Fjord, "Goudy Old Style", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
// handbrush / special / emphasis / impact font stack
$font-family-handbrush: "Permanent Marker", Besom, Fjord, Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
// base bootstrap font
$font-family-base: $font-family-sans-serif;
// Features
$enable-shadows: true;

View file

@ -1,21 +1,23 @@
/* font-family-sans-serif : Fontsource Open Sans */
// @import "../../node_modules/@fontsource/open-sans/100.css"; /* Thin (Hairline) | normal */
// @import "../../node_modules/@fontsource/open-sans/100-italic.css"; /* Thin (Hairline) | italic */
// @import "../../node_modules/@fontsource/open-sans/200.css"; /* Extra Light (Ultra Light) | normal */
// @import "../../node_modules/@fontsource/open-sans/200-italic.css"; /* Extra Light (Ultra Light) | italic */
@import "../../node_modules/@fontsource/open-sans/300.css"; /* Light | normal */
@import "../../node_modules/@fontsource/open-sans/300-italic.css"; /* Light | italic */
@import "../../node_modules/@fontsource/open-sans/400.css"; /* Normal (Regular) | normal */
@import "../../node_modules/@fontsource/open-sans/400-italic.css"; /* Normal (Regular) | italic */
// @import "../../node_modules/@fontsource/open-sans/500.css"; /* Medium | normal */
// @import "../../node_modules/@fontsource/open-sans/500-italic.css"; /* Medium | italic */
@import "../../node_modules/@fontsource/open-sans/600.css"; /* Semi Bold (Demi Bold) | normal */
@import "../../node_modules/@fontsource/open-sans/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
@import "../../node_modules/@fontsource/open-sans/700.css"; /* Bold | normal */
@import "../../node_modules/@fontsource/open-sans/700-italic.css"; /* Bold | italic */
@import "../../node_modules/@fontsource/open-sans/800.css"; /* Extra Bold (Ultra Bold) | normal */
@import "../../node_modules/@fontsource/open-sans/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
// @import "../../node_modules/@fontsource/open-sans/900.css"; /* Black (Heavy) | normal */
// @import "../../node_modules/@fontsource/open-sans/900-italic.css"; /* Black (Heavy) | italic */
/* emphasis/special : Fontsource Permanent Marker */
@import "../../node_modules/@fontsource/permanent-marker/400.css"; /* Normal (Regular) | normal */
/* font-family-sans-serif : Fontsource Overpass */
@import "../../node_modules/@fontsource/overpass/100.css"; /* Thin (Hairline) | normal */
@import "../../node_modules/@fontsource/overpass/100-italic.css"; /* Thin (Hairline) | italic */
@import "../../node_modules/@fontsource/overpass/200.css"; /* Extra Light (Ultra Light) | normal */
@import "../../node_modules/@fontsource/overpass/200-italic.css"; /* Extra Light (Ultra Light) | italic */
@import "../../node_modules/@fontsource/overpass/300.css"; /* Light | normal */
@import "../../node_modules/@fontsource/overpass/300-italic.css"; /* Light | italic */
@import "../../node_modules/@fontsource/overpass/400.css"; /* Normal (Regular) | normal */
@import "../../node_modules/@fontsource/overpass/400-italic.css"; /* Normal (Regular) | italic */
@import "../../node_modules/@fontsource/overpass/600.css"; /* Semi Bold (Demi Bold) | normal */
@import "../../node_modules/@fontsource/overpass/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
@import "../../node_modules/@fontsource/overpass/700.css"; /* Bold | normal */
@import "../../node_modules/@fontsource/overpass/700-italic.css"; /* Bold | italic */
@import "../../node_modules/@fontsource/overpass/800.css"; /* Extra Bold (Ultra Bold) | normal */
@import "../../node_modules/@fontsource/overpass/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
@import "../../node_modules/@fontsource/overpass/900.css"; /* Black (Heavy) | normal */
@import "../../node_modules/@fontsource/overpass/900-italic.css"; /* Black (Heavy) | italic */

View file

@ -174,7 +174,7 @@ nav#top-navbar-grid-outer {
li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal;
padding: 0.25rem 1rem 0 1rem !important;
// padding: 0.25rem 1rem 0 1rem !important;
text-transform: inherit !important;
&:hover {
@extend .text-decoration-none;

View file

@ -8,10 +8,10 @@
@import "svg-icons";
/* Navbar toggler icon override */
@import "nav-burger";
@import "top-nav-burger";
/* Navbar custom styling */
@import "nav-bar-help";
/* Top Navbar styling */
@import "top-navbar";
/* main */
html,
@ -20,6 +20,108 @@ body {
background-color: $spaceblue-800;
height: 100%;
}
a {
@extend .text-decoration-none;
&:hover {
@extend .text-decoration-underline;
color: $primary;
}
}
/* general additional text style */
.font-family-handbrush {
font-family: $font-family-handbrush;
}
.text-gray-100 {
color: $gray-100;
}
.text-gray-200 {
color: $gray-200;
}
.text-gray-300 {
color: $gray-300;
}
.text-gray-400 {
color: $gray-400;
}
.text-gray-500 {
color: $gray-500;
}
.text-gray-600 {
color: $gray-600;
}
.text-gray-700 {
color: $gray-700;
}
.fs-larger {
font-size: larger;
}
.fs-smaller {
font-size: smaller;
}
/* general additional spacing style */
.mb-two-rem {
margin-bottom: 2rem;
}
/* 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-750 {
border-bottom-color: $gray-750 !important;
}
&.border-gray-800 {
border-bottom-color: $gray-800 !important;
}
}
/* post styling */
article.post.sticky {
@extend .card;
background-color: shade-color($gray-800, 50%);
border-bottom: inherit !important;
margin-bottom: inherit !important;
padding-bottom: inherit !important;
header.post-header {
@extend .card-header;
@extend .pb-0;
}
div.post-body {
@extend .card-body;
@extend .pt-0;
&:last-child {
padding-bottom: 0 !important;
margin-bottom: .25rem !important;
}
}
}
.more-link-outer {
@extend .text-end;
@extend .mb-0;
.more-link {
@extend .text-decoration-none;
@extend .font-family-handbrush;
}
}
// a {
// color: rgba($white, 0.75);
// // border-bottom: $gray-600 2px solid;
@ -54,18 +156,6 @@ body {
// .border-gray-900 {
// border-color: $gray-900 !important;
// }
.text-gray-200 {
color: $gray-200;
}
.text-gray-300 {
color: $gray-300;
}
.text-gray-400 {
color: $gray-400;
}
.text-gray-500 {
color: $gray-500;
}
// .border-10 {
// border-width: 10px !important;
// }
@ -81,47 +171,93 @@ body {
// .fw-600 {
// font-weight: 600;
// }
// .fs-larger {
// font-size: larger;
// }
// .fs-smaller {
// font-size: smaller;
// }
/* blockquote handling */
blockquote {
&.wp-block-quote {
@extend .border-start;
@extend .border-gray;
@extend .border-5;
@extend .ms-0;
@extend .my-4;
@extend .ps-3;
@extend .py-2;
background-color: $gray-750;
p {
@extend .blockquote;
font-size: 1em;
&:last-of-type {
@extend .my-0;
@extend .py-0;
}
}
cite {
@extend .blockquote-footer;
@extend .text-gray-300;
blockquote.wp-block-quote {
background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-start;
@extend .border-5;
border-left-color: tint-color($spaceblue-800, 15%) !important;
@extend .ms-0;
@extend .my-4;
@extend .px-3;
@extend .py-2;
quotes: "\201C" "\201D" "\201C" "\201D";
position: relative;
p {
@extend .blockquote;
&:last-of-type {
@extend .my-0;
@extend .py-0;
font-size: 0.85em;
font-style: normal;
}
:last-child {
@extend .py-1;
}
&.is-style-large {
p {
font-size: 1.7em;
}
}
cite {
@extend .blockquote-footer;
@extend .text-gray-300;
@extend .my-0;
@extend .py-0;
font-size: 0.85em;
font-style: normal;
}
&:last-child {
@extend .py-1;
}
}
figure.wp-block-pullquote {
&:not(.is-style-solid-color) {
background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-top;
@extend .border-bottom;
@extend .border-5;
border-top-color: tint-color($spaceblue-800, 15%) !important;
border-bottom-color: tint-color($spaceblue-800, 15%) !important;
}
}
/* other wp styling */
.btn-primary {
color: $spaceblue-800;
}
.has-drop-cap:not(:focus)::first-letter {
font-size: 5em;
margin: 0.05em 0.05em 0 0;
}
.wp-block-button {
.wp-block-button__link {
@extend .btn;
@extend .text-decoration-none;
@extend .mb-1;
}
&:not(.is-style-outline) .wp-block-button__link {
@extend .btn-primary;
}
&.is-style-outline .wp-block-button__link {
@extend .btn-outline-primary;
}
&.alignleft {
@extend .text-start;
}
&.aligncenter {
@extend .text-center;
}
&.alignright {
@extend .text-end;
}
}
// &:not(.is-style-outline) {
// @extend .btn-primary;
// }
// &.is-style-outline {
// @extend .btn-outline-primary;
// }
// /* blog */
// .post-title a {
@ -177,8 +313,8 @@ blockquote {
/* search form */
.search-form .form-control {
color: $gray-100 !important;
background-color: $gray-800 !important;
border-color: $gray-500;
background-color: $spaceblue-900 !important;
border-color: $spaceblue-600;
}
.search-form .form-control:focus {
border-color: $input-focus-border-color;
@ -188,40 +324,40 @@ 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: $gray-500 !important;
color: $spaceblue-700 !important;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $gray-500 !important;
color: $spaceblue-700 !important;
opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $gray-500 !important;
color: $spaceblue-700 !important;
opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $gray-500 !important;
color: $spaceblue-700 !important;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
color: $gray-500 !important;
color: $spaceblue-700 !important;
}
.form-control::placeholder { /* Most modern browsers support this now. */
color: $gray-500 !important;
}
.search-form {
.btn {
padding: .25rem .75rem;
&.btn-outline-light {
color: $gray-300;
border-color: $gray-500;
&:hover {
color: $primary;
background-color: inherit;
border-color: $secondary;
}
}
.icon {
font-size: 1.375rem;
margin-top: 1px;
}
}
color: $spaceblue-700 !important;
}
// .search-form {
// .btn {
// padding: .25rem .75rem;
// &.btn-outline-light {
// color: $gray-300;
// border-color: $spaceblue-500;
// &:hover {
// color: $primary;
// background-color: inherit;
// border-color: $secondary;
// }
// }
// // .icon {
// // font-size: 1.375rem;
// // margin-top: 1px;
// // }
// }
// }

View file

@ -6,13 +6,7 @@ import '../raw/rdnyc-logo.svg'; // rdnyc logo
// other:
import '../../node_modules/bootstrap-icons/icons/chevron-down.svg';
import '../../node_modules/bootstrap-icons/icons/search.svg';
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
// import "../../node_modules/@mdi/svg/svg/home.svg";
// import "../../node_modules/@mdi/svg/svg/information.svg";
// import "../../node_modules/@mdi/svg/svg/account.svg";
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
// import "../../node_modules/@mdi/svg/svg/rss.svg";
// import '../../node_modules/bootstrap-icons/icons/person.svg';
// Import Bootstrap JS
import 'bootstrap/js/dist/collapse';

View file

@ -9,8 +9,8 @@
namespace WP_RDNYC;
?>
<article class="post border-bottom border-gray pb-4 mb-3" itemscope itemtype="https://schema.org/CreativeWork">
<header>
<article <?php echo post_class( 'post border-bottom border-gray-750 pb-4 mb-two-rem' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
<header class="post-header">
<h2 class="post-title fs-2 fw-600 mb-2">
<?php
if ( is_archive() || is_search() || is_home() ) {
@ -23,17 +23,15 @@ namespace WP_RDNYC;
} ?>
</h2>
<div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
<?php
// echo svg_icon_use("mdi-calendar-clock", "baseline me-2") . get_the_date('F j, Y');
// echo ' by ' . svg_icon_use("mdi-account", "baseline me-1") . get_the_author();
?>
<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 echo get_the_date('F j, Y'); ?>
</div>
<?php
<!-- < ?php
if (has_tag()) {
echo '<div class="post-tags fs-smaller mb-4">';
// echo svg_icon_use("mdi-tag-multiple", "baseline text-gray-300 me-1");
// echo inline_svg( 'bsi-tags', array( 'div_class' => 'icon baseline text-gray-300 me-1' ) );
$tag_strings = array_map(function ($tag) {
return '<span class="text-gray-300">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';
@ -41,7 +39,7 @@ namespace WP_RDNYC;
echo implode(", ", $tag_strings) . '</div>';
}
?>
?> -->
</header>

View file

@ -29,11 +29,8 @@ function inline_svg( $svg_name, $atts = array() ) {
// load initial svg content
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
// set svg class
$class_target = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
// replace svg class
$svg_content = str_replace($class_target, $svg_class, $svg_content);
$svg_content = str_replace('{{class-placeholder}}', $svg_class, $svg_content);
// handle if role=img
$svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;

View file

@ -20,7 +20,7 @@ namespace WP_RDNYC;
<meta name="description" content="Recovery Dharma NYC: a peer-led movement using Buddhist practices and principles to overcome addiction through meditation, personal inquiry, and community">
<link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/overpass-latin-400-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/open-sans-latin-400-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<?php echo get_stylesheet_directory_uri() . '/dist/fonts/permanent-marker-latin-400-normal.woff2'; ?>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri() . '/dist/images/apple-touch-icon.png'; ?>">

View file

@ -9,14 +9,17 @@
namespace WP_RDNYC;
get_header(); ?>
<main class="container-fluid">
<main class="container d-flex justify-content-center mt-3">
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
<?php if (is_archive()) : ?>
<h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed"><?= get_the_archive_title(); ?></h1>
<h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">
<?php if (is_archive()) : get_the_archive_title();
else : single_post_title();
endif;
?>
</h1>
<?php
endif;
if ( have_posts() ) :
while ( have_posts() ) :
the_post();

14
package-lock.json generated
View file

@ -9,7 +9,7 @@
"version": "1.0.1",
"license": "ISC",
"dependencies": {
"@fontsource/overpass": "^4.x",
"@fontsource/open-sans": "^4.x",
"@fontsource/permanent-marker": "^4.x",
"@popperjs/core": "^2.x",
"bootstrap": "^5.x",
@ -1576,10 +1576,10 @@
"node": ">=10.0.0"
}
},
"node_modules/@fontsource/overpass": {
"node_modules/@fontsource/open-sans": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.0.tgz",
"integrity": "sha512-UEf8emYYzXWsGXMON+Q3ovzAZDcLbRO+dYa0eS6FqEHVYvtJUiEfultXTOTKc4FauJ0zoktjZpAhKH49XI3tRg=="
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.0.tgz",
"integrity": "sha512-49+A0IkTTv3cpS1YecrZNCqvlVTThUt/qioiAIZsXfgC3TqavgRqwXXvroXmhVeP/f0sqZw5CRDMS1Hj4aSTbQ=="
},
"node_modules/@fontsource/permanent-marker": {
"version": "4.5.0",
@ -8862,10 +8862,10 @@
"integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
"dev": true
},
"@fontsource/overpass": {
"@fontsource/open-sans": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-4.5.0.tgz",
"integrity": "sha512-UEf8emYYzXWsGXMON+Q3ovzAZDcLbRO+dYa0eS6FqEHVYvtJUiEfultXTOTKc4FauJ0zoktjZpAhKH49XI3tRg=="
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.0.tgz",
"integrity": "sha512-49+A0IkTTv3cpS1YecrZNCqvlVTThUt/qioiAIZsXfgC3TqavgRqwXXvroXmhVeP/f0sqZw5CRDMS1Hj4aSTbQ=="
},
"@fontsource/permanent-marker": {
"version": "4.5.0",

View file

@ -11,7 +11,7 @@
"build": "concurrently \"npm run prod\" \"npm run dev\""
},
"dependencies": {
"@fontsource/overpass": "^4.x",
"@fontsource/open-sans": "^4.x",
"@fontsource/permanent-marker": "^4.x",
"@popperjs/core": "^2.x",
"bootstrap": "^5.x",

View file

@ -20,7 +20,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
<div class="d-flex flex-nowrap">
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
<button type="submit" class="btn btn-outline-light" title="Search">
<button type="submit" class="btn btn-primary" title="Search">
<?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?>
</button>
</div>

View file

@ -7,11 +7,14 @@
*/
namespace WP_RDNYC;
use \Walker_Nav_Menu;
add_filter( 'body_class', function( $classes ) {
/**
* Filter to add special body class for front page & singular posts/pages
*/
add_filter( 'body_class', function( $classes ) {
if ( is_singular( ['post', 'page'] ) ) {
$classes[] = 'singular';
}
@ -21,9 +24,9 @@ add_filter( 'body_class', function( $classes ) {
}
return $classes;
});
/**
* Filter to add CSS class to navbar menu <li> items
*/
@ -36,6 +39,7 @@ add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
return $classes;
}, 3, 4 );
/**
* Filter to add CSS class to navbar menu item <a> links
*/
@ -53,6 +57,17 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
}, 2, 3 );
/**
* filter to globally alter the '(more...)' text of the post excertp "read more" link
*/
add_filter( 'the_content_more_link', function () {
return '<div class="more-link-outer"><a class="btn btn-primary btn-sm more-link" href="' . get_permalink() . '">'
. '<span aria-label="Continue reading ' . get_the_title() . '">Read More&hellip;</span></a></div>';
});
/**
* custom walker to handle nav main menu dropdowns (one level deep, bs5 doesn't have native submenu support)
*/