azalea/corner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[S] Adapt to smaller screen

Browse Source
This commit is contained in:
Hykilpikonna
2021-12-05 14:38:19 -05:00
parent ec5af1e3df
commit 0b9cade044
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+16 -7
View File
@@ -183,12 +183,9 @@ export default class App extends Vue
opacity: 1 opacity: 1
#nav.home #nav.home
#nav-background #menu, #nav-background
opacity: 0 opacity: 0
#nav.home #menu
opacity: 0
#nav:not(.home).open #nav:not(.home).open
#items, #nav-bookmark, #nav-background, #meru #items, #nav-bookmark, #nav-background, #meru
opacity: 1 opacity: 1
@@ -212,11 +209,23 @@ export default class App extends Vue
height: 120px height: 120px
// Smaller phone layout // Smaller phone layout
@media screen and (max-width: 400px) @media screen and (max-width: 370px)
#nav #menu
opacity: unset
#nav.home
#menu, #nav-background
opacity: unset
#nav.open
#items, #nav-bookmark, #nav-background, #meru
opacity: 1
animation: fade-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
#nav #nav
.items #items, #nav-bookmark, #nav-background, #meru
opacity: 0 opacity: 0
animation: fade-out-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both animation: fade-out-left 1s 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
// Phone Height // Phone Height
@media screen and (max-height: 600px) @media screen and (max-height: 600px)