My itch.io profile page (nnda.itch.io). Uncompressed.

!custom-css.css

.user_page_wrap {
  --p: #e7e9e8;  --t: #eaeaea;
  --r: #fc3a78;  --k: #eaeaea18;
  --b: #17151e;  --b2: #211e29;
  --g1: -webkit-linear-gradient(0deg, #3ae5f9, #2a8aec);
  --g2: -webkit-linear-gradient(0deg, #fc3a78, #b23ee0);
  --g1: linear-gradient(90deg, #3ae5f9, #2a8aec);
  --g2: linear-gradient(90deg, #fc3a78, #b23ee0);
  padding-bottom: 2.5em;
}

/* Copyright (c) 2024 nnda */
/* Licensed under MIT License (see LICENSE.md) */

/*
  COLOR
  BG        : #17151e
  Text      : #e7e9e8
  Link      : #eaeaea

  TEXT
  Font      : Raleway
  Size      : 96

  MY PROJECTS
  Layout    : Grid 
  B.Radius  : 0

  COLLECTIONS
  Layout    : List 
*/


.user_page > div,
.user_page > section {
  border: 1px solid #fff3;
  margin: auto;
  padding: 0;
  max-width: 1120px;
}
#profile_header,
.user_page .profile_content {
  margin-bottom: 0;
  border-bottom: 0;
}


/* Jumping cat animation */
.custom-st {
  margin: -12px 1em;
  height: 3em;
  image-rendering: pixelated;
  will-change: transform;
  animation: 2s cubic-bezier(.175, .885, .32, 1.275) infinite alternate j;
}
@keyframes j {
  15%, 5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-1em);
  }
}


/* Header banner */
#profile_header {
  border: 0;
}
#profile_header img {
  object-fit: cover;
  height: var(--h);
  width: 100%;
}


/* Scrolling background */
.profile_column {
  background: url("https://cdn.jsdelivr.net/gh/nndda/n@n/s.png");
/*   background: url("https://s2.svgbox.net/heropatterns.svg?ic=hideout&color=fff2") 0/32px; */
/*   background-size: 10%; */

  padding-bottom: 1em;
  animation: 30s linear infinite b;
}
@keyframes b {
  to {
    background-position-y: 100%;
  }
}


/* Links */
.user_links {
  padding: .9em 0 .9em 1em;
  color: var(--r);
  background: var(--b2);
  box-shadow: 0 -1.5em 3em #000e;
}
.user_page svg {
  opacity: 1 !important;
  fill:  var(--r) !important;
}
.link_group {
  display: inline-block;
  background: var(--k);
  border-radius: 7px;
  padding: .1em .8em;
  margin-bottom: .5em;
}


