Pitch – CSS Components and Tweaks for Your itch.io Pages

Hi! thank you for the kind comment, and no problem! ^^

The links decorations requires custom-link-itch or custom-link-ext class to be added to the <a> HTML element manually.

Since the CSS doesn’t have the way to see which links point to profile page or external page yet. I should’ve word it better on the page T‿T”

Hi! and thank you! <3

Yeah, I’ve been thinking about making ‘Tabs’ component, but I realized its just Toggle with different skin -‿-”

You can override/style the component’s CSS to achieve the tabbed-view appearance.

.custom-toggles {
  /*  Spacing  */
  padding: 0 .5em;
  margin-bottom: .5lh;

  /*  Gap between the toggle button/tab  */
  gap: .3em;

  /*  Reset default border styling  */
  border-radius: 0;
  border: none;

  border-bottom: 1px solid var(--l);
}

.custom-toggle {
  margin: 0;

  border: 1px solid var(--br);
  border-bottom: none;

  /*  Round top-right and left corner for the tab style  */
  border-radius: 9px 9px 0 0;
}

The CSS above will style Toggle to:

Just remember to put that CSS after the copied CSS from the Pitch app (ゝᴗ•)b

Hi, thank you for the comment!

Can you specify which components/tweaks and to which page (project page, profile page) are you trying to add? and the way of how do you add/copy them?

Thank you for the kind comment and the consideration! And sure, feel free to ask anything! We’re open to any inputs and inquiries.

Thank you for the comments!

For the main projects section, I used Grid layout, and for the collections, I used List layout in the page’s theme editor.

As for the two-column layout of the collections, that was done through this custom CSS:

@media (min-width: 780px) {
  /* Split collections row into two-column layout on desktop */
  .collections {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2em 0 !important;
  }
  .collections .inner_column {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Fade out gradient */
  .collection_row {
    position: relative;
    overflow: hidden;
    margin: 0 0.8em;
  }
  .collection_row::before {
    content: "";
    position: absolute;
    bottom: 0;
    box-shadow: inset -13em 0 9em -2em #0f1116; /* Match the background color */
    pointer-events: none;
    width: 100%;
    height: 76%;
    z-index: 2;
  }
  .collection_row:first-child {
    padding-left: 1.2em;
  }
  .collection_row:last-child {
    padding-right: 1.2em;
  }
}

Thank you for the comments!

I’ve been a little hesitant on adding hover effects or animation-related stuff. Since I’m aiming more on CSS stuff for the page’s content.

But I do plan on adding more decorations, including animation-related tweaks.

And if or when there’s the components/tweaks like you’ve described, it’ll probably be under the ‘Decorations’ or ‘Tweaks’ section/category :)

Hi, the buttons are actually just radio-type <input> elements. I don’t think you can insert it in project pages directly, since input/form elements will be sanitized.

The project is open source. Here’s the snippet of the codes that makes the buttons if you’re interested:
Script: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/scripts/themes.ts#L61C1-L74C7
Styling: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/styles/_input.scss#L107C1-L140C2

thats not a part of the css components actually 😅 but heres the html & css source code for those https://gist.github.com/nndda/63ff54c575dbb9e9f6158dc8a446c0db