Card Test with Leftnav

by iamjoshhansen

HTML

<html>
  <body>
    <input type="checkbox" id="the-check" />
    <header>
      <h1>Heading</h1>
    </header>
    <nav>
      <div>Leftnav</div>
    </nav>
    <main>
      <h2>The Content</h2>
      
      <p>
        Some content before
      </p>
      
      <hr />
      
      <div class="row">
        <div class="expectation">Expect: </div>
      </div>
      
      <div class="row">
        
        <div class="column">
          <div class="box">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
          </div>
        </div>
        
        <div class="column">
          <div class="card">
            Card content
          </div>
        </div>
        
      </div> <!-- (end) row -->
      
      <hr />
      
      <p>
        More content after
      </p>
    </main>
    <footer>
      The Footer
    </footer>
  </body>
</html>

CSS

.row {
  container-type: inline-size;
}

.expectation::after {
  content: 'Side by side';
}

@container(max-width: 500px) {
  .row .card,
  .row .box {
    width: 100%;
    max-width: none;
    /* box-shadow: 0 0 1em #090; */
    flex: none;
  }
  
  .expectation::after {
    content: 'Stacked';
  }
}

/* Columns */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.column {
  display: contents;
}

.column > * {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  flex-basis: 0;
  flex-grow: 1;
}

/* Box */

.box {
  background: #fff;
  padding: 1rem;
  /* box-shadow: inset 0 0 0 2px #f90; */
}

/* Card */

.card {
  background: #09f;
  color: #fff;
  padding: 1rem;
  
  max-width: 25%;
  flex: 0 0 25%;
}

/****************************************
  Page setup - Just for Demo
****************************************/

html {
   font: 16px Courier New;
}

body {
  padding: 0;
  margin: 0;
  display: grid;
  background: #eee;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas:
    'header header'
    'nav    main'
    'nav    footer';
  font-size: 1em;
  min-height: 100vh;
}

hr {
  border: none;
  background: #00000033;
  height: 1px;
  width: 100%;
  margin: 1em 0;
}

p {
  padding: 0;
  margin: 0;
}

#the-check {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1em;
  height: 1em;
  appearance: none;
  background: #fff;
  transform: translateY(-0.2em);
  border-radius: 0.2em;
  box-shadow: inset 0 0.05em 0.2em #000;
  cursor: pointer;
}

#the-check,
header {
  font-size: 1rem;
  line-height: 1em;
}

#the-check:checked {
  background: #090;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1em;
}

h2 {
  font-size: 2em;
  font-weight: bold;
}

header {
  grid-area: header;
  padding: 1rem;
  padding-left: calc(2rem + 1em);
  background: #101010;
  color: #eee;
}

nav {
  grid-area: nav;
  overflow: hidden;
  background: #ddd;
  padding: 1rem;
  width: 1em;
 ...