adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

more styling & layout improvements

Browse source
This commit is contained in:
Adam Piontek 2021-07-28 19:05:47 -04:00
parent bf1314bbda
commit 3eab6277ae
6 changed files with 132 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
assets/css/_bs-colors.scss
View file

@ -1,30 +1,32 @@
// Colors // Colors
// -- now defined in bs-custom -- // now defined in bs-custom
// $primary: #e48663; // $primary: #51A39F;
// $secondary: #00b0b0; // // $secondary: #9883E5;
// $success: #99c24d; // $secondary: #955E42;
// $info: #b489c7; // $success: #37B800;
// $warning: #f4d35e; // $info: #0075F2;
// $warning: #F9E900;
// $danger: #DD1C1A;
// gray scale based off 'pale silver' #bebfb0 which was text color in Lester's original design // define black, white, gray
// however, i think a lighter text is more readable, going 1 lighter for this design
$white: #fff; $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; $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 // spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design
// background will be spaceblue-800 // background will be spaceblue-800
$spaceblue-100: #aebcd5; $spaceblue-100: #aebcd5;
$spaceblue-200: #93a6c8; $spaceblue-200: #93a6c8;
$spaceblue-300: #788fba; $spaceblue-300: #788fba;
@ -37,9 +39,6 @@ $spaceblue-800: #212c40;
$spaceblue-850: #1c2536; $spaceblue-850: #1c2536;
$spaceblue-900: #151c28; $spaceblue-900: #151c28;
$light: $spaceblue-200;
$dark: $spaceblue-800;
// Create your own map // Create your own map
$custom-colors: ( $custom-colors: (
@ -52,7 +51,7 @@ $custom-colors: (
"light": $light, "light": $light,
"dark": $dark, "dark": $dark,
"gray": $gray-600, "gray": $gray-600,
"gray-dark": $gray-800, "gray-dark": $gray-800
); );
// Merge the maps // Merge the maps

17
assets/css/_bs-custom.scss
View file

@ -1,4 +1,12 @@
/* Bootstrap custom variable overrides */ /* Bootstrap custom variable overrides */
// Colors
$primary: #51A39F;
// $secondary: #9883E5;
$secondary: #955E42;
$success: #37B800;
$info: #0075F2;
$warning: #F9E900;
$danger: #DD1C1A;
// Typography // Typography
$font-size-base: 1.125rem; $font-size-base: 1.125rem;
@ -38,12 +46,3 @@ $font-family-base: $font-family-sans-serif;
// Features // Features
$enable-shadows: true; $enable-shadows: true;
$enable-negative-margins: true; $enable-negative-margins: true;
// init colors for some vars
$primary: #51A39F;
// $secondary: #9883E5;
$secondary: #955E42;
$success: #37B800;
$info: #0075F2;
$warning: #F9E900;
$danger: #DD1C1A

40
assets/css/_layout-top-navbar-main.scss
View file

@ -12,15 +12,11 @@
padding-left: var(--bs-gutter-x, 4rem); padding-left: var(--bs-gutter-x, 4rem);
} }
@include media-breakpoint-up(xxl) { @include media-breakpoint-up(xxl) {
// min-width: 1400px;
max-width: 1400px; max-width: 1400px;
} }
} }
} }
.container-lg { .container-lg {
// @include media-breakpoint-up(lg) {
// min-width: 960px;
// }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
max-width: 960px; max-width: 960px;
} }
@ -63,16 +59,6 @@ nav#top-navbar-grid-outer {
@include media-breakpoint-up(xxl) { @include media-breakpoint-up(xxl) {
margin-bottom: 4rem !important; 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; @extend .d-grid;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto; 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; @extend .text-decoration-none;
color: $gray-300; color: $gray-300;
&:hover { &:hover {
@extend .text-decoration-underline; @extend .text-decoration-none;
text-decoration-color: $primary !important; color: $primary;
color: $gray-300;
} }
&.active { &.active {
color: $primary; opacity: 0.5;
&:hover {
@extend .text-decoration-none;
color: $gray-300;
}
} }
} }
.dropdown-toggle { .dropdown-toggle {
@ -220,7 +209,8 @@ nav#top-navbar-grid-outer {
} }
} }
&.show { &.show {
color: $primary; // color: $primary;
opacity: 0.5;
&:hover { &:hover {
@extend .text-decoration-none; @extend .text-decoration-none;
} }
@ -234,7 +224,7 @@ nav#top-navbar-grid-outer {
} }
} }
.dropdown-menu.dropdown-menu-dark { .dropdown-menu.dropdown-menu-dark {
background-color: shade-color($gray-800, 50%); background-color: $spaceblue-900;
li.menu-item { li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link { .dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal; @extend .fw-normal;
@ -242,18 +232,14 @@ nav#top-navbar-grid-outer {
text-transform: inherit !important; text-transform: inherit !important;
&:hover { &:hover {
@extend .text-decoration-none; @extend .text-decoration-none;
color: $gray-900; color: $spaceblue-800;
background-color: $primary; background-color: $primary;
} }
} }
&.active { &.active {
.dropdown-item.top-navbar-grid-main-menu-item-link { .dropdown-item.top-navbar-grid-main-menu-item-link {
color: $gray-900; color: $spaceblue-100;
background-color: shade-color($primary, 25%); background-color: $spaceblue-600;
&:hover {
@extend .text-decoration-none;
background-color: $primary;
}
} }
} }
} }

