Add styling
This commit is contained in:
parent
c0a14ed508
commit
9f513d8a1b
3 changed files with 77 additions and 2 deletions
34
src/App.vue
34
src/App.vue
|
|
@ -40,8 +40,42 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "theme.styl"
|
||||
|
||||
html, body, #app {
|
||||
font-family: $fonts
|
||||
font-style: normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
margin: 0
|
||||
}
|
||||
|
||||
#app {
|
||||
background-color: $main-background-colour
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -38,14 +38,32 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "../theme.styl"
|
||||
|
||||
#websocket_entry {
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
height: 100vh
|
||||
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) {
|
||||
width: 90vw
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="stylus" scoped>
|
||||
@import "../theme.styl"
|
||||
|
||||
input[type="text"] {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
</style>
|
||||
23
src/theme.styl
Normal file
23
src/theme.styl
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue