diff --git a/package.json b/package.json
index 01504fd..333f0f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "hexo-theme-shoka",
- "version": "0.1.2",
+ "version": "0.1.3",
"description": "",
"author": "Ruri Shimotsuki",
"license": "MIT",
diff --git a/scripts/helpers/asset.js b/scripts/helpers/asset.js
index edd2d87..ed03647 100644
--- a/scripts/helpers/asset.js
+++ b/scripts/helpers/asset.js
@@ -1,6 +1,16 @@
/* global hexo */
'use strict';
+const { htmlTag, url_for } = require('hexo-util');
+const theme_env = require('../../package.json');
+
+hexo.extend.helper.register('hexo_env', function (type) {
+ return this.env[type]
+})
+
+hexo.extend.helper.register('theme_env', function (type) {
+ return theme_env[type]
+})
hexo.extend.helper.register('_vendor_font', () => {
const config = hexo.theme.config.font;
@@ -25,7 +35,7 @@ hexo.extend.helper.register('_vendor_font', () => {
fontFamilies = fontFamilies.join('|');
// Merge extra parameters to the final processed font string
- return fontFamilies ? `
` : '';
+ return fontFamilies ? htmlTag('link', { rel: 'stylesheet', href: `${fontHost}/css?family=${fontFamilies.concat(fontDisplay, fontSubset)}` }) : '';
});
@@ -48,6 +58,18 @@ hexo.extend.helper.register('_vendor_js', () => {
let result = vendorJs ? `` : '';
- return result;
+ return vendorJs ? htmlTag('script', { src: `//cdn.jsdelivr.net/combine/${vendorJs}` }, '') : '';
});
+hexo.extend.helper.register('_css', function(...urls) {
+ const { statics, css } = hexo.theme.config;
+
+ return urls.map(url => htmlTag('link', { rel: 'stylesheet', href: url_for.call(this, `${statics}${css}/${url}?v=${theme_env['version']}`) })).join('');
+});
+
+
+hexo.extend.helper.register('_js', function(...urls) {
+ const { statics, js } = hexo.theme.config;
+
+ return urls.map(url => htmlTag('script', { src: url_for.call(this, `${statics}${js}/${url}?v=${theme_env['version']}`) }, '')).join('');
+});
diff --git a/scripts/helpers/engine.js b/scripts/helpers/engine.js
index 1322802..85b2aa1 100644
--- a/scripts/helpers/engine.js
+++ b/scripts/helpers/engine.js
@@ -2,7 +2,7 @@
'use strict';
-const { htmlTag } = require('hexo-util');
+const { htmlTag, url_for } = require('hexo-util');
const url = require('url');
const crypto = require('crypto');
const fs = require('fs');
@@ -13,7 +13,7 @@ const imageListFile = fs.readFileSync(path.join(__dirname, '../../_images.yml'))
const imageList = yaml.safeLoad(imageListFile);
const randomServer = function() {
- return [1,2,3,4][Math.floor(Math.random() * 4)]
+ return parseInt(Math.random()*4,10)+1
}
const randomBG = function(count = 1) {
@@ -33,31 +33,6 @@ const randomBG = function(count = 1) {
return 'https://tva'+randomServer()+'.sinaimg.cn/mw690/'+imageList[Math.floor(Math.random() * imageList.length)]
}
-
-hexo.extend.helper.register('hexo_env', function (type) {
- return this.env[type]
-})
-
-
-hexo.extend.helper.register('theme_env', function (type) {
- var env = require('../../package.json')
- return env[type]
-})
-
-hexo.extend.helper.register('_css', function(...urls) {
- const { statics, css } = hexo.theme.config;
-
- return urls.map(url => this.css(`${statics}${css}/${url}`)).join('');
-});
-
-
-hexo.extend.helper.register('_js', function(...urls) {
- const { statics, js } = hexo.theme.config;
-
- return urls.map(url => this.js(`${statics}${js}/${url}`)).join('');
-});
-
-
hexo.extend.helper.register('_url', function(path, text, options = {}) {
const { config } = this;
const data = url.parse(path);
@@ -66,7 +41,7 @@ hexo.extend.helper.register('_url', function(path, text, options = {}) {
const theme = hexo.theme.config;
let exturl = '';
let tag = 'a';
- let attrs = { href: this.url_for(path) };
+ let attrs = { href: url_for.call(this, path) };
// If `exturl` enabled, set spanned links only on external links.
if (theme.exturl && data.protocol && data.hostname !== siteHost) {
@@ -115,14 +90,13 @@ hexo.extend.helper.register('_url', function(path, text, options = {}) {
hexo.extend.helper.register('_cover', function(item, num) {
- var that = this
const { statics, js } = hexo.theme.config;
var format = function(img) {
if (img.startsWith('//') || img.startsWith('http')) {
return img
} else {
- return that.url_for(statics + img)
+ return url_for.call(this, statics + img)
}
}
@@ -137,7 +111,7 @@ hexo.extend.helper.register('_cover', function(item, num) {
})
hexo.extend.helper.register('_md5', function(path) {
- let str = this.url_for(path);
+ let str = url_for.call(this, path);
str.replace('index.html', '');
return crypto.createHash('md5').update(str).digest('hex');
});
@@ -159,7 +133,7 @@ hexo.extend.helper.register('canonical', function() {
hexo.extend.helper.register('i18n_path', function(language) {
const { path, lang } = this.page;
const base = path.startsWith(lang) ? path.slice(lang.length + 1) : path;
- return this.url_for(`${this.languages.indexOf(language) === 0 ? '' : '/' + language}/${base}`);
+ return url_for.call(this, `${this.languages.indexOf(language) === 0 ? '' : '/' + language}/${base}`);
});
/**
diff --git a/source/css/_colors.styl b/source/css/_colors.styl
index c266b02..df8ad07 100644
--- a/source/css/_colors.styl
+++ b/source/css/_colors.styl
@@ -106,7 +106,7 @@
}
}
- .container>header .lozad::before {
+ #imgs::before {
background-color: rgba(0, 0, 0, 0.5);
}
diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl
index c594caf..177b09f 100644
--- a/source/css/_common/components/highlight/highlight.styl
+++ b/source/css/_common/components/highlight/highlight.styl
@@ -113,7 +113,7 @@ code,
@extend .elastic;
.code-container {
- height: 100vh;
+ height: calc(100% - 3rem);
overflow: scroll;
}
}
diff --git a/source/css/_common/components/tags/list.styl b/source/css/_common/components/tags/list.styl
index 3ca036b..9c7877e 100644
--- a/source/css/_common/components/tags/list.styl
+++ b/source/css/_common/components/tags/list.styl
@@ -56,7 +56,7 @@
border-radius: 50%;
text-align: center;
font-size: .8em;
- line-height: 1.3;
+ line-height: 1.4;
top: .5rem;
left: -1.6rem;
background: var(--primary-color);
diff --git a/source/css/_common/components/third-party/loading.styl b/source/css/_common/components/third-party/loading.styl
index 84a534a..3773549 100644
--- a/source/css/_common/components/third-party/loading.styl
+++ b/source/css/_common/components/third-party/loading.styl
@@ -1,95 +1,219 @@
-$cat-img {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;
- backface-visibility: hidden;
-
- &::before {
- content: '';
- position: absolute;
- width: 50%;
- height: 50%;
- background-size: 200%;
- background-repeat: no-repeat;
- background-image: url("../images/cat.png");
- background-color: var(--grey-1);
- backface-visibility: hidden;
- }
-}
-
#loading {
- display: flex;
- position: fixed;
- width: 100%;
- height: 100%;
- z-index: $zindex-5;
- transform: translateZ(.125rem);
+ @extend $fix-fullscreen;
background-color: var(--grey-1);
}
-.cat {
- position: relative;
- width: 100%;
- max-width: 10rem;
- margin: auto;
- overflow: hidden;
+$bgColor = var(--grey-1)
+$bodyColor = rgb(237, 166, 93)
+$tailColor = rgb(198, 130, 59)
+$tummyColor = rgb(242, 192, 137)
+$borderColor = rgb(56, 60, 75)
+$innerR = 8.125em
+$middleR = 12.8125em
+$outterR = 15em
+$tummyWidth = 1.5em
+$borderWidth = .375em
+$polygon-start = polygon(50% 50%, 0% 50%, 0% 100%, 100% 100%, 100% 20%)
+$polygon-a = polygon(50% 50%, 30% 120%, 50% 100%, 100% 100%, 100% 20%)
+$polygon-b = polygon(50% 50%, 100% 90%, 120% 90%, 100% 100%, 100% 20%)
+$polygon-middle = polygon(50% 50%, 100% 45%, 120% 45%, 120% 50%, 100% 20%)
+$polygon-c = polygon(50% 50%, 100% 65%, 120% 65%, 120% 50%, 100% 20%)
+$polygon-d = polygon(50% 50%, 75% 130%, 120% 65%, 120% 50%, 100% 20%)
+$polygon-e = polygon(50% 50%, -20% 110%, 50% 120%, 100% 100%, 100% 20%)
- &::before {
- content: '';
- display: block;
- padding-bottom: 100%;
- }
+center-center()
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ margin: auto
+tummy-style()
+ width: $tummyWidth
+ height: $tummyWidth
+ position: absolute
+ border-radius: 50%
+ background-color: $tummyColor
+body-color()
+ background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 46%, $tummyColor 46%, $tummyColor 60%, $bodyColor 60%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
+head-foot-color()
+ background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
- &:hover>* {
+.cat
+ position: relative
+ display: block
+ width: $outterR
+ height: 100%
+ font-size: 10px
+ margin: auto
+
+ *
+ box-sizing: content-box;
+
+ .head, .foot, .body, .paw
+ center-center()
+ border-radius: 50%
+ width: $outterR
+ height: $outterR
+ .body
+ body-color()
+ .head:before, .foot:before
+ head-foot-color()
+ .head
+ &:before
+ content: ''
+ width: 100%
+ height: 100%
+ position: absolute
+ border-radius: 50%
+ clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
+ -webkit-clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
+ &:after
+ content: ''
+ width: 4.125em
+ height: 2.5em
+ position: absolute
+ top: 0.8125em
+ right: 3.9375em
+ background-image: linear-gradient($bgColor 65%, transparent 65%), radial-gradient($bgColor 51%, $borderColor 55%, $borderColor 68%, transparent 70%)
+ transform: rotate(-66deg)
+ .face
+ width: 5em
+ height: 3.75em
+ left: 9.0625em
+ top: 1.8125em
+ position: absolute
+ transform: rotate(-47deg)
+ background: radial-gradient(circle, $tummyColor 0%, $tummyColor 23%, transparent 23%) -0.1875em 1.0625em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) 0.75em -0.75em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) -0.75em -0.75em no-repeat, radial-gradient($bodyColor 0%, $bodyColor 15%, transparent 15%) 0 -0.6875em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) -0.1875em -0.3125em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) 0.1875em -0.3125em no-repeat, radial-gradient(circle, $bodyColor 45%, transparent 45%) 0 -0.1875em, linear-gradient(transparent 35%, $borderColor 35%, $borderColor 41%, transparent 41%, transparent 44%, $borderColor 44%, $borderColor 50%, transparent 50%, transparent 53%, $borderColor 53%, $borderColor 59%, transparent 59%)
+ .foot
+ &:before, &:after
+ content: ''
+ width: 100%
+ height: 100%
+ position: absolute
+ &:before
+ border-radius: 50%
+ clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
+ -webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
+ .tummy-end
+ tummy-style()
+ left: 1.1875em
+ top: 6.5625em
+ .bottom
+ width: 2.1875em
+ height: 0.9375em
+ position: absolute
+ top: 4.875em
+ left: 0.75em
+ border: 0.375em solid $borderColor
+ border-bottom: 0
+ border-radius: 50%
+ transform: rotate(21deg)
+ background: $bodyColor
+ .hands, .legs, .foot:after
+ width: 0.625em
+ height: 1.5625em
+ position: absolute
+ border: $borderWidth solid $borderColor
+ background-color: $bodyColor
+ .hands
+ border-top: 0
+ border-radius: 0 0 0.75em 0.75em
+ &.left
+ top: 4.3em
+ left: 13.1875em
+ transform: rotate(-20deg)
+ &.right
+ top: 5.125em
+ left: 10.975em
+ transform: rotate(-25deg)
+ .legs
+ border-bottom: 0
+ border-radius: 0.75em 0.75em 0 0
+ &.left
+ top: 4.0625em
+ left: 3.125em
+ transform: rotate(25deg)
+ &.right
+ top: 3.3125em
+ left: 0.75em
+ transform: rotate(22deg)
+ .foot:after
+ width: .9em
+ height: 2.5em
+ top: 2.625em
+ left: 2.5em
+ z-index: -1
+ transform: rotate(25deg)
+ background-color: $tailColor
+ border-bottom: 0
+ border-radius: 0.75em 0.75em 0 0
+
+ animation: 2.74s linear infinite loading-cat
+
+ .body
+ animation: 2.74s linear infinite body
+ .foot
+ animation: 2.74s linear infinite foot
+
+
+ &:hover
animation-play-state: paused;
- }
+ .body, .foot
+ animation-play-state: paused;
- &:active>* {
+ &:active
animation-play-state: running;
+ .body, .foot
+ animation-play-state: running;
+
+@keyframes body {
+ 0% {
+ clip-path: $polygon-start;
}
-
- .head {
- @extend $cat-img;
-
- &::before {
- top: 0;
- right: 0;
- background-position: 100% 0%;
- transform-origin: 0% 100%;
- transform: rotate(90deg);
- }
+ 10% {
+ clip-path: $polygon-a;
}
-
- .tail {
- @extend $cat-img;
- animation-delay: .2s;
-
- &::before {
- left: 0;
- bottom: 0;
- background-position: 0% 100%;
- transform-origin: 100% 0%;
- transform: rotate(-30deg);
- }
+ 20% {
+ clip-path: $polygon-b;
}
-
- .body {
- @extend $cat-img;
- animation-delay: .1s;
-
- &:nth-of-type(2) {
- animation-delay: .2s;
- }
-
- &::before {
- right: 0;
- bottom: 0;
- background-position: 100% 100%;
- transform-origin: 0% 0%;
- }
+ 40% {
+ clip-path: $polygon-middle;
+ }
+ 50% {
+ clip-path: $polygon-middle;
+ }
+ 65% {
+ clip-path: $polygon-c;
+ }
+ 80% {
+ clip-path: $polygon-d;
+ }
+ 90% {
+ clip-path: $polygon-e;
+ }
+ 100% {
+ clip-path: $polygon-start;
}
}
+@keyframes loading-cat {
+ 0% { transform: rotate(0deg); }
+ 10% { transform: rotate(-80deg); }
+ 20% { transform: rotate(-180deg); }
+ 40% { transform: rotate(-245deg); }
+ 50% { transform: rotate(-250deg); }
+ 68% { transform: rotate(-300deg); }
+ 90% { transform: rotate(-560deg); }
+ 100% { transform: rotate(-720deg); }
+}
+
+@keyframes foot {
+ 0% { transform: rotate(-10deg); }
+ 10% { transform: rotate(-100deg); }
+ 20% { transform: rotate(-145deg); }
+ 35% { transform: rotate(-190deg); }
+ 50% { transform: rotate(-195deg); }
+ 70% { transform: rotate(-165deg); }
+ 100% { transform: rotate(-10deg); }
+}
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 26ebc7f..e920e53 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -103,6 +103,8 @@
overflow-y: scroll;
height: calc(100% - 8.125rem);
+ @extend $mini-scrollbar;
+
ol {
padding: 0;
}
diff --git a/source/css/_common/components/third-party/theme.styl b/source/css/_common/components/third-party/theme.styl
new file mode 100644
index 0000000..f1e53e7
--- /dev/null
+++ b/source/css/_common/components/third-party/theme.styl
@@ -0,0 +1,196 @@
+#neko {
+ @extend $fix-fullscreen;
+ display: none;
+ background: linear-gradient(to top, #fddb92 0%, #d1fdff 80%);
+
+ .planet {
+ position: fixed;
+ left: -50%;
+ top: -50%;
+ width: 200%;
+ height: 200%;
+ animation: rotate 2s cubic-bezier(.7, 0, 0, 1);
+ transform-origin: center bottom;
+ }
+
+ &:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: 0;
+ background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+ transition: 2s ease all;
+ }
+
+ .sun, .moon {
+ position: absolute;
+ border-radius: 100%;
+ left: 55%;
+ top: 32%;
+ }
+
+ .sun {
+ height: 40px;
+ width: 40px;
+ background: #ffee94;
+ box-shadow: 0px 0px 40px #ffee94;
+ opacity: 1;
+ }
+
+ .moon {
+ height: 24px;
+ width: 24px;
+ background: #eee;
+ box-shadow: 0px 0px 20px #fff;
+ opacity: 0;
+ }
+
+ .body {
+ display: block;
+ position: absolute;
+ bottom: -20px;
+ height: 140px;
+ width: 135px;
+ left: 50%;
+ margin-left: -100px;
+ background: #777777;
+ transition: bottom 0.25s ease-in-out;
+
+ &:before {
+ width: 0;
+ height: 0;
+ border-left: 0px solid transparent;
+ border-right: 30px solid transparent;
+ border-bottom: 20px solid #777;
+ top: -20px;
+ left: 0;
+ position: absolute;
+ content: "";
+ }
+ &:after {
+ width: 0;
+ height: 0;
+ border-right: 0px solid transparent;
+ border-left: 30px solid transparent;
+ border-bottom: 20px solid #777;
+ top: -20px;
+ right: 0;
+ position: absolute;
+ content: "";
+ }
+
+ .eyes {
+ display: block;
+ position: absolute;
+ background: #ffee94;
+ height: 40px;
+ width: 40px;
+ border-radius: 100%;
+ bottom: 80px;
+ }
+
+ .eyes.left {
+ left: 12px;
+ }
+
+ .eyes.right {
+ right: 12px;
+ }
+
+ .eyes .pupil {
+ display: block;
+ position: relative;
+ background: #ffb399;
+ height: 100%;
+ width: 5px;
+ border-radius: 100%;
+ margin: 0 auto;
+ transition: width 0.5s ease-in-out;
+ }
+
+ .nose {
+ display: block;
+ position: relative;
+ background: #ffb399;
+ height: 10px;
+ width: 10px;
+ border-radius: 100%;
+ margin: 0 auto;
+ top: 45px;
+ }
+ }
+
+
+
+ &:hover {
+ .body {
+ display: block;
+ position: absolute;
+ bottom: -40px;
+ cursor: pointer;
+ .eyes {
+ display: block;
+ position: absolute;
+ height: 8px;
+ width: 40px;
+ bottom: 100px;
+ }
+ }
+ }
+
+ &.dark {
+ &:before {
+ opacity: 1;
+ }
+
+ .sun {
+ opacity: 0;
+ }
+
+ .moon {
+ opacity: 1;
+ }
+
+ .body {
+ background: #444;
+ &:before {
+ width: 0;
+ height: 0;
+ border-left: 0px solid transparent;
+ border-right: 30px solid transparent;
+ border-bottom: 20px solid #444;
+ top: -20px;
+ left: 0;
+ position: absolute;
+ content: "";
+ }
+ &:after {
+ width: 0;
+ height: 0;
+ border-right: 0px solid transparent;
+ border-left: 30px solid transparent;
+ border-bottom: 20px solid #444;
+ top: -20px;
+ right: 0;
+ position: absolute;
+ content: "";
+ }
+
+ .eyes .pupil {
+ height: 90%;
+ width: 34px;
+ margin: 5% auto;
+ }
+ }
+
+ &:hover {
+ .body .eyes {
+ height: 40px;
+ bottom: 80px;
+ }
+ }
+ }
+}
diff --git a/source/css/_common/components/third-party/third-party.styl b/source/css/_common/components/third-party/third-party.styl
index 5998de3..890a93a 100644
--- a/source/css/_common/components/third-party/third-party.styl
+++ b/source/css/_common/components/third-party/third-party.styl
@@ -1,7 +1,7 @@
@import 'pace';
@import 'loading';
@import 'search';
-
+@import 'theme';
.katex,
.katex-display {
diff --git a/source/css/_common/outline/header/image.styl b/source/css/_common/outline/header/image.styl
index 41e4591..ef42e40 100644
--- a/source/css/_common/outline/header/image.styl
+++ b/source/css/_common/outline/header/image.styl
@@ -7,6 +7,7 @@
height: 70vh;
min-height: 25rem;
z-index: -9;
+ background-color: #363636;
img {
width: 100%;
@@ -29,6 +30,7 @@
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
+ backface-visibility: hidden;
}
for num in (1 .. 6) {
diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl
index b9fa263..6bce818 100644
--- a/source/css/_common/outline/header/menu.styl
+++ b/source/css/_common/outline/header/menu.styl
@@ -11,16 +11,21 @@
padding: 0 .625rem;
letter-spacing: .0625rem;
+ text-align: center;
+mobile() {
display: none;
+
+ &.title {
+ display: block;
+ }
}
.ic {
margin-right: .5rem;
}
- a {
+ &:not(.title) a {
display: block;
font-size: $font-size-medium;
diff --git a/source/css/_common/outline/header/right.styl b/source/css/_common/outline/header/right.styl
index 81fb647..777691b 100644
--- a/source/css/_common/outline/header/right.styl
+++ b/source/css/_common/outline/header/right.styl
@@ -1,6 +1,5 @@
#nav .right {
display: inline-flex;
- line-height: 1;
align-items: center;
justify-content: center;
diff --git a/source/css/_common/outline/header/tool.styl b/source/css/_common/outline/header/tool.styl
index e6960d3..e00a3a7 100644
--- a/source/css/_common/outline/header/tool.styl
+++ b/source/css/_common/outline/header/tool.styl
@@ -354,16 +354,20 @@
left: auto;
}
- &.on {
+ &.show {
display: block;
if (hexo-config('sidebar.position') == 'left') {
@extend .slide-right-in;
} else {
@extend .slide-left-in;
+
+ +tablet-mobile() {
+ animation: slideRightIn .3s;
+ }
}
- +tablet-mobile() {
- animation: slideRightIn .3s;
+ &.hide {
+ @extend .fade-out;
}
}
}
diff --git a/source/css/_common/outline/outline.styl b/source/css/_common/outline/outline.styl
index 699e4fa..c09f054 100644
--- a/source/css/_common/outline/outline.styl
+++ b/source/css/_common/outline/outline.styl
@@ -47,7 +47,7 @@
min-height: 37.5rem;
.cat {
- margin-top: 6.25rem;
+ margin-top: 10rem;
}
.wrap {
diff --git a/source/css/_common/scaffolding/animate.styl b/source/css/_common/scaffolding/animate.styl
index 0d8622b..523babf 100644
--- a/source/css/_common/scaffolding/animate.styl
+++ b/source/css/_common/scaffolding/animate.styl
@@ -20,6 +20,10 @@
animation: fadeIn .5s;
}
+.fade-out {
+ animation: fadeOut .3s;
+}
+
.up-down {
animation: UpDown 2s infinite;
}
@@ -60,10 +64,6 @@
animation: elastic 1s;
}
-.reverse {
- animation-direction: reverse;
-}
-
@keyframes rotate {
from {
transform: rotate(0)
@@ -175,6 +175,15 @@
}
}
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
@keyframes blur {
0% {
diff --git a/source/css/_common/scaffolding/tip.styl b/source/css/_common/scaffolding/tip.styl
index e0d0357..335fd95 100644
--- a/source/css/_common/scaffolding/tip.styl
+++ b/source/css/_common/scaffolding/tip.styl
@@ -5,9 +5,15 @@
top: 50%;
left: 50%;
z-index: $zindex-5;
- padding: .625rem;
+ padding: .625rem 1rem;
border-radius: .625rem;
transform: translate(-50%,-50%);
text-align: center;
+ font-size: $font-size-small;
+ backdrop-filter: blur(.625rem);
@extend .fade-in;
+
+ &.hide {
+ @extend .fade-out;
+ }
}
diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
index 9f8f4e6..cfff761 100644
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@@ -134,3 +134,12 @@ $color-btn {
background-image: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%);
box-shadow: 0 0 .75rem var(--color-pink-a3);
}
+
+$fix-fullscreen {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: $zindex-5;
+}
diff --git a/source/images/cat.png b/source/images/cat.png
deleted file mode 100644
index c46e544..0000000
Binary files a/source/images/cat.png and /dev/null differ
diff --git a/source/js/_app/dom.js b/source/js/_app/dom.js
index 2e85cda..3e736e1 100644
--- a/source/js/_app/dom.js
+++ b/source/js/_app/dom.js
@@ -60,12 +60,11 @@ Object.assign(HTMLElement.prototype, {
}
},
display: function(d) {
- if(d) {
- this.style.display = d;
- } else {
+ if(d == null) {
return this.style.display
+ } else {
+ this.style.display = d;
}
-
},
child: function(selector) {
return $(selector, this)
@@ -129,8 +128,13 @@ const mediaPlayer = function(config) {
}
},
"music": function(event) {
- t.media.list.toggleClass('on');
- t.media.scroll();
+ if(t.media.list.hasClass('show')) {
+ t.media.hideList()
+ } else {
+ t.media.list.addClass('show');
+ t.media.scroll();
+ t.media.changeTitle();
+ }
}
}
};
@@ -315,7 +319,7 @@ const mediaPlayer = function(config) {
return;
}
this.source.play()
- document.title = 'Now Playing...' + this.playlist[this.pointer]['title'] + ' - ' + this.playlist[this.pointer]['author'] + ' | ' + originTitle;
+ this.changeTitle()
},
pause: function() {
this.source.pause()
@@ -349,6 +353,17 @@ const mediaPlayer = function(config) {
}
}
}
+ },
+ hideList: function() {
+ var el = this.list
+ el.addClass('hide');
+ window.setTimeout(function() {
+ el.removeClass('show hide')
+ }, 300);
+ },
+ changeTitle: function() {
+ if(!this.source.paused)
+ document.title = 'Now Playing...' + this.playlist[this.pointer]['title'] + ' - ' + this.playlist[this.pointer]['author'] + ' | ' + originTitle;
}
};
@@ -408,7 +423,7 @@ const mediaPlayer = function(config) {
t.insertAfter(el);
$('#main').addEventListener('click', function() {
- t.media.list.removeClass('on');
+ t.media.hideList()
})
}
},
diff --git a/source/js/_app/global.js b/source/js/_app/global.js
index 6f7d6cb..f9c0556 100644
--- a/source/js/_app/global.js
+++ b/source/js/_app/global.js
@@ -19,7 +19,6 @@ const goToComment = toolBtn.child('.chat');
const sideBar = $('#sidebar');
const siteBrand = $('#brand');
const siteSearch = $('#search');
-const siteContent = $('#content');
const headerHight = $('#waves').top();
const headerHightInner = headerHight - siteNavHeight;
@@ -30,7 +29,6 @@ const Loader = {
clearTimeout(this.timer);
document.body.removeClass('loaded');
Velocity(loadCat, "fadeIn", {
- display: "flex",
complete: function() {
Loader.lock = false;
}
@@ -49,10 +47,15 @@ const Loader = {
}
const changeTheme = function(type) {
+ var btn = $('.theme .ic')
if(type) {
HTML.attr('data-theme', type);
+ btn.removeClass('i-sun')
+ btn.addClass('i-moon')
} else {
HTML.attr('data-theme', null);
+ btn.removeClass('i-moon');
+ btn.addClass('i-sun');
}
}
@@ -72,18 +75,48 @@ const themeColorListener = function () {
}
});
+ var t = store.get('theme');
+ if(t) {
+ changeTheme(t);
+ }
+
$('.theme').addEventListener('click', function(event) {
var btn = event.currentTarget.child('.ic')
+ var neko = $('#neko')
+
+ if(!neko) {
+ neko = document.createElement('div')
+ neko.id = 'neko'
+ neko.innerHTML = '
'
+ BODY.appendChild(neko);
+ }
+
if(btn.hasClass('i-sun')) {
- changeTheme('dark');
- btn.removeClass('i-sun')
- btn.addClass('i-moon')
+ Velocity(neko, "fadeIn", {
+ complete: function() {
+ neko.addClass('dark');
+ changeTheme('dark');
+ store.set('theme', 'dark');
+ setTimeout(function() {
+ Velocity(neko, "fadeOut");
+ }, 2500);
+ }
+ });
} else {
- changeTheme();
- btn.removeClass('i-moon')
- btn.addClass('i-sun')
+ Velocity(neko, "fadeIn", {
+ complete: function() {
+ neko.removeClass('dark');
+ changeTheme();
+ store.del('theme');
+ setTimeout(function() {
+ Velocity(neko, "fadeOut");
+ }, 2500);
+ }
+ });
+
}
});
+
}
const visibilityListener = function () {
@@ -116,8 +149,11 @@ const showtip = function(msg) {
new_div.addClass('tip');
BODY.appendChild(new_div);
- window.setTimeout(function() {
+ setTimeout(function() {
+ new_div.addClass('hide')
+ setTimeout(function() {
BODY.removeChild(new_div);
+ }, 300);
}, 3000);
}
diff --git a/source/js/_app/pjax.js b/source/js/_app/pjax.js
index df2b2ee..aaf904c 100644
--- a/source/js/_app/pjax.js
+++ b/source/js/_app/pjax.js
@@ -15,8 +15,8 @@ const pjaxReload = function () {
});
}
- siteContent.innerHTML = ''
- siteContent.appendChild(loadCat.lastChild.cloneNode(true));
+ $('#content').innerHTML = ''
+ $('#content').appendChild(loadCat.lastChild.cloneNode(true));
}
const siteRefresh = function (reload) {
@@ -113,4 +113,4 @@ const siteInit = function () {
window.addEventListener('DOMContentLoaded', siteInit);
-console.log('%c Theme.Shoka %c v' + CONFIG.version + ' ', 'color: white; background: #e9546b; padding:5px 0;', 'padding:4px;border:1px solid #e9546b;')
+console.log('%c Theme.Shoka v' + CONFIG.version + ' %c https://shoka.lostyu.me/ ', 'color: white; background: #e9546b; padding:5px 0;', 'padding:4px;border:1px solid #e9546b;')
diff --git a/source/js/_app/sidebar.js b/source/js/_app/sidebar.js
index 29919dd..711de95 100644
--- a/source/js/_app/sidebar.js
+++ b/source/js/_app/sidebar.js
@@ -196,7 +196,7 @@ const goToCommentHandle = function () {
}
const menuActive = function () {
- $.each('.menu .item', function (element) {
+ $.each('.menu .item:not(.title)', function (element) {
var target = element.child('a[href]');
if (!target) return;
var isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');