backdrop-ops / backdropcms.org

Issue tracker for the BackdropCMS.org website
https://backdropcms.org
25 stars 21 forks source link

Showcase cards too indistinct #760

Open docwilmot opened 3 years ago

docwilmot commented 3 years ago

The cards just blur into each other and the background to my eyes.

screenshot-backdropcms-org-showcase-1612544303595

Added a black border and black shadow for dramatic effect; they seem more like cards then: screenshot-backdropcms-org-showcase-1612544232125

oadaeh commented 3 years ago

How does it look if you just add the shadow, leaving out the border? Are they still indistinct?

docwilmot commented 3 years ago

Also better. Also think the part of the card with the description could be differentiated from the screenshot as well.

indigoxela commented 2 years ago

Friendly reminder: that page is broken for several months now:

https://backdropcms.org/showcase

A suggestion for getting the two-column style back:

.view-showcase .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 3rem;
}

Not really pretty, but at least less ugly. :wink:

And some box-shadow for individual items:

.view-showcase .views-row {
  background: #fff;
  box-shadow: 0 0 12px #0003;
}
olafgrabienski commented 2 years ago

Friendly reminder: that page is broken for several months now

Oh yes, the Showcases view is really a shame. Who can implement suggestions?

findlabnet commented 2 years ago

Why NOT use Backdrop CMS? - answered that page. :-(

indigoxela commented 2 years ago

I can't implement it, but suggest. :wink: Another one, more masonry-style, as not all items are forced to same height:

.view-showcase .views-row {
  background: #ffffff;
  box-shadow: 0 0 15px #00000033;
  margin-bottom: 4rem;
  break-inside: avoid;
}
@media (min-width: 48em) {
  .view-showcase .view-content {
    column-count: 2;
    column-gap: 4rem;
  }
}

Changes to the view aren't necessary, but please adapt the showcase_preview image style to not be smaller than the views-row, because that makes the images so blurry. Currently it's 512x512, but even if we use columns like suggested, they still should be at least 546px wide.

column-style

ghost commented 2 years ago

The Showcase page layout/styling has already been fixed: https://github.com/backdrop-contrib/borg/issues/28 We're just waiting on a new release of the Borg theme to install on B.org (ping @jenlampton).

Here's what the page will look like once the theme's updated to the latest version:

Screen Shot 2022-01-06 at 12 07 58-fullpage

jenlampton commented 2 years ago

I've applied the patch, committed the fix, and pushed up to backdropcms.org: https://backdropcms.org/showcase

docwilmot commented 2 years ago

Was this meant to have fixed the indistinctness? I dont see significant difference?

docwilmot commented 2 years ago

Looking at the commit, the answer is no; it fixed the broken columns but didnt actually deal with this issue's complaint.

ghost commented 2 years ago

I was wondering the same thing. This issue got sidetracked and should really be about styling the Showcase items to stand out better.

jenlampton commented 2 years ago

Ah, sorry folks. I thought that fix was what was wanted here. Jumped the gun on closing the issue -- thanks for catching it @docwilmot and @BWPanda.

indigoxela commented 2 years ago

Another remaining task: update the image style to match the column width - to prevent the blurry look. Do we have an issue for that already?

ghost commented 2 years ago

@indigoxela When I look at the page, the images used are 512px wide, and the columns they're now in are 548px wide... Is that really enough of a difference to worry about?

indigoxela commented 2 years ago

Is that really enough of a difference to worry about?

It may depend on the person looking at it. :wink: For me this looks like "blurry bullshit", but maybe I'm a little picky re visual glitches.

olafgrabienski commented 2 years ago

The pictures look a bit blurry to me at well. (And being so small, they look very blurry on displays of higher pixel density.)