<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <meta name="theme-color" content="#4285f4" />
    <%= favicon_link_tag  'favicon.ico' %>
    <link rel="manifest" href="/recipes/low-income/manifest.json" crossOrigin="use-credentials">
    <script>
      // attempt to make pwa
if ('serviceWorker' in navigator) {
  navigator. serviceWorker.register('/../../recipes/low-income/sw.js');
}
// /home/adropshi/wfpb-food.rmatter.com/recipes/low-income/app/javascript/sw.js
    </script>
  </head>
 
  <body>
  <div class="wrapper">
  <header class="main-head grid-item"> 
  <span>
    <%= link_to image_tag("/../../recipes/low-income/app/assets/images/cranblemon-slice.svg", :alt => "Logo of lemon wedge and cranberry", :class => "nav-logo"), root_path %>
  </span>
  <span>The header</span>
  <span class="hamburger">[-]</span>
   </header>
  <nav class="main-nav grid-item">
    <ul>
      <li><%= link_to "Help", help_path  %></li>
      <li><a href="">Nav 2</a></li>
      <li><a href="">Nav 3</a></li>
    </ul>
  </nav>
  <article class="content grid-item">
    <h1>Main article area</h1>
    <%= yield %>
  </article>
  <aside class="side grid-item">Sidebar</aside>
  <div class="ad grid-item">Advertising</div>
  <footer class="main-footer grid-item">The footer</footer>
</div>
    
  </body>
</html>
<style>
html {
 
}
#logo-lemon path {
  fill: red;
  background-color:red;
}
.nav-logo {
  max-width:30px;
  width:30;
  height:30;
}
.grid-item {
  box-sizing: border-box;
flex-wrap: wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  white-space: normal;

  /* border:1px solid red; */
}

/*  */
.main-head {
   position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  min-width:100%;
  margin-bottom:2em;
  /* text-align:center; */
  grid-area: header;
  border:2px solid #666;
  padding:0.25em;
  display: grid;
grid-template-columns: 30px 8fr 2fr;
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;

}

.main-head span {
  /* text-align:center; */
  
  display:inline-flex;
  vertical-align:middle;
  align-items: flex-end;
     align-items: center; /* Vertical */
  
}
.hamburger {
 /* grid-column: span 3 / 5; */
  /* text-align:center; */
 align-content: flex-start;
    justify-content:flex-end;
    /* grid-area: 1 / 11 / 2 / 12; */
}
.content {
  grid-area: content;
}
.main-nav {
  
  grid-area: nav;
}
nav ul {
  display:none ;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
  text-align:center;
  
}
.wrapper {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
    
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 10px;
  
}
/* Apple Watch: 
162 pixels width
197 pixels heigh */



@media (max-width: 500px) {
  /* Phone */
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "ad"
      "footer";
  }
  nav ul {
    
    /* display: flex;
    justify-content: space-between; */
  }
  .hamburger {
     
  }
}
@media (min-width: 500px) {
  /* Tablet */
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }
  nav ul {
    /* display: flex; */
    justify-content: space-between;
  }
  .hamburger {
    
  }
}
@media (min-width: 700px) {
  /* Desktop */
  .wrapper {

    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer";
  }
  nav ul {
    display:flex;
    flex-direction: column;
  }
  .hamburger {
    display: none !important;
  }
}
@media (min-width: 1000px) {
  /* Large Display */
  .wrapper {
    max-width:1000px;
    margin:auto;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer";
  }
  nav ul {
    flex-direction: column;
  }
  .hamburger {
    display: none !important;
  }
}
</style>
