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

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