389 lines
7.8 KiB
SCSS
389 lines
7.8 KiB
SCSS
/* Fonts */
|
|
@import "fonts";
|
|
|
|
/* Load Bootstrap v5 and customizations */
|
|
@import "bs-load";
|
|
|
|
/*SVG ICON SYSTEM*/
|
|
@import "svg-icons";
|
|
|
|
/* Navbar toggler icon override */
|
|
@import "top-nav-burger";
|
|
|
|
/* Top Navbar styling */
|
|
@import "top-navbar";
|
|
|
|
/* main */
|
|
html,
|
|
body {
|
|
color: $gray-100;
|
|
background-color: $spaceblue-800;
|
|
height: 100%;
|
|
}
|
|
a {
|
|
@extend .text-decoration-none;
|
|
&:hover {
|
|
@extend .text-decoration-underline;
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
/* general additional text style */
|
|
.font-family-handbrush {
|
|
font-family: $font-family-handbrush;
|
|
}
|
|
.text-gray-100 {
|
|
color: $gray-100;
|
|
}
|
|
.text-gray-200 {
|
|
color: $gray-200;
|
|
}
|
|
.text-gray-300 {
|
|
color: $gray-300;
|
|
}
|
|
.text-gray-400 {
|
|
color: $gray-400;
|
|
}
|
|
.text-gray-500 {
|
|
color: $gray-500;
|
|
}
|
|
.text-gray-600 {
|
|
color: $gray-600;
|
|
}
|
|
.text-gray-700 {
|
|
color: $gray-700;
|
|
}
|
|
.fs-larger {
|
|
font-size: larger;
|
|
}
|
|
.fs-smaller {
|
|
font-size: smaller;
|
|
}
|
|
|
|
/* general additional spacing style */
|
|
.mb-two-rem {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* general additional border style */
|
|
.border-bottom {
|
|
&.border-dashed {
|
|
border-bottom-style: dashed !important;
|
|
}
|
|
&.border-gray-300 {
|
|
border-bottom-color: $gray-300 !important;
|
|
}
|
|
&.border-gray-400 {
|
|
border-bottom-color: $gray-400 !important;
|
|
}
|
|
&.border-gray-500 {
|
|
border-bottom-color: $gray-500 !important;
|
|
}
|
|
&.border-gray-600 {
|
|
border-bottom-color: $gray-600 !important;
|
|
}
|
|
&.border-gray-700 {
|
|
border-bottom-color: $gray-700 !important;
|
|
}
|
|
&.border-gray-750 {
|
|
border-bottom-color: $gray-750 !important;
|
|
}
|
|
&.border-gray-800 {
|
|
border-bottom-color: $gray-800 !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;
|
|
header.post-header {
|
|
@extend .card-header;
|
|
@extend .pb-0;
|
|
}
|
|
div.post-body {
|
|
@extend .card-body;
|
|
@extend .pt-0;
|
|
&:last-child {
|
|
padding-bottom: 0 !important;
|
|
margin-bottom: .25rem !important;
|
|
}
|
|
}
|
|
}
|
|
.more-link-outer {
|
|
@extend .text-end;
|
|
@extend .mb-0;
|
|
.more-link {
|
|
@extend .text-decoration-none;
|
|
@extend .font-family-handbrush;
|
|
}
|
|
}
|
|
|
|
// a {
|
|
// color: rgba($white, 0.75);
|
|
// // border-bottom: $gray-600 2px solid;
|
|
// // text-decoration: none;
|
|
// text-decoration-color: $gray-600;
|
|
// &.navbar-brand,
|
|
// &.nav-link {
|
|
// border-bottom: none;
|
|
// }
|
|
// &:visited {
|
|
// color: $info;
|
|
// .post-title & {
|
|
// color: $gray-100;
|
|
// }
|
|
// }
|
|
// &:hover {
|
|
// color: $primary;
|
|
// // text-decoration: none;
|
|
// // border-bottom: $secondary 3px solid;
|
|
// text-decoration-color: $secondary;
|
|
// &.navbar-brand {
|
|
// border-bottom: none;
|
|
// }
|
|
// }
|
|
// }
|
|
// .wp-block-separator {
|
|
// border-top: none !important;
|
|
// border-bottom: none !important;
|
|
// }
|
|
|
|
// /* more */
|
|
// .border-gray-900 {
|
|
// border-color: $gray-900 !important;
|
|
// }
|
|
// .border-10 {
|
|
// border-width: 10px !important;
|
|
// }
|
|
// .border-20 {
|
|
// border-width: 20px !important;
|
|
// }
|
|
// .font-handbrush {
|
|
// font-family: $font-family-handbrush;
|
|
// }
|
|
// .fw-500 {
|
|
// font-weight: 500;
|
|
// }
|
|
// .fw-600 {
|
|
// font-weight: 600;
|
|
// }
|
|
|
|
|
|
/* blockquote handling */
|
|
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;
|
|
@extend .text-gray-300;
|
|
@extend .my-0;
|
|
@extend .py-0;
|
|
font-size: 0.85em;
|
|
font-style: normal;
|
|
}
|
|
&:last-child {
|
|
@extend .py-1;
|
|
}
|
|
}
|
|
figure.wp-block-pullquote {
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
/* other wp styling */
|
|
.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;
|
|
}
|
|
}
|
|
|
|
|
|
// &:not(.is-style-outline) {
|
|
// @extend .btn-primary;
|
|
// }
|
|
// &.is-style-outline {
|
|
// @extend .btn-outline-primary;
|
|
// }
|
|
|
|
// /* blog */
|
|
// .post-title a {
|
|
// color: $gray-100;
|
|
// text-decoration: none;
|
|
// border-bottom: none;
|
|
// &:hover {
|
|
// color: $primary;
|
|
// // border-bottom: $secondary 3px solid;
|
|
// text-decoration: underline;
|
|
// text-decoration-color: $secondary;
|
|
// }
|
|
// }
|
|
// .post-lede,
|
|
// .post-body {
|
|
// h2, h3, h4, h5, h6 {
|
|
// color: $gray-200;
|
|
// margin-top: 2rem;
|
|
// }
|
|
// }
|
|
// .post li {
|
|
// line-height: 1.75rem;
|
|
// }
|
|
// .more-link {
|
|
// @extend .fs-6;
|
|
// }
|
|
|
|
// /* widget styling */
|
|
// #footer-widgets {
|
|
// background-color: $gray-750;
|
|
// border-radius: .5em;
|
|
// .widgettitle {
|
|
// @extend .fs-4;
|
|
// }
|
|
// .wp-block-group {
|
|
// @extend .px-3;
|
|
// @extend .py-3;
|
|
// max-width: 25rem;
|
|
// }
|
|
// ul {
|
|
// padding-inline-start: 2rem;
|
|
// }
|
|
// .wp-block-loginout {
|
|
// display: list-item;
|
|
// margin-left: 2rem;
|
|
// list-style-type: disc;
|
|
// }
|
|
// }
|
|
// .wp-block-tag-cloud {
|
|
// @extend .mb-0;
|
|
// }
|
|
|
|
/* search form */
|
|
.form-control {
|
|
color: $gray-100 !important;
|
|
background-color: $spaceblue-900 !important;
|
|
border-color: $spaceblue-600;
|
|
}
|
|
.form-control:focus {
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
.form-control::-ms-clear,
|
|
input.form-control::-ms-clear,
|
|
.form-control::-ms-reveal,
|
|
input.form-control::-ms-reveal { display: none; }
|
|
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
|
color: $gray-750 !important;
|
|
}
|
|
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: $gray-750 !important;
|
|
opacity: 1;
|
|
}
|
|
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: $gray-750 !important;
|
|
opacity: 1;
|
|
}
|
|
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $gray-750 !important;
|
|
}
|
|
.form-control::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: $gray-750 !important;
|
|
}
|
|
.form-control::placeholder { /* Most modern browsers support this now. */
|
|
color: $gray-750 !important;
|
|
}
|
|
|
|
|
|
label {
|
|
@extend .form-label;
|
|
}
|
|
input,
|
|
.wp-block-search .wp-block-search__input,
|
|
form input {
|
|
@extend .form-control;
|
|
&:focus {
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
&::-ms-clear
|
|
&::-ms-reveal { display: none; }
|
|
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
|
color: $gray-750 !important;
|
|
}
|
|
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: $gray-750 !important;
|
|
opacity: 1;
|
|
}
|
|
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: $gray-750 !important;
|
|
opacity: 1;
|
|
}
|
|
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $gray-750 !important;
|
|
}
|
|
&::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: $gray-750 !important;
|
|
}
|
|
&::placeholder { /* Most modern browsers support this now. */
|
|
color: $gray-750 !important;
|
|
}
|
|
}
|
|
button,
|
|
.wp-block-search .wp-block-search__button,
|
|
form button {
|
|
@extend .btn;
|
|
@extend .btn-primary;
|
|
}
|
|
select {
|
|
@extend .form-select;
|
|
} |