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

improved responsive layout & other styling

Browse source
This commit is contained in:
Adam Piontek 2021-07-28 12:20:00 -04:00
parent da0fd03678
commit 47e74cc241
8 changed files with 142 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/_bs-load.scss
View file

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

65
assets/css/_top-navbar.scss → assets/css/_layout-top-navbar-main.scss
View file

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

11
assets/css/_top-nav-burger.scss → assets/css/_nav-burger.scss
View file

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

53
assets/css/app.scss
View file

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

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

@ -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(); ?>

2
header.php
View file

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

28
index.php
View file

@ -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( '&larr; Older' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></div>
</nav>
<?php endif; ?>
<?php
endif;
?>
<?php
endif;
?>
</div>
</main>
<?php
get_footer('', array('frontpage'=>false));

54
page.php
View file

@ -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();