Archived
1
0
This repository has been archived on 2020-12-10. You can view files and clone it, but cannot push or open issues or pull requests.
old/assets/css/blog.css

198 lines
3.3 KiB
CSS
Raw Normal View History

2018-10-16 16:28:42 +00:00
.like-toggle-icon-container.floating {
position: fixed;
transform: translateX(-100%);
padding: 5px 15px;
}
.like-toggle-icon-container.floating .like-count {
display: block;
margin: 15px auto;
text-align: center;
font-size: 24px;
font-weight: 600;
border-radius: 10px;
background-color: #fff;
height: 34px;
}
.like-toggle-icon {
width: 35pt;
height: 35pt;
font-size: 35pt;
position: relative;
color: gray;
cursor: pointer;
border: none;
background-color: transparent;
}
.like-toggle-icon:before, .like-toggle-icon:after {
position: absolute;
top: 0;
left: 0;
transition: all .3s ease-out;
content: "";
font-family: fontawesome;
}
.like-toggle-icon:hover:before {
transform: scale(1.2);
}
.like-toggle-icon:active:before {
transition: none;
transform: scale(1);
}
.like-toggle-icon:after {
opacity: 0;
}
.like-toggle-icon.-checked {
color: #A12C2C;
}
.like-toggle-icon.-checked:before {
content: "";
}
.like-toggle-icon.-checked:after {
content: "";
animation: likeFly .6s ease-in;
}
@keyframes heartbeat {
from {
opacity: 1;
}
to {
transform: scale(3);
opacity: 0;
}
}
@keyframes likeFly {
from {
opacity: 1;
}
to {
transform: scale(3) rotate(45deg) translateY(-90px);
opacity: 0;
}
}
.blog .blog-item {
background-color: #fff;
border-radius: 10px;
margin-bottom: 40px;
}
.blog .blog-item .img-blog-entry {
width: 100%;
border-radius: 10px 10px 0 0;
height: 350px;
background-position: center;
background-size: cover;
}
.blog .blog-item .blog-content .row div {
margin-bottom: 0;
}
.img-rounded-top {
width: 100%;
border-radius: 10px 10px 0 0;
}
.blog .blog-item .blog-content {
padding: 40px;
}
.blog .blog-content .post-title {
margin-top: 10px;
margin-bottom: 15px;
text-align: center;
}
.blog .blog-content .post-subtitle {
line-height: 1.22;
letter-spacing: -.022em;
margin-bottom: 22px;
font-size: 24px;
font-weight: 500;
}
.blog .blog-content .blog-post {
text-align: justify;
hyphens: auto;
font-size: 22px;
}
.blog .blog-post h1,
.blog .blog-post h2,
.blog .blog-post h3,
.blog .blog-post h4,
.blog .blog-post h5,
.blog .blog-post h6 {
margin-top: 1em;
margin-bottom: .5em;
}
.categories li {
display: inline;
padding-left: 0;
hyphens: auto;
}
.categories li:first-child {
margin-left: 0;
}
.categories li:after {
content: "∙";
}
.categories li:last-child:after {
content: "";
}
.widget {
margin-bottom: 30px;
}
.widget.filled-background {
background-color: #FAFAFA;
padding: 5px 20px;
border-radius: 10px;
}
.widget.filled-background .media {
margin-top: 0;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,.3);
transition: transform .2s;
}
.widget.filled-background .media:hover {
transform: scale(1.05);
}
.widget.filled-background .media:last-child {
border: none;
}
.widget.filled-background .media .post-image {
margin-bottom: 10px;
}
#blog > .container > .row > .col-sm-4.col-sm-push-8 {
width: 30%;
left: 70%;
}
#blog > .container > .row > .col-sm-8.col-sm-pull-4 {
width: 70%;
right: 30%;
}