hugo-theme-next/assets/css/_common/components/post/post-footer.scss

91 lines
1.6 KiB
SCSS
Raw Normal View History

// Flexbox layout makes it possible to reorder the child
// elements of .post-footer through the `order` CSS property
// Fix issue #16
// To do: use `gap` instead of `margin`
// See https://caniuse.com/flexbox-gap
.post-footer {
@include flex-column();
hr{
text-align:center;
line-height:0px;
height: 0px;
background-image: none;
border-bottom: .125em dashed #999;
margin: 24px 0 12px 0;
&:after{
content: $post_end_line_tip;
font-size: .9em;
font-weight: bold;
background: #fff;
padding: 0 5px;
z-index:2;
}
}
}
.post-eof {
background: $grey-light;
height: 1px;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 8%;
.post-block:last-of-type & {
display: none;
}
}
@if $creative_commons_post {
.post-copyright {
border-left: 3px solid #ff2a2a;
background: var(--card-bg-color);
img {
margin: 8px;
opacity: .8;
filter: blur(.08em);
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-ms-transform: rotate(320deg);
-o-transform: rotate(320deg);
transform: rotate(320deg);
}
ul {
list-style: none;
padding: .5em 1em;
@include post-card();
border: none;
background: none;
}
}
}
.post-tags {
margin-bottom: 20px;
text-align: center;
a {
display: inline-block;
font-size: $font-size-smaller;
&:before {
@if $post_end_tag_icon {
content: "🔖";
font-size: 1.25em;
}
@else {
content: "#";
}
}
&:not(:last-child) {
margin-right: 10px;
}
}
}