improved responsive layout & other styling
This commit is contained in:
parent
da0fd03678
commit
47e74cc241
8 changed files with 142 additions and 95 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -387,3 +425,6 @@ 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(); ?>
|
||||
|
|
|
|||
|
|
@ -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
28
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));
|
||||
|
|
|
|||
54
page.php
54
page.php
|
|
@ -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();
|
||||
Loading…
Reference in a new issue