Typesetter/themes/Bootstrap4/_common/simple_blog_common.scss
2021-09-08 19:52:21 +02:00

246 lines
4.5 KiB
SCSS

// Simple Blog is rather old and, as of 3.0.4, it seriously lacks
// some CSS classes and div wrappers to be styled in a modern way.
// So the following feels a bit like crypto and isn't easy to hack. Sorry for that.
#gpx_content > .blog_post,
#gpx_content > p.blog_nav_links,
#gpx_content > p.blog_nav_links:empty ~ p, // that's the post-install message
#gpx_content > .category_container,
#gpx_content > .comment_container,
#gpx_content > h2, // assuming this is the categories selection page and no one else will write a h2 directly to #gpx_content
#gpx_content > h2 + ul {
padding: ($grid-gutter-width / 4) 0;
&:first-of-type {
padding-top: ($grid-gutter-width / 2);
}
@include media-breakpoint-up(md) {
padding-top: $grid-gutter-width / 2;
padding-bottom: ($grid-gutter-width / 4);
&:first-of-type {
padding-top: $grid-gutter-width;
}
}
}
// .blog_nav_links only appears once per page
// so we need to overrule the :first-of-type
#gpx_content > p.blog_nav_links:first-of-type {
padding-top: ($grid-gutter-width / 4) !important;
@include media-breakpoint-up(md) {
padding-top: ($grid-gutter-width / 2) !important;
}
}
#gpx_content > .blog_post + .category_container {
padding-top: 0;
margin-top: ($spacer * -1);
}
#gpx_content > .blog_nav_links,
#gpx_content > .category_container {
clear: both;
a {
&:before {
display: inline-block;
margin-right: ($spacer / 2);
font-family: FontAwesome;
}
}
}
// 'buttonize' the blog nav links
#gpx_content > .blog_nav_links {
@extend .btn-group, .btn-group-sm;
> a {
@extend .btn, .btn-primary;
+ a {
margin-left: -0.3em !important; // remove the gap
}
}
> .editable_area { // admin
@extend .btn, .btn-primary;
a {
color: inherit;
text-decoration: none;
}
+ .editable_area,
+ a {
margin-left: -0.3em !important; // remove the gap
}
}
}
#gpx_content > .blog_nav_links {
a:before { content: '\f102'; } // that's the blog home linke
a.blog_older:before { content: '\f105'; }
a.blog_newer:before { content: '\f104'; }
a.blog_post_new:before { content: '\f055'; }
}
#gpx_content > .category_container {
font-size: $font-size-sm;
a:before {
content: '\f02b';
margin-left: ($spacer / 4);
margin-right: ($spacer / 4);
}
}
.blog-item-count {
@extend .badge, .badge-light;
}
/*
.blog_post .simple_blog_info,
.category_container,
.blog_nav_links {
font-size: 87.5%;
color: $gray-700;
}
.blog_nav_links > * {
margin-right: 0.5em;
}
*/
.blog_post {
@extend .clearfix;
> .twysiwygr {
margin-bottom: 1rem;
}
.twysiwygr > *:last-child {
margin-bottom: 0;
}
+ br {
display: none;
}
~ .clear {
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
img.img-thumbnail {
float: left;
margin: 0 $spacer ($spacer / 2) 0;
max-width: 25% !important;
}
&.single_blog_item { // we don't need to link to ourselves here
> *[id ^= "blog_post_"] {
a,
a:hover,
a:focus {
color: inherit;
pointer-events: none;
cursor: default;
}
}
}
}
// ### Comments ###
// .comment_container {}
.comment_area {
background-color: $light;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $spacer;
border: $border-width solid $border-color;
.comment {
margin-bottom: 0;
}
}
// 'Bootstrapify the comment form
.comment_container > form {
max-width: 100%;
ul {
max-width: 400px;
}
li {
label {
float: none;
display: block;
width: auto;
}
br {
display: none;
}
input,
select,
textarea {
float: none;
width: 100%;
@extend .form-control;
}
textarea {
margin-bottom: 0.6em;
}
input.submit {
width: auto;
@extend .btn, .btn-primary;
}
}
}
// ### Gadgets and Areas ###
.gpArea_Simple_Blog,
.gpArea_Simple-Blog-Gadget {
h3 {
margin-bottom: $spacer;
}
b.simple_blog_title {
display: block;
clear: both;
font-weight: 600;
}
.simple_blog_info {
font-weight: 600;
}
.simple_blog_abbrev {
position: relative;
@extend .clearfix;
margin-bottom: $spacer;
// Read More link
> a {
display: block;
float: right;
white-space: nowrap;
text-decoration: none !important;
@extend .stretched-link;
}
}
}
.gpArea_Simple-Blog-Archives-Gadget,
.gpArea_Simple_Blog_Archives,
.gpArea_Simple-Blog-Categories-Gadget,
.gpArea_Simple_Blog_Categories {
margin-bottom: $spacer;
}
.simple_blog_gadget_label {
font-size: 0.872rem;
font-weight: bolder;
letter-spacing: 0.075em;
text-transform: uppercase;
color: $gray-700;
}
.simple_blog_gadget ul {
list-style: none;
padding-left: ($spacer / 2);
}