Backpacking Checklist

backpacking-checklist.markdown

Backpacking Checklist

A Pen by Matt Soria on CodePen.

License.

index.html

<header>
  <div class="container">
    <h1>Backpacking Checklist</h1>
    <p>Pull this up when packing, and check 'em off</p>
  </div>
</header>

<div class="container">
<form id="checklist">
<ul class="essentials">
<h2>The Essentials</h2>
<div class="columns">
  <li><label><input type="checkbox"> <span>50-60 Liter Pack</span></label></li>
  <li><label><input type="checkbox"> <span>Sleeping Bag</span></label></li>
  <li><label><input type="checkbox"> <span>Sleeping pad</span></label></li>
  <li><label><input type="checkbox"> <span>Tent</span></label></li>
  <li><label><input type="checkbox"> <span>Tent footprint</span></label></li>
  <li><label><input type="checkbox"> <span>Rain coat</span></label></li>
  <li><label><input type="checkbox"> <span>1 Set of wet hiking clothes</span></label></li>
  <li><label><input type="checkbox"> <span>1 Set of dry camping clothes</span></label></li>
  <li><label><input type="checkbox"> <span>Warm sweater</span></label></li>
  <li><label><input type="checkbox"> <span>Hiking shoes/boots</span></label></li>
  <li><label><input type="checkbox"> <span>1 waterproof dry bag</span></label></li>
  <li><label><input type="checkbox"> <span>1 waterproof wet bag</span></label></li>
  <li><label><input type="checkbox"> <span>2-3 large garbage bags</span></label></li>
  <li><label><input type="checkbox"> <span>1 or 2 liter water bottle/container</span></label></li>
  <li><label><input type="checkbox"> <span>Water purification tablets</span></label></li>
  <li><label><input type="checkbox"> <span>Stove</span></label></li>
  <li><label><input type="checkbox"> <span>Stove gas</span></label></li>
  <li><label><input type="checkbox"> <span>Lighter/matches</span></label></li>
  <li><label><input type="checkbox"> <span>Mess kit</span></label></li>
  <li><label><input type="checkbox"> <span>Breakfast/dinner meals</span></label></li>
  <li><label><input type="checkbox"> <span>Day snacks</span></label></li>
  <li><label><input type="checkbox"> <span>Headlamp</span></label></li>
  <li><label><input type="checkbox"> <span>Knife</span></label></li>
  <li><label><input type="checkbox"> <span>Map</span></label></li>
  <li><label><input type="checkbox"> <span>Compass</span></label></li>
  <li><label><input type="checkbox"> <span>Camp soap</span></label></li>
  <li><label><input type="checkbox"> <span>Camp towel</span></label></li>
  <li><label><input type="checkbox"> <span>Tooth brush &amp; paste</span></label></li>
  <li><label><input type="checkbox"> <span>A few zip lock bags</span></label></li>
  <li><label><input type="checkbox"> <span>Some zipties or small bungees</span></label></li>
  <li><label><input type="checkbox"> <span>Small roll of climbing tape</span></label></li>
  <li><label><input type="checkbox"> <span>Folded up toilet paper</span></label></li>
  <li><label><input type="checkbox"> <span>Small bottle of insect repellant</span></label></li>
  <li><label><input type="checkbox"> <span>Small tube of sunscreen</span></label></li>
  <li><label><input type="checkbox"> <span>First aid kit</span></label></li>
</div>
</ul>


<ul>
<h2>Extras</h2>
  <li><label><input type="checkbox"> <span>Mug</span></label></li>
  <li><label><input type="checkbox"> <span>Sunglasses</span></label></li>
  <li><label><input type="checkbox"> <span>Hat</span></label></li>
  <li><label><input type="checkbox"> <span>Pair of gloves</span></label></li>
  <li><label><input type="checkbox"> <span>15 liter day pack</span></label></li>
  <li><label><input type="checkbox"> <span>Trekking poles</span></label></li>
  <li><label><input type="checkbox"> <span>Rain pants</span></label></li>
  <li><label><input type="checkbox"> <span>Pair of sandles</span></label></li>
  <li><label><input type="checkbox"> <span>Camera + camera equipment</span></label></li>
  <li><label><input type="checkbox"> <span>Camping pillow</span></label></li>
  <li><label><input type="checkbox"> <span>A book</span></label></li>
  <li><label><input type="checkbox"> <span>Sage</span></label></li>
  <li><label><input type="checkbox"> <span>Tiger Balm</span></label></li>
</ul>
</form>
</div>

style.scss

$sans: 'Space Mono', monospace;
$serif: 'freight-display-pro', serif;

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: #fefefe;
  font-family: $sans;
}

.container {
  padding: 60px;
  &::after {
    content: '';
    clear: both;
    display: table;
  }
}

h1, h2, h3 {
  font-weight: 900;
  font-family: $serif;
  text-rendering: optimizelegibility;
  font-feature-settings: "kern" 1;
  font-kerning: auto;
}

header {
  color: #fff;
  padding: 30px 0;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/26344/banner_3.jpg') center center;
  background-size: cover;
  @media screen and (min-width: 800px) {
    padding: 60px 0;
  }
  p {
    margin: 0;
  }
}

h1 {
  margin: 0;
}

h2 {
  margin-top: 0;
  border-bottom: 2px solid;
}

ul {
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
  @media screen and (min-width: 800px) {
    float: left;
    &:first-of-type {
      margin-right: 60px;
    }
    &.essentials .columns {
      columns: 2;
    }
  }
  li {
    margin: 0;
    label {
      padding: .5em;
      display: block;
    }
    &:nth-of-type(odd) {
      background: rgba(0,0,0,.1);
    }
  }
}

label {
  cursor: pointer;
  input:checked + span {
    opacity: .5;
    text-decoration: line-through;
  }
}