diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 9d68c22..4a5b9de 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,5 +1,25 @@
+//
+// Spaces
+//
+
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+$tao-navbar-height: 67px;
+
.tfw-first-row {
height: 40vh;
+ margin-top: $tao-navbar-height + $space;
}
.tfw-second-row {}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index b96b5f7..01e7202 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,8 +1,11 @@
-
-
Tutorial framework Demo
-
- Powered by Angular
-
-
-
-
+
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 1920a5b..299f9d4 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,33 +1,80 @@
-@keyframes heartbeat
-{
- 0%
- {
- transform: scale( .75 );
- }
- 20%
- {
- transform: scale( 1 );
- }
- 40%
- {
- transform: scale( .75 );
- }
- 60%
- {
- transform: scale( 1 );
- }
- 80%
- {
- transform: scale( .75 );
- }
- 100%
- {
- transform: scale( .75 );
- }
+// Variables
+
+//
+// Spaces
+//
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+//
+// Misc
+//
+$tao-blue-500: #277EEC;
+$font-size-base: 14px;
+$font-size-h4: floor(($font-size-base * 1.2));
+
+$tao-navbar-height: 67px;
+
+
+//
+// Classes
+//
+.tao-header-title {
+ color: $tao-blue-500;
+ font-size: $font-size-h4;
}
-.logo {
- animation: heartbeat 1s infinite;
+.tao-navbar {
+ background-color: rgba(255, 255, 255, 0.96);
+ min-height: $tao-navbar-height;
+ box-shadow: 0px 1px 6px 0px #888;
+ margin-bottom: 12px;
+ border: 1px solid #e7e7e7;
+}
+
+.tao-grid-navbar {
+ display: grid;
+ grid-template-columns: 10fr 1fr 10fr;
+ grid-column-gap: 8px;
+ width: 100%;
+}
+
+.tao-company-logo {
+ display: block;
+ width: 130px;
+}
+
+.tao-company-logo-mobile {
+ display: none;
+ width: 130px;
+}
+
+@media (max-width: 767px) {
+ .tao-grid-navbar {
+ grid-template-columns: 1fr;
+ }
+
+ .tao-company-logo {
+ display: none;
+ }
+
+ .tao-company-logo-mobile {
+ display: block;
+ }
+
+ .tao-navbar-links {
+ justify-self: left !important;
+ }
}
.jumbotron {
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
old mode 100644
new mode 100755
index 8081c7c..2971e83
Binary files a/src/assets/images/favicon.ico and b/src/assets/images/favicon.ico differ
diff --git a/src/assets/scss/_grid.scss b/src/assets/scss/_grid.scss
new file mode 100644
index 0000000..9ec01a4
--- /dev/null
+++ b/src/assets/scss/_grid.scss
@@ -0,0 +1,44 @@
+.tao-grid-center-center {
+ justify-self: center;
+ align-self: center;
+}
+
+.tao-grid-center-right {
+ justify-self: right;
+ align-self: center;
+}
+
+.tao-grid-center-left {
+ justify-self: left;
+ align-self: center;
+}
+
+.tao-grid-start-center {
+ justify-self: center;
+ align-self: start;
+}
+
+.tao-grid-end-center {
+ justify-self: center;
+ align-self: end;
+}
+
+.tao-grid-top-right {
+ justify-self: right;
+ align-self: start;
+}
+
+.tao-grid-top-left {
+ justify-self: left;
+ align-self: start;
+}
+
+.tao-grid-bottom-left {
+ justify-self: left;
+ align-self: end;
+}
+
+.tao-grid-bottom-right {
+ justify-self: right;
+ align-self: end;
+}
diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss
index c63ec31..abc22dc 100644
--- a/src/assets/scss/_main.scss
+++ b/src/assets/scss/_main.scss
@@ -1,6 +1,8 @@
-@import 'variables';
+@import
+ 'variables',
+ 'grid';
@import
'shared/buttons';
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index b1b9c21..fbf277c 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -155,6 +155,6 @@ $font-size-h3: floor(($font-size-base * 1.3));
$font-size-h4: floor(($font-size-base * 1.2));
$font-size-h5: floor(($font-size-base * 1.1));
-// Custom sizes
+
$tao-navbar-height: 67px;