mirror of
https://github.com/Damillora/Rinze.git
synced 2024-10-31 19:37:32 +00:00
Happy birthday, Yuriko!
- Readded the FloatingYuriko component previously in miracle - Check the user's date for Yuriko's birthday in the JP timezone and automatically set headers and appearance of FloatingYuriko based on the date.
This commit is contained in:
parent
131b45d302
commit
b2621f26f2
@ -10,6 +10,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"compression": "^1.7.1",
|
"compression": "^1.7.1",
|
||||||
|
"dayjs": "^1.10.4",
|
||||||
|
"howler": "^2.2.1",
|
||||||
"node-fetch": "^2.6.1",
|
"node-fetch": "^2.6.1",
|
||||||
"polka": "next",
|
"polka": "next",
|
||||||
"sirv": "^1.0.0"
|
"sirv": "^1.0.0"
|
||||||
|
14
src/node_modules/components/FloatingYuriko.svelte
generated
vendored
Normal file
14
src/node_modules/components/FloatingYuriko.svelte
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import { Howl, Howler } from "howler";
|
||||||
|
function yurikoSound() {
|
||||||
|
var sound = new Howl({
|
||||||
|
src: "/yuriko.ogg",
|
||||||
|
volume: 0.3
|
||||||
|
});
|
||||||
|
sound.play();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="floating-yuriko hvr-float" on:click={yurikoSound}>
|
||||||
|
<img src="/yuriko-smol.png" alt="Yuriko" />
|
||||||
|
</div>
|
3
src/node_modules/components/Header.svelte
generated
vendored
3
src/node_modules/components/Header.svelte
generated
vendored
@ -2,6 +2,7 @@
|
|||||||
import NavItem from "./NavItem.svelte";
|
import NavItem from "./NavItem.svelte";
|
||||||
import NavSeparator from "./NavSeparator.svelte";
|
import NavSeparator from "./NavSeparator.svelte";
|
||||||
import DarkModeButton from "components/DarkModeButton.svelte";
|
import DarkModeButton from "components/DarkModeButton.svelte";
|
||||||
|
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
|
||||||
|
|
||||||
let menu_shown = false;
|
let menu_shown = false;
|
||||||
let detached = false;
|
let detached = false;
|
||||||
@ -15,7 +16,7 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class:site-header={true} class:enabled={menu_shown} class:detached>
|
<div class:site-header={true} class:enabled={menu_shown} class:detached>
|
||||||
<div class:site-header__background={true} class:enabled={menu_shown} />
|
<div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:site-header__background--yuriko={isYurikoBirthday()} />
|
||||||
<div class="site-header__inner">
|
<div class="site-header__inner">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__top">
|
<div class="header__top">
|
||||||
|
3
src/node_modules/components/PageHeader.svelte
generated
vendored
3
src/node_modules/components/PageHeader.svelte
generated
vendored
@ -1,8 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<div class="page-header__background">
|
<div class:page-header__background={true} class:page-header__background--yuriko={isYurikoBirthday()} >
|
||||||
<div class="page-header__overlay" />
|
<div class="page-header__overlay" />
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
|
18
src/node_modules/lib/yuriko-birthday.js
generated
vendored
Normal file
18
src/node_modules/lib/yuriko-birthday.js
generated
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import dayjs from 'dayjs';
|
||||||
|
import utc from 'dayjs/plugin/utc';
|
||||||
|
import timezone from 'dayjs/plugin/timezone';
|
||||||
|
|
||||||
|
dayjs.extend(utc);
|
||||||
|
dayjs.extend(timezone);
|
||||||
|
|
||||||
|
const isYurikoBirthday = function() {
|
||||||
|
const today = dayjs().tz("Asia/Tokyo");
|
||||||
|
console.log(today.date() +" "+today.hour());
|
||||||
|
const month = today.month();
|
||||||
|
const date = today.date();
|
||||||
|
return (month === 2 /* march */) && (date === 18);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
isYurikoBirthday
|
||||||
|
}
|
@ -1,5 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from 'components/Header.svelte';
|
import Header from 'components/Header.svelte';
|
||||||
|
import FloatingYuriko from 'components/FloatingYuriko.svelte';
|
||||||
|
import { isYurikoBirthday } from 'lib/yuriko-birthday.js';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" global>
|
<style lang="scss" global>
|
||||||
@ -10,3 +12,6 @@
|
|||||||
<main>
|
<main>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</main>
|
</main>
|
||||||
|
{#if isYurikoBirthday()}
|
||||||
|
<FloatingYuriko></FloatingYuriko>
|
||||||
|
{/if}
|
@ -3,6 +3,7 @@
|
|||||||
@import './utilities/transition';
|
@import './utilities/transition';
|
||||||
@import './utilities/spacing';
|
@import './utilities/spacing';
|
||||||
@import './utilities/backgrounds/283-yuika';
|
@import './utilities/backgrounds/283-yuika';
|
||||||
|
@import './utilities/backgrounds/765-yuriko';
|
||||||
|
|
||||||
@import './common/theme';
|
@import './common/theme';
|
||||||
@import './common/base';
|
@import './common/base';
|
||||||
@ -15,3 +16,4 @@
|
|||||||
@import './components/projectitem';
|
@import './components/projectitem';
|
||||||
@import './components/gameitem';
|
@import './components/gameitem';
|
||||||
@import './components/copyarea';
|
@import './components/copyarea';
|
||||||
|
@import './components/floatingyuriko';
|
28
src/style/components/_floatingyuriko.scss
Normal file
28
src/style/components/_floatingyuriko.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.floating-yuriko {
|
||||||
|
position: fixed;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
height: 20vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hvr-float {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
-webkit-transform: perspective(1px) translateZ(0);
|
||||||
|
transform: perspective(1px) translateZ(0);
|
||||||
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||||
|
-webkit-transition-duration: 0.3s;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
-webkit-transition-property: transform;
|
||||||
|
transition-property: transform;
|
||||||
|
-webkit-transition-timing-function: ease-out;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px);
|
||||||
|
}
|
@ -21,7 +21,10 @@
|
|||||||
|
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
top: -23vh;
|
top: -23vh;
|
||||||
&.enabled {
|
&--yuriko {
|
||||||
|
@include bg-765-yuriko;
|
||||||
|
}
|
||||||
|
&--enabled {
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@include bg-283-yuika;
|
@include bg-283-yuika;
|
||||||
|
&--yuriko {
|
||||||
|
@include bg-765-yuriko;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__overlay {
|
&__overlay {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
17
src/style/utilities/backgrounds/_765-yuriko.scss
Normal file
17
src/style/utilities/backgrounds/_765-yuriko.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@mixin bg-765-yuriko() {
|
||||||
|
background-image: url('/images/bg/765-yuriko/bg-sm.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: right 25% top 20%;
|
||||||
|
@include screen(sm) {
|
||||||
|
background-image: url('/images/bg/765-yuriko/bg-md.jpg');
|
||||||
|
}
|
||||||
|
@include screen(md) {
|
||||||
|
background-image: url('/images/bg/765-yuriko/bg-lg.jpg');
|
||||||
|
}
|
||||||
|
@include screen(lg) {
|
||||||
|
background-image: url('/images/bg/765-yuriko/bg-xl.jpg');
|
||||||
|
}
|
||||||
|
@include screen(xl) {
|
||||||
|
background-image: url('/images/bg/765-yuriko/bg-xxl.jpg')
|
||||||
|
}
|
||||||
|
}
|
BIN
static/yuriko-smol.png
Normal file
BIN
static/yuriko-smol.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.8 KiB |
BIN
static/yuriko.ogg
Normal file
BIN
static/yuriko.ogg
Normal file
Binary file not shown.
10
yarn.lock
10
yarn.lock
@ -1305,6 +1305,11 @@ dashdash@^1.12.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
assert-plus "^1.0.0"
|
assert-plus "^1.0.0"
|
||||||
|
|
||||||
|
dayjs@^1.10.4:
|
||||||
|
version "1.10.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
|
||||||
|
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
|
||||||
|
|
||||||
debug@2.6.9:
|
debug@2.6.9:
|
||||||
version "2.6.9"
|
version "2.6.9"
|
||||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||||
@ -1644,6 +1649,11 @@ hosted-git-info@^2.1.4:
|
|||||||
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
|
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
|
||||||
integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
|
integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
|
||||||
|
|
||||||
|
howler@^2.2.1:
|
||||||
|
version "2.2.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.1.tgz#a521a9b495841e8bb9aa12e651bebba0affc179e"
|
||||||
|
integrity sha512-0iIXvuBO/81CcrQ/HSSweYmbT50fT2mIc9XMFb+kxIfk2pW/iKzDbX1n3fZmDXMEIpYvyyfrB+gXwPYSDqUxIQ==
|
||||||
|
|
||||||
html-minifier@^4.0.0:
|
html-minifier@^4.0.0:
|
||||||
version "4.0.0"
|
version "4.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
|
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
|
||||||
|
Loading…
Reference in New Issue
Block a user