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

streamlined & improved css for smaller compiled css file and more efficient styling

Browse source
This commit is contained in:
Adam Piontek 2021-08-03 12:42:29 -04:00
parent 0286759b4a
commit b381f0fa43
16 changed files with 311 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/css/_basic-additions.scss
View file

@ -1,7 +1,4 @@
/* general additional text style */ /* general additional text style */
.font-family-handbrush {
font-family: $font-family-handbrush;
}
.text-gray-100 { .text-gray-100 {
color: $gray-100 !important; color: $gray-100 !important;
} }
@ -24,15 +21,17 @@
color: $gray-700 !important; color: $gray-700 !important;
} }
.fs-larger { .fs-larger {
font-size: larger; font-size: larger !important;
} }
.fs-smaller { .fs-smaller {
font-size: smaller; font-size: smaller !important;
} }
/* general additional spacing style */ /* general additional spacing style */
.mb-two-rem { .mt-ltmd-125 {
margin-bottom: 2rem !important; @include media-breakpoint-down(md) {
margin-top: 1.25rem !important;
}
} }
/* general additional border style */ /* general additional border style */

34
assets/css/_bs-custom-post.scss
View file

@ -7,40 +7,6 @@ $link-decoration: underline;
$link-shade-percentage: 20%; $link-shade-percentage: 20%;
$link-hover-color: $primary; $link-hover-color: $primary;
/* tables */
$table-bg: $dark;
/* buttons */
$btn-box-shadow: null;
/* figure captions */
$figure-caption-color: $gray-400;
/* form inputs */
$input-bg: $dark;
$input-focus-bg: $dark;
$input-border-color: $spaceblue-600;
$input-focus-color: $gray-100;
$input-placeholder-color: shade-color($spaceblue-600, 20%);
/* pagination */
$pagination-bg: $dark;
$pagination-border-color: $spaceblue-600;
$pagination-hover-color: tint-color($primary, 10%);
$pagination-hover-bg: $component-hover-bg;
$pagination-hover-border-color: $spaceblue-600;
$pagination-focus-color: tint-color($primary, 10%);
$pagination-focus-bg: tint-color($dark, 7%);
/* dropdown menus */
$dropdown-dark-bg: $dark;
$dropdown-dark-divider-bg: $spaceblue-600;
$dropdown-dark-link-color: $light;
$dropdown-dark-link-hover-color: $component-hover-color;
$dropdown-dark-link-hover-bg: $component-hover-bg; // was $spaceblue-600
$dropdown-dark-link-active-color: $component-active-color;
$dropdown-dark-link-active-bg: $component-active-bg;
/* alerts */ /* alerts */
// scss-docs-start alert-variables // scss-docs-start alert-variables
$alert-padding-y: $spacer; $alert-padding-y: $spacer;

54
assets/css/_bs-vars-pre.scss
View file

@ -72,11 +72,65 @@ $custom-colors: (
); );
/* custom spacers */
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
'4-2': $spacer * 2,
'4-25': $spacer * 2.5,
5: $spacer * 3,
6: $spacer * 3.5,
7: $spacer * 4,
);
/* body, text, components */
$body-bg: $spaceblue-800; $body-bg: $spaceblue-800;
$body-color: $gray-200; $body-color: $gray-200;
$text-muted: $gray-400; $text-muted: $gray-400;
$component-active-color: $dark; $component-active-color: $dark;
$component-active-bg: $primary; $component-active-bg: $primary;
$component-hover-color: tint-color($light, 5%); $component-hover-color: tint-color($light, 5%);
$component-hover-bg: rgba($white, .125); $component-hover-bg: rgba($white, .125);
/* tables */
$table-bg: $dark;
/* buttons */
$btn-box-shadow: null;
/* figure captions */
$figure-caption-color: $gray-400;
/* form inputs */
$input-bg: $dark;
$input-focus-bg: $dark;
$input-border-color: $spaceblue-600;
$input-focus-color: $gray-100;
$input-placeholder-color: shade-color($spaceblue-600, 20%);
/* pagination */
$pagination-bg: $dark;
$pagination-border-color: $spaceblue-600;
$pagination-hover-color: tint-color($primary, 10%);
$pagination-hover-bg: $component-hover-bg;
$pagination-hover-border-color: $spaceblue-600;
$pagination-focus-color: tint-color($primary, 10%);
$pagination-focus-bg: tint-color($dark, 7%);
/* dropdown menus */
$dropdown-dark-bg: $dark;
$dropdown-dark-divider-bg: $spaceblue-600;
$dropdown-dark-link-color: $light;
$dropdown-dark-link-hover-color: $component-hover-color;
$dropdown-dark-link-hover-bg: $component-hover-bg; // was $spaceblue-600
$dropdown-dark-link-active-color: $component-active-color;
$dropdown-dark-link-active-bg: $component-active-bg;

