PatAlcala9/fwt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved viewport to breakpoint

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-16 10:10:47 +08:00
parent bc7760cef5
commit 2f9f28feb0
3 changed files with 49 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
fwt/styles/Viewport.sass
View file

@ -1 +1 @@
@use '/src/styles/classes.sass' @use '/src/styles/breakpoint.sass'

48
src/styles/breakpoint.sass
View file

@ -1,3 +1,51 @@
$mobile: 375px $mobile: 375px
$tablet: 768px $tablet: 768px
$desktop: 1440px $desktop: 1440px
.on-desktop-only
@media only screen and (min-width: 0px) and (max-width: $desktop)
display: none
@media only screen and (min-width: $desktop)
display: block
.on-tablet-only
@media only screen and (min-width: 0px) and (max-width: $tablet)
display: none
@media only screen and (min-width: $tablet) and (max-width: $desktop)
display: block
@media only screen and (min-width: $desktop)
display: none
.on-mobile-only
@media only screen and (min-width: $mobile)
display: block
@media only screen and (min-width: $tablet)
display: none
.on-desktop-tablet-only
@media only screen and (min-width: 0px) and (max-width: $tablet)
display: none
@media only screen and (min-width: $tablet)
display: block
.on-desktop-mobile-only
@media only screen and (min-width: 0px) and (max-width: $mobile)
display: block
@media only screen and (min-width: $mobile) and (max-width: $desktop)
display: none
@media only screen and (min-width: $desktop)
display: block
.on-tablet-mobile-only
@media only screen and (min-width: 0px) and (max-width: $desktop)
display: block
@media only screen and (min-width: $desktop)
display: none

50
src/styles/classes.sass
View file

@ -1,5 +1,3 @@
@use './breakpoint' as view
.fullscreen .fullscreen
position: absolute position: absolute
top: 0 top: 0
@ -9,51 +7,3 @@
object-fit: cover object-fit: cover
z-index: -1 z-index: -1
opacity: 1 opacity: 1
.on-desktop-only
@media only screen and (min-width: 0px) and (max-width: view.$desktop)
display: none
@media only screen and (min-width: view.$desktop)
display: block
.on-tablet-only
@media only screen and (min-width: 0px) and (max-width: view.$tablet)
display: none
@media only screen and (min-width: view.$tablet) and (max-width: view.$desktop)
display: block
@media only screen and (min-width: view.$desktop)
display: none
.on-mobile-only
@media only screen and (min-width: view.$mobile)
display: block
@media only screen and (min-width: view.$tablet)
display: none
.on-desktop-tablet-only
@media only screen and (min-width: 0px) and (max-width: view.$tablet)
display: none
@media only screen and (min-width: view.$tablet)
display: block
.on-desktop-mobile-only
@media only screen and (min-width: 0px) and (max-width: view.$mobile)
display: block
@media only screen and (min-width: view.$mobile) and (max-width: view.$desktop)
display: none
@media only screen and (min-width: view.$desktop)
display: block
.on-tablet-mobile-only
@media only screen and (min-width: 0px) and (max-width: view.$desktop)
display: block
@media only screen and (min-width: view.$desktop)
display: none