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

progress on styling news/blog listing & content

Browse source
This commit is contained in:
Adam Piontek 2021-07-27 19:12:18 -04:00
parent ae29e9d98d
commit 64598f4aad
15 changed files with 282 additions and 135 deletions

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

@ -32,7 +32,9 @@ $spaceblue-400: #5d79ac;
$spaceblue-500: #4c6594;
$spaceblue-600: #3e5379;
$spaceblue-700: #31415e;
$spaceblue-750: #2a3751;
$spaceblue-800: #212c40;
$spaceblue-850: #1c2536;
$spaceblue-900: #151c28;
$light: $spaceblue-200;

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

@ -6,11 +6,10 @@ $line-height-base: 1.35;
$line-height-sm: 1.15;
$line-height-lg: 1.75;
// 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
$font-family-sans-serif:
// custom theme font
Overpass,
"Open Sans",
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
@ -30,10 +29,11 @@ $font-family-sans-serif:
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
$font-family-base: $font-family-sans-serif;
// handbrush / handwriting / special / emphasis font stack
$font-family-handbrush: "Permanent Marker", Caveat, Besom, Fjord, "Goudy Old Style", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
// handbrush / special / emphasis / impact font stack
$font-family-handbrush: "Permanent Marker", Besom, Fjord, Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
// base bootstrap font
$font-family-base: $font-family-sans-serif;
// Features
$enable-shadows: true;

40
assets/css/_fonts.scss
View file

@ -1,21 +1,23 @@
/* font-family-sans-serif : Fontsource Open Sans */
// @import "../../node_modules/@fontsource/open-sans/100.css"; /* Thin (Hairline) | normal */
// @import "../../node_modules/@fontsource/open-sans/100-italic.css"; /* Thin (Hairline) | italic */
// @import "../../node_modules/@fontsource/open-sans/200.css"; /* Extra Light (Ultra Light) | normal */
// @import "../../node_modules/@fontsource/open-sans/200-italic.css"; /* Extra Light (Ultra Light) | italic */
@import "../../node_modules/@fontsource/open-sans/300.css"; /* Light | normal */
@import "../../node_modules/@fontsource/open-sans/300-italic.css"; /* Light | italic */
@import "../../node_modules/@fontsource/open-sans/400.css"; /* Normal (Regular) | normal */
@import "../../node_modules/@fontsource/open-sans/400-italic.css"; /* Normal (Regular) | italic */
// @import "../../node_modules/@fontsource/open-sans/500.css"; /* Medium | normal */
// @import "../../node_modules/@fontsource/open-sans/500-italic.css"; /* Medium | italic */
@import "../../node_modules/@fontsource/open-sans/600.css"; /* Semi Bold (Demi Bold) | normal */
@import "../../node_modules/@fontsource/open-sans/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
@import "../../node_modules/@fontsource/open-sans/700.css"; /* Bold | normal */
@import "../../node_modules/@fontsource/open-sans/700-italic.css"; /* Bold | italic */
@import "../../node_modules/@fontsource/open-sans/800.css"; /* Extra Bold (Ultra Bold) | normal */
@import "../../node_modules/@fontsource/open-sans/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
// @import "../../node_modules/@fontsource/open-sans/900.css"; /* Black (Heavy) | normal */
// @import "../../node_modules/@fontsource/open-sans/900-italic.css"; /* Black (Heavy) | italic */
/* emphasis/special : Fontsource Permanent Marker */
@import "../../node_modules/@fontsource/permanent-marker/400.css"; /* Normal (Regular) | normal */
/* font-family-sans-serif : Fontsource Overpass */
@import "../../node_modules/@fontsource/overpass/100.css"; /* Thin (Hairline) | normal */
@import "../../node_modules/@fontsource/overpass/100-italic.css"; /* Thin (Hairline) | italic */
@import "../../node_modules/@fontsource/overpass/200.css"; /* Extra Light (Ultra Light) | normal */
@import "../../node_modules/@fontsource/overpass/200-italic.css"; /* Extra Light (Ultra Light) | italic */
@import "../../node_modules/@fontsource/overpass/300.css"; /* Light | normal */
@import "../../node_modules/@fontsource/overpass/300-italic.css"; /* Light | italic */
@import "../../node_modules/@fontsource/overpass/400.css"; /* Normal (Regular) | normal */
@import "../../node_modules/@fontsource/overpass/400-italic.css"; /* Normal (Regular) | italic */
@import "../../node_modules/@fontsource/overpass/600.css"; /* Semi Bold (Demi Bold) | normal */
@import "../../node_modules/@fontsource/overpass/600-italic.css"; /* Semi Bold (Demi Bold) | italic */
@import "../../node_modules/@fontsource/overpass/700.css"; /* Bold | normal */
@import "../../node_modules/@fontsource/overpass/700-italic.css"; /* Bold | italic */
@import "../../node_modules/@fontsource/overpass/800.css"; /* Extra Bold (Ultra Bold) | normal */
@import "../../node_modules/@fontsource/overpass/800-italic.css"; /* Extra Bold (Ultra Bold) | italic */
@import "../../node_modules/@fontsource/overpass/900.css"; /* Black (Heavy) | normal */
@import "../../node_modules/@fontsource/overpass/900-italic.css"; /* Black (Heavy) | italic */

