Artist Directory Framework

Link to article: Artist Directory Framework.

Module Styles

• @import url('https://api.fonts.coollabs.io/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');
  
  #u-filter-structure {
      --_c: 61 133 84;
  
      container-name: structure;
      container-type: inline-size;
      margin-block: 1.5rem;
  }
  
  #u-filter-structure > :not(div) { display: none; }
  
  /*---------------------------------*/
  
  #u-filter-nav {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      padding-right: 5rem;
      font-family: 'Victor Mono', monospace;
      font-weight: bold;
  }
  #u-filter-nav > br { display: none; }
  
  #u-filter-nav a {
      display: grid;
      place-content: center;
      box-sizing: border-box;
      text-decoration: none;
      border-radius: .75lh;
      padding: .175em .675em;
      color: rgb(var(--_c));
      background-color: rgb(var(--_c)/.1);
       flex-grow: 1;
      text-align: center;
  }
  #u-filter-nav a:is(:hover,:focus) {
      color: white;
      background-color: rgb(var(--_c));
  }
  
  #u-filter-nav a[href="##"] {
      --_c: 100 100 100;
      position: absolute;
      top: 0; right: 0;
      height: 100%; width: 4.25rem;
      font-weight: normal;
  }
  
  @container structure (max-width: 33.75rem) {
      #u-filter-nav { padding: 0; }
      #u-filter-nav a[href="##"] { position: static; width: unset; flex-basis: 100%; }
  }
  
  /*---------------------------------*/
  
  #u-directory {
      display: grid;
  }
  
  .artist-row {
      display: grid;
      grid-template-areas:
          "account link"
          "info info";
      grid-template-columns: 10.75rem minmax(0,1fr);
      box-shadow: inset 0 -0.05rem 0 #cccc;
      padding-block: .675rem;
      gap: .325rem;
  }
  
  :where(.artist-row) > .account {
      text-align: start;
      grid-area: account;
  }
  
  :where(.artist-row) > .link {
      grid-area: link;
      text-align: center;
  }
  
  :where(.artist-row) > .info {
      grid-area: info;
      display: flex;
      gap: .5rem;
  }
  
  /*---------------------------------*/
  
  :where(.artist-row) > .info > .artist-description {
      flex-grow: 1;
      font-size: .9125em;
      min-width: 50%;
      align-self: self-start;
  }
  .artist-description p { margin-block: .625em; }
  .artist-description > p:first-child { margin-block-start: .375em; }
  .artist-description > p:last-child { margin-block-end: .375em; }
  
  /*---------------------------------*/
  
  .artist-row.heading {
      grid-template-areas: "account link";
      font-weight: bold;
      display: grid!important;
  }
  .artist-row.heading > div {
      font-size: 1em;
      text-align: center;
  }
  .artist-row.heading > div > p { display: contents; }
  
  /*---------------------------------*/
  
  .info .tag {
      display: flex;
      flex-wrap: wrap;
      gap: .75em;
      justify-content: end;
      font-family: 'Victor Mono', monospace;
      font-size: .725em;
      font-weight: bold;
      align-self: end;
  }
  
  .tag > :is(br,a) { display: none; }
  .tag > a {
      text-decoration: none;
      border-radius: .75lh;
      padding: .175em .675em;
      color: rgb(var(--_c));
      background-color: rgb(var(--_c)/.1);
      min-width: max-content;
  }
  .tag > a:is(:hover,:focus) {
      color: white;
      background-color: rgb(var(--_c));
  }
  
  
  /*---- LOGIC ----*/
  
  .digital-2d a[href="#u-digital-2d"],
  .digital-3d a[href="#u-digital-3d"],
  .animation a[href="#u-animation"],
  .dry-media a[href="#u-dry-media"],
  .traditional-paint a[href="#u-traditional-paint"],
  .photoshop a[href="#u-photoshop"],
  .pixel-art a[href="#u-pixel-art"],
  .vector-art a[href="#u-vector-art"],
  .alt-media a[href="#u-alt-media"] {
      display: block;
  }
  
  #u-digital-2d:target ~ #u-filter-nav a[href="#u-digital-2d"],
  #u-digital-3d:target ~ #u-filter-nav a[href="#u-digital-3d"],
  #u-animation:target ~ #u-filter-nav a[href="#u-animation"],
  #u-dry-media:target ~ #u-filter-nav a[href="#u-dry-media"],
  #u-traditional-paint:target ~ #u-filter-nav a[href="#u-traditional-paint"],
  #u-photoshop:target ~ #u-filter-nav a[href="#u-photoshop"],
  #u-pixel-art:target ~ #u-filter-nav a[href="#u-pixel-art"],
  #u-vector-art:target ~ #u-filter-nav a[href="#u-vector-art"],
  #u-alt-media:target ~ #u-filter-nav a[href="#u-alt-media"] {
      color: white;
      background-color: rgb(var(--_c));
      pointer-events: none;
  }
  
  #u-digital-2d:target ~ #u-directory > div:not(.digital-2d),
  #u-digital-3d:target ~ #u-directory > div:not(.digital-3d),
  #u-animation:target ~ #u-directory > div:not(.animation),
  #u-dry-media:target ~ #u-directory > div:not(.dry-media),
  #u-traditional-paint:target ~ #u-directory > div:not(.traditional-paint),
  #u-photoshop:target ~ #u-directory > div:not(.photoshop),
  #u-pixel-art:target ~ #u-directory > div:not(.pixel-art),
  #u-vector-art:target ~ #u-directory > div:not(.vector-art),
  #u-alt-media:target ~ #u-directory > div:not(.alt-media) {
     display: none;
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• (none)

