From 64598f4aad6cbb14a83ae3aa1fb115dc884c622d Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Tue, 27 Jul 2021 19:12:18 -0400 Subject: [PATCH] progress on styling news/blog listing & content --- assets/css/_bs-colors.scss | 2 + assets/css/_bs-custom.scss | 10 +- assets/css/_fonts.scss | 40 +-- ...{_nav-burger.scss => _top-nav-burger.scss} | 0 .../{_nav-bar-help.scss => _top-navbar.scss} | 2 +- assets/css/app.scss | 280 +++++++++++++----- assets/js/main.js | 8 +- content-templates/content-article.php | 18 +- custom-functions.php | 5 +- header.php | 2 +- index.php | 11 +- package-lock.json | 14 +- package.json | 2 +- searchform.php | 2 +- src/classes.php | 21 +- 15 files changed, 282 insertions(+), 135 deletions(-) rename assets/css/{_nav-burger.scss => _top-nav-burger.scss} (100%) rename assets/css/{_nav-bar-help.scss => _top-navbar.scss} (98%) diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss index 33f9f70..0fdcded 100644 --- a/assets/css/_bs-colors.scss +++ b/assets/css/_bs-colors.scss @@ -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; diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 076f353..ed210d7 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -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; diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss index 731c919..55054cd 100644 --- a/assets/css/_fonts.scss +++ b/assets/css/_fonts.scss @@ -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 */ diff --git a/assets/css/_nav-burger.scss b/assets/css/_top-nav-burger.scss similarity index 100% rename from assets/css/_nav-burger.scss rename to assets/css/_top-nav-burger.scss diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_top-navbar.scss similarity index 98% rename from assets/css/_nav-bar-help.scss rename to assets/css/_top-navbar.scss index e830d44..f43fdd0 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_top-navbar.scss @@ -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; diff --git a/assets/css/app.scss b/assets/css/app.scss index 3f5f443..1409f26 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -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; +// // } +// } +// } diff --git a/assets/js/main.js b/assets/js/main.js index 45222ff..4afd742 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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'; diff --git a/content-templates/content-article.php b/content-templates/content-article.php index 0a12565..9ce611e 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -9,8 +9,8 @@ namespace WP_RDNYC; ?> -
-
+
itemscope itemtype="https://schema.org/CreativeWork"> +

-
- +
+ +
- '; - // 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 '#' . $tag->name . ''; @@ -41,7 +39,7 @@ namespace WP_RDNYC; echo implode(", ", $tag_strings) . '
'; } - ?> + ?> -->
diff --git a/custom-functions.php b/custom-functions.php index 018b9b4..2ff0681 100644 --- a/custom-functions.php +++ b/custom-functions.php @@ -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(' - + diff --git a/index.php b/index.php index 55663f6..f0d69e0 100644 --- a/index.php +++ b/index.php @@ -9,14 +9,17 @@ namespace WP_RDNYC; get_header(); ?> -
+
- -

+

+ +

=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", diff --git a/package.json b/package.json index 51cf9a1..9106175 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/searchform.php b/searchform.php index fecf046..2a96149 100644 --- a/searchform.php +++ b/searchform.php @@ -20,7 +20,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
-
diff --git a/src/classes.php b/src/classes.php index 4be1d62..b99a08c 100644 --- a/src/classes.php +++ b/src/classes.php @@ -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
  • 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 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 '
    ' + . 'Read More…
    '; +}); + + + + /** * custom walker to handle nav main menu dropdowns (one level deep, bs5 doesn't have native submenu support) */