1 files changed, 62 insertions, 0 deletions
diff --git a/pages/assets/_new.scss b/pages/assets/_new.scss
new file mode 100644
index 0000000..7add150
--- /dev/null
+++ b/pages/assets/_new.scss
@@ -0,0 +1,62 @@
+// Variables
+
+$main-v-spacing: 1rem;
+
+// Header variables
+
+// Free one line at the top of the page
+$header-padding: $main-v-spacing 0 0 0;
+$header-bg-color: #555;
+$header-color: #fff;
+$header-title-margin: 1rem 0;
+$header-title-size: inherit;
+
+// Navigation menu variables
+
+$nav-color: $header-color;
+$nav-bg-color: $header-bg-color;
+$nav-item-size: 1.5rem;
+$nav-item-padding: 0.6rem 1.2rem;
+// On smaller screen, choose between horizontal (row) and vertical (column) menu
+$nav-small-direction: column;
+
+// Nav menu
+
+header {
+    grid-area: header;
+    padding: $header-padding;
+    background-color: $header-bg-color;
+    text-align: center;
+
+    @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
+    box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
+    box-shadow-top: 0;
+    
+    > h1 {
+        color: $header-color;
+        font-weight: bold;
+        margin: $header-title-margin;
+    }
+}
+
+.nav-menu {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    @media (max-width: $small-screen) {
+        flex-direction: $nav-small-direction;
+    }
+}
+
+// If we don't add the "a" here, on hover styles won't be affected
+a.nav-item {
+    font-size: $nav-item-size;
+    padding: $nav-item-padding;
+    color: $nav-color;
+    background-color: $nav-bg-color;
+    font-weight: bold;
+    &:first-child {
+        background-color: $nav-color;
+        color: $nav-bg-color;
+    }
+}