diff --git a/ui/styles/global.scss b/ui/styles/global.scss index 1788968..4294f53 100644 --- a/ui/styles/global.scss +++ b/ui/styles/global.scss @@ -2,43 +2,43 @@ @import "vars"; @font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2'); + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2'); } @font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); } @font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2'); + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2'); } @font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); } @font-face { - font-family: 'Jaldi'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("../fonts/Jaldi-Regular.woff2") format('woff2'); + font-family: 'Jaldi'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("../fonts/Jaldi-Regular.woff2") format('woff2'); } @tailwind base; @@ -46,82 +46,88 @@ @tailwind utilities; body { - background: #080808; + background: #080808; } #app { - display: flex; - flex-direction: column; - min-height: 100vh; - font-family: $font-family-jaldi; - @include fluid-font-size(0.625rem); + display: flex; + flex-direction: column; + min-height: 100vh; + font-family: $font-family-jaldi; + @include fluid-font-size(0.625rem); } header { - padding: 2.5em; - color: #fff; - background: #080808; - border-bottom: 0.1em solid #363636; + padding: 2.5em; + color: #fff; + background: #080808; + border-bottom: 0.1em solid #363636; - img { - @include fluid-width-height(7.875rem, 2.625rem); - } + img { + @include fluid-width-height(7.875rem, 2.625rem); + } } main { - flex-grow: 1; - overflow: hidden; + flex-grow: 1; + overflow: hidden; } .btn-wrapper { - display: flex; - gap: 2em; + display: flex; + gap: 2em; + + button, > a { + flex: 1; + } + + > a { + flex: 1 + } - button { - flex: 1; - } } -.btn-main { - display: inline-block; - padding: 1em; - @include fluid-font-size(1.25rem); - line-height: 1; - color: #fff; - background: #252525; - border: 0.05em solid #252525; - border-radius: 0.25em; - transition: color $transition-duration, background $transition-duration, border-color $transition-duration; - white-space: nowrap; - - &:hover { - background: #2e2e2e; - } - - &.btn-green { - color: #080808; - background: #62c554; - border-color: #62c554; +.btn-wrapper > .btn-main, .btn-wrapper > a { + text-align: center; + display: inline-block; + padding: 1em; + @include fluid-font-size(1.25rem); + line-height: 1; + color: #fff; + background: #252525; + border: 0.05em solid #252525; + border-radius: 0.25em; + transition: color $transition-duration, background $transition-duration, border-color $transition-duration; + white-space: nowrap; &:hover { - background: #6ee65d; - } - } - - &.btn-black { - background: #080808; - border-color: #777; - - &:hover { - border-color: #a1a1a1; + background: #2e2e2e; } - &.gray-text { - color: #777; + &.btn-green { + color: #080808; + background: #62c554; + border-color: #62c554; - &:hover { - color: #a1a1a1; - } + &:hover { + background: #6ee65d; + } + } + + &.btn-black { + background: #080808; + border-color: #777; + + &:hover { + border-color: #a1a1a1; + } + + &.gray-text { + color: #777; + + &:hover { + color: #a1a1a1; + } + } } - } }