316 lines
6.6 KiB
SCSS
316 lines
6.6 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 {
|
|
color: $gray-200;
|
|
background-color: $spaceblue-800;
|
|
height: 100%;
|
|
}
|
|
|
|
/* links */
|
|
a,
|
|
#tsml a {
|
|
@extend .text-decoration-underline;
|
|
color: $gray-200;
|
|
&:hover, &:focus {
|
|
// @extend .text-decoration-underline;
|
|
color: $primary;
|
|
text-decoration-color: $gray-200 !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 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 {
|
|
// @extend .my-3;
|
|
// @extend .py-3;
|
|
margin: 2em !important;
|
|
@extend .p-5;
|
|
&:not(.is-style-solid-color) {
|
|
background-color: tint-color($spaceblue-800, 5%) !important;
|
|
@extend .border-top;
|
|
@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: $spaceblue-800;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
table,
|
|
.wp-block-table table,
|
|
.wp-block-calendar table {
|
|
@extend .table;
|
|
@extend .table-dark;
|
|
caption {
|
|
@extend .text-gray-400;
|
|
}
|
|
thead th,
|
|
tbody td {
|
|
border: none !important;
|
|
}
|
|
thead tr {
|
|
border-bottom: 1px solid $gray-600;
|
|
}
|
|
tbody tr {
|
|
border-bottom: 1px solid $gray-800;
|
|
&:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
}
|
|
.wp-block-calendar table,
|
|
.wp-block-table.is-style-stripes table {
|
|
@extend .table-striped;
|
|
}
|
|
|
|
.post-page-numbers {
|
|
@extend .text-decoration-none;
|
|
@extend .page-item;
|
|
&.current {
|
|
@extend .active;
|
|
& .page-link {
|
|
@extend .text-decoration-none;
|
|
color: $spaceblue-100 !important;
|
|
background-color: $spaceblue-600 !important;
|
|
border-color: $spaceblue-600 !important;
|
|
&:hover {
|
|
@extend .text-decoration-none;
|
|
color: $spaceblue-100 !important;
|
|
background-color: $spaceblue-600 !important;
|
|
border-color: $spaceblue-600 !important;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
@extend .text-decoration-none;
|
|
}
|
|
& .page-link {
|
|
@extend .text-decoration-none;
|
|
color: $gray-200;
|
|
background-color: inherit !important;
|
|
border: 1px solid $spaceblue-600;
|
|
&:hover {
|
|
color: $spaceblue-800;
|
|
background-color: $primary !important;
|
|
border: 1px solid $spaceblue-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* forms and search */
|
|
label {
|
|
@extend .form-label;
|
|
}
|
|
|
|
.form-control,
|
|
input.form-control {
|
|
color: $gray-200;
|
|
background-color: $spaceblue-900 !important;
|
|
border-color: $spaceblue-600;
|
|
&:focus {
|
|
border-color: $input-focus-border-color;
|
|
color: $gray-200;
|
|
}
|
|
&::-ms-clear,
|
|
&::-ms-reveal { display: none; }
|
|
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
|
|
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
|
|
&::-ms-input-placeholder, /* Microsoft Edge */
|
|
&::placeholder /* Most modern browsers support this now. */
|
|
{
|
|
color: $spaceblue-700 !important;
|
|
}
|
|
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
|
|
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: $spaceblue-700 !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
input,
|
|
.wp-block-search .wp-block-search__input,
|
|
form input {
|
|
@extend .form-control;
|
|
color: $gray-200;
|
|
&:focus {
|
|
border-color: $input-focus-border-color;
|
|
color: $gray-200;
|
|
}
|
|
&::-ms-clear,
|
|
&::-ms-reveal { display: none; }
|
|
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
|
|
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
|
|
&::-ms-input-placeholder, /* Microsoft Edge */
|
|
&::placeholder /* Most modern browsers support this now. */
|
|
{
|
|
color: $spaceblue-700 !important;
|
|
}
|
|
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
|
|
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: $spaceblue-700 !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
button,
|
|
.wp-block-search .wp-block-search__button,
|
|
form button {
|
|
@extend .btn;
|
|
@extend .btn-primary;
|
|
}
|
|
.btn-primary, button, .wp-block-search .wp-block-search__button, form button, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
|
|
box-shadow: inherit;
|
|
}
|
|
|
|
select {
|
|
@extend .form-select;
|
|
}
|