// Blog
@mixin blog-critical{
.post-meta, .page-meta {
@include color(color, --gray-text, $gray_text); font-size: $small;
}
.date{
margin-right: 10px;
}
.tag{
@include gray-link {display: inline-block;}; i, .icon { font-size: 80%; margin-right: 5px; margin-left: 10px; } code { margin: 0 5px; white-space: nowrap; }
}
blog-list {
display: flex; flex-direction: column; align-items: center; a{ text-decoration: none; display: block; width: 100%; .card { padding: 2% 5%; margin: 10px auto; } .post-meta{ font-size: $footnotesize; } .post-title { color: $blue; font-size: $Large; font-weight: 700; } .post-description { font-size: $small } } a:hover{ color: inherit; .card{ @include float-card; margin-top: 5px; margin-bottom: 15px; transition: 0.3s; } .post-title{ color: $blue_hover; } } a:active { .card { margin: 10px auto; box-shadow: none; transition: none; } }
}
loadmore-btn {
padding: 20px 0; margin: 10px auto; width: 100%; color: $blue; font-size: $large; font-weight: 600; background: none; border: none;
}
blog-list-mini{
padding: 2% 5%; margin: 10px; @include float-card;
}
@media only screen and (min-width: 1250px) and (min-height: 500px) {
#toc { width: 13%; max-width: 250px; max-height: calc(100% - 300px); position: fixed; right: 2%; top: 100px; font-size: $footnotesize; @include float-card; padding: 15px; overflow-y: scroll; // https://stackoverflow.com/a/7993098/10365842 a { display:inline-block; text-decoration: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100%); } h2 { font-size: $normalsize; } ul { padding-left: 20px; list-style: none; } } .active { color: $blue; }
}
}
@mixin blog-noncritical{
iframe {
border: none;
}
.iframecontainer {
height: 0; padding-bottom: 56.25%; width: 100%; position: relative;
}
.iframecontainer > iframe {
position: absolute; width: 95%; height: 100%; left: 2.5%; box-shadow: 0 3px 20px rgba(0,0,0,0.1); &[src*="slides"] { width: 100%; left: 0; box-shadow: none; }
}
loadmore-btn{
&:hover { @include float-card; margin-top: 5px; margin-bottom: 15px; transition: 0.3s; cursor: pointer; color: $blue_hover; } &:active { margin: 10px auto; box-shadow: none; transition: none; } &:disabled { color: $gray_text; @include color(color, --gray-text, $gray_text); }
}
share-btn{
position: fixed; right: 60px; bottom: 60px; height: 50px; width: 50px; border-radius: 50%; border: none; color: #fff; background-color: $blue; box-shadow: 0 0 10px $blue_hover; z-index: 10; i, .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 150%; } &:hover{ background-color: $blue_hover; cursor: pointer; } &:active{ box-shadow: none; } @include phone { right: 30px; &:hover{ background-color: $blue; } }
}
.shared:before {
content: attr(fallback-text); color: $blue; font-size: $footnotesize; font-weight: 600; display: inline-block; width: 100px; position: relative; left: 50%; transform: translate(-50%, -50px); text-align: center; padding: 5px; z-index: 1; opacity: 0; transition: opacity 0.3s; border-radius: 5px; @include color(background-color, --dark-frosted-glass, rgba(245, 247, 249, 0.5)); @include frosted-glass;
}
.shared:hover:before {
opacity: 1;
}
}