wp-rdnyc/assets/css/app.scss

246 lines
4.4 KiB
SCSS

/* Fonts */
@import "fonts";
/* Load Bootstrap v5 and customizations */
@import "bs-load";
/*SVG ICON SYSTEM*/
@import "svg-icons";
/* Basic style additions */
@import "basic-additions";
/* Navbar toggler icon override */
@import "nav-burger";
/* Navbar & Main layout styling */
@import "layout-top-navbar-main";
/* main */
html,
body {
height: 100%;
}
/* links */
a {
&:hover, &:focus {
text-decoration-color: $gray-200 !important;
}
}
#tsml a {
@extend a;
}
/* post styling */
article.post.sticky {
@extend .card;
background-color: shade-color($gray-800, 50%);
border-bottom: inherit !important;
margin-bottom: inherit !important;
padding-bottom: inherit !important;
&.mb-two-rem {
margin-bottom: 2rem !important;
}
header.post-header {
@extend .card-body;
@extend .pb-0;
}
div.post-body {
@extend .card-body;
@extend .pt-0;
&:last-child {
padding-bottom: 0 !important;
margin-bottom: .25rem !important;
}
}
}
header.post-header {
h1, h2, h1 a, h2 a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
}
.article.post-body {
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
padding-top: 0.5rem;
}
}
.more-link-outer {
@extend .text-end;
@extend .mb-0;
.more-link {
@extend .text-decoration-none;
@extend .font-family-handbrush;
}
}
/* blockquote handling */
blockquote,
blockquote.wp-block-quote {
background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-start;
@extend .border-5;
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;
p {
@extend .blockquote;
&:last-of-type {
@extend .my-0;
@extend .py-0;
}
}
&.is-style-large {
p {
font-size: 1.7em;
}
}
cite {
@extend .blockquote-footer;
color: $gray-300;
@extend .my-0;
@extend .py-0;
font-size: 0.85em;
font-style: normal;
}
&:last-child {
@extend .py-1;
}
}
figure.wp-block-pullquote {
margin: 2em !important;
@extend .p-5;
&:not(.is-style-solid-color) {
background-color: tint-color($spaceblue-800, 5%) !important;
@extend .border-top;
@extend .border-bottom;
@extend .border-5;
border-top-color: tint-color($spaceblue-800, 15%) !important;
border-bottom-color: tint-color($spaceblue-800, 15%) !important;
& blockquote {
background-color: none !important;
border: none !important;
}
}
& blockquote {
@extend .m-0;
@extend .p-0;
background-color: inherit !important;
border: inherit !important;
}
}
/* other wp styling */
.wp-block-image.alignfull img,
.wp-block-image.alignwide img,
.wp-block-image img,
.wp-block-media-text__media img {
height: auto;
}
.btn-primary {
color: $dark;
}
.has-drop-cap:not(:focus)::first-letter {
font-size: 5em;
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;
}
}
.wp-caption-text {
@extend .text-muted;
}
/* tables */
table,
.wp-block-table table,
.wp-block-calendar table {
@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;
}
}
}
.wp-block-calendar table,
.wp-block-table.is-style-stripes {
border-bottom: none;
table {
@extend .table-striped;
border-bottom: none;
}
}
/* post page pagination */
.post-page-numbers {
@extend .text-decoration-none;
@extend .page-item;
&.current {
@extend .page-item, .active;
}
}
/* forms and search */
label {
@extend .form-label;
}
input,
.wp-block-search .wp-block-search__input,
form input {
@extend .form-control;
}
button,
.wp-block-search .wp-block-search__button,
form button {
@extend .btn;
@extend .btn-primary;
}
select {
@extend .form-select;
}
/* Meetings plugin styling changes */
@import "meetings-plugin";