0
assets/css/_nav-burger.scss → assets/css/_top-nav-burger.scss
View file

2
assets/css/_nav-bar-help.scss → assets/css/_top-navbar.scss
View file

@ -174,7 +174,7 @@ nav#top-navbar-grid-outer {
li.menu-item {
.dropdown-item.top-navbar-grid-main-menu-item-link {
@extend .fw-normal;
padding: 0.25rem 1rem 0 1rem !important;
// padding: 0.25rem 1rem 0 1rem !important;
text-transform: inherit !important;
&:hover {
@extend .text-decoration-none;

280
assets/css/app.scss
View file

@ -8,10 +8,10 @@
@import "svg-icons";
/* Navbar toggler icon override */
@import "nav-burger";
@import "top-nav-burger";
/* Navbar custom styling */
@import "nav-bar-help";
/* Top Navbar styling */
@import "top-navbar";
/* main */
html,
@ -20,6 +20,108 @@ body {
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;
@ -54,18 +156,6 @@ body {
// .border-gray-900 {
// border-color: $gray-900 !important;
// }
.text-gray-200 {
color: $gray-200;
}
.text-gray-300 {
color: $gray-300;
}
.text-gray-400 {
color: $gray-400;
}
.text-gray-500 {
color: $gray-500;
}
// .border-10 {
// border-width: 10px !important;
// }
@ -81,47 +171,93 @@ body {
// .fw-600 {
// font-weight: 600;
// }
// .fs-larger {
// font-size: larger;
// }
// .fs-smaller {
// font-size: smaller;
// }
/* blockquote handling */
blockquote {
&.wp-block-quote {
@extend .border-start;
@extend .border-gray;
@extend .border-5;
@extend .ms-0;
@extend .my-4;
@extend .ps-3;
@extend .py-2;
background-color: $gray-750;
p {
@extend .blockquote;
font-size: 1em;
&:last-of-type {
@extend .my-0;
@extend .py-0;
}
}
cite {
@extend .blockquote-footer;
@extend .text-gray-300;
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;
font-size: 0.85em;
font-style: normal;
}
:last-child {
@extend .py-1;
}
&.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 {
@ -177,8 +313,8 @@ blockquote {
/* search form */
.search-form .form-control {
color: $gray-100 !important;
background-color: $gray-800 !important;
border-color: $gray-500;
background-color: $spaceblue-900 !important;
border-color: $spaceblue-600;
}
.search-form .form-control:focus {
border-color: $input-focus-border-color;
@ -188,40 +324,40 @@ 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-500 !important;
color: $spaceblue-700 !important;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $gray-500 !important;
color: $spaceblue-700 !important;
opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $gray-500 !important;
color: $spaceblue-700 !important;
opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $gray-500 !important;
color: $spaceblue-700 !important;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
color: $gray-500 !important;
color: $spaceblue-700 !important;
}
.form-control::placeholder { /* Most modern browsers support this now. */
color: $gray-500 !important;
}
.search-form {
.btn {
padding: .25rem .75rem;
&.btn-outline-light {
color: $gray-300;
border-color: $gray-500;
&:hover {
color: $primary;
background-color: inherit;
border-color: $secondary;
}
}
.icon {
font-size: 1.375rem;
margin-top: 1px;
}
}
color: $spaceblue-700 !important;
}
// .search-form {
// .btn {
// padding: .25rem .75rem;
// &.btn-outline-light {
// color: $gray-300;
// border-color: $spaceblue-500;
// &:hover {
// color: $primary;
// background-color: inherit;
// border-color: $secondary;
// }
// }
// // .icon {
// // font-size: 1.375rem;
// // margin-top: 1px;
// // }
// }
// }

8
assets/js/main.js
View file

@ -6,13 +6,7 @@ import '../raw/rdnyc-logo.svg'; // rdnyc logo
// other:
import '../../node_modules/bootstrap-icons/icons/chevron-down.svg';
import '../../node_modules/bootstrap-icons/icons/search.svg';
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
// import "../../node_modules/@mdi/svg/svg/home.svg";
// import "../../node_modules/@mdi/svg/svg/information.svg";
// import "../../node_modules/@mdi/svg/svg/account.svg";
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
// import "../../node_modules/@mdi/svg/svg/rss.svg";
// import '../../node_modules/bootstrap-icons/icons/person.svg';
// Import Bootstrap JS
import 'bootstrap/js/dist/collapse';