CSS Hacks: Make Your Boring Site Tolerable

My Love: The Grind

It’s five past midnight, I’m a bottle of cabernet away from sober, and my girlfriend is crying that I spend more time with my laptop than I do with her.

Conditions are perfect. Let’s write some code.

The State of Things

Let’s assess our situation:

It’s not terrible, but it’s certainly not great. It’s generic and lacks passion.

There are quite a few things we could do better.

And I’m not talking about my love life. This layout needs work.

For instance, a single article summary is HUGE. You can only see one article at a time. Let’s change that.

Flexbox: The Only Parent You Need

We can use the magic of flexbox, combined with a few extra styles, so that multiple article summaries are shown on the same row.

We’ll be using Sass to write our styles. It’s like CSS, but sassier. If you followed my guide on building a free static site, you should get Sass for free with Hugo. The extended version has it bundled in.

Let’s add a class to the parent container. Something descriptive, something professional. Something that encapsulates the spirit of the content inside:

// TODO: SERIOUSLY?!?
.low-quality-slop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5%;
    article {
      width:47%;
    }

}

Ah hell, so much for that.

But we’re onto something here.

Let’s discuss what we’ve done:

• display: flex makes our container a flexbox
• flex-wrap: wrap means that the flex items can break into multiple lines
• width adjusts how wide the summary containers are, so we can have more than one per row
• gap puts an aesthetically pleasing gap between them

And, for some extra style, I’m going to add dark mode as the default theme.

But it’s still pretty bland.

Make It Pop: Transitions and Shadows

Let’s make it even better. We’ll add some animation on hover, a box-shadow to give the summaries some definition, and a more accurate class name:

  .medium-quality-slop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5%;
    article {
      width:47%;
      transition: transform 0.2s ease;
      img {
          border-radius: 0.5rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }
      &:hover {
        transform: scale(1.02);
      }

  }

• box-shadow set a shadow around the img tags. The args represent x-offset, y-offset, blur radius and the color of the shadow
• &:hover dictates how style is affected when hovering over an element. In this case, we transform with scaling, so the element gets slightly bigger when you hover over it.
• transition is here to define how the transformation occurs. It takes .2 seconds and we ease into it
• border-radius gives the img tag some rounded corners, giving a slightly more modern feel. The higher the value, the rounder we go.

And if your site has a dark mode, then don’t forget to add accompanying styles for that as well:

// 🕶️ Dark mode
// drunk me wanted this
html body[theme="dark"] {
  .medium-quality-slop article img {
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2); // Subtle white glow
  }
}

After some trial-and-error to get the values to match my level of intoxication, we end up with this:

But it’s still not good enough. Let’s make it even better:

High Quality Slop

Behold, the apex of my creation:

.home {
  padding-bottom: 5rem;
  .high-quality-slop {
    &:has(.card:hover) .card:not(:hover) {
      filter: blur(2px);
      opacity: 0.7;
    }
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-top: 2rem;
    .card {
      border-radius: 1rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;      
      &:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
      }
      .card-content {
        height: 100%; 
        backdrop-filter: blur(6px);
        background-color: rgba($header-background-color, 0.6);
        padding:1em;
        border-left: 4px solid #4098ff;
      }
    }
  }
}

The Result

Now, let’s dissect our work:

We Switched To Grid

Instead of haggling with flex and doing math like some sort of CSS accountant, we use display: grid with grid-template-columns: 1fr 1fr. This gives us two evenly spaced columns without needing to micromanage child widths.

It’s responsive (ish), elegant (ish), and doesn’t make me embarassed to put this in a portfolio.

Smooth Cards

Each article is now a self-contained flex column (on the inside), with:

• border-radius: 1rem to soften the boxy corners and suggest “this site is run by someone who cares”

• overflow: hidden to prevent any rebellious content from escaping

• transform: translateY(-6px) on hover to give the illusion that your content is levitating with importance

• box-shadow to add just enough depth to look designed, but not enough to get sued by Material Design

• A colored left border to add a visual anchor and a dash of “look at me, I’m sophisticated.”

Blur On Hover

We also have an aesthetic blur on hover that uses:

• filter: blur(2px); for a subtle frosted glass effect, perfect for telling readers: “I read a CSS blog once.”

• opacity: 0.7; to give the blur something to blend with

• The box-shadow we talked about earlier, so the card seems to rise from the page

Conclusion

The content is now visually grouped, interactive, and theme-aware.

The layout scales down well, adapts to content height, and maintains consistency without manual width-juggling.

And best of all? The code isn’t horrible to look at.

Next Steps

It’s not perfect. But it’s a step in the right direction. We’ve given this boring home page Style.

As next steps, we could:

1. Make sure this looks good on mobile– because let’s be honest, we didn’t test that.
2. Add a featured article, instead of just displaying the most recent ones
3. Sprinkle in some extra goodies to take up the negative space– like a tag cloud, or a pretentious quote by the author

But for now, we can go to sleep (on the couch) with a feeling of accomplishment.