Page Source

[[module css]]
@import url('https://api.fonts.coollabs.io/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');

#u-filter-structure {
    --_c: 61 133 84;

    container-name: structure;
    container-type: inline-size;
    margin-block: 1.5rem;
}

#u-filter-structure > :not(div) { display: none; }

/*---------------------------------*/

#u-filter-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-right: 5rem;
    font-family: 'Victor Mono', monospace;
    font-weight: bold;
}
#u-filter-nav > br { display: none; }

#u-filter-nav a {
    display: grid;
    place-content: center;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: .75lh;
    padding: .175em .675em;
    color: rgb(var(--_c));
    background-color: rgb(var(--_c)/.1);
     flex-grow: 1;
    text-align: center;
}
#u-filter-nav a:is(:hover,:focus) {
    color: white;
    background-color: rgb(var(--_c));
}

#u-filter-nav a[href="##"] {
    --_c: 100 100 100;
    position: absolute;
    top: 0; right: 0;
    height: 100%; width: 4.25rem;
    font-weight: normal;
}

@container structure (max-width: 33.75rem) {
    #u-filter-nav { padding: 0; }
    #u-filter-nav a[href="##"] { position: static; width: unset; flex-basis: 100%; }
}

/*---------------------------------*/

#u-directory {
    display: grid;
}

.artist-row {
    display: grid;
    grid-template-areas:
        "account link"
        "info info";
    grid-template-columns: 10.75rem minmax(0,1fr);
    box-shadow: inset 0 -0.05rem 0 #cccc;
    padding-block: .675rem;
    gap: .325rem;
}

:where(.artist-row) > .account {
    text-align: start;
    grid-area: account;
}

:where(.artist-row) > .link {
    grid-area: link;
    text-align: center;
}

:where(.artist-row) > .info {
    grid-area: info;
    display: flex;
    gap: .5rem;
}

/*---------------------------------*/

:where(.artist-row) > .info > .artist-description {
    flex-grow: 1;
    font-size: .9125em;
    min-width: 50%;
    align-self: self-start;
}
.artist-description p { margin-block: .625em; }
.artist-description > p:first-child { margin-block-start: .375em; }
.artist-description > p:last-child { margin-block-end: .375em; }

