This repository has been archived by the owner on Jan 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🎨 Apply color context to pacman loading + remove plugin
- Loading branch information
1 parent
ffce6ea
commit bccb9a3
Showing
4 changed files
with
117 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| <template> | ||
| <div id="loader-wrapper" :style="color"> | ||
| <!-- <h1>HELLO WORLDDDDDD</h1>--> | ||
| <div class="loader-main" :style="color"> | ||
| <div v-for="item in 4" :key="`out${item}`" :style="color"> | ||
| </div> | ||
| </div> | ||
| <h3 class="title" v-if="$frontmatter.home">{{$site.title || this.$themeConfig.title}}</h3> | ||
| <p class="description" v-if="$frontmatter.home">{{$site.description || this.$themeConfig.description}}</p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import accents from '../accents.json' | ||
| export default { | ||
| name: "LoadingPage", | ||
| data () { | ||
| return { | ||
| currentColor: 'blue' | ||
| } | ||
| }, | ||
| computed: { | ||
| color() { | ||
| return { | ||
| '--accent-color': accents[this.currentColor] | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| this.currentColor = localStorage.getItem('accent-color') || 'blue' | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| #loader-wrapper | ||
| height:100vh; | ||
| width:100vw; | ||
| background #fff | ||
| background var(--background-color) | ||
| .loader-main | ||
| position:fixed; | ||
| width:120px; | ||
| height:50px; | ||
| top:45%; | ||
| left:50%; | ||
| z-index:555; | ||
| transform:translate(-50%,0); | ||
| div | ||
| &:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; } | ||
| &:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; } | ||
| &:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; } | ||
| &:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; } | ||
| &:first-of-type | ||
| width:0px; | ||
| height:0px; | ||
| border-right:25px solid transparent; | ||
| border-top:25px solid var(--accent-color); | ||
| border-left:25px solid var(--accent-color); | ||
| border-bottom:25px solid var(--accent-color); | ||
| border-radius:25px; | ||
| animation:rotate_pacman_half_up 0.5s 0s infinite; | ||
| &:nth-child(2) | ||
| width:0px; | ||
| height:0px; | ||
| border-right:25px solid transparent; | ||
| border-top:25px solid var(--accent-color); | ||
| border-left:25px solid var(--accent-color); | ||
| border-bottom:25px solid var(--accent-color); | ||
| border-radius:25px; | ||
| animation:rotate_pacman_half_down 0.5s 0s infinite; | ||
| margin-top:-50px; | ||
| &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6) | ||
| background-color: var(--accent-color); | ||
| width:15px; | ||
| height:15px; | ||
| border-radius:100%; | ||
| margin:2px; | ||
| width:10px; | ||
| height:10px; | ||
| position:absolute; | ||
| transform:translate(0,-6.25px); | ||
| top:25px; | ||
| left:100px; | ||
| .title | ||
| margin 8rem auto 2rem | ||
| text-align center | ||
| color $textColor | ||
| color var(--text-color) | ||
| font-size 30px | ||
| box-sizing: border-box; | ||
| padding: 0 10px; | ||
| text-shadow 0 2px 10px rgba(0,0,0,0.2) | ||
| .description | ||
| margin auto | ||
| text-align center | ||
| color $textColor | ||
| color var(--text-color) | ||
| font-size 22px | ||
| box-sizing: border-box; | ||
| padding: 0 10px; | ||
| text-shadow 0 2px 10px rgba(0,0,0,0.2); | ||
| @keyframes pacman-balls | ||
| 75%{opacity:0.7;} | ||
| 100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);} | ||
| @keyframes rotate_pacman_half_up | ||
| 0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);} | ||
| 50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);} | ||
| 100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);} | ||
| @keyframes rotate_pacman_half_down | ||
| 0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);} | ||
| 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} | ||
| 100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);} | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters