Merge pull request #37 from EsterDanielYtterbrink/responsive

Responsive
sammancoaching · Nov 22, 2023 · 97e5b11 · 97e5b11
2 parents 0ac08b1 + 71399a9
commit 97e5b11
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 46 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,15 @@
+<head>
+    <meta charset="utf-8">
+    <title>{{ page.title }}</title>
+    <link rel="stylesheet" href="/assets/css/styles.css">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
+    <link rel="manifest" href="/assets/images/site.webmanifest">
+    <link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+    {% feed_meta %}
+    {% seo %}
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,28 @@
+<header class="site-header">
+    <div class="banner">
+        <img src="{{ site.baseurl }}/assets/images/samman_banner_thin.png">
+    </div>
+        {%- assign page_paths = site.header_pages  -%}
+        <nav class="site-nav">
+            <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+            <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+            </label>
+
+            <div class="trigger">
+
+                {% for item in site.data.navigation %}
+                <div class="page-link">
+                    <a href="{{ item.link }}"
+                        {% if page.url == item.link %}class="current"{% endif %}>
+                        {{ item.name }}
+                    </a>
+                </div>
+                {%- endfor -%}
+            </div>
+        </nav>
+</header>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,23 +1,17 @@
 <!doctype html>
 <html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>{{ page.title }}</title>
-	<link rel="stylesheet" href="/assets/css/styles.css">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
-	<link rel="manifest" href="/assets/images/site.webmanifest">
-	<link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#5bbad5">
-	<meta name="msapplication-TileColor" content="#da532c">
-	<meta name="theme-color" content="#ffffff">
-    {% feed_meta %}
-    {% seo %}
-</head>
+
+{%- include head.html -%}
+
 <body>
-
-	{{ content }}
+
+{%- include header.html -%}
+
+<main class="page-content" aria-label="Content">
+	<div class="wrapper">
+		{{ content }}
+	</div>
+</main>
 
 </body>
 

diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -1,8 +1,5 @@
 ---
 layout: default
 ---
-	<img src="{{ site.baseurl }}/assets/images/samman_banner_thin.png" class="banner">
-	{% include navigation.html %}
     {{ content }}
-    {% include footer.html %}
-
+{% include footer.html %}
diff --git a/_layouts/society.html b/_layouts/society.html
@@ -1,7 +1,6 @@
 ---
 layout: default
 ---
-	<img src="{{ site.baseurl }}/assets/images/samman_banner_thin.png" class="banner">
-	{% include navigation.html %}
+
     {{ content }}
 	{% include society_footer.html %}
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
@@ -0,0 +1,5 @@
+$primary-color: #333;
+$dark-blue: rgb(29, 62, 97);
+$mid-blue: rgb(65, 103, 136);
+$light-blue: rgb(170, 197, 220);
+$salmon-pink: rgb(227, 136, 117);
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
@@ -0,0 +1,88 @@
+@import "colors";
+@import "variables";
+
+.site-nav {
+  position: absolute;
+  top: 9px;
+  right: $spacing-unit * .5;
+  background-color: white;
+  border: 1px solid $dark-blue;
+  border-radius: 5px;
+  text-align: right;
+
+  .nav-trigger {
+    display: none;
+  }
+
+  .menu-icon {
+    float: right;
+    width: 36px;
+    height: 26px;
+    line-height: 0;
+    padding-top: 10px;
+    text-align: center;
+
+    > svg path {
+      fill: $dark-blue;
+    }
+  }
+
+  label[for="nav-trigger"] {
+    display: block;
+    float: right;
+    width: 36px;
+    height: 36px;
+    z-index: 2;
+    cursor: pointer;
+  }
+
+  input ~ .trigger {
+    clear: both;
+    display: none;
+  }
+
+  input:checked ~ .trigger {
+    display: block;
+    padding-bottom: 5px;
+  }
+
+  .page-link {
+    color: $primary-color;
+    line-height: $base-line-height;
+    display: block;
+    padding: 5px 10px;
+
+    // Gaps between nav items, but not on the last one
+    &:not(:last-child) {
+      margin-right: 0;
+    }
+    margin-left: 20px;
+  }
+
+  @media screen and (min-width: $on-medium) {
+    position: static;
+    float: none;
+    border: none;
+    background-color: inherit;
+    text-align: justify;
+    text-align-last:center;
+
+    label[for="nav-trigger"] {
+      display: none;
+    }
+
+    .menu-icon {
+      display: none;
+    }
+
+    input ~ .trigger {
+      display: block;
+    }
+
+    .page-link {
+      display: inline-block;
+      padding: 5px;
+      margin:0px;
+    }
+  }
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -0,0 +1,7 @@
+$spacing-unit:     30px;
+$base-line-height: 20px;
+$on-medium: 600px;
+$content-width: 750px;
+$on-large: 800px;
+
+$font-stack: Helvetica, sans-serif;
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -1,16 +1,10 @@
-$font-stack: Helvetica, sans-serif;
-$primary-color: #333;
-$dark-blue: rgb(29, 62, 97);
-$mid-blue: rgb(65, 103, 136);
-$light-blue: rgb(170, 197, 220);
-$salmon-pink: rgb(227, 136, 117); 
+@import "navigation";
+@import "colors";
+@import "variables";
 
 .current {
 	color: $light-blue;
-} 
-.banner {
-	width: 750px;
-} 
+}
 a:link {
     color: $dark-blue;
 }
@@ -30,6 +24,23 @@ img[src*="#book_cover"] {
 	left: 250px;
 }
 
+@media screen and (max-width: $on-medium) {
+  .banner{
+    padding-right: 70px;
+    img{
+      width: 100%;
+    }
+   }
+}
+@media screen and (min-width: $on-medium) {
+
+  .banner {
+    img{
+      width: 750px;
+    }
+   }
+}
+
 body {
   margin-left: auto;
   margin-right: auto;
@@ -41,20 +52,21 @@ body {
         text-decoration: none;
     }
 }
-nav {
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  li { display: inline-block; }
 
-  a {
-    padding: 6px 12px;
-    text-decoration: none;
-  }
-}
 footer {
 	padding: 6px 12px;
+}
+
+.wrapper {
+  max-width: calc(#{$content-width} - (#{$spacing-unit}));
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit * .5;
+  padding-left: $spacing-unit * .5;
+
+  @media screen and (min-width: $on-large) {
+    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+  }
 }