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 */
.font-family-handbrush {
font-family: $font-family-handbrush;
}
.text-gray-100 {
color: $gray-100 !important;
}
@ -24,15 +21,17 @@
color: $gray-700 !important;
}
.fs-larger {
font-size: larger;
font-size: larger !important;
}
.fs-smaller {
font-size: smaller;
font-size: smaller !important;
}
/* general additional spacing style */
.mb-two-rem {
margin-bottom: 2rem !important;
.mt-ltmd-125 {
@include media-breakpoint-down(md) {
margin-top: 1.25rem !important;
}
}
/* 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-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 */
// scss-docs-start alert-variables
$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-color: $gray-200;
$text-muted: $gray-400;
$component-active-color: $dark;
$component-active-bg: $primary;
$component-hover-color: tint-color($light, 5%);
$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
*/
nav#top-navbar-grid-outer {
@extend .container-fluid;
@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;
nav#nt-out {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;
@include media-breakpoint-up(md) {
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-end: 2;
grid-row-start: 1;
grid-row-end: 3;
a#top-navbar-grid-brand-link {
a {
color: $gray-300;
svg.header-logo {
svg {
height: 4.3rem;
@include media-breakpoint-up(md) {
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-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
justify-items: end;
@extend .d-lg-none;
}
div#top-navbar-grid-socialicon-widget-outer {
@include media-breakpoint-up(lg) {
display: none !important;
}
}
div#nt-socials {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
@ -104,16 +73,15 @@ nav#top-navbar-grid-outer {
}
section.widget_block {
ul.wp-block-social-links {
@extend .mb-0;
margin-bottom: 0 !important;
li.wp-social-link {
@extend .mx-0;
@extend .my-0;
@extend .px-0;
@extend .py-0;
margin: 0 !important;
padding: 0 !important;
a.wp-block-social-link-anchor {
@extend .px-1;
@extend .px-md-2;
@extend .py-0;
padding: 0 0.25rem !important;
@include media-breakpoint-up(md) {
padding: 0 0.5rem !important;
}
color: $gray-300;
&:hover {
color: $primary;
@ -127,21 +95,17 @@ nav#top-navbar-grid-outer {
}
}
}
&:first-child {
a.wp-block-social-link-anchor {
@extend .ps-0;
}
&:first-child a.wp-block-social-link-anchor {
padding-left: 0 !important;
}
&:last-child {
a.wp-block-social-link-anchor {
@extend .pe-0;
}
&:last-child a.wp-block-social-link-anchor {
padding-right: 0 !important;
}
}
}
}
}
div#top-navbar-grid-main-menu-outer {
div#nt-mainmenu {
@include media-breakpoint-down(lg) {
display: none;
margin: 1em 0 0 0;
@ -166,75 +130,80 @@ nav#top-navbar-grid-outer {
}
ul#menu-navbar-main-menu {
list-style: none;
@extend .d-grid;
display: grid !important;
grid-template-columns: 1fr;
@extend .d-lg-flex;
@extend .flex-lg-row;
@extend .p-0;
@extend .m-0;
& > li.menu-item {
@extend .text-center;
@extend .my-2;
@extend .my-lg-0;
@include media-breakpoint-up(lg) {
display: flex !important;
flex-direction: row !important;
}
margin: 0 !important;
padding: 0 !important;
> li.menu-item {
text-align: center !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
@include media-breakpoint-up(lg) {
display: list-item;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 0 0 1.5em !important;
}
.top-navbar-grid-main-menu-item-link {
@extend .fw-bold;
@extend .text-uppercase;
@extend .text-decoration-none;
a {
font-weight: 700 !important;
text-transform: uppercase !important;
text-decoration: none !important;
color: $gray-300;
&:hover {
@extend .text-decoration-none;
text-decoration: none !important;
color: $primary;
}
&.active {
opacity: 0.5;
&:hover {
@extend .text-decoration-none;
text-decoration: none !important;
color: $gray-300;
}
}
}
.dropdown-toggle {
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;
}
&.dropdown-toggle {
cursor: pointer;
div.icon.baseline {
transform: rotate(180deg);
transform: rotate(0deg);
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 {
li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal;
a.dropdown-item {
font-weight: 400 !important;
text-transform: inherit !important;
&:hover {
@extend .text-decoration-none;
text-decoration: none !important;
color: $dropdown-dark-link-hover-color;
background-color: $dropdown-dark-link-hover-bg;
}
}
&.active {
.dropdown-item.top-navbar-grid-main-menu-item-link {
a.dropdown-item {
color: $dropdown-dark-link-active-color;
background-color: $dropdown-dark-link-active-bg;
}

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

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

181
assets/css/app.scss
View file

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

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

@ -9,7 +9,7 @@
namespace WP_RDNYC;
// 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 = esc_attr( implode( ' ', get_post_class( $post_class ) ) );
@ -21,9 +21,7 @@ $post_class = esc_attr( implode( ' ', get_post_class( $post_class ) ) );
<?php
// post/page header inner content (title, with link for query/index listings)
$h_inner = ( is_archive() || is_search() || is_home() ) ?
'<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">'
. esc_html( get_the_title() ) . '</a>' :
esc_html( get_the_title() );
'<a href="' . esc_url( get_the_permalink() ) . '" rel="bookmark">' . get_the_title() . '</a>' : get_the_title();
// For pages we want a larger heading like an index/query listing
// 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">
<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>
<!-- my-0 py-0 -->
<?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( '/' ) )
);
echo inline_svg( 'svg-rdnyc-logo',
array(
'svg_class' => 'img header-logo',
'svg_class' => 'img',
'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true,
'svg_aria_hidden' => false
@ -66,10 +66,10 @@ namespace WP_RDNYC;
</h1>
</div>
<div id="top-navbar-grid-toggle-button-outer">
<button class="hamburger hamburger--squeeze" id="top-navbar-grid-toggle-button"
type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-grid-main-menu-outer"
aria-controls="top-navbar-grid-main-menu-outer" aria-expanded="false" aria-label="Toggle navigation"
<div id="nt-burger">
<button class="hamburger hamburger--squeeze" id="btn-burger"
type="button" data-bs-toggle="collapse" data-bs-target="#nt-mainmenu"
aria-controls="nt-mainmenu" aria-expanded="false" aria-label="Toggle navigation"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
@ -77,7 +77,7 @@ namespace WP_RDNYC;
</button>
</div>
<div id="top-navbar-grid-socialicon-widget-outer">
<div id="nt-socials">
<?php
// using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
@ -95,10 +95,7 @@ namespace WP_RDNYC;
'depth' => 2,
'menu' => 'navbar-main-menu',
'container' => 'div',
'container_id' => 'top-navbar-grid-main-menu-outer',
'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',
'container_id' => 'nt-mainmenu',
'walker' => new RDNYC_Menu_Walker()
]);
// echo '</section>';

14
index.php
View file

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

16
webpack.config.js
View file

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