Move backgrounds back to Rinze

This commit is contained in:
Damillora 2021-04-14 13:22:34 +07:00
parent b85c38a468
commit 18a47f1891
9 changed files with 68 additions and 3 deletions

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
}

View File

@ -1,5 +1,5 @@
<script>
import { Howl, Howler } from "howler";
import { Howl } from "howler";
function yurikoSound() {
var sound = new Howl({
src: "/yuriko.ogg",

View File

@ -16,7 +16,7 @@
<div>
<div class:site-header={true} class:enabled={menu_shown} class:detached>
<div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:site-header__background--yuriko={isYurikoBirthday()} />
<div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} />
<div class="site-header__inner">
<header class="header">
<div class="header__top">

View File

@ -3,7 +3,7 @@
</script>
<div class="page-header">
<div class:page-header__background={true} class:page-header__background--yuriko={isYurikoBirthday()} >
<div class:page-header__background={true} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} >
<div class="page-header__overlay" />
</div>
<div class="page-header__contents">

View File

@ -6,6 +6,7 @@
<style lang="scss" global>
@import "~@damillora/shian/dist/app.css";
@import "../sass/background";
</style>
<Header></Header>

14
src/sass/_responsive.scss Normal file
View File

@ -0,0 +1,14 @@
@mixin screen($point) {
@if $point == xl {
@media screen and (min-width: 1280px) { @content ; }
}
@else if $point == lg {
@media (min-width: 1024px) { @content ; }
}
@else if $point == md {
@media (min-width: 768px) { @content ; }
}
@else if $point == sm {
@media (min-width: 640px) { @content ; }
}
}

11
src/sass/background.scss Normal file
View File

@ -0,0 +1,11 @@
@import "responsive";
@import "backgrounds/283-yuika";
@import "backgrounds/765-yuriko";
.background-nanaomoe {
@include bg-283-yuika;
&--yuriko {
@include bg-765-yuriko;
}
}

View File

@ -0,0 +1,17 @@
@mixin bg-283-yuika() {
background-image: url('/images/bg/283-yuika/bg-sm.jpg');
background-size: cover;
background-position: right 25% top 20%;
@include screen(sm) {
background-image: url('/images/bg/283-yuika/bg-md.jpg');
}
@include screen(md) {
background-image: url('/images/bg/283-yuika/bg-lg.jpg');
}
@include screen(lg) {
background-image: url('/images/bg/283-yuika/bg-xl.jpg');
}
@include screen(xl) {
background-image: url('/images/bg/283-yuika/bg-xxl.jpg')
}
}

View 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')
}
}