Khoa's Space

Teeny-tiny Notes

I want to share with everyone this neat thing: Teeny-tiny Notes. This is inspired by Sylvia's Tiny Notes. You should also check out Katherine Yang's website as well.

I ended up needing a simpler version, and I want a little tape on my notes, because that is how I always use them.

How to use

Paste the CSS into your blog styling, then paste and edit the HTML wherever you want to use it.

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

/* ========== Tiny Notes (sticky notes) ========== */
.tiny-notes {
  width: 90vw;
  position: relative;
  left: calc(-45vw + 50%);
}

.tiny-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
  padding: 3em 0;
}

.tiny-notes > ul > li {
  width: 220px;
  min-height: 180px;
  padding: 1.25em 1.15em 1em;
  background: #fff8dc;;
  color: var(--background-color);
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

/* Tape strip at top */
.tiny-notes > ul > li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 16px;
  background: color-mix(in srgb, var(--text-color) 15%, var(--background-color));
  opacity: 0.7;
}

.tiny-notes > ul > li span {
  display: block;
  font-family: "Indie Flower", cursive !important;
  font-size: 1.1rem;
  line-height: 1.45;
  color: #2a2a2a;
}

/* Rotations*/
.tiny-notes > ul > li:first-child { rotate: 2deg; }
.tiny-notes > ul > li:nth-child(odd) { margin-right: 0.5em; }
.tiny-notes > ul > li:nth-child(even) { rotate: 3deg; margin-top: 0.75em; }
.tiny-notes > ul > li:nth-child(3n) { rotate: -4deg; }
.tiny-notes > ul > li:nth-child(5n) { rotate: -2deg; margin-top: 1em; }
.tiny-notes > ul > li:nth-child(7n) { rotate: 5deg; margin-bottom: 0.5em; }
.tiny-notes > ul > li:nth-child(11n) { rotate: -1deg; margin-top: 0.25em; }
.tiny-notes > ul > li:nth-child(3),
.tiny-notes > ul > li:nth-child(13n) { rotate: -5deg; }
.tiny-notes > ul > li:nth-child(17n) { rotate: 3deg; }

<section class="tiny-notes">
  <ul>
    <li>
      <span>Your teeny-tiny notes go here. It can be a quick note for the reader.</span>
    </li>
    <li>
      <span>Maybe I should have it on the side like Katherine, because this is really center of the page lol.</span>
    </li>
    <li>
      <span>Buy tomatoes from the farmers' market.</span>
    </li>
  </ul>
</section>
Reply to this post

#resource