• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

Screenshot of code: // Application layout. import Footer from './Footer.component.js' export default ({ layout, SLOT }) => html` <div id='application'> ${SLOT} </div> <${Footer} /> <style> … #application { max-width: 920px; margin-left: auto; margin-right: auto; } <if ${layout==='settings'}> #application { display: grid; grid-template-areas: 'navigation main ' 'footer footer'; grid-template-rows: 1fr fit-content(100%); grid-template-columns: fit-content(100%) 1fr; } /* On narrower screens, use one-column layout. */ @media screen and (max-width: 660px) { #application { grid-template-areas: 'navigation' 'main' 'footer'; } } </if> </style> `