fix responsive

test-hugo/themes/devfest-theme-hugo/assets/style/pages/_home.scss

@@ -23,6 +23,7 @@
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-column-gap: 2rem;
+      width: 100%;
     }
 
     .number {
@@ -46,7 +47,6 @@
   }
 
   section.speakers {
-
     ul {
       list-style: none;
       display: flex;
@@ -54,6 +54,10 @@
       align-items: flex-start;
       flex-wrap: wrap;
 
+      li {
+        margin: var(--space-4);
+      }
+
       // Keep only 4 first speakers
       li:nth-child(n+5) {
         display: none;
@@ -101,3 +105,27 @@
     }
   }
 }
+
+@media (max-width: 60rem) {
+
+  .home {
+    .jumbo .inner h1 {
+      img {
+        max-width: 100%;
+      }
+      font-size: 1.5rem;
+    }
+
+    section.info>div  {
+      flex-direction: column;
+    }
+
+    section.location .description {
+      position: relative;
+      top: unset;
+      bottom: unset;
+      right: unset;
+      width: 100%;
+    }
+  }
+}

test-hugo/themes/devfest-theme-hugo/assets/style/pages/_session.scss

@@ -54,6 +54,7 @@
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-gap: var(--space-3);
+    //grid
 
     header {
       grid-column: 1 / -1;
@@ -65,6 +66,7 @@
       h1 {
         flex-grow: 1;
       }
+
       .tags {
         margin-right: 1ch;
         white-space: nowrap;
@@ -118,7 +120,6 @@
       }
     }
 
-
     .media {
       grid-column: 1 / -1;
 
@@ -129,5 +130,12 @@
     }
 
   }
+}
 
+@media (max-width: 60rem) {
+  .page.talks {
+    .talk {
+      grid-template-columns: 1fr;
+    }
+  }
 }

test-hugo/themes/devfest-theme-hugo/assets/style/partials/_base.scss

@@ -52,3 +52,11 @@ a, a:visited {
 .language.english::before {
   content: '🇬🇧';
 }
+
+.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}

test-hugo/themes/devfest-theme-hugo/assets/style/partials/_header.scss

@@ -1,5 +1,4 @@
 body > header {
-  // FIXME responsive
 
   position: fixed;
   top: 0;
@@ -8,7 +7,7 @@ body > header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: var(--toolbar-height);
+  min-height: var(--toolbar-height);
   padding: 0 var(--container-margin);
   box-shadow: 0 var(--space-1) var(--space-2) var(--darken-1);
   background: var(--primary);
@@ -18,6 +17,30 @@ body > header {
     height: calc(var(--toolbar-height) - (2 * var(--space-2)));
   }
 
+  label {
+    display: none;
+    --size: 1.5rem;
+    height: var(--size);
+    width: var(--size);
+    opacity: .5;
+    padding: .1em;
+    border: var(--space-2) solid transparent; // Extending the hit area
+    outline-offset: var(--space-2);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>');
+
+    &:hover, &:focus {
+      opacity: 1;
+      outline: thin dotted currentColor;
+    }
+  }
+
+  input[type=checkbox]:checked ~ label {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="white" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>');
+  }
+
   nav {
     display: flex;
     align-items: center;
@@ -43,8 +66,38 @@ body > header {
       &.active {
         opacity: 1;
         border-bottom-color: currentColor;
+      }
+    }
+  }
+}
 
+@media (max-width: 60rem) {
+  body > header {
+    flex-wrap: wrap;
+
+    label {
+      display: block;
+    }
+
+    nav {
+      display: none;
+      width: 100%;
+      background: var(--primary);
+      flex-direction: column;
+      justify-content: flex-start;
+
+      a {
+        width: 100%;
+
+        &.active {
+          border-bottom-width: thin;
+          border-bottom-color: var(--lighten-2);
+        }
       }
     }
+
+    input[type=checkbox]:checked ~ nav {
+      display: block;
+    }
   }
 }

test-hugo/themes/devfest-theme-hugo/assets/style/partials/_tickets.scss

@@ -1,12 +1,18 @@
 
 .tickets ul {
   list-style: none;
-  display: grid;
+  display: flex;
-  grid-auto-columns: 1fr;
+  flex-wrap: wrap;
-  grid-gap: var(--space-4);
+  justify-content: center;
-  grid-auto-flow: column; // FIXME responsive
+  align-items: center;
+  width: 100%;
+
+  li {
+    flex-basis: 15rem;
+  }
 
   li .ticket {
+    margin: var(--space-4);
     padding: 2rem var(--space-3);
     border: thin solid var(--darken-1);
     box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2);

test-hugo/themes/devfest-theme-hugo/layouts/partials/header.html

@@ -5,6 +5,10 @@
 		</a>
 	</div>
 
+	<input type="checkbox" id="menu-burger"  class="visually-hidden"/>
+
+	<label for="menu-burger"></label>
+
 	<nav>
 		{{ $url := .URL }}
 		{{ range .Site.Data.toolbar.menus }}
@@ -16,4 +20,5 @@
 		{{ end }}
 	</nav>
 
+
 </header>