167
assets/css/_layout-top-navbar-main.scss
View file

@ -22,57 +22,24 @@
} }
} }
/*
* main section layout
*/
main.rdnyc-index-outer {
@extend .container-lg;
@extend .mt-4;
@extend .mb-3;
@extend .mt-md-4;
@extend .d-flex;
@extend .justify-content-center;
& > div.content {
@extend .w-100;
}
}
/* /*
* top navbar css grid layout * top navbar css grid layout
*/ */
nav#top-navbar-grid-outer { nav#nt-out {
@extend .container-fluid; display: grid !important;
@include media-breakpoint-down(md) {
margin-top: 1.25rem !important;
}
@extend .mt-md-5;
@extend .mb-4;
@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;
}
@extend .d-grid;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto; grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto; grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto;
} }
div#top-navbar-grid-brand-outer { div.nt-brand {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
a#top-navbar-grid-brand-link { a {
color: $gray-300; color: $gray-300;
svg.header-logo { svg {
height: 4.3rem; height: 4.3rem;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
height: 5.3rem; height: 5.3rem;
@ -80,16 +47,18 @@ nav#top-navbar-grid-outer {
} }
} }
} }
div#top-navbar-grid-toggle-button-outer { div#nt-burger {
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 3; grid-column-end: 3;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 2; grid-row-end: 2;
display: grid; display: grid;
justify-items: end; justify-items: end;
@extend .d-lg-none; @include media-breakpoint-up(lg) {
} display: none !important;
div#top-navbar-grid-socialicon-widget-outer { }
}
div#nt-socials {
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 3; grid-column-end: 3;
grid-row-start: 2; grid-row-start: 2;
@ -104,16 +73,15 @@ nav#top-navbar-grid-outer {
} }
section.widget_block { section.widget_block {
ul.wp-block-social-links { ul.wp-block-social-links {
@extend .mb-0; margin-bottom: 0 !important;
li.wp-social-link { li.wp-social-link {
@extend .mx-0; margin: 0 !important;
@extend .my-0; padding: 0 !important;
@extend .px-0;
@extend .py-0;
a.wp-block-social-link-anchor { a.wp-block-social-link-anchor {
@extend .px-1; padding: 0 0.25rem !important;
@extend .px-md-2; @include media-breakpoint-up(md) {
@extend .py-0; padding: 0 0.5rem !important;
}
color: $gray-300; color: $gray-300;
&:hover { &:hover {
color: $primary; color: $primary;
@ -127,21 +95,17 @@ nav#top-navbar-grid-outer {
} }
} }
} }
&:first-child { &:first-child a.wp-block-social-link-anchor {
a.wp-block-social-link-anchor { padding-left: 0 !important;
@extend .ps-0;
}
} }
&:last-child { &:last-child a.wp-block-social-link-anchor {
a.wp-block-social-link-anchor { padding-right: 0 !important;
@extend .pe-0;
}
} }
} }
} }
} }
} }
div#top-navbar-grid-main-menu-outer { div#nt-mainmenu {
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
display: none; display: none;
margin: 1em 0 0 0; margin: 1em 0 0 0;
@ -166,75 +130,80 @@ nav#top-navbar-grid-outer {
} }
ul#menu-navbar-main-menu { ul#menu-navbar-main-menu {
list-style: none; list-style: none;
@extend .d-grid; display: grid !important;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@extend .d-lg-flex; @include media-breakpoint-up(lg) {
@extend .flex-lg-row; display: flex !important;
@extend .p-0; flex-direction: row !important;
@extend .m-0; }
& > li.menu-item { margin: 0 !important;
@extend .text-center; padding: 0 !important;
@extend .my-2; > li.menu-item {
@extend .my-lg-0; text-align: center !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
display: list-item; display: list-item;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 0 0 1.5em !important; padding: 0 0 0 1.5em !important;
} }
.top-navbar-grid-main-menu-item-link { a {
@extend .fw-bold; font-weight: 700 !important;
@extend .text-uppercase; text-transform: uppercase !important;
@extend .text-decoration-none; text-decoration: none !important;
color: $gray-300; color: $gray-300;
&:hover { &:hover {
@extend .text-decoration-none; text-decoration: none !important;
color: $primary; color: $primary;
} }
&.active { &.active {
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
@extend .text-decoration-none; text-decoration: none !important;
color: $gray-300; color: $gray-300;
} }
} }
} &.dropdown-toggle {
.dropdown-toggle { cursor: pointer;
cursor: pointer;
div.icon.baseline {
transform: rotate(0deg);
transition: transform 150ms ease;
svg {
top: inherit;
height: .75em;
width: .75em;
}
}
&.show {
opacity: 0.5;
&:hover {
@extend .text-decoration-none;
}
div.icon.baseline { div.icon.baseline {
transform: rotate(180deg); transform: rotate(0deg);
transition: transform 150ms ease; transition: transform 150ms ease;
svg {
top: inherit;
height: .75em;
width: .75em;
}
}
&.show {
opacity: 0.5;
&:hover {
text-decoration: none !important;
}
div.icon.baseline {
transform: rotate(180deg);
transition: transform 150ms ease;
}
}
&::after {
display: none !important;
} }
} }
&::after {
@extend .d-none;
}
} }
.dropdown-menu.dropdown-menu-dark { .dropdown-menu.dropdown-menu-dark {
li.menu-item { li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link { a.dropdown-item {
@extend .fw-normal; font-weight: 400 !important;
text-transform: inherit !important; text-transform: inherit !important;
&:hover { &:hover {
@extend .text-decoration-none; text-decoration: none !important;
color: $dropdown-dark-link-hover-color; color: $dropdown-dark-link-hover-color;
background-color: $dropdown-dark-link-hover-bg; background-color: $dropdown-dark-link-hover-bg;
} }
} }
&.active { &.active {
.dropdown-item.top-navbar-grid-main-menu-item-link { a.dropdown-item {
color: $dropdown-dark-link-active-color; color: $dropdown-dark-link-active-color;
background-color: $dropdown-dark-link-active-bg; background-color: $dropdown-dark-link-active-bg;
} }

159
assets/css/_meetings-plugin.scss
View file

@ -1,5 +1,7 @@
#tsml { #tsml {
a {
@extend a;
}
.form-control { .form-control {
background-color: $input-bg; background-color: $input-bg;
border: 1px solid $primary; border: 1px solid $primary;
@ -28,7 +30,8 @@
background-color: $primary; background-color: $primary;
border: 1px solid $primary; border: 1px solid $primary;
&:hover { &:hover {
@extend .btn-primary, :hover; // @extend .btn-primary, :hover;
background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
} }
&.toggle-view { &.toggle-view {
color: $primary; color: $primary;
@ -36,7 +39,7 @@
border: 1px solid $primary; border: 1px solid $primary;
&:hover { &:hover {
color: $pagination-hover-color; color: $pagination-hover-color;
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg !important;
border: 1px solid $primary; border: 1px solid $primary;
} }
&.active { &.active {
@ -46,7 +49,7 @@
box-shadow: none !important; box-shadow: none !important;
&:hover { &:hover {
color: $dark; color: $dark;
background-color: $primary; background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
border: 1px solid $primary; border: 1px solid $primary;
box-shadow: none !important; box-shadow: none !important;
} }
@ -78,83 +81,40 @@
} }
// for some reason this needs to be outside of the above styling // for some reason this needs to be outside of the above styling
#tsml { #tsml #meetings .results table {
#meetings { @extend .table;
.results { @extend .table-dark;
@extend .mt-3; @extend .table-striped;
table { > * > * > * {
@extend .table; padding: 0.5rem 0.5rem !important;
@extend .table-dark; }
@extend .table-striped; > tbody {
thead { > tr {
th { background-color: var(--bs-table-bg);
padding: $table-cell-padding-y $table-cell-padding-x !important; border-top: 1px solid $spaceblue-600 !important;
} &:nth-of-type(2n+1) {
} --bs-table-accent-bg: var(--bs-table-striped-bg);
tbody { background-color: var(--bs-table-accent-bg);
tr { }
@include media-breakpoint-down(md) { &.attendance-online .location small {
background-color: $dark; color: $success;
border-color: $spaceblue-600; }
} &.attendance-inactive .location small {
color: $danger;
}
}
} }
} }
} }
} }
#tsml .table-striped > tbody > tr:nth-of-type(2n+1),
#tsml #meetings .results table > tbody > tr:nth-of-type(2n+1) { #tsml .results {
background-color: var(--bs-table-bg) !important;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
// @include media-breakpoint-down(md) {
// background-color: var(--bs-table-bg) !important;
// }
}
#tsml #meetings .results table tbody tr.attendance-online .region,
#tsml #meetings .results table tbody tr.attendance-inactive .region {
opacity: inherit;
}
#tsml #meetings .results table tbody tr.attendance-online .location small {
color: $success;
}
#tsml #meetings .results table tbody tr.attendance-inactive .location small {
color: $danger;
}
#tsml #meetings .results {
.alert {
@extend .alert;
}
.alert-primary {
@extend .alert-primary;
}
.alert-secondary {
@extend .alert-secondary;
}
.alert-success {
@extend .alert-success;
}
.alert-danger {
@extend .alert-danger;
}
.alert-warning { .alert-warning {
@extend .alert-warning; background-color: #f5e2a7;
} border-color: #f3dd99;
.alert-info { color: #5f532c;
@extend .alert-info;
}
.alert-light {
@extend .alert-light;
}
.alert-dark {
@extend .alert-dark;
} }
} }
#tsml .page-header { #tsml .page-header {
border-bottom-color: $spaceblue-600 !important; border-bottom-color: $spaceblue-600 !important;
border-bottom-style: dashed !important; border-bottom-style: dashed !important;
@ -164,28 +124,32 @@
#tsml { #tsml {
.panel { .panel {
@extend .card; border: 1px solid rgba(0, 0, 0, 0.125);
background-color: shade-color($gray-800, 50%) !important; background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important; color: $body-color !important;
&.panel-default { &.panel-default {
ul { ul {
&.list-group { &.list-group {
@extend .list-group;
@extend .list-group-flush;
background-color: shade-color($gray-800, 50%) !important; background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important; color: $body-color !important;
li, a { li, a {
&.list-group-item { &.list-group-item {
@extend .list-group-item;
@extend .list-group-item-dark;
background-color: shade-color($gray-800, 50%) !important; background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important; color: $body-color !important;
&.meeting-info { border-color: $spaceblue-700 !important;
ul { &.meeting-info ul li hr {
li { border-color: $spaceblue-300;
hr { }
border-color: $spaceblue-300;
} &.list-group-item-location {
text-decoration: none !important;
& .list-group-item-heading, & .location-address {
text-decoration: underline !important;
}
&:hover {
& .list-group-item-heading, & .location-address {
color: $primary;
text-decoration-color: $gray-200 !important;
} }
} }
} }
@ -197,11 +161,8 @@
} }
} }
.panel-heading { .panel-heading {
@extend .card-body;
background-color: shade-color($gray-800, 50%) !important; background-color: shade-color($gray-800, 50%) !important;
padding: 1rem 1rem .5rem 1rem !important;
.panel-title { .panel-title {
@extend .card-title;
background-color: inherit !important; background-color: inherit !important;
} }
} }
@ -212,13 +173,12 @@
#tsml #meeting a.btn.btn-default { #tsml #meeting a.btn.btn-default {
@extend .btn;
@extend .btn-outline-primary;
@extend .btn-sm;
color: $primary !important; color: $primary !important;
margin-bottom: .25rem !important; background-color: inherit !important;
// background-color: $spaceblue-900 !important; margin-bottom: .5rem !important;
// border: 1px solid $primary !important; border-radius: 0.2rem !important;
padding: .25rem .5rem !important;
font-size: .875rem !important;
svg.icon { svg.icon {
height: 1em; height: 1em;
width: 1em; width: 1em;
@ -228,8 +188,6 @@
&:hover { &:hover {
color: $spaceblue-800 !important; color: $spaceblue-800 !important;
background-color: $primary !important; background-color: $primary !important;
// @extend .btn, :hover;
// @extend .btn-primary, :hover;
} }
} }
@ -238,7 +196,14 @@
} }
#tsml #meeting #feedback .panel .list-group .list-group-item button { #tsml #meeting #feedback .panel .list-group .list-group-item button {
@extend .btn; color: $spaceblue-900 !important;
@extend .btn-primary; background-color: $primary !important;
@extend .btn-sm; border-color: $primary !important;
border-bottom-left-radius: 0.2rem !important;
border-bottom-right-radius: 0.2rem !important;
padding: .25rem .5rem !important;
font-size: .875rem !important;
&:hover {
background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
}
} }

2
assets/css/_nav-burger.scss
View file

@ -18,7 +18,7 @@ $hamburger-layer-color: $primary !default;
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss"; @import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
/* fix button styling from bootstrap */ /* fix button styling from bootstrap */
button#top-navbar-grid-toggle-button { button#btn-burger {
-webkit-appearance: inherit; -webkit-appearance: inherit;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
color: inherit; color: inherit;

181
assets/css/app.scss
View file

@ -28,28 +28,27 @@ a {
text-decoration-color: $gray-200 !important; text-decoration-color: $gray-200 !important;
} }
} }
#tsml a {
@extend a;
}
/* post styling */ /* post styling */
article.post.sticky { article.post.sticky {
@extend .card; border-radius: .25rem !important;
background-color: shade-color($gray-800, 50%); background-color: shade-color($gray-800, 50%);
border-bottom: inherit !important; border-bottom: inherit !important;
margin-bottom: inherit !important; margin-bottom: inherit !important;
padding-bottom: inherit !important; margin-left: 0 !important;
&.mb-two-rem { margin-right: 0 !important;
padding-bottom: 0.5rem !important;
&.mb-4-2 {
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
} }
header.post-header { header.post-header {
@extend .card-body; flex: 1 1 auto !important;
@extend .pb-0; padding: 1rem 1rem 0 1rem !important;
} }
div.post-body { div.post-body {
@extend .card-body; flex: 1 1 auto !important;
@extend .pt-0; padding: 0 1rem 1rem 1rem !important;
&:last-child { &:last-child {
padding-bottom: 0 !important; padding-bottom: 0 !important;
margin-bottom: .25rem !important; margin-bottom: .25rem !important;
@ -69,11 +68,11 @@ header.post-header {
} }
.more-link-outer { .more-link-outer {
@extend .text-end; text-align: right !important;
@extend .mb-0; margin-bottom: 0 !important;
.more-link { .more-link {
@extend .text-decoration-none; text-decoration: none !important;
@extend .font-family-handbrush; font-family: $font-family-handbrush;
} }
} }
@ -82,47 +81,56 @@ header.post-header {
blockquote, blockquote,
blockquote.wp-block-quote { blockquote.wp-block-quote {
background-color: tint-color($spaceblue-800, 5%) !important; background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-start; border-left-width: 5px !important;
@extend .border-5; border-left-style: solid !important;
border-left-color: tint-color($spaceblue-800, 15%) !important; border-left-color: tint-color($spaceblue-800, 15%) !important;
@extend .ms-0; margin-right: 0 !important;
@extend .my-4; margin-top: 1.5rem !important;
@extend .px-3; margin-bottom: 1.5rem !important;
@extend .py-2; padding: .5rem 1rem !important;
quotes: "\201C" "\201D" "\201C" "\201D"; font-size: 1.4rem;
position: relative;
p { p {
@extend .blockquote; margin-top: 0;
&:last-of-type { &:last-of-type {
@extend .my-0; margin-top: 0 !important;
@extend .py-0; margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
} }
} }
&.is-style-large { &.is-style-large {
p { p {
font-size: 1.7em; font-size: 1.7rem;
}
cite {
font-size: 1.125rem;
} }
} }
cite { cite {
@extend .blockquote-footer; margin-top: -1rem;
margin-bottom: 1rem;
color: $gray-300; color: $gray-300;
@extend .my-0; padding-top: 0 !important;
@extend .py-0; padding-bottom: 0 !important;
font-size: 0.85em; font-size: 0.875rem;
font-style: normal; font-style: normal;
&::before {
content: "— ";
}
} }
&:last-child { &:last-child {
@extend .py-1; padding-bottom: .25rem !important;
} }
} }
figure.wp-block-pullquote { figure.wp-block-pullquote {
margin: 2em !important; margin: 2em !important;
@extend .p-5; padding: 3rem !important;
&:not(.is-style-solid-color) { &:not(.is-style-solid-color) {
background-color: tint-color($spaceblue-800, 5%) !important; background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-top; border-top-width: 5px !important;
@extend .border-bottom; border-top-style: solid !important;
@extend .border-5; border-bottom-width: 5px !important;
border-bottom-style: solid !important;
border-top-color: tint-color($spaceblue-800, 15%) !important; border-top-color: tint-color($spaceblue-800, 15%) !important;
border-bottom-color: tint-color($spaceblue-800, 15%) !important; border-bottom-color: tint-color($spaceblue-800, 15%) !important;
& blockquote { & blockquote {
@ -131,18 +139,17 @@ figure.wp-block-pullquote {
} }
} }
& blockquote { & blockquote {
@extend .m-0; margin: 0 !important;
@extend .p-0; padding: 0 !important;
background-color: inherit !important; background-color: inherit !important;
border: inherit !important; border: inherit !important;
} }
} }
/* other wp styling */ /* other wp styling */
.wp-block-image.alignfull img, img,
.wp-block-image.alignwide img, figure.wp-caption {
.wp-block-image img, max-width: 100%;
.wp-block-media-text__media img {
height: auto; height: auto;
} }
.btn-primary { .btn-primary {
@ -153,67 +160,57 @@ figure.wp-block-pullquote {
margin: 0.05em 0.05em 0 0; margin: 0.05em 0.05em 0 0;
} }
.wp-block-button { .wp-block-button {
.wp-block-button__link { margin-bottom: .5rem !important;
@extend .btn; }
@extend .text-decoration-none; .wp-block-button__link,
@extend .mb-1; .wp-block-search .wp-block-search__button {
} @extend .btn;
&:not(.is-style-outline) .wp-block-button__link { @extend .btn-primary;
@extend .btn-primary; }
} .is-style-outline > .wp-block-button__link {
&.is-style-outline .wp-block-button__link { @extend .btn;
@extend .btn-outline-primary; @extend .btn-outline-primary;
}
&.alignleft {
@extend .text-start;
}
&.aligncenter {
@extend .text-center;
}
&.alignright {
@extend .text-end;
}
} }
.wp-caption-text { .wp-caption-text {
@extend .text-muted; color: $text-muted !important;
}
.alignleft {
text-align: left !important;
}
.aligncenter {
text-align: center !important;
}
.alignright {
text-align: right !important;
} }
/* tables */ /* tables */
table,
.wp-block-table table, .wp-block-table table,
.wp-block-calendar table { .wp-block-calendar {
@extend .table; @extend .table;
@extend .table-dark; @extend .table-dark;
caption { caption {
@extend .text-muted; color: $text-muted !important;
}
thead th,
tbody td {
border: none !important;
}
thead tr {
border-bottom: 1px solid $spaceblue-600;
}
tbody tr {
border-bottom: 1px solid $spaceblue-800;
&:last-child {
border-bottom: none !important;
}
} }
} }
.wp-block-calendar table,
.wp-block-table.is-style-stripes { .wp-block-table.is-style-stripes {
border-bottom: none; border-bottom: none;
table { table {
@extend .table-striped; @extend .table-striped;
border-bottom: none;
} }
} }
.wp-block-calendar table tbody { color: $text-muted !important; }
.wp-block-calendar table th { background-color: tint-color($dark, 5%) !important; }
.wp-block-calendar th, .wp-block-calendar tbody td {
border: 1px solid $spaceblue-600 !important;
}
.wp-block-calendar > .wp-calendar-nav > span > a {
background-color: inherit !important;
}
/* post page pagination */ /* post page pagination */
.post-page-numbers { .post-page-numbers {
@extend .text-decoration-none; text-decoration: none !important;
@extend .page-item; @extend .page-item;
&.current { &.current {
@extend .page-item, .active; @extend .page-item, .active;
@ -225,22 +222,20 @@ table,
label { label {
@extend .form-label; @extend .form-label;
} }
input, input {
.wp-block-search .wp-block-search__input,
form input {
@extend .form-control; @extend .form-control;
} }
button,
.wp-block-search .wp-block-search__button,
form button {
@extend .btn;
@extend .btn-primary;
}
select { select {
@extend .form-select; @extend .form-select;
} }
.wp-block-search .wp-block-search__input {
border-color: $input-border-color !important;
}
.wp-block-calendar,
.wp-block-categories-dropdown {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* Meetings plugin styling changes */ /* Meetings plugin styling changes */
@import "meetings-plugin"; @import "meetings-plugin";

BIN
assets/images/40x_rainbow.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 146 KiB

BIN
assets/images/40x_unicorn-300.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 92 KiB

BIN
assets/images/cat-roof_portrait.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 43 KiB

4
assets/js/_hamburger-helper.js
View file

@ -1,5 +1,5 @@
const togglerBtn = document.getElementById("top-navbar-grid-toggle-button"); const togglerBtn = document.getElementById("btn-burger");
const navbarContent = document.getElementById("top-navbar-grid-main-menu-outer"); const navbarContent = document.getElementById("nt-mainmenu");
navbarContent.addEventListener("show.bs.collapse", () => { navbarContent.addEventListener("show.bs.collapse", () => {
console.log("opening navbar content"); console.log("opening navbar content");

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

@ -9,7 +9,7 @@
namespace WP_RDNYC; namespace WP_RDNYC;
// for singular page, no extra bottom margin... // for singular page, no extra bottom margin...
$post_class = is_singular() ? '' : ' mb-two-rem '; $post_class = is_singular() ? '' : ' mb-4-2 ';
$post_class .= 'post border-bottom border-spaceblue-700 pb-4'; $post_class .= 'post border-bottom border-spaceblue-700 pb-4';
$post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) ); $post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) );
@ -21,9 +21,7 @@ $post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) );
<?php <?php
// post/page header inner content (title, with link for query/index listings) // post/page header inner content (title, with link for query/index listings)
$h_inner = ( is_archive() || is_search() || is_home() ) ? $h_inner = ( is_archive() || is_search() || is_home() ) ?
'<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">' '<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">' . get_the_title() . '</a>' : get_the_title();
. esc_html( get_the_title() ) . '</a>' :
esc_html( get_the_title() );
// For pages we want a larger heading like an index/query listing // For pages we want a larger heading like an index/query listing
// otherwise, a regular article/post header // otherwise, a regular article/post header

23
header.php
View file

@ -42,19 +42,19 @@ namespace WP_RDNYC;
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
<nav id="top-navbar-grid-outer" class="container-fluid"> <nav id="nt-out" class="container-fluid mt-ltmd-125 mt-md-5 mb-4 mb-sm-4-2 mb-lg-4-25 mb-xl-5 mb-xxl-7">
<div id="top-navbar-grid-brand-outer"> <div class="nt-brand">
<h1> <h1>
<!-- my-0 py-0 --> <!-- my-0 py-0 -->
<?php <?php
printf( '<a id="top-navbar-grid-brand-link" href="%1$s" rel="home">', printf( '<a href="%1$s" rel="home">',
esc_url( home_url( '/' ) ) esc_url( home_url( '/' ) )
); );
echo inline_svg( 'svg-rdnyc-logo', echo inline_svg( 'svg-rdnyc-logo',
array( array(
'svg_class' => 'img header-logo', 'svg_class' => 'img',
'svg_title' => 'Recovery Dharma New York City', 'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true, 'svg_role_img' => true,
'svg_aria_hidden' => false 'svg_aria_hidden' => false
@ -66,10 +66,10 @@ namespace WP_RDNYC;
</h1> </h1>
</div> </div>
<div id="top-navbar-grid-toggle-button-outer"> <div id="nt-burger">
<button class="hamburger hamburger--squeeze" id="top-navbar-grid-toggle-button" <button class="hamburger hamburger--squeeze" id="btn-burger"
type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-grid-main-menu-outer" type="button" data-bs-toggle="collapse" data-bs-target="#nt-mainmenu"
aria-controls="top-navbar-grid-main-menu-outer" aria-expanded="false" aria-label="Toggle navigation" aria-controls="nt-mainmenu" aria-expanded="false" aria-label="Toggle navigation"
> >
<span class="hamburger-box"> <span class="hamburger-box">
<span class="hamburger-inner"></span> <span class="hamburger-inner"></span>
@ -77,7 +77,7 @@ namespace WP_RDNYC;
</button> </button>
</div> </div>
<div id="top-navbar-grid-socialicon-widget-outer"> <div id="nt-socials">
<?php <?php
// using widget to include social icons, so they can be edited by wordpress users // using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) : if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
@ -95,10 +95,7 @@ namespace WP_RDNYC;
'depth' => 2, 'depth' => 2,
'menu' => 'navbar-main-menu', 'menu' => 'navbar-main-menu',
'container' => 'div', 'container' => 'div',
'container_id' => 'top-navbar-grid-main-menu-outer', 'container_id' => 'nt-mainmenu',
'menu_class' => 'top-navbar-grid-main-menu',
'menu_item_class' => 'top-navbar-grid-main-menu-item',
'link_class' => 'top-navbar-grid-main-menu-item-link',
'walker' => new RDNYC_Menu_Walker() 'walker' => new RDNYC_Menu_Walker()
]); ]);
// echo '</section>'; // echo '</section>';

14
index.php
View file

@ -10,8 +10,8 @@ namespace WP_RDNYC;
get_header(); ?> get_header(); ?>
<main class="rdnyc-index-outer"> <main class="container-lg d-flex justify-content-center mt-4 mb-3">
<div class="content"> <div class="content w-100">
<?php <?php
// grab search query if there is one // grab search query if there is one
@ -35,12 +35,14 @@ get_header(); ?>
if (!is_singular()) : ?> if (!is_singular()) : ?>
<nav class="d-flex justify-content-between" aria-label="Page navigation"> <nav class="d-flex justify-content-between" aria-label="Page navigation">
<div class="nav-previous alignleft"> <div class="nav-previous alignleft">
<?php echo inline_svg( 'bsi-chevron-left', array( 'div_class' => 'icon baseline' ) ); ?> <?php
<?php next_posts_link( 'Older' ); ?> $txt = inline_svg( 'bsi-chevron-left', array( 'div_class' => 'icon baseline me-2' ) ) . 'Older';
next_posts_link( $txt ); ?>
</div> </div>
<div class="nav-next alignright"> <div class="nav-next alignright">
<?php previous_posts_link( 'Newer' ); ?> <?php
<?php echo inline_svg( 'bsi-chevron-right', array( 'div_class' => 'icon baseline' ) ); ?> $txt = 'Newer' . inline_svg( 'bsi-chevron-right', array( 'div_class' => 'icon baseline ms-2' ) );
previous_posts_link( $txt ); ?>
</div> </div>
</nav> </nav>
<?php endif; <?php endif;

4
src/classes.php
View file

@ -82,12 +82,12 @@ class RDNYC_Menu_Walker extends Walker_Nav_Menu {
parent::start_el($item_html, $item, $depth, $args); parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) { if ( $item->is_dropdown && $depth === 0 ) {
$item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"', $item_html ); $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"', $item_html );
$item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html ); $item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
} }
if ( $item->menu_item_parent && $item->menu_item_parent > 0 && $depth > 0 ) { if ( $item->menu_item_parent && $item->menu_item_parent > 0 && $depth > 0 ) {
$item_html = str_replace( '<a', '<a class="dropdown-item top-navbar-grid-main-menu-item-link"', $item_html ); $item_html = str_replace( '<a', '<a class="dropdown-item"', $item_html );
} }
$output .= $item_html; $output .= $item_html;

16
webpack.config.js
View file

@ -156,12 +156,14 @@ function getCSSWhitelistPatterns() {
/^search(-.*)?$/, /^search(-.*)?$/,
/^nav(-.*)?$/, /^nav(-.*)?$/,
/^wp(-.*)?$/, /^wp(-.*)?$/,
/^has(-.*)?$/,
/^screen(-.*)?$/, /^screen(-.*)?$/,
/^navigation(-.*)?$/, /^navigation(-.*)?$/,
/^(.*)-template(-.*)?$/, /^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/, /^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/, /^postid-(.*)?$/,
/^post-(.*)?$/, /^post(-.*)?$/,
/^sticky(-.*)?$/,
/^attachmentid-(.*)?$/, /^attachmentid-(.*)?$/,
/^attachment(-.*)?$/, /^attachment(-.*)?$/,
/^page(-.*)?$/, /^page(-.*)?$/,
@ -170,6 +172,7 @@ function getCSSWhitelistPatterns() {
/^category(-.*)?$/, /^category(-.*)?$/,
/^tag(-.*)?$/, /^tag(-.*)?$/,
/^menu(-.*)?$/, /^menu(-.*)?$/,
/^more(-.*)?$/,
/^tags(-.*)?$/, /^tags(-.*)?$/,
/^tax-(.*)?$/, /^tax-(.*)?$/,
/^term-(.*)?$/, /^term-(.*)?$/,
@ -177,18 +180,15 @@ function getCSSWhitelistPatterns() {
/^(.*)?-?paged(-.*)?$/, /^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/, /^depth(-.*)?$/,
/^children(-.*)?$/, /^children(-.*)?$/,
/^hljs(-.*)?$/, /^figure$/,
/^tek(-.*)?$/,
/^html$/,
/^body$/,
/^blockquote$/, /^blockquote$/,
/^tsml$/,
/^label$/,
/^input$/, /^input$/,
/^svg$/, /^select$/,
/^img$/, /^img$/,
/^ul$/, /^ul$/,
/^li$/, /^li$/,
/^p$/,
/^a$/,
/^h.$/, /^h.$/,
/^pre$/, /^pre$/,
/^code$/, /^code$/,