238
assets/css/app.scss
View file

@ -16,17 +16,19 @@
/* main */ /* main */
html, html,
body { body {
color: $gray-100; color: $gray-200;
background-color: $spaceblue-800; background-color: $spaceblue-800;
height: 100%; height: 100%;
} }
/* links */ /* links */
a { a {
@extend .text-decoration-none; // @extend .text-decoration-none;
color: $gray-200;
&:hover { &:hover {
@extend .text-decoration-underline; // @extend .text-decoration-underline;
color: $primary; color: $primary;
text-decoration-color: $gray-200 !important;
} }
} }
@ -36,25 +38,25 @@ a {
font-family: $font-family-handbrush; font-family: $font-family-handbrush;
} }
.text-gray-100 { .text-gray-100 {
color: $gray-100; color: $gray-100 !important;
} }
.text-gray-200 { .text-gray-200 {
color: $gray-200; color: $gray-200 !important;
} }
.text-gray-300 { .text-gray-300 {
color: $gray-300; color: $gray-300 !important;
} }
.text-gray-400 { .text-gray-400 {
color: $gray-400; color: $gray-400 !important;
} }
.text-gray-500 { .text-gray-500 {
color: $gray-500; color: $gray-500 !important;
} }
.text-gray-600 { .text-gray-600 {
color: $gray-600; color: $gray-600 !important;
} }
.text-gray-700 { .text-gray-700 {
color: $gray-700; color: $gray-700 !important;
} }
.fs-larger { .fs-larger {
font-size: larger; font-size: larger;
@ -88,12 +90,27 @@ a {
&.border-gray-700 { &.border-gray-700 {
border-bottom-color: $gray-700 !important; border-bottom-color: $gray-700 !important;
} }
&.border-gray-750 {
border-bottom-color: $gray-750 !important;
}
&.border-gray-800 { &.border-gray-800 {
border-bottom-color: $gray-800 !important; 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 */ /* 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 handling */
blockquote, blockquote,
@ -213,7 +180,7 @@ blockquote.wp-block-quote {
} }
cite { cite {
@extend .blockquote-footer; @extend .blockquote-footer;
@extend .text-gray-300; color: $gray-300;
@extend .my-0; @extend .my-0;
@extend .py-0; @extend .py-0;
font-size: 0.85em; font-size: 0.85em;
@ -249,7 +216,10 @@ figure.wp-block-pullquote {
} }
/* other wp styling */ /* 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; height: auto;
} }
.btn-primary { .btn-primary {
@ -281,33 +251,49 @@ figure.wp-block-pullquote {
@extend .text-end; @extend .text-end;
} }
} }
table {
@extend .table; table,
@extend .table-dark; .wp-block-table table,
} .wp-block-calendar table {
.wp-block-table {
table {
@extend .table; @extend .table;
@extend .table-dark; @extend .table-dark;
caption {
@extend .text-gray-400;
} }
&.is-style-stripes { thead th,
table { 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; @extend .table-striped;
}
}
} }
.post-page-numbers { .post-page-numbers {
@extend .text-decoration-none;
@extend .page-item; @extend .page-item;
&.current { &.current {
@extend .active; @extend .active;
& .page-link { & .page-link {
background-color: shade-color($primary, 25%) !important; @extend .text-decoration-none;
border-color: shade-color($primary, 25%) !important; color: $spaceblue-100 !important;
color: $gray-100; background-color: $spaceblue-600 !important;
border-color: $spaceblue-600 !important;
&:hover { &:hover {
background-color: shade-color($primary, 25%) !important; @extend .text-decoration-none;
border-color: shade-color($primary, 25%) !important; color: $spaceblue-100 !important;
color: $gray-100; background-color: $spaceblue-600 !important;
border-color: $spaceblue-600 !important;
} }
} }
} }
@ -315,77 +301,23 @@ table {
@extend .text-decoration-none; @extend .text-decoration-none;
} }
& .page-link { & .page-link {
border: 1px solid shade-color($primary, 25%); @extend .text-decoration-none;
color: $gray-200;
background-color: inherit !important; background-color: inherit !important;
border: 1px solid $spaceblue-600;
&:hover { &:hover {
border: 1px solid #51A39F;
background-color: #51A39F !important;
color: $spaceblue-800; 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 */ /* search form */
.form-control { .form-control {
color: $gray-100 !important; color: $gray-200;
background-color: $spaceblue-900 !important; background-color: $spaceblue-900 !important;
border-color: $spaceblue-600; border-color: $spaceblue-600;
} }
@ -397,24 +329,24 @@ input.form-control::-ms-clear,
.form-control::-ms-reveal, .form-control::-ms-reveal,
input.form-control::-ms-reveal { display: none; } input.form-control::-ms-reveal { display: none; }
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */ .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 */ .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $gray-750 !important; color: $spaceblue-700 !important;
opacity: 1; opacity: 1;
} }
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $gray-750 !important; color: $spaceblue-700 !important;
opacity: 1; opacity: 1;
} }
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
.form-control::-ms-input-placeholder { /* Microsoft Edge */ .form-control::-ms-input-placeholder { /* Microsoft Edge */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
.form-control::placeholder { /* Most modern browsers support this now. */ .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-clear
&::-ms-reveal { display: none; } &::-ms-reveal { display: none; }
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */ &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $gray-750 !important; color: $spaceblue-700 !important;
opacity: 1; opacity: 1;
} }
&::-moz-placeholder { /* Mozilla Firefox 19+ */ &::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $gray-750 !important; color: $spaceblue-700 !important;
opacity: 1; opacity: 1;
} }
&:-ms-input-placeholder { /* Internet Explorer 10-11 */ &:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
&::-ms-input-placeholder { /* Microsoft Edge */ &::-ms-input-placeholder { /* Microsoft Edge */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
&::placeholder { /* Most modern browsers support this now. */ &::placeholder { /* Most modern browsers support this now. */
color: $gray-750 !important; color: $spaceblue-700 !important;
} }
} }
button, button,

4
content-templates/content-article.php
View file

@ -12,13 +12,13 @@ namespace WP_RDNYC;
<article <article
<?php <?php
$extra_post_class = is_singular() ? '' : ' mb-two-rem'; $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"> itemscope itemtype="https://schema.org/CreativeWork">
<header class="post-header"> <header class="post-header">
<?php <?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">'); : '<h2 class="post-title fs-2 fw-600 mb-2">');
if ( is_archive() || is_search() || is_home() ) : if ( is_archive() || is_search() || is_home() ) :

2
index.php
View file

@ -13,7 +13,7 @@ get_header(); ?>
<div class="content"> <div class="content">
<?php if (!is_singular()) : ?> <?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(); <?php if (is_archive()) : get_the_archive_title();
else : single_post_title(); else : single_post_title();
endif; endif;