diff options
| author | HampusM <hampus@hampusmat.com> | 2021-06-11 13:31:07 +0200 |
|---|---|---|
| committer | HampusM <hampus@hampusmat.com> | 2021-06-11 13:31:07 +0200 |
| commit | 7e9433762f51be2c4938481c9c33589982118033 (patch) | |
| tree | 9cfc36a1d59ac3c926bfcb2e222449da14cfec5d /packages/client/src/App.vue | |
| parent | 55ab996795efdb125437d5728b50d03ac5d2612d (diff) | |
Goodbye, Bootstrap & added a button component
Diffstat (limited to 'packages/client/src/App.vue')
| -rw-r--r-- | packages/client/src/App.vue | 95 |
1 files changed, 84 insertions, 11 deletions
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue index f4d00ca..e74b3f9 100644 --- a/packages/client/src/App.vue +++ b/packages/client/src/App.vue @@ -3,20 +3,15 @@ </template> <style lang="scss"> -@use "./scss/colors"; +@use "scss/colors"; +@use "scss/variables"; +@use "scss/fonts"; -@import "./scss/bootstrap"; - -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/utilities/api"; -@import "~bootstrap/scss/containers"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/tooltip"; - -@import "./scss/fonts"; +$gutter-x: 1.5rem; +$gutter-y: 0rem; #app { - font-family: $font-primary; + font-family: fonts.$primary; color: colors.$text; min-height: 100vh; background-color: colors.$background; @@ -25,8 +20,86 @@ a { color: colors.$text; text-decoration: none; + transition: color 0.15s ease-in-out; &:hover { color: colors.$primary-light; } } + +.container { + display: flex; + width: 100%; + padding-right: 0; + padding-left: 0; + margin-right: auto; + margin-left: auto; + flex-flow: column; + height: 100vh; +} + +.row { + display: flex; + flex-wrap: wrap; + margin-top: calc(#{$gutter-y} * -1); + margin-right: 0; + margin-left: 0; + height: 100%; + + > * { + width: 100%; + max-width: 100%; + padding-right: calc(#{$gutter-x} / 2); + padding-left: calc(#{$gutter-x} / 2); + margin-top: $gutter-y; + } +} + +.col { + flex: 1 0 0%; + margin-left: 3rem; + margin-top: 1rem; +} + +.fs-1 { + font-size: variables.$font-size-1; +} +.fs-2 { + font-size: variables.$font-size-2; +} +.fs-3 { + font-size: variables.$font-size-3; +} +.fs-4 { + font-size: variables.$font-size-4; +} +.fs-5 { + font-size: variables.$font-size-5; +} +.fs-6 { + font-size: variables.$font-size-6; +} + +@media (max-width: 1200px) { + .fs-1 { + font-size: calc(1.375rem + 0.667vw) !important; + } + .fs-2 { + font-size: calc(1.325rem + 1.584vw) !important; + } + .fs-3 { + font-size: calc(1.3rem + 0.017vw) !important; + } + .fs-4 { + font-size: calc(0.82rem + 0.4vw) !important; + } + .fs-5 { + font-size: calc(0.65rem + 0.25vw) !important; + } +} + +@media (min-width: 576px) { + .col { + margin-left: 4.5rem; + } +} </style> |