Skip to content

Commit

Permalink
Implemented blog post elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@horgeon
horgeon committed Feb 23, 2024
1 parent 1c85a75 commit a48853f
Show file tree
Hide file tree
Showing 19 changed files with 777 additions and 84 deletions.
1 change: 1 addition & 0 deletions dist/prodrivers/_bootswatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,4 @@ $web-font-path: false;

@import "content/general.scss";
@import "content/hero.scss";
@import "content/posts.scss";
44 changes: 44 additions & 0 deletions dist/prodrivers/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,50 @@ $decoration-diamond-margin-bottom: 0.65em;
$decoration-diamond-light-color: $body-color;
$decoration-diamond-dark-color: $body-color-dark;

// == Content - Posts
$post-list-heading-size: $h1-font-size;
$post-list-heading-padding-x: map.get($spacers, 3);
$post-list-heading-padding-y: map.get($spacers, 3);

$post-list-more-size: $h4-font-size;
$post-list-more-size-margin-y: map.get($spacers, 2);
$post-list-more-size-margin-x: map.get($spacers, 0);


$post-item-heading-size: $h3-font-size;

$post-item-margin-x: map.get($spacers, 3);
$post-item-margin-y: map.get($spacers, 3);
$post-item-heading-margin-x: map.get($spacers, 0);
$post-item-heading-margin-y: map.get($spacers, 0);
$post-item-excerpt-margin-x: map.get($spacers, 0);
$post-item-excerpt-margin-y: map.get($spacers, 0);

$post-item-subheader-size: $font-size-sm;
$post-item-subheader-style: italic;
$post-item-subheader-light-color: $gray-700;
$post-item-subheader-dark-color: $gray-200;


$post-page-border-shadow-light-color: $gray-500;
$post-page-border-shadow-dark-color: $gray-700;

$post-page-subheader-size: $post-item-subheader-size;
$post-page-subheader-style: $post-item-subheader-style;
$post-page-subheader-light-color: $post-item-subheader-light-color;
$post-page-subheader-dark-color: $post-item-subheader-dark-color;
$post-page-subheader-margin-x: map.get($spacers, 3);
$post-page-subheader-margin-y: map.get($spacers, 3);

$post-page-content-padding-x: map.get($spacers, 3);
$post-page-content-padding-y: map.get($spacers, 3);
$post-page-content-margin-y: map.get($spacers, 5);
$post-page-content-margin-x: map.get($spacers, 0);

$post-page-signature-light-color: $gray-700;
$post-page-signature-dark-color: $gray-200;
$post-page-signature-padding-top: map.get($spacers, 2);

// == Content - Hero

// Image variant
Expand Down
114 changes: 95 additions & 19 deletions dist/prodrivers/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ hr {
opacity: 0.25;
}

h6, .h6, h5, footer.site .copyright, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
h6, .h6, h5, footer.site .copyright, .h5, h4, .h4, h3, .h3, h2, section.post-list .post-item .heading, .h2, h1, section.post-list header > .heading, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-family: "Red Hat Display", "Open Sans", "Source Sans Pro", "Segoe UI", Calibri, Candara, Arial, sans-serif;
Expand All @@ -230,20 +230,20 @@ h6, .h6, h5, footer.site .copyright, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
color: var(--pdrv-heading-color);
}

h1, .h1 {
h1, section.post-list header > .heading, .h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1, .h1 {
h1, section.post-list header > .heading, .h1 {
font-size: 2.5rem;
}
}

h2, .h2 {
h2, section.post-list .post-item .heading, .h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2, .h2 {
h2, section.post-list .post-item .heading, .h2 {
font-size: 2rem;
}
}
Expand Down Expand Up @@ -4299,7 +4299,7 @@ textarea.form-control-lg {
--pdrv-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
.card, section.post-list .post-item {
--pdrv-card-spacer-y: 1rem;
--pdrv-card-spacer-x: 1rem;
--pdrv-card-title-spacer-y: 0.5rem;
Expand Down Expand Up @@ -4330,26 +4330,27 @@ textarea.form-control-lg {
background-clip: border-box;
border: var(--pdrv-card-border-width) solid var(--pdrv-card-border-color);
}
.card > hr {
.card > hr, section.post-list .post-item > hr {
margin-right: 0;
margin-left: 0;
}
.card > .list-group {
.card > .list-group, section.post-list .post-item > .list-group {
border-top: inherit;
border-bottom: inherit;
}
.card > .list-group:first-child {
.card > .list-group:first-child, section.post-list .post-item > .list-group:first-child {
border-top-width: 0;
}
.card > .list-group:last-child {
.card > .list-group:last-child, section.post-list .post-item > .list-group:last-child {
border-bottom-width: 0;
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
.card > .card-header + .list-group, section.post-list .post-item > .card-header + .list-group,
.card > .list-group + .card-footer,
section.post-list .post-item > .list-group + .card-footer {
border-top: 0;
}

.card-body {
.card-body, section.post-list .post-item {
flex: 1 1 auto;
padding: var(--pdrv-card-spacer-y) var(--pdrv-card-spacer-x);
color: var(--pdrv-card-color);
Expand Down Expand Up @@ -4418,19 +4419,19 @@ textarea.form-control-lg {
width: 100%;
}

.card-group > .card {
.card-group > .card, section.post-list .card-group > .post-item {
margin-bottom: var(--pdrv-card-group-margin);
}
@media (min-width: 576px) {
.card-group {
display: flex;
flex-flow: row wrap;
}
.card-group > .card {
.card-group > .card, section.post-list .card-group > .post-item {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group > .card + .card {
.card-group > .card + .card, section.post-list .card-group > .post-item + .card, section.post-list .card-group > .card + .post-item, section.post-list .card-group > .post-item + .post-item {
margin-left: 0;
border-left: 0;
}
Expand Down Expand Up @@ -11962,7 +11963,7 @@ header.page .block {
width: 85%;
margin: 40px auto;
}
header.page h1, header.page .h1,
header.page h1, header.page section.post-list header > .heading, section.post-list header.page header > .heading, header.page .h1,
header.page .heading {
margin: 0;
padding: inherit;
Expand Down Expand Up @@ -12208,7 +12209,7 @@ a.no-decoration {
.hero > hr {
border-top-color: #cbd3da;
}
.hero h1, .hero .h1,
.hero h1, .hero section.post-list header > .heading, section.post-list .hero header > .heading, .hero .h1,
.hero .heading {
font-size: 2.5rem;
color: inherit;
Expand Down Expand Up @@ -12284,7 +12285,7 @@ a.no-decoration {
padding-left: 3rem;
padding-right: 3rem;
}
.hero h1, .hero .h1,
.hero h1, .hero section.post-list header > .heading, section.post-list .hero header > .heading, .hero .h1,
.hero .heading {
font-size: 5rem;
}
Expand Down Expand Up @@ -12323,4 +12324,79 @@ a.no-decoration {
[data-bs-theme=dark] .hero .hero-subtitle {
text-shadow: 0 0 2px #212529;
background-color: rgba(0, 0, 0, 0.2);
}

section.post-list header {
padding: 1rem 1rem;
text-align: center;
}
section.post-list header > .heading {
font-size: 2.5rem;
}
section.post-list .post-item {
margin: 1rem 1rem;
}
section.post-list .post-item .heading {
font-size: 1.75rem;
margin: 0 0;
}
section.post-list .post-item .heading a {
color: inherit;
text-decoration: none;
}
section.post-list .post-item .heading a:hover, section.post-list .post-item .heading a:focus {
text-decoration: underline;
}
section.post-list .post-item .excerpt {
margin: 0 0;
}
section.post-list .post-item .subheader {
font-size: 0.875rem;
font-style: italic;
color: #495057;
}
section.post-list footer.post-more {
text-align: center;
margin: 0.5rem 0;
}
section.post-list footer.post-more a {
color: inherit;
font-size: 1.5rem;
text-decoration: none;
}
section.post-list footer.post-more a:hover, section.post-list footer.post-more a:focus {
text-decoration: underline;
}

[data-bs-theme=dark] section.post-list .post-item .subheader {
color: #e9ecef;
}

article[itemprop=blogPost] header .subheader {
font-size: 0.875rem;
font-style: italic;
color: #495057;
padding: 1rem 1rem;
}
article[itemprop=blogPost] section[itemprop=articleBody] {
padding: 1rem 1rem;
margin: 3rem 0;
box-shadow: -6px 0 5px -6px #adb5bd, 6px 0 5px -6px #adb5bd;
}
article[itemprop=blogPost] section[itemprop=articleBody] * > p:last-of-type, article[itemprop=blogPost] section[itemprop=articleBody] .signature {
margin: 0;
}
article[itemprop=blogPost] section[itemprop=articleBody] .signature {
color: #495057;
padding-top: 0.5rem;
}

[data-bs-theme=dark] article[itemprop=blogPost] header .subheader {
color: #e9ecef;
}
[data-bs-theme=dark] article[itemprop=blogPost] section[itemprop=articleBody] {
box-shadow: -6px 0 5px -6px #495057, 6px 0 5px -6px #495057;
}
[data-bs-theme=dark] article[itemprop=blogPost] section[itemprop=articleBody] .signature {
color: #e9ecef;
}
2 changes: 1 addition & 1 deletion dist/prodrivers/bootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/prodrivers/bootstrap.min.css.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit a48853f

Please sign in to comment.