From 7e9433762f51be2c4938481c9c33589982118033 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Fri, 11 Jun 2021 13:31:07 +0200
Subject: Goodbye, Bootstrap & added a button component

---
 packages/client/src/App.vue | 95 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 84 insertions(+), 11 deletions(-)

(limited to 'packages/client/src/App.vue')

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>
-- 
cgit v1.2.3-18-g5258