The css bits. a cheatsheet of handy css solutions.

Responsive text size #

font-size:clamp(--min, (X)vw, --max)

Clamping the value of font sizes is a really simple way for making text be pleasant to read at different resolution/devices. It is also a godsend for headers, so they change their size instead of breaking into new lines (and generally look huge) on smaller resolutions. It takes some trial and error to get the size based on vw (% of the width of the viewport) value just right, but it's worth it.

The only drawback is that both clamp() and vw are relatively new additions to css, so older browsers might revert to default sizes. This can be avoided by adding another font-size rule before the clamp and using one of the supported units.

js free load image(s) on click #

Here's a great solution if you want to keep the site light on kb, but would still want to include a gallery. Original code courtesy of Paul Glushak, you can test it on codepen.io

----------css----------
.fig {
  display: inline;
}

.fig label {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

.fig input {
  display: none;
}

.fig img {
  position: absolute;
  left: -9999px;
  display: none;
}

.fig input:checked ~ img {
  position: relative;
  left: 0;
  display: block;
}

----------html----------
<div class="container">
  Please click the link to <div class="fig">
    <input type="checkbox" id="loadimage" name="loadimage">
    <label for="loadimage">Load Image</label>
  <img src="----FILE URL-----" loading="lazy" alt="">
  </div>
  <p>This is some other text</p>
</div>

External Resources: #

• thomasorus' html-tips - a great html+css primer from a fellow merveillalite.