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
// -- 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: (
@ -52,7 +51,7 @@ $custom-colors: (
"light": $light,
"dark": $dark,
"gray": $gray-600,
"gray-dark": $gray-800,
"gray-dark": $gray-800
);
// Merge the maps

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

@ -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

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

@ -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;
}
}
}

236
assets/css/app.scss
View file

@ -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;
caption {
@extend .text-gray-400;
}
.wp-block-table {
table {
@extend .table;
@extend .table-dark;
thead th,
tbody td {
border: none !important;
}
&.is-style-stripes {
table {
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,

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

@ -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() ) :

2
index.php
View file

@ -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;