more styling & layout improvements
This commit is contained in:
parent
bf1314bbda
commit
3eab6277ae
6 changed files with 132 additions and 216 deletions
|
|
@ -1,30 +1,32 @@
|
|||
// Colors
|
||||
// -- now defined in bs-custom --
|
||||
// $primary: #e48663;
|
||||
// $secondary: #00b0b0;
|
||||
// $success: #99c24d;
|
||||
// $info: #b489c7;
|
||||
// $warning: #f4d35e;
|
||||
// now defined in bs-custom
|
||||
// $primary: #51A39F;
|
||||
// // $secondary: #9883E5;
|
||||
// $secondary: #955E42;
|
||||
// $success: #37B800;
|
||||
// $info: #0075F2;
|
||||
// $warning: #F9E900;
|
||||
// $danger: #DD1C1A;
|
||||
|
||||
// gray scale based off 'pale silver' #bebfb0 which was text color in Lester's original design
|
||||
// however, i think a lighter text is more readable, going 1 lighter for this design
|
||||
// define black, white, gray
|
||||
$white: #fff;
|
||||
$gray-010: #e3dfdd;
|
||||
$gray-100: #d1cac7;
|
||||
$gray-200: #beb5b0;
|
||||
$gray-300: #aca09a;
|
||||
$gray-400: #9a8b84;
|
||||
$gray-500: #87776e;
|
||||
$gray-600: #70635c;
|
||||
$gray-700: #5a4f49;
|
||||
$gray-750: #4f4540;
|
||||
$gray-800: #433b37;
|
||||
$gray-900: #2d2825;
|
||||
$black: #000;
|
||||
$gray: #7d756c; // 6c757d 7d756c
|
||||
|
||||
// define gray scale
|
||||
$gray-100: tint-color($gray, 80%);
|
||||
$gray-200: tint-color($gray, 60%);
|
||||
$gray-300: tint-color($gray, 40%);
|
||||
$gray-400: tint-color($gray, 20%);
|
||||
$gray-500: $gray;
|
||||
$gray-600: shade-color($gray, 20%);
|
||||
$gray-700: shade-color($gray, 40%);
|
||||
$gray-750: shade-color($gray, 50%);
|
||||
$gray-800: shade-color($gray, 60%);
|
||||
$gray-900: shade-color($gray, 80%);
|
||||
|
||||
// spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design
|
||||
// background will be spaceblue-800
|
||||
|
||||
$spaceblue-100: #aebcd5;
|
||||
$spaceblue-200: #93a6c8;
|
||||
$spaceblue-300: #788fba;
|
||||
|
|
@ -37,9 +39,6 @@ $spaceblue-800: #212c40;
|
|||
$spaceblue-850: #1c2536;
|
||||
$spaceblue-900: #151c28;
|
||||
|
||||
$light: $spaceblue-200;
|
||||
$dark: $spaceblue-800;
|
||||
|
||||
|
||||
// Create your own map
|
||||
$custom-colors: (
|
||||
|
|
@ -51,8 +50,8 @@ $custom-colors: (
|
|||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800
|
||||
);
|
||||
|
||||
// Merge the maps
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
/* Bootstrap custom variable overrides */
|
||||
// Colors
|
||||
$primary: #51A39F;
|
||||
// $secondary: #9883E5;
|
||||
$secondary: #955E42;
|
||||
$success: #37B800;
|
||||
$info: #0075F2;
|
||||
$warning: #F9E900;
|
||||
$danger: #DD1C1A;
|
||||
|
||||
// Typography
|
||||
$font-size-base: 1.125rem;
|
||||
|
|
@ -38,12 +46,3 @@ $font-family-base: $font-family-sans-serif;
|
|||
// Features
|
||||
$enable-shadows: true;
|
||||
$enable-negative-margins: true;
|
||||
|
||||
// init colors for some vars
|
||||
$primary: #51A39F;
|
||||
// $secondary: #9883E5;
|
||||
$secondary: #955E42;
|
||||
$success: #37B800;
|
||||
$info: #0075F2;
|
||||
$warning: #F9E900;
|
||||
$danger: #DD1C1A
|
||||
|
|
@ -12,15 +12,11 @@
|
|||
padding-left: var(--bs-gutter-x, 4rem);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
// min-width: 1400px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container-lg {
|
||||
// @include media-breakpoint-up(lg) {
|
||||
// min-width: 960px;
|
||||
// }
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
|
@ -63,16 +59,6 @@ nav#top-navbar-grid-outer {
|
|||
@include media-breakpoint-up(xxl) {
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
// @include media-breakpoint-up(xxl) {
|
||||
// margin-bottom: 5rem !important;
|
||||
// }
|
||||
// @include media-breakpoint-up(md) {
|
||||
// padding-right: var(--bs-gutter-x, 1.25rem);
|
||||
// padding-left: var(--bs-gutter-x, 1.25rem);
|
||||
// }
|
||||
// @extend .px-3;
|
||||
// @extend .px-sm-4;
|
||||
// @extend .px-md-5;
|
||||
@extend .d-grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;
|
||||
|
|
@ -200,12 +186,15 @@ nav#top-navbar-grid-outer {
|
|||
@extend .text-decoration-none;
|
||||
color: $gray-300;
|
||||
&:hover {
|
||||
@extend .text-decoration-underline;
|
||||
text-decoration-color: $primary !important;
|
||||
color: $gray-300;
|
||||
@extend .text-decoration-none;
|
||||
color: $primary;
|
||||
}
|
||||
&.active {
|
||||
color: $primary;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
|
|
@ -220,7 +209,8 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
&.show {
|
||||
color: $primary;
|
||||
// color: $primary;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
}
|
||||
|
|
@ -234,7 +224,7 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
.dropdown-menu.dropdown-menu-dark {
|
||||
background-color: shade-color($gray-800, 50%);
|
||||
background-color: $spaceblue-900;
|
||||
li.menu-item {
|
||||
.dropdown-item.top-navbar-grid-main-menu-item-link {
|
||||
@extend .fw-normal;
|
||||
|
|
@ -242,18 +232,14 @@ nav#top-navbar-grid-outer {
|
|||
text-transform: inherit !important;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
color: $gray-900;
|
||||
color: $spaceblue-800;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.dropdown-item.top-navbar-grid-main-menu-item-link {
|
||||
color: $gray-900;
|
||||
background-color: shade-color($primary, 25%);
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
background-color: $primary;
|
||||
}
|
||||
color: $spaceblue-100;
|
||||
background-color: $spaceblue-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,17 +16,19 @@
|
|||
/* main */
|
||||
html,
|
||||
body {
|
||||
color: $gray-100;
|
||||
color: $gray-200;
|
||||
background-color: $spaceblue-800;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
@extend .text-decoration-none;
|
||||
// @extend .text-decoration-none;
|
||||
color: $gray-200;
|
||||
&:hover {
|
||||
@extend .text-decoration-underline;
|
||||
// @extend .text-decoration-underline;
|
||||
color: $primary;
|
||||
text-decoration-color: $gray-200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,25 +38,25 @@ a {
|
|||
font-family: $font-family-handbrush;
|
||||
}
|
||||
.text-gray-100 {
|
||||
color: $gray-100;
|
||||
color: $gray-100 !important;
|
||||
}
|
||||
.text-gray-200 {
|
||||
color: $gray-200;
|
||||
color: $gray-200 !important;
|
||||
}
|
||||
.text-gray-300 {
|
||||
color: $gray-300;
|
||||
color: $gray-300 !important;
|
||||
}
|
||||
.text-gray-400 {
|
||||
color: $gray-400;
|
||||
color: $gray-400 !important;
|
||||
}
|
||||
.text-gray-500 {
|
||||
color: $gray-500;
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
.text-gray-600 {
|
||||
color: $gray-600;
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
.text-gray-700 {
|
||||
color: $gray-700;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
.fs-larger {
|
||||
font-size: larger;
|
||||
|
|
@ -88,12 +90,27 @@ a {
|
|||
&.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;
|
||||
}
|
||||
&.border-spaceblue-300 {
|
||||
border-bottom-color: $spaceblue-300 !important;
|
||||
}
|
||||
&.border-spaceblue-400 {
|
||||
border-bottom-color: $spaceblue-400 !important;
|
||||
}
|
||||
&.border-spaceblue-500 {
|
||||
border-bottom-color: $spaceblue-500 !important;
|
||||
}
|
||||
&.border-spaceblue-600 {
|
||||
border-bottom-color: $spaceblue-600 !important;
|
||||
}
|
||||
&.border-spaceblue-700 {
|
||||
border-bottom-color: $spaceblue-700 !important;
|
||||
}
|
||||
&.border-spaceblue-800 {
|
||||
border-bottom-color: $spaceblue-800 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* post styling */
|
||||
|
|
@ -135,56 +152,6 @@ article.post.sticky {
|
|||
}
|
||||
}
|
||||
|
||||
// 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,
|
||||
|
|
@ -213,7 +180,7 @@ blockquote.wp-block-quote {
|
|||
}
|
||||
cite {
|
||||
@extend .blockquote-footer;
|
||||
@extend .text-gray-300;
|
||||
color: $gray-300;
|
||||
@extend .my-0;
|
||||
@extend .py-0;
|
||||
font-size: 0.85em;
|
||||
|
|
@ -249,7 +216,10 @@ figure.wp-block-pullquote {
|
|||
}
|
||||
|
||||
/* other wp styling */
|
||||
.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img {
|
||||
.wp-block-image.alignfull img,
|
||||
.wp-block-image.alignwide img,
|
||||
.wp-block-image img,
|
||||
.wp-block-media-text__media img {
|
||||
height: auto;
|
||||
}
|
||||
.btn-primary {
|
||||
|
|
@ -281,33 +251,49 @@ figure.wp-block-pullquote {
|
|||
@extend .text-end;
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
table,
|
||||
.wp-block-table table,
|
||||
.wp-block-calendar table {
|
||||
@extend .table;
|
||||
@extend .table-dark;
|
||||
}
|
||||
.wp-block-table {
|
||||
table {
|
||||
@extend .table;
|
||||
@extend .table-dark;
|
||||
caption {
|
||||
@extend .text-gray-400;
|
||||
}
|
||||
&.is-style-stripes {
|
||||
table {
|
||||
@extend .table-striped;
|
||||
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 {
|
||||
background-color: shade-color($primary, 25%) !important;
|
||||
border-color: shade-color($primary, 25%) !important;
|
||||
color: $gray-100;
|
||||
@extend .text-decoration-none;
|
||||
color: $spaceblue-100 !important;
|
||||
background-color: $spaceblue-600 !important;
|
||||
border-color: $spaceblue-600 !important;
|
||||
&:hover {
|
||||
background-color: shade-color($primary, 25%) !important;
|
||||
border-color: shade-color($primary, 25%) !important;
|
||||
color: $gray-100;
|
||||
@extend .text-decoration-none;
|
||||
color: $spaceblue-100 !important;
|
||||
background-color: $spaceblue-600 !important;
|
||||
border-color: $spaceblue-600 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -315,77 +301,23 @@ table {
|
|||
@extend .text-decoration-none;
|
||||
}
|
||||
& .page-link {
|
||||
border: 1px solid shade-color($primary, 25%);
|
||||
@extend .text-decoration-none;
|
||||
color: $gray-200;
|
||||
background-color: inherit !important;
|
||||
border: 1px solid $spaceblue-600;
|
||||
&:hover {
|
||||
border: 1px solid #51A39F;
|
||||
background-color: #51A39F !important;
|
||||
color: $spaceblue-800;
|
||||
background-color: $primary !important;
|
||||
border: 1px solid $spaceblue-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &: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;
|
||||
color: $gray-200;
|
||||
background-color: $spaceblue-900 !important;
|
||||
border-color: $spaceblue-600;
|
||||
}
|
||||
|
|
@ -397,24 +329,24 @@ 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;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
.form-control::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
.form-control::placeholder { /* Most modern browsers support this now. */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -431,24 +363,24 @@ form input {
|
|||
&::-ms-clear
|
||||
&::-ms-reveal { display: none; }
|
||||
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
&::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
&::placeholder { /* Most modern browsers support this now. */
|
||||
color: $gray-750 !important;
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
}
|
||||
button,
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ namespace WP_RDNYC;
|
|||
<article
|
||||
<?php
|
||||
$extra_post_class = is_singular() ? '' : ' mb-two-rem';
|
||||
echo post_class( 'post border-bottom border-gray-750 pb-4' . $extra_post_class );
|
||||
echo post_class( 'post border-bottom border-spaceblue-700 pb-4' . $extra_post_class );
|
||||
?>
|
||||
itemscope itemtype="https://schema.org/CreativeWork">
|
||||
|
||||
<header class="post-header">
|
||||
<?php
|
||||
echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">'
|
||||
echo (is_page() ? '<h1 class="post-title fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">'
|
||||
: '<h2 class="post-title fs-2 fw-600 mb-2">');
|
||||
|
||||
if ( is_archive() || is_search() || is_home() ) :
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ get_header(); ?>
|
|||
|
||||
<div class="content">
|
||||
<?php if (!is_singular()) : ?>
|
||||
<h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-gray-600">
|
||||
<h1 class="fw-light text-gray-300 mb-4 border-bottom border-dashed border-spaceblue-600">
|
||||
<?php if (is_archive()) : get_the_archive_title();
|
||||
else : single_post_title();
|
||||
endif;
|
||||
|
|
|
|||
Loading…
Reference in a new issue