/*---------------------------------*/

.artist-row.heading {
    grid-template-areas: "account link";
    font-weight: bold;
    display: grid!important;
}
.artist-row.heading > div {
    font-size: 1em;
    text-align: center;
}
.artist-row.heading > div > p { display: contents; }

/*---------------------------------*/

.info .tag {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    justify-content: end;
    font-family: 'Victor Mono', monospace;
    font-size: .725em;
    font-weight: bold;
    align-self: end;
}

.tag > :is(br,a) { display: none; }
.tag > a {
    text-decoration: none;
    border-radius: .75lh;
    padding: .175em .675em;
    color: rgb(var(--_c));
    background-color: rgb(var(--_c)/.1);
    min-width: max-content;
}
.tag > a:is(:hover,:focus) {
    color: white;
    background-color: rgb(var(--_c));
}


/*---- LOGIC ----*/

.digital-2d a[href="#u-digital-2d"],
.digital-3d a[href="#u-digital-3d"],
.animation a[href="#u-animation"],
.dry-media a[href="#u-dry-media"],
.traditional-paint a[href="#u-traditional-paint"],
.photoshop a[href="#u-photoshop"],
.pixel-art a[href="#u-pixel-art"],
.vector-art a[href="#u-vector-art"],
.alt-media a[href="#u-alt-media"] {
    display: block;
}

#u-digital-2d:target ~ #u-filter-nav a[href="#u-digital-2d"],
#u-digital-3d:target ~ #u-filter-nav a[href="#u-digital-3d"],
#u-animation:target ~ #u-filter-nav a[href="#u-animation"],
#u-dry-media:target ~ #u-filter-nav a[href="#u-dry-media"],
#u-traditional-paint:target ~ #u-filter-nav a[href="#u-traditional-paint"],
#u-photoshop:target ~ #u-filter-nav a[href="#u-photoshop"],
#u-pixel-art:target ~ #u-filter-nav a[href="#u-pixel-art"],
#u-vector-art:target ~ #u-filter-nav a[href="#u-vector-art"],
#u-alt-media:target ~ #u-filter-nav a[href="#u-alt-media"] {
    color: white;
    background-color: rgb(var(--_c));
    pointer-events: none;
}

#u-digital-2d:target ~ #u-directory > div:not(.digital-2d),
#u-digital-3d:target ~ #u-directory > div:not(.digital-3d),
#u-animation:target ~ #u-directory > div:not(.animation),
#u-dry-media:target ~ #u-directory > div:not(.dry-media),
#u-traditional-paint:target ~ #u-directory > div:not(.traditional-paint),
#u-photoshop:target ~ #u-directory > div:not(.photoshop),
#u-pixel-art:target ~ #u-directory > div:not(.pixel-art),
#u-vector-art:target ~ #u-directory > div:not(.vector-art),
#u-alt-media:target ~ #u-directory > div:not(.alt-media) {
   display: none;
}
[[/module]]

[[div_ id="filter-structure"]]
[[span id="digital-2d"]][[/span]]
[[span id="digital-3d"]][[/span]]
[[span id="animation"]][[/span]]
[[span id="dry-media"]][[/span]]
[[span id="traditional-paint"]][[/span]]
[[span id="photoshop"]][[/span]]
[[span id="pixel-art"]][[/span]]
[[span id="vector-art"]][[/span]]
[[span id="alt-media"]][[/span]]

[[div_ id="filter-nav"]]
[#u-digital-2d Digital 2D]
[#u-digital-3d Digital 3D]
[#u-animation Animation]
[#u-dry-media Dry Media]
[#u-traditional-paint Traditional Paint]
[#u-photoshop Photoshop]
[#u-pixel-art Pixel Art]
[#u-vector-art Vector Art]
[#u-alt-media Alternative Media]
[[a href="##"]]clear filter[[/a]]
[[/div]]