kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

font flickering issue solve with animation

This commit is contained in:
zzossig 2020-01-17 16:16:39 +09:00
parent 28479beb60
commit f4f8d59031
9 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/sass/base/_animation.scss
View File

@ -1,5 +1,3 @@
// -- Slide Animations -- //
@include keyframes(slide-in-down) {
0% {
transform: translate(0,-12%);
@ -12,7 +10,6 @@
}
}
// Slide in Left to Center
@include keyframes(slide-in-left) {
0% {
transform: translate(-12%,0);
@ -23,4 +20,26 @@
transform: translate(0,0);
opacity: 1;
}
}
@include keyframes(slide-in-down-little) {
0% {
transform: translate(0,-1%);
opacity: 0;
}
100% {
transform: translate(0,0);
opacity: 1;
}
}
@include keyframes(fade-in) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

2
assets/sass/components/_bio.scss
View File

@ -3,7 +3,6 @@
@include justify-content(center);
@include align-items(flex-start);
@include flex-direction(column);
@include animation('slide-in-down .4s .2s 1 ease both');
width: 100%;
font-family: $title-font;
@ -13,6 +12,7 @@
width: 100%;
height: auto;
@include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
@include animation('slide-in-down .25s .6s 1 ease-in both');
&-wrapper {
width: 90%;

10
assets/sass/components/_summary.scss
View File

@ -1,7 +1,7 @@
.summary-card {
margin: 0 0.5rem;
padding: 0 0.5rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
@include animation('slide-in-down .2s .3s 1 ease-in both');
.title {
a {
@ -39,7 +39,7 @@
&__image {
width: 100%;
height: 100%;
@include animation('slide-in-left .15s .6s 1 ease-in both');
@include animation('slide-in-left .2s .6s 1 ease-in both');
&-wrapper {
height: 100%;
@ -81,7 +81,7 @@
.summary-classic {
padding: 0 1rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
@include animation('slide-in-down .2s .3s 1 ease-in both');
.title {
font-size: 24px;
@ -129,7 +129,7 @@
width: 100%;
height: 100%;
object-fit: contain;
@include animation('slide-in-left .1s .6s 1 ease-in both');
@include animation('slide-in-left .2s .6s 1 ease-in both');
&-wrapper {
max-width: 130px;
@ -165,7 +165,7 @@
.summary-compact {
padding: 0 1rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
@include animation('slide-in-down .2s .3s 1 ease-in both');
&__flexbox {
@include flexbox();

1
assets/sass/layout/_header.scss
View File

@ -14,6 +14,7 @@
@include flexbox();
@include justify-content(center);
@include flex-direction(column);
@include animation('fade-in .15s .1s 1 ease-in both');
&__title {
line-height: 1.1;

4
assets/sass/pages/_single.scss
View File

@ -11,7 +11,7 @@
line-height: 3rem;
overflow-wrap: break-word;
@include animation('slide-in-down .2s .25s 1 ease-in both');
@include animation('slide-in-left .2s .15s 1 ease-in both');
@include themify($themes) {
color: themed("single-header-title-color");
}
@ -47,7 +47,7 @@
}
&__contents {
@include animation('slide-in-left .15s .6s 1 ease-in both');
@include animation('slide-in-down-little .3s .4s 1 ease-in both');
&--gallery {
overflow: hidden;
}

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

4
layouts/gallery/single.html
View File

@ -9,7 +9,7 @@
{{ $root := . }}
{{ if in (lower .Params.Mode) "one" }}
<main class="gallery main">
<div class="grid single__contents">
<div class="grid gallery__container">
<div class="grid-sizer"></div>
{{ if .File.Dir }}
{{ $basename := (replace .File.Dir "\\" "/") }}
@ -31,7 +31,7 @@
{{ else }}
<main class="gallery main">
<div class="grid single__contents">
<div class="grid gallery__container">
<div class="grid-sizer"></div>
{{ if .File.Dir }}
{{ $basename := (replace .File.Dir "\\" "/") }}

13
layouts/partials/body/photoswipe.html
View File

@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
var modal = document.getElementById('modal');
var singleContentsElem = document.querySelector('.single__contents');
var galleryContainerElem = document.querySelector('.gallery__container');
var swipeWrapElem = document.querySelector('.swipe-wrap');
var mySwipeElem = document.getElementById('mySwipe');
var arrowLeftElem = document.querySelector('.modal__arrow--left');
@ -99,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function () {
var captionElem = document.querySelector('.modal__caption');
var pagingElem = document.querySelector('.modal__paging');
var itemsElem = document.querySelector('.modal__items');
var imgTotalNum = singleContentsElem.querySelectorAll('img').length;
var imgTotalNum = null;
var myFadeTimeout = null;
var mySwipe = null;
var keydownFunction = function (e) {
@ -114,6 +114,13 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
if (galleryContainerElem) {
imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
} else {
galleryContainerElem = document.querySelector('.single__contents');
imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
}
MicroModal.init({
onClose: () => {
if (mySwipe) {
@ -141,7 +148,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
singleContentsElem.querySelectorAll('img').forEach(function (elem, idx) {
galleryContainerElem.querySelectorAll('img').forEach(function (elem, idx) {
elem.style.cursor = 'pointer';
var clonedElem = elem.cloneNode(true);

2
layouts/partials/sidebar/site-bio.html
View File

@ -15,7 +15,7 @@
<img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
{{ else }}
<img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
{{ end }}
{{ end }}
{{ end }}
</div>
<hr class="hr-slash bio-hr"/>