Added viewport only

This commit is contained in:
Patrick Alvin Alcala 2025-07-31 14:41:35 +08:00
parent 6f97b30687
commit e6fb1db649

69
src/styles/classes.sass Normal file
View file

@ -0,0 +1,69 @@
.fullscreen
position: fixed
top: 0
left: 0
width: 100vw
height: 100vh
object-fit: cover
z-index: -1
opacity: 0.2
.on-desktop-only
@media only screen and (max-width: view.$desktop)
display: block
@media only screen and (max-width: view.$tablet)
display: none
@media only screen and (max-width: view.$mobile)
display: none
.on-tablet-only
@media only screen and (max-width: view.$desktop)
display: none
@media only screen and (max-width: view.$tablet)
display: block
@media only screen and (max-width: view.$mobile)
display: none
.on-mobile-only
@media only screen and (max-width: view.$desktop)
display: none
@media only screen and (max-width: view.$tablet)
display: none
@media only screen and (max-width: view.$mobile)
display: block
.on-desktop-tablet-only
@media only screen and (max-width: view.$desktop)
display: block
@media only screen and (max-width: view.$tablet)
display: block
@media only screen and (max-width: view.$mobile)
display: none
.on-desktop-mobile-only
@media only screen and (max-width: view.$desktop)
display: block
@media only screen and (max-width: view.$tablet)
display: none
@media only screen and (max-width: view.$mobile)
display: block
.on-tablet-mobile-only
@media only screen and (max-width: view.$desktop)
display: none
@media only screen and (max-width: view.$tablet)
display: block
@media only screen and (max-width: view.$mobile)
display: block