style header partial #61

FACN1 · May 24, 2017 · 6f36147 · 6f36147
1 parent 4226221
commit 6f36147
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 3 deletions.
diff --git a/public/fonts/gidole.otf b/public/fonts/gidole.otf
diff --git a/public/style/sass/_header.scss b/public/style/sass/_header.scss
@@ -0,0 +1,36 @@
+.page-header {
+  @include flex;
+  justify-content: space-between;
+  height: $header-height;
+  width: 100vw;
+  padding: 10px;
+  background-color: white;
+  box-shadow: 0 0 20px 0 #222;
+}
+
+.page-title {
+  font: bold 25px Gidole;
+  color: $main;
+}
+
+.nav-button {
+  @include flex;
+  height: calc(#{$header-height} - 20px);
+  width: calc(#{$header-height} - 20px);
+  color: white;
+  background-color: $main;
+  font-size: 25px;
+  border-radius: 2px;
+  box-shadow: 0px 2px 3px -1px #aaa;
+}
+
+.nav-button:not(:last-child) {
+  margin-right: 10px;
+}
+
+.page-content {
+  @include flex;
+  flex-direction: column;
+  min-height: calc(100vh - #{$header-height});
+  width: 100vw;
+}
diff --git a/public/style/sass/_reset.scss b/public/style/sass/_reset.scss
@@ -0,0 +1,14 @@
+body, header, h1, a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover, button:hover {
+  cursor: pointer;
+}
diff --git a/public/style/sass/_variables.scss b/public/style/sass/_variables.scss
@@ -0,0 +1,18 @@
+// COLOURS
+$main: #f7786b;
+
+// SIZING
+$header-height: 60px;
+
+// MIXINS
+@mixin flex() {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// FONTS
+@font-face {
+  font-family: Gidole;
+  src: url('../../fonts/gidole.otf');
+}
diff --git a/public/style/sass/main.scss b/public/style/sass/main.scss
@@ -1,3 +1,4 @@
-body {
-  background-color: pink;
-}
+// GENERAL
+@import 'variables';
+@import 'reset';
+@import 'header';
diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs
@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
     <title>Nazbay</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="./style/style.css">
   </head>
   <body>