Refactor password generator styling for tablet view

This commit is contained in:
Patrick Alvin Alcala 2025-06-04 15:50:19 +08:00
parent 0481591d02
commit 9a4749f4ab

View file

@ -43,10 +43,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
flex-direction: column
.slider--group
// grid-area: slider--group
padding: 0 0 0 1rem
flex-grow: 0
@media screen and (max-width: view.$tablet)
padding: 0 2rem 0 2rem
justify-content: center
align-items: center
.display--group
padding: 3rem 1rem 1rem 1rem
@ -104,7 +108,7 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
letter-spacing: 1px
font-size: 1rem
font-weight: 500
// font-family: 'Inter'
font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily
.button--group
display: flex
@ -163,6 +167,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
outline: none
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
@media screen and (max-width: view.$tablet)
display: flex
flex-direction: column
align-items: center
justify-content: center
text-align: center
width: 100vw
.alert
border-radius: 6px
padding: 1rem 1.25rem