Crul

cross-posted from: https://lemmy.world/post/2693464

Hi, I'm focusing on generating content for a few communities that I feel can be successful and have less content than I expected:

• !cassettefuturism@lemm.ee: a genre of retrofuturism based on the 70's and 80's (more info)
• !awwnverts@lemmy.world: cute invertebrates
• !weirdwheels@lemmy.world: weird vehicles (with wheels)
• !comicstrips@lemmy.world: self-explanatory

EDIT: I did not create any of those communities

I would encourage anyone to participate if you like those topics.

Do you know any other niche-but-not-too-niche communities in which we could focus efforts?
Please, don't post very long lists, I'm already subscribed to almost 300 communities and the idea is to focus on a few ones.

Thanks!

EDIT: Added descriptions for each community.

Hi, I'm focusing on generating content for a few communities that I feel can be successful and have less content than I expected:

• !cassettefuturism@lemm.ee: a genre of retrofuturism based on the 70's and 80's (more info)
• !awwnverts@lemmy.world: cute invertebrates
• !weirdwheels@lemmy.world: weird vehicles (with wheels)
• !comicstrips@lemmy.world: self-explanatory

EDIT: I did not create any of those communities

I would encourage anyone to participate if you like those topics.

Do you know any other niche-but-not-too-niche communities in which we could focus efforts?
Please, don't post very long lists, I'm already subscribed to almost 300 communities and the idea is to focus on a few ones.

Thanks!

EDIT: Added descriptions for each community.

SOLVED: by @g6d3np81@kbin.social using columns property

TL;DR: I want to achieve this behavior for the menu layout, but all I can get is this; note the different menu options order.

Two days ago I asked for help for implementing the current behavior without hardcoding the menu height for each resolution step, and there were two suggestions to try display: grid. It looked promising and after reading some documentation I was able to get something very close to what I'm looking for.

The only difference being that I want the chapters to be sorted vertically (as in the current version), but what I got sorts the chapters horizontally.

Here it is (what I think is) the relevant code:

#menu ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

Sorry, I don't have the display: grid version online.

I did a quick search for display grid multiple columns vertical sort and saw this StackOverflow post: CSS Grid vertical columns with infinite rows which, if I understand correctly, says it's not possible. But I'm pretty sure I'm not understanding it correctly.

Any help will be welcome, thanks!

EDIT: I also tried grid-audto-flow: column (as suggested here) but it just renders a single row. Probably because I'm missing something...

#menu ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

EDIT-2: I was told that for grid-audto-flow: column to work I need to specify the numbers of columns. If I understand correctly, then that doesn't really help. The original issue is that I need to edit the CSS file every time a new chapter is added. Which would be the same if I have to hardcode the number of rows.

I mean, it's a bit cleaner to hardcode the number of rows than the height in pixels, but I was looking for a solution that doesn't require magic numbers in the CSS.

Hi, I'm an old webdev who is rusty in CSS; I learn about calc() recently and never really learnt display: flex properly.

I made some webs with a responsive menu layout (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It's not a big deal, but I would like to know if there is a proper way to do this.

Some alternatives I've thought about:

• The new round(), but it's too new and not supported by most browsers.
• JavaScript

... but I feel like there must be a clean CSS-only way to achieve this.

Thanks!

Relevant CSS code (link to full stylesheet in case I missed something).

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 624px; /* =27x23+3 | 23 = 91/4 */
  margin: 0;
  padding: 16px 16px 4px 16px;
  vertical-align: top;
}
@media screen and (max-width: 1000px) {
  ul {
    height: 840px; /* =27x31+3 | 31 = 91/3 */
  }
}
@media screen and (max-width: 582px) {
  ul {
    height: 1245px; /* =27x46+3 | 46 = 91/2 */
  }
}
@media screen and (max-width: 400px) {
  ul {
    height: auto;
  }
}
  ul li {
    list-style-type: none;
    margin: 2px 16px 2px 4px;
    font-size: 120%;
  }
  ul li a {
    display: inline-block;
    background-color: #3fa79e;
    color: #d2e7e2;
    text-decoration: none;
    padding: 2px 8px;
    border: solid 1px #d2e7e2;
  }
    ul li a:first-child {
      width: 106px;
      margin-right: -3px;
    }
    ul li a:hover {
      background-color: #144c48;
      color: #fff;
      border: solid 1px #fff;
    }

claude.ai's summary:

Facebook content moderators in Germany recently held a works council election and elected a majority of members affiliated with the German labor union ver.di, including a previously targeted employee. This is a major victory against Facebook's union-busting and sends a message that moderators can't be punished for speaking out. It provides a mandate for the new council to improve working conditions. The summits and manifesto organized by advocacy groups have helped remove the veil of silence around tech workers' rights. This victory shows Big Tech's unchecked power is diminishing as workers gain more control.

Exposición memoria del futuro: los teatros antiguos griegos y romanos.

Memory of the future exhibition: ancient Greek and Roman theaters.

Source: Elektra Archivo Digital Artes Escénicas de Andalucía | Gestión de Campo

Via Europeana: Exposición memoria del futuro: los teatros antiguos griegos y romanos..

The source doesn't have a date, but I digged a bit more and it seems this was at Expo'92 (source)