streamlined & improved css for smaller compiled css file and more efficient styling
This commit is contained in:
parent
0286759b4a
commit
b381f0fa43
16 changed files with 311 additions and 366 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none !important;
|
||||
}
|
||||
div#top-navbar-grid-socialicon-widget-outer {
|
||||
}
|
||||
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,38 +130,41 @@ 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 {
|
||||
&.dropdown-toggle {
|
||||
cursor: pointer;
|
||||
div.icon.baseline {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -211,7 +178,7 @@ nav#top-navbar-grid-outer {
|
|||
&.show {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
div.icon.baseline {
|
||||
transform: rotate(180deg);
|
||||
|
|
@ -219,22 +186,24 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
&::after {
|
||||
@extend .d-none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
#tsml #meetings .results table {
|
||||
@extend .table;
|
||||
@extend .table-dark;
|
||||
@extend .table-striped;
|
||||
thead {
|
||||
th {
|
||||
padding: $table-cell-padding-y $table-cell-padding-x !important;
|
||||
> * > * > * {
|
||||
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);
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
@include media-breakpoint-down(md) {
|
||||
background-color: $dark;
|
||||
border-color: $spaceblue-600;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#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 {
|
||||
&.attendance-online .location small {
|
||||
color: $success;
|
||||
}
|
||||
#tsml #meetings .results table tbody tr.attendance-inactive .location small {
|
||||
}
|
||||
&.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-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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
margin-bottom: .5rem !important;
|
||||
}
|
||||
.wp-block-button__link,
|
||||
.wp-block-search .wp-block-search__button {
|
||||
@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 {
|
||||
}
|
||||
.is-style-outline > .wp-block-button__link {
|
||||
@extend .btn;
|
||||
@extend .btn-outline-primary;
|
||||
}
|
||||
&.alignleft {
|
||||
@extend .text-start;
|
||||
}
|
||||
&.aligncenter {
|
||||
@extend .text-center;
|
||||
}
|
||||
&.alignright {
|
||||
@extend .text-end;
|
||||
}
|
||||
}
|
||||
.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";
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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
23
header.php
|
|
@ -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
14
index.php
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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$/,
|
||||
|
|
|
|||
Loading…
Reference in a new issue