This commit is contained in:
Patrick Alvin Alcala 2026-03-26 19:08:50 +08:00
parent 82a0fd6eea
commit 4fadb54891
24 changed files with 58 additions and 84 deletions

49
design/breakpoints.sass Normal file
View file

@ -0,0 +1,49 @@
@use '../design/sizes' as sizes
.on-desktop-only
@media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
display: none
@media only screen and (min-width: sizes.$desktop)
display: block
.on-tablet-only
@media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
display: none
@media only screen and (min-width: sizes.$tablet) and (max-width: sizes.$desktop)
display: block
@media only screen and (min-width: sizes.$desktop)
display: none
.on-mobile-only
@media only screen and (min-width: sizes.$mobile)
display: block
@media only screen and (min-width: sizes.$tablet)
display: none
.on-desktop-tablet-only
@media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
display: none
@media only screen and (min-width: sizes.$tablet)
display: block
.on-desktop-mobile-only
@media only screen and (min-width: 0px) and (max-width: sizes.$mobile)
display: block
@media only screen and (min-width: sizes.$mobile) and (max-width: sizes.$desktop)
display: none
@media only screen and (min-width: sizes.$desktop)
display: block
.on-tablet-mobile-only
@media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
display: block
@media only screen and (min-width: sizes.$desktop)
display: none

9
design/classes.sass Normal file
View file

@ -0,0 +1,9 @@
.fullscreen
position: absolute
top: 0
left: 0
width: 100vw
height: 100vh
object-fit: cover
z-index: -1
opacity: 1

2
design/colors.sass Normal file
View file

@ -0,0 +1,2 @@
$white: #f4f3f2
$black: #0A0A0A

45
design/fonts.sass Normal file
View file

@ -0,0 +1,45 @@
$Roboto: Roboto, sans-serif
$Inter: Inter, sans-serif
$Montserrat: Montserrat, sans-serif
$OpenSans: 'Open Sans', sans-serif
$PublicSans: 'Public Sans', sans-serif
@font-face
font-family: 'Roboto'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations')
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Inter'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations')
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Montserrat'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations')
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Open Sans'
font-style: normal
font-display: swap
font-weight: 300 800
src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations')
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Public Sans'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations')
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD

7
design/functions.sass Normal file
View file

@ -0,0 +1,7 @@
@use 'sass:color'
@function lighten-color($hex, $amount)
@return color.mix(white, $hex, $amount)
@function darken-color($hex, $amount)
@return color.mix(black, $hex, $amount)

2
design/site.sass Normal file
View file

@ -0,0 +1,2 @@
$light-background: #e2e7f2
$dark-background: #0a152a

3
design/sizes.sass Normal file
View file

@ -0,0 +1,3 @@
$mobile: 575.98px
$tablet: 768px
$desktop: 1440px