Simulated Notebook

by jstnlowe

HTML

<div class="heading">
  Today I ate some Bacon
</div>
<div class="heading date">
  <script>
    document.write(new Date().toLocaleDateString());

  </script>
</div>
<div class="paragraph">
  Spicy jalapeno bacon ipsum dolor amet cupim ullamco nostrud in magna turkey andouille, alcatra shank beef ribs brisket. Tail porchetta t-bone, tri-tip ut est proident bresaola exercitation. Ground round magna eu venison meatloaf tenderloin corned beef
  ipsum consequat pancetta alcatra do ribeye laborum id. Cow frankfurter short loin tongue laborum pariatur jerky strip steak.
</div>
<div class="paragraph">
  Ut in aute in short loin. Tail tempor ham, aliquip prosciutto exercitation aute ground round tri-tip reprehenderit non jerky chuck. Tri-tip magna ad ball tip beef ribs buffalo, meatball ribeye ham hock aliqua id est leberkas. Ex drumstick in alcatra ground
  round pig. Et quis jowl, rump irure kevin salami fugiat bacon labore pork aliqua. Commodo ground round capicola pariatur, elit velit enim jowl in tri-tip laborum veniam pork loin pork belly. Sirloin boudin leberkas, turkey kevin nostrud beef tri-tip
  rump sed.
</div>
<div class="paragraph">
  Doner in leberkas magna ham ribeye, andouille qui consequat. Leberkas kevin et, ut sed hamburger ea aliqua ex. Laboris hamburger lorem adipisicing. Turkey pork chop filet mignon leberkas meatloaf aute pastrami beef lorem sint drumstick dolor. Short ribs
  andouille jowl sausage occaecat meatball. Id rump sirloin voluptate enim, qui labore duis meatloaf shankle bacon non culpa.
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore');
body {
  background-color: #FFFDF6;
  background-size: 100% 1.21em;
  background-image: linear-gradient(90deg, transparent 0.5em, #919172 2.5em, #545442 2.7em, #919172 3.7em, transparent 4.8em), linear-gradient(90deg, transparent 95%, #FFFDF6 90%), linear-gradient(#E3E1D9 .05em, transparent .05em);
  line-height: 1.24em;
  font-size: 1.5em;
  margin-top: 1.6em;
  margin-left: 4.3em;
  margin-right: 7%;
  font-family: 'La Belle Aurore', cursive;
  color: #000080;
  letter-spacing: -0.05em;
  max-width: 90%;
}

.heading {
  position: relative;
  display: inline-block;
  font-weight: bold;
}

.date {
  float: right;
}

.heading:after {
  content: '';
  border-bottom: 2px solid rgba(0, 0, 128, 1);
  width: 100%;
  position: absolute;
  left: 0.3em;
  top: 0.85em;
  transform: rotate(1deg);
}

.paragraph {
  margin-top: 1.27em;
  margin-bottom: 1.27em;
}