Add styling

This commit is contained in:
Oliver-Akins 2020-09-19 00:40:05 -06:00
parent c0a14ed508
commit 9f513d8a1b
3 changed files with 77 additions and 2 deletions

View file

@ -40,8 +40,42 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import "theme.styl"
html, body, #app {
font-family: $fonts
font-style: normal
overflow: hidden
padding: 0
margin: 0
}
#app { #app {
background-color: $main-background-colour
height: 100vh height: 100vh
width: 100vw width: 100vw
} }
</style>
.input {
background-color: $input-background
border-radius: $input-border-radius
border-color: $input-border-colour
border-width: $input-border-width
border-style: solid
text-align: center
padding: 10px 15px
color: $input-text
outline: none
}
input[type="text"] {
@extend .input
}
button {
@extend .input
font-family: $fonts
letter-spacing: $input-letter-spacing
font-size: 17px
}
</style>

View file

@ -38,14 +38,32 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import "../theme.styl"
#websocket_entry { #websocket_entry {
text-align: center text-align: center
margin: 0 auto
height: 100vh height: 100vh
width: 33vw width: 33vw
margin: 0 auto color: $main-text-colour
h1, h3 {
letter-spacing: $title-letter-spacing
}
p {
letter-spacing: $body-letter-spacing
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
width: 90vw width: 90vw
} }
} }
</style> </style>
<style lang="stylus" scoped>
@import "../theme.styl"
input[type="text"] {
margin-bottom: 10px
}
</style>

23
src/theme.styl Normal file
View file

@ -0,0 +1,23 @@
/* Import all the fonts and whatnot */
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
$fonts = 'Germania One', sans-serif
$title-letter-spacing = 2px
$body-letter-spacing = 1px
$main-background-colour = #23272A
$main-text-colour = #99AAB5
/* Styling for inputs (not all input types use all values) */
$input-background = #2C2F33
$input-background-hover = $input-background
$input-background-active = $input-background
$input-text = $main-text-colour
$input-text-hover = $input-text
$input-text-active = $input-text
$input-letter-spacing = 1px
$input-border-width = 2px
$input-border-radius = 7px
$input-border-colour = transparent
$input-border-colour-hover = transparent
$input-border-colour-active = transparent