panphora · December 10, 2021 17:56
diff --git a/boxescss-example-page.html b/boxescss-example-page.html
 <!-- FIND THE FULL PAGE HERE: https://www.todopal.com/ -->
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TodoPal - Make room for big projects</title>
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
  <link rel="stylesheet" type="text/css" href="/assets/css/boxes.css">
 </head>
 <body class="background-dark">
  <div class="content wide background-light-yellow">
    <img class="logo" src="/assets/images/logo.svg">
    <nav>
      <a href="/user/signup">Sign up</a>
      <a href="/user/login">Login</a>
    </nav>
  </div>
  <section class="content background-light-yellow">
    <h1 class="h1 800">Make room for big projects</h1>
    <h2 class="h5">A todo list app that only allows a small number of todos before your week fills up</h2>
    <div></div>
    <a class="button" href="/user/signup">Sign Up <span class=".65">&mdash; free!</span></a>
  </section>
  <section class="media background-light-yellow">
    <img class="todopal-overview-video clickable-media" data-video-id="yInKfrmp8a4" src="/assets/images/todopal-todos-broken.png">
  </section>
  <section class="media background-light-yellow desktop">
    <img src="/assets/images/todopal-from-busywork-to-focus.png">
  </section>
  <section class="content background-light-yellow">
    <h3 class="h3 800">Find a healthy pace by focusing on the big picture</h1>
    <ul>
      <li>Think in weeks, not days</li>
      <li>Focus on projects, not todos</li>
      <li>Healthy limits on your time</li>
    </ul>
    <div></div>
    <a class="button secondary" href="/assets/TodoPal_Guide.pdf" target="_blank">Read the guide</a>
  </section>
  <section class="media background-light-yellow tablet mobile">
    <img src="/assets/images/todopal-from-busywork-to-focus.png">
  </section>
  <div class="content wide background-light-yellow desktop"></div>
  <div class="content background-light-yellow center desktop-shift-contents-left">
    <h4 class="h3 800">🦄&nbsp; Benefits</h4>
  </div>
  <div class="content background-light-yellow center desktop desktop-shift-contents-left">
    <h4 class="h3 800">⚡️ Features</h4>
  </div>
  <section class="background-light-yellow tablet-wide-inner-content-boxes">
    <section class="content vertical-top">
      <h4 class="h5 700">Prioritize easily</h4>
      <p>Know when work will become overwhelming before it actually does</p>
    </section>
    <section class="content vertical-top desktop-shift-contents-left">
      <h4 class="h5 700">Focus long-term</h4>
      <p>Plan out milestones a month ahead of time, so you can stay focused</p>
    </section>
    <section class="content vertical-top">
      <h4 class="h5 700">Stay in work-mode</h4>
      <p>Use an app that feels more like using a notepad than a full productivity app</p>
    </section>
    <section class="content vertical-top desktop-shift-contents-left">
      <h4 class="h5 700">Stay sane</h4>
      <p>Pace yourself and leave extra leeway so you don't burn out</p>
    </section>
  </section>
  <div class="content background-light-yellow center tablet mobile">
    <h4 class="h3 800">⚡️ Features</h4>
  </div>
  <section class="background-light-yellow tablet-wide-inner-content-boxes">  
    <section class="content vertical-top desktop-shift-contents-right">
      <h4 class="h5 700">Low-on-time warning</h4>
      <p>Get a warning when your todos run over your healthy limit</p>
    </section>
    <section class="content vertical-top">
      <h4 class="h5 700">Work week-to-week</h4>
      <p>See the high-level of all your weekly goals instead of just day-to-day</p>
    </section>
    <section class="content vertical-top desktop-shift-contents-right">
      <h4 class="h5 700">Easy to use</h4>
      <p>Marking todos as done or adding a custom time to a todo is easy as pie</p>
    </section>
    <section class="content vertical-top">
      <h4 class="h5 700">Healthy defaults</h4>
      <p>We know the pain of feeling behind, so we help you set expectations you can meet</p>
    </section>
  </section>
  <section class="background-light-yellow desktop"></section>
  <section class="background-light-yellow desktop-shift-contents-left-to-center">
    <section class="media"><img src="/assets/images/profile-photo-green-circle.png"></section>
    <section class="content tall vertical-top desktop-shift-contents-left-large">
      <h4 class="h5 700">Hi, I'm David!</h4>
      <p>I created TodoPal after years of mindlessly checking off todos in other apps.</p>
      <p>I started to wonder how I could feel so productive while not getting any real work done.</p>
      <p>So I made an app that reminds me that my time is limited and precious.</p>
    </section>
  </section>
  <div class="content wide background-light-yellow center">
    <div class="600 .65">Launched in 2 days with <a target="_blank" href="https://remaketheweb.com/">Remake</a> &amp; <a target="_blank" href="https://boxescss.com/">Boxes.css</a>! 🎉</div>
  </div>
 </body>
 </html>
	<!-- FIND THE FULL PAGE HERE: https://www.todopal.com/ -->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TodoPal - Make room for big projects</title>
	<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
	<link rel="stylesheet" type="text/css" href="/assets/css/boxes.css">
	</head>
	<body class="background-dark">
	<div class="content wide background-light-yellow">
	<img class="logo" src="/assets/images/logo.svg">
	<nav>
	<a href="/user/signup">Sign up</a>
	<a href="/user/login">Login</a>
	</nav>
	</div>
	<section class="content background-light-yellow">
	<h1 class="h1 800">Make room for big projects</h1>
	<h2 class="h5">A todo list app that only allows a small number of todos before your week fills up</h2>
	<div></div>
	<a class="button" href="/user/signup">Sign Up <span class=".65">— free!</span></a>
	</section>
	<section class="media background-light-yellow">
	<img class="todopal-overview-video clickable-media" data-video-id="yInKfrmp8a4" src="/assets/images/todopal-todos-broken.png">
	</section>
	<section class="media background-light-yellow desktop">
	<img src="/assets/images/todopal-from-busywork-to-focus.png">
	</section>
	<section class="content background-light-yellow">
	<h3 class="h3 800">Find a healthy pace by focusing on the big picture</h1>
	<ul>
	<li>Think in weeks, not days</li>
	<li>Focus on projects, not todos</li>
	<li>Healthy limits on your time</li>
	</ul>
	<div></div>
	<a class="button secondary" href="/assets/TodoPal_Guide.pdf" target="_blank">Read the guide</a>
	</section>
	<section class="media background-light-yellow tablet mobile">
	<img src="/assets/images/todopal-from-busywork-to-focus.png">
	</section>
	<div class="content wide background-light-yellow desktop"></div>
	<div class="content background-light-yellow center desktop-shift-contents-left">
	<h4 class="h3 800">🦄  Benefits</h4>
	</div>
	<div class="content background-light-yellow center desktop desktop-shift-contents-left">
	<h4 class="h3 800">⚡️ Features</h4>
	</div>
	<section class="background-light-yellow tablet-wide-inner-content-boxes">
	<section class="content vertical-top">
	<h4 class="h5 700">Prioritize easily</h4>
	<p>Know when work will become overwhelming before it actually does</p>
	</section>
	<section class="content vertical-top desktop-shift-contents-left">
	<h4 class="h5 700">Focus long-term</h4>
	<p>Plan out milestones a month ahead of time, so you can stay focused</p>
	</section>
	<section class="content vertical-top">
	<h4 class="h5 700">Stay in work-mode</h4>
	<p>Use an app that feels more like using a notepad than a full productivity app</p>
	</section>
	<section class="content vertical-top desktop-shift-contents-left">
	<h4 class="h5 700">Stay sane</h4>
	<p>Pace yourself and leave extra leeway so you don't burn out</p>
	</section>
	</section>
	<div class="content background-light-yellow center tablet mobile">
	<h4 class="h3 800">⚡️ Features</h4>
	</div>
	<section class="background-light-yellow tablet-wide-inner-content-boxes">
	<section class="content vertical-top desktop-shift-contents-right">
	<h4 class="h5 700">Low-on-time warning</h4>
	<p>Get a warning when your todos run over your healthy limit</p>
	</section>
	<section class="content vertical-top">
	<h4 class="h5 700">Work week-to-week</h4>
	<p>See the high-level of all your weekly goals instead of just day-to-day</p>
	</section>
	<section class="content vertical-top desktop-shift-contents-right">
	<h4 class="h5 700">Easy to use</h4>
	<p>Marking todos as done or adding a custom time to a todo is easy as pie</p>
	</section>
	<section class="content vertical-top">
	<h4 class="h5 700">Healthy defaults</h4>
	<p>We know the pain of feeling behind, so we help you set expectations you can meet</p>
	</section>
	</section>
	<section class="background-light-yellow desktop"></section>
	<section class="background-light-yellow desktop-shift-contents-left-to-center">
	<section class="media"><img src="/assets/images/profile-photo-green-circle.png"></section>
	<section class="content tall vertical-top desktop-shift-contents-left-large">
	<h4 class="h5 700">Hi, I'm David!</h4>
	<p>I created TodoPal after years of mindlessly checking off todos in other apps.</p>
	<p>I started to wonder how I could feel so productive while not getting any real work done.</p>
	<p>So I made an app that reminds me that my time is limited and precious.</p>
	</section>
	</section>
	<div class="content wide background-light-yellow center">
	<div class="600 .65">Launched in 2 days with <a target="_blank" href="https://remaketheweb.com/">Remake</a> & <a target="_blank" href="https://boxescss.com/">Boxes.css</a>! 🎉</div>
	</div>
	</body>
	</html>