|
.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); |
|
} */ |
|
} |
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!