From 47e74cc241643a6941659a1ca85f883bc8e9defc Mon Sep 17 00:00:00 2001 From: Adam Piontek <adam@73k.us> Date: Wed, 28 Jul 2021 12:20:00 -0400 Subject: [PATCH] improved responsive layout & other styling --- assets/css/_bs-load.scss | 4 +- ...vbar.scss => _layout-top-navbar-main.scss} | 65 +++++++++++++++++-- ...{_top-nav-burger.scss => _nav-burger.scss} | 11 ++++ assets/css/app.scss | 53 +++++++++++++-- content-templates/content-article.php | 20 ++---- header.php | 2 +- index.php | 28 ++++---- page.php | 54 --------------- 8 files changed, 142 insertions(+), 95 deletions(-) rename assets/css/{_top-navbar.scss => _layout-top-navbar-main.scss} (77%) rename assets/css/{_top-nav-burger.scss => _nav-burger.scss} (87%) delete mode 100644 page.php diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss index c41fb91..2064da5 100644 --- a/assets/css/_bs-load.scss +++ b/assets/css/_bs-load.scss @@ -19,12 +19,12 @@ @import "../../node_modules/bootstrap/scss/images"; @import "../../node_modules/bootstrap/scss/containers"; @import "../../node_modules/bootstrap/scss/grid"; -// @import "../../node_modules/bootstrap/scss/tables"; +@import "../../node_modules/bootstrap/scss/tables"; @import "../../node_modules/bootstrap/scss/forms"; @import "../../node_modules/bootstrap/scss/buttons"; @import "../../node_modules/bootstrap/scss/transitions"; @import "../../node_modules/bootstrap/scss/dropdown"; -// @import "../../node_modules/bootstrap/scss/button-group"; +@import "../../node_modules/bootstrap/scss/button-group"; // @import "../../node_modules/bootstrap/scss/nav"; // @import "../../node_modules/bootstrap/scss/navbar"; @import "../../node_modules/bootstrap/scss/card"; diff --git a/assets/css/_top-navbar.scss b/assets/css/_layout-top-navbar-main.scss similarity index 77% rename from assets/css/_top-navbar.scss rename to assets/css/_layout-top-navbar-main.scss index f43fdd0..7a7fc66 100644 --- a/assets/css/_top-navbar.scss +++ b/assets/css/_layout-top-navbar-main.scss @@ -1,14 +1,71 @@ +/* continaer-fluid modifications */ +.container-fluid { + padding-right: var(--bs-gutter-x, 1rem); + padding-left: var(--bs-gutter-x, 1rem); + @include media-breakpoint-up(md) { + padding-right: var(--bs-gutter-x, 2.75rem); + padding-left: var(--bs-gutter-x, 2.75rem); + } + &:not(.container-lg) { + @include media-breakpoint-up(xl) { + padding-right: var(--bs-gutter-x, 4rem); + padding-left: var(--bs-gutter-x, 4rem); + } + @include media-breakpoint-up(xxl) { + max-width: 1400px; + } + } +} +.container-lg { + @include media-breakpoint-up(xl) { + max-width: 960px; + } +} + +/* + * main section layout + */ +main.rdnyc-single-outer { + @extend .container-lg; + @extend .mt-4; + @extend .mb-3; + @extend .mt-md-4; + @extend .d-flex; + @extend .justify-content-center; +} + /* * top navbar css grid layout */ nav#top-navbar-grid-outer { @extend .container-fluid; - @extend .mt-4; + @include media-breakpoint-down(md) { + margin-top: 1.25rem !important; + } @extend .mt-md-5; @extend .mb-4; - @extend .px-3; - @extend .px-sm-4; - @extend .px-md-5; + @include media-breakpoint-up(sm) { + margin-bottom: 2rem !important; + } + @include media-breakpoint-up(lg) { + margin-bottom: 2.5rem !important; + } + @include media-breakpoint-up(xl) { + margin-bottom: 3rem !important; + } + @include media-breakpoint-up(xxl) { + margin-bottom: 4rem !important; + } + // @include media-breakpoint-up(xxl) { + // margin-bottom: 5rem !important; + // } + // @include media-breakpoint-up(md) { + // padding-right: var(--bs-gutter-x, 1.25rem); + // padding-left: var(--bs-gutter-x, 1.25rem); + // } + // @extend .px-3; + // @extend .px-sm-4; + // @extend .px-md-5; @extend .d-grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto; diff --git a/assets/css/_top-nav-burger.scss b/assets/css/_nav-burger.scss similarity index 87% rename from assets/css/_top-nav-burger.scss rename to assets/css/_nav-burger.scss index c86f2b2..6f0caff 100644 --- a/assets/css/_top-nav-burger.scss +++ b/assets/css/_nav-burger.scss @@ -17,6 +17,17 @@ $hamburger-layer-color: $primary !default; /* import hamburgers sass */ @import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss"; +/* fix button styling from bootstrap */ +button#top-navbar-grid-toggle-button { + -webkit-appearance: inherit; + &:hover, &:active, &:focus { + color: inherit; + background-color: inherit; + border-color: inherit; + box-shadow: inherit; + } +} + // /* correct colors to match bootstrap defaults */ // .navbar-light { // .hamburger { diff --git a/assets/css/app.scss b/assets/css/app.scss index b1493b8..5eabc96 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -8,10 +8,10 @@ @import "svg-icons"; /* Navbar toggler icon override */ -@import "top-nav-burger"; +@import "nav-burger"; -/* Top Navbar styling */ -@import "top-navbar"; +/* Navbar & Main layout styling */ +@import "layout-top-navbar-main"; /* main */ html, @@ -20,6 +20,8 @@ body { background-color: $spaceblue-800; height: 100%; } + +/* links */ a { @extend .text-decoration-none; &:hover { @@ -28,6 +30,7 @@ a { } } + /* general additional text style */ .font-family-handbrush { font-family: $font-family-handbrush; @@ -62,7 +65,7 @@ a { /* general additional spacing style */ .mb-two-rem { - margin-bottom: 2rem; + margin-bottom: 2rem !important; } /* general additional border style */ @@ -100,6 +103,9 @@ article.post.sticky { border-bottom: inherit !important; margin-bottom: inherit !important; padding-bottom: inherit !important; + &.mb-two-rem { + margin-bottom: 2rem !important; + } header.post-header { @extend .card-header; @extend .pb-0; @@ -174,6 +180,7 @@ article.post.sticky { /* blockquote handling */ +blockquote, blockquote.wp-block-quote { background-color: tint-color($spaceblue-800, 5%) !important; @extend .border-start; @@ -210,6 +217,10 @@ blockquote.wp-block-quote { } } figure.wp-block-pullquote { + // @extend .my-3; + // @extend .py-3; + margin: 2em !important; + @extend .p-5; &:not(.is-style-solid-color) { background-color: tint-color($spaceblue-800, 5%) !important; @extend .border-top; @@ -217,10 +228,23 @@ figure.wp-block-pullquote { @extend .border-5; border-top-color: tint-color($spaceblue-800, 15%) !important; border-bottom-color: tint-color($spaceblue-800, 15%) !important; + & blockquote { + background-color: none !important; + border: none !important; + } + } + & blockquote { + @extend .m-0; + @extend .p-0; + background-color: inherit !important; + border: inherit !important; } } /* other wp styling */ +.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img { + height: auto; +} .btn-primary { color: $spaceblue-800; } @@ -250,7 +274,21 @@ figure.wp-block-pullquote { @extend .text-end; } } - +table { + @extend .table; + @extend .table-dark; +} +.wp-block-table { + table { + @extend .table; + @extend .table-dark; + } + &.is-style-stripes { + table { + @extend .table-striped; + } + } +} // &:not(.is-style-outline) { // @extend .btn-primary; @@ -386,4 +424,7 @@ form button { } select { @extend .form-select; -} \ No newline at end of file +} +.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; +} diff --git a/content-templates/content-article.php b/content-templates/content-article.php index 9ce611e..6f99b13 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -9,7 +9,10 @@ namespace WP_RDNYC; ?> -<article <?php echo post_class( 'post border-bottom border-gray-750 pb-4 mb-two-rem' ); ?> itemscope itemtype="https://schema.org/CreativeWork"> +<article <?php $extra_post_class = is_singular() ? '' : ' mb-two-rem'; + echo post_class( 'post border-bottom border-gray-750 pb-4' . $extra_post_class ); ?> + itemscope itemtype="https://schema.org/CreativeWork"> + <header class="post-header"> <h2 class="post-title fs-2 fw-600 mb-2"> <?php @@ -28,25 +31,12 @@ namespace WP_RDNYC; <?php echo get_the_date('F j, Y'); ?> </div> - <!-- < ?php - if (has_tag()) { - echo '<div class="post-tags fs-smaller mb-4">'; - // 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>'; - }, get_the_tags()); - - echo implode(", ", $tag_strings) . '</div>'; - } - ?> --> - </header> <div class="article post-body"> <?php if ( has_post_thumbnail() ) { - echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] ); + echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow mb-3 mw-100 h-auto'] ); } the_content(); ?> diff --git a/header.php b/header.php index d2588f5..e0712c7 100644 --- a/header.php +++ b/header.php @@ -39,7 +39,7 @@ namespace WP_RDNYC; <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> - <nav id="top-navbar-grid-outer"> + <nav id="top-navbar-grid-outer" class="container-fluid"> <div id="top-navbar-grid-brand-outer"> <h1> diff --git a/index.php b/index.php index f0d69e0..bcaa1fd 100644 --- a/index.php +++ b/index.php @@ -9,34 +9,36 @@ namespace WP_RDNYC; get_header(); ?> -<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"> +<main class="rdnyc-single-outer"> + <?php if (!is_singular()) : ?> <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; ?> - <?php - if ( have_posts() ) : - while ( have_posts() ) : - the_post(); - echo get_template_part( 'content-templates/content', 'article' ); - endwhile; - ?> + <?php + 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; ?> - <?php - endif; - ?> + <?php + endif; + ?> - </div> </main> <?php get_footer('', array('frontpage'=>false)); diff --git a/page.php b/page.php deleted file mode 100644 index 0f10dcd..0000000 --- a/page.php +++ /dev/null @@ -1,54 +0,0 @@ -<?php -/** - * The default single page template. - * - * @author Recovery Dharma NYC - * @since 1.0.0 - */ - -namespace WP_RDNYC; - -get_header(); ?> -<main class="container-fluid d-flex"> - <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3"> - - <?php - if ( have_posts() ) { - while ( have_posts() ) { - the_post(); ?> - - <article itemscope itemtype="https://schema.org/CreativeWork"> - - <header> - <h2 class="fs-2 fw-600 mb-0"> - <?php - if ( is_archive() || is_home() ) { - printf( '<a href="%s" rel="bookmark">%s</a>', - esc_url( get_the_permalink() ), - esc_html( get_the_title() ) - ); - } else { - echo get_the_title(); - } ?> - </h2> - </header> - - <div class="article"> - <?php - if ( has_post_thumbnail() ) { - echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] ); - } - - the_content(); ?> - </div> - - </article> - - <?php - } - } ?> - - </div> -</main> -<?php -get_footer();