/* Profile picture */
.user_links {
  position: relative;
  padding-bottom: .5em;
  margin-bottom: 0 !important;
}
.user_links:after,
.user_links:before {
  position: absolute;
  top: -40px;
  content: "";
  background: url(https://cdn.jsdelivr.net/gh/nndda/n@n/i.webp) 0 0/cover;
  height: 80px;
  width: 80px;
  backdrop-filter: blur(0);
  border-radius: 4px;
  box-shadow: 0 0 9px #000e;
}
.link_group:first-child {
  margin-left: 96px;
}
.user_links:after {
  top: 100%;
  left: 0;
  background: var(--g2);
  height: 1px;
  width: 100%;
}


/* itch.io username + display name */
/* .link_group:first-child a:after {
  content: " (nnda)";
  opacity: .6
} */


/* Corner border background */
.custom-wi > div,
.game_column > div {
  border: 1.2em solid;
  border-image: url(https://cdn.jsdelivr.net/gh/nndda/n@n/b.png) 30;
}


/* Window */
.custom-w {
  position: relative;
  box-shadow:
    9px 9px 0 -3px #bbb,
    0 0 2em 0 #000e;
  margin: 9px;
  background: var(--b2);
  border: 1px solid #fff7;
  border-radius: 4px;
}
.custom-w:not( .custom-wn ) > :first-child:before {
  content: "ABOUT ME";
  position: absolute;
  transform: rotate(-90deg);
  z-index: -1;
  margin: 6em 0 0 -4.6em;
  padding: 7px 1em;
  border-radius: 4px;
  background: var(--g2);
}
.user_profile {
  padding-top: 4em;
  overflow: hidden;
}


/* Vertical & horizontal dashed lines */
.custom-h,
.custom-j {
  position: absolute;
  top: 10%;
  left: -100%;
  height: 80%;
  width: 300%;
  border: 3px dashed #fff5;
  z-index: -1;
}
.custom-h {
  top: -100%;
  left: 10%;
  height: 300%;
  width: 80%;
}


/* Window Container */
.user_profile > div > div {
  max-width: 27em;
  margin: 0 auto 15em;
}

/* Bottom gradient */
.custom-g2 {
  background: var(--g2);
  height: .5em;
}

/* Yellow Stripes */
.custom-y {
  height: 1em;
  background: 
    repeating-linear-gradient(
      45deg,
      #0000, #0000 1em,
      #ffd90e 1em, #ffd90e 2em
    );
  background-size: 200% 200%;
  margin-top: 1em;
  animation: 20s ease-out infinite y alternate;
}
@keyframes y {
  to {
    background-position: 100%;
  }
}


/* Ko-fi window */
.custom-wn {
  --g2: var(--g1);
  margin: -5em -2vw 0 0;
  float: right;
}

.custom-k,
.custom-k > *
{
  position: absolute;
  top: -1.5em;
  left: -1.5em;
  border: 1.5em solid;
  border-image: url(https://cdn.jsdelivr.net/gh/nndda/n@n/b2.png) 30;
  width: 100%;
  height: 110%;
  z-index: -1;
}
.custom-k > * {
  height: 10%;
  border: 0;
  font-size: 1.5em;
  padding: 1.5em;
  text-align: center;
  top: 80%;
}


/* Window's title bar */

/* Buttons */
.custom-wb {
  margin: 0 6px;
  height: .8em;
}
.custom-wb:last-child {
  height: 1.4em;
  vertical-align: -.2em;
}


/* Title bar */
.custom-wt {
  display: flex;
  white-space: nowrap;
  font-weight: bold;
  padding: 6px 6px 3px;
  background: var(--b);
}

.custom-wt > :first-child {
  width: 6em;
  color: #0000;

  padding: 4px 1em;
  margin-bottom: -4px;

  background: var(--b2);
  border-radius: 7px 7px 0 0;
}


/* Running title bar text */
.custom-wt > :first-child > div {
  overflow: hidden;
  text-shadow: 0 0 var(--t), 11ch 0 var(--t);
  animation: 3s linear infinite c;
}
@keyframes c {
  to {
    text-shadow: -11ch 0 var(--t), 0 0 var(--t);
  }
}


/* Window's content */
.custom-wi {
  padding: 0 1em .8em;
}
.custom-wi > div > div {
  padding: 1.5em 0 2.5em;
  margin: auto;
  max-width: 18em;
  letter-spacing: .2ch;
}
.custom-wt > :last-child {
  flex-grow: 1;
}
.custom-wn .custom-wi {
  margin-top: .1em;
  padding: 1em;
}


/* Gradient fill text */
.collections h2,
.custom-wi h3 {
  background: var(--g2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 2em;
  text-decoration: underline;
}

/* Main window's strikethrough text */
.custom-w s {
  text-decoration-color: var(--r);
}

/* Main window's social links */
.custom-n {
  padding: .5em 1em;
}
.custom-n > span {
  display: inline-block;
  margin: .4em;
}
.custom-n img {
  vertical-align: -.4em;
  margin-right: .4em;
}
.custom-w hr {
  background: var(--g2);
}


/* Labels - <img> only */
.custom-c {
  border: 1px solid;
  padding: 3px;
  margin: 0 1em;
}


/* Game items */
.game_cell {
  background: var(--b2);
  box-shadow: 0 0 8px #000e;
  border: 1px solid #fff3;
  border-radius: 6px;
}
.game_cell_data > * {
  padding: .2em 1em;
}
.game_title {
  line-height: 1.6em;
  border-bottom: 2px dashed #fff7;
}
.game_cell_data {
  margin-top: 0 !important;
  min-height: 8em;
}
.game_platform .icon {
  color: var(--r);
  margin: .5em;
}


/* Game items - specifics */
/* .game_column [data-game_id="2223248"] {
  background: #110f20;
}
.game_column [data-game_id="2223248"] .game_title > a {
  color: #f93875 !important;
}


.game_column [data-game_id="1839651"] {
  background: #341f29;
}
.game_column [data-game_id="1839651"] .game_title > a {
  color: #e4d8c7 !important;
} */


/* ================================  Game column */

/* ========================  Display: Grid */
.game_column {
  padding: 2em;
  border-top: 3px dashed;
  box-shadow: 0 0 2em 0 #000e;
}
.game_column > div {
  grid-template-columns:
    repeat( 3, 250px ) !important;
  grid-gap: 2em;
  justify-content: center;
}


/* ========================  Display: Sidebar */
/* .game_column {
  padding: 1em;
  border-left: 1px solid #eaeaea !important;
  border-right: 1px solid;
  margin-left: 0 !important;
  box-shadow: 0 -1em 3em #000e;
  background: var(--b2);
}
.game_column .game_cell {
  max-width: 240px;
  margin: auto;
}
.profile_column{
  top: 0 !important;
}
.game_column:before {
  content: "STOREFRONT";
  margin: 9em 0 0 -5.5em;
} */


/* Collections row */
.collections {
  padding-top: 1em;
}
.carousel_wrapper {
  scrollbar-color: var(--r) var(--b) !important;
  border-bottom: 2px solid var(--r);
}
.collection_description {
  white-space: normal !important;
  text-overflow: clip !important;
}
.collections .inner_column {
  max-width: 100%;
}


/* Collection - "Assets" */
[data-collection_id="2974529"] {
  --g2: var(--g1);
  --r: #3ae5f9;
}


/* Mobile view */
@media ( max-width : 900px ) {

  .user_page > * {
    border-left:  0;
    border-right: 0;
  }

  .user_page_wrap {
    --h: 26vh;
  }

  .custom-w.custom-wn {
    margin: -4.5em 3em;
  }

  .game_column .game_grid_widget {
    grid-template-columns: 250px !important;
  }

  /*.game_column > div > div {
    transform: translateX(4vw);
  }
  .game_column > div > :nth-child( odd ) {
    transform: translateX(-4vw);
  } */
}

!profile-content.html

<div>
  <div>
    <!-- Jumping cat -->
    <img src="https://cdn.jsdelivr.net/gh/nndda/nndda.github.io@main/assets/img/cat.png" loading="lazy" class="custom-st">

    <!-- Main window -->
    <div class="custom-w">
      <div class="custom-wt">
        <span>
          <div>Stuff I do</div>
        </span>
        <div class="text-right">
            <img src="https://cdn.jsdelivr.net/gh/nndda/n@n/i/window-minimize-solid.svg" class="custom-wb" height="18px" loading="lazy">
            <img src="https://cdn.jsdelivr.net/gh/nndda/n@n/i/window-maximize-regular.svg" class="custom-wb" height="18px" loading="lazy">
            <img src="https://cdn.jsdelivr.net/gh/nndda/n@n/i/xmark-solid.svg" class="custom-wb" height="24px" loading="lazy">
        </div>
      </div>
      <!-- Social links -->
      <div class="custom-n">
        <span>
            <img height="20px" src="https://cdn.jsdelivr.net/gh/nndda/n@n/b/mastodon.svg" loading="lazy">
            <a target="_blank" href="https://mastodon.art/@nnda" referrerpolicy="origin" rel="nofollow noopener">
                <span>Mastodon</span>
            </a>
        </span>
        <span>
            <img height="20px" src="https://cdn.jsdelivr.net/gh/nndda/n@n/b/instagram.svg" loading="lazy">
            <a target="_blank" href="https://www.instagram.com/nnda.dev" referrerpolicy="origin" rel="nofollow noopener">
                <span>Instagram</span>
            </a>
        </span>
        <span>
            <img height="20px" src="https://cdn.jsdelivr.net/gh/nndda/n@n/b/artstation.svg" loading="lazy">
            <a target="_blank" href="https://www.artstation.com/nnda" referrerpolicy="origin" rel="nofollow noopener">
                <span>ArtStation</span>
            </a>
        </span>
        <span>
            <img height="20px" src="https://cdn.jsdelivr.net/gh/nndda/n@n/b/codepen.svg" loading="lazy">
            <a target="_blank" href="https://codepen.io/nnda" referrerpolicy="origin" rel="nofollow noopener">
                <span>CodePen</span>
            </a>
        </span>
        <span>
            <img height="20px" src="https://cdn.jsdelivr.net/gh/nndda/n@n/b/github.svg" loading="lazy">
            <a target="_blank" href="https://github.com/nndda" referrerpolicy="origin" rel="nofollow noopener">
                <span>Github</span>
            </a>
        </span>
        <hr>
      </div>
      <div class="custom-wi">
        <div>
          <div>
            <h3>Hi there,</h3>
            Im a 
            <s style="
              color: #fff7;">
              self-proclaimed
            </s>
            digital artist/illustrator, game dev, and web dev.
          </div>
        </div>
      </div>
      <div class="custom-g2">
      </div>
      <div class="custom-j"></div>
      <div class="custom-h"></div>
    </div>

    <!-- Yellow stripes -->
    <div class="custom-y">
    </div>

    <!-- Ko-fi window -->
    <div class="custom-w custom-wn">
      <div class="custom-wt">
        <span>
          <div>Support Me</div>
        </span>
        <div class="text-right">
            <img src="https://cdn.jsdelivr.net/gh/nndda/n@n/i/window-minimize-solid.svg" class="custom-wb" height="18px" loading="lazy">
            <img src="https://cdn.jsdelivr.net/gh/nndda/n@n/i/xmark-solid.svg" class="custom-wb" height="24px" loading="lazy">
        </div>
      </div>
      <div class="custom-wi">
        <div>
            <a href="https://ko-fi.com/L3L536B9Z" target="_blank" referrerpolicy="origin" rel="nofollow noopener">
                <img style="border:0; height:36px" src="https://storage.ko-fi.com/cdn/kofi1.png?v=3" alt="Buy Me a Coffee at ko-fi.com" height="36" loading="lazy">
            </a>
        </div>
      </div>
      <div class="custom-g2">
      </div>
      <div class="custom-k">
        <div>help</div>
      </div>
    </div>
  </div>

  <!-- Discord label -->
  <img height="28px" class="custom-c" src="https://cdn.jsdelivr.net/gh/nndda/nndda@main/Discord-usr.svg" loading="lazy">
</div>

LICENSE.md

MIT License

Copyright (c) 2024 nnda

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Hi, apologies for pinging you!

I was wondering about this here, are you using it as a placeholder or have you somehow managed to import the following block into Itch.io's css block that automatically changes it ?

I was interested in it previously, and I think it might be a good addition in the near future to add it to the itchio's handbook if you may happen to be interested.

@VerzatileDev Hello, np ^^

Im just using it as a backup and have it as an open source codes. I don't know if theres such a feature to automatically do that in itch.io

@VerzatileDev Hello, np ^^

Im just using it as a backup and have it as an open source codes. I don't know if theres such a feature to automatically do that in itch.io

Thank you for the response!

It is possible to do, similarly you can host animated gifs, videos, images as backgrounds on for example the .gamecell blocks (Assets on the page or games).

But it is fairly limited as javascript is not as widely possible, though I will take more of a look into it when possible.
Thank you!

Also wanted to state, that I love your Itchio page, looks interesting!

@VerzatileDev Thanks!

Im not even aware of that, sounds interesting!

I wanted to experiment a bit more, but sadly the profile page css is limited to only 5120 characters. Even when compressed, the css above is already pushing it at ~5000 characters

@VerzatileDev Thanks!

Im not even aware of that, sounds interesting!

I wanted to experiment a bit more, but sadly the profile page css is limited to only 5120 characters. Even when compressed, the css above is already pushing it at ~5000 characters

Some part of it can be edited through HTML as well, though its limited, but for example in some instances a few areas are still accessible through it, just have to play around with it.