f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

Add image popup effect

Browse Source
This commit is contained in:
Cotes Chung
2021-04-21 23:17:34 +08:00
parent e8296fe2e4
commit 84bb4d0c4b
15 changed files with 124 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
_sass/addon/commons.scss
View File

@@ -363,44 +363,24 @@ footer {
overflow-wrap: break-word;
word-wrap: break-word;
@mixin img-caption {
+ em {
display: block;
text-align: center;
font-style: normal;
font-size: 80%;
padding: 0;
color: #6d6c6c;
img[data-src] {
margin: 0.5rem 0;
&.left {
float: left;
margin: 0.75rem 1rem 1rem 0;
}
}
@mixin img-style($caption: false) {
img[data-src] {
margin: 0.5rem 0;
@if $caption {
@include img-caption;
}
&.left {
float: left;
margin: 0.75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: 0.75rem 0 1rem 1rem;
}
&.shadow {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
}
&.right {
float: right;
margin: 0.75rem 0 1rem 1rem;
}
}
@include img-style(true);
&.shadow {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
}
}
a {
blockquote & {
@@ -415,17 +395,27 @@ footer {
}
}
&.img-link {
@include img-style;
@include img-caption;
}
}
&.popup { // created by `_includes/img-extra.html`
cursor: zoom-in;
> p {
> img[data-src]:not(.normal):not(.left):not(.right) {
@include align-center;
> img[data-src]:not(.normal):not(.left):not(.right) {
@include align-center;
}
}
}
&.img-link {
+ em {
display: block;
text-align: center;
font-style: normal;
font-size: 80%;
padding: 0;
color: #6d6c6c;
}
}
} // a
ul {
// attribute 'hide-bullet' was added by liquid
@@ -584,6 +574,14 @@ footer {
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
/* --- override magnific-popup --- */
figure .mfp-title {
text-align: center;
padding-right: 0;
margin-top: 0.5rem;
}
/* --- sidebar layout --- */
$tab-count: 5 !default;