shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change json format & add diablo4
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-22 21:21:02 +02:00
parent e65c74ea0a
commit 34523e78b1
33 changed files with 5849 additions and 3431 deletions
Download patch file Download diff file Expand all files Collapse all files

188
website/src/styles/_diablo4.scss Normal file
View file

@ -0,0 +1,188 @@
.game-card-placeholder {
display: grid;
width: 100%;
height: 100%;
min-height: inherit;
place-items: center;
background:
radial-gradient(circle at 78% 22%, rgba(246, 196, 83, 0.18), transparent 28%),
radial-gradient(circle at 22% 70%, rgba(139, 92, 246, 0.28), transparent 38%),
linear-gradient(135deg, rgba(16, 20, 38, 0.92), rgba(53, 18, 45, 0.76));
color: var(--color-text-primary);
font-size: clamp(1.8rem, 5vw, 3.3rem);
font-weight: 900;
letter-spacing: 0;
}
.diablo4-home-mark {
display: grid;
width: 100%;
height: 120px;
margin: 0;
place-items: center;
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
background: rgba(5, 7, 17, 0.28);
color: var(--color-text-primary);
}
.mhwilds-home-card .diablo4-home-mark {
margin: 0;
}
.diablo4-home-mark::before {
content: "";
display: block;
width: 72px;
height: 72px;
background: currentColor;
filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.44));
mask: url("/static/img/diablo4/cube.svg") center / contain no-repeat;
}
.diablo4-affix-grid {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.diablo4-affix-card {
min-height: 158px;
}
.diablo4-affix-card-body {
display: flex;
min-height: 100%;
flex-direction: column;
gap: 10px;
padding: var(--space-4);
}
.diablo4-affix-card h2 {
margin: 0;
font-size: 1rem;
line-height: 1.25;
}
.diablo4-category-list {
display: flex;
flex-wrap: nowrap;
gap: 4px;
margin-top: auto;
}
.diablo4-category-list > span {
display: inline-flex;
min-height: 23px;
align-items: center;
gap: 4px;
border: 1px solid rgba(246, 196, 83, 0.22);
border-radius: var(--radius-pill);
background: rgba(246, 196, 83, 0.08);
color: var(--color-text-secondary);
font-size: 0.68rem;
font-weight: 800;
padding: 2px 6px;
text-transform: capitalize;
white-space: nowrap;
}
.diablo4-filter-chip {
grid-template-columns: 18px 22px 1fr;
}
.diablo4-filter-chip span {
text-transform: capitalize;
}
.diablo4-category-icon {
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background: currentColor;
mask: var(--diablo4-category-icon) center / contain no-repeat;
}
.diablo4-filter-chip .diablo4-category-icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.diablo4-category-list .diablo4-category-icon {
width: 12px;
height: 12px;
flex-basis: 12px;
color: var(--color-text-primary);
}
.tone-purple .diablo4-category-icon {
color: #c4b5fd;
}
.diablo4-category-list .tone-purple {
border-color: rgba(168, 85, 247, 0.3);
background: rgba(168, 85, 247, 0.1);
}
.tone-gold .diablo4-category-icon {
color: #f6c453;
}
.diablo4-category-list .tone-gold {
border-color: rgba(246, 196, 83, 0.34);
background: rgba(246, 196, 83, 0.1);
}
.tone-blue .diablo4-category-icon {
color: #93c5fd;
}
.diablo4-category-list .tone-blue {
border-color: rgba(96, 165, 250, 0.34);
background: rgba(96, 165, 250, 0.1);
}
.tone-yellow .diablo4-category-icon {
color: #fde047;
}
.diablo4-category-list .tone-yellow {
border-color: rgba(250, 204, 21, 0.34);
background: rgba(250, 204, 21, 0.1);
}
.tone-red .diablo4-category-icon {
color: #f87171;
}
.diablo4-category-list .tone-red {
border-color: rgba(248, 113, 113, 0.34);
background: rgba(248, 113, 113, 0.1);
}
.tone-violet .diablo4-category-icon {
color: #a78bfa;
}
.diablo4-category-list .tone-violet {
border-color: rgba(139, 92, 246, 0.34);
background: rgba(139, 92, 246, 0.1);
}
.tone-green .diablo4-category-icon {
color: #86efac;
}
.diablo4-category-list .tone-green {
border-color: rgba(74, 222, 128, 0.34);
background: rgba(74, 222, 128, 0.1);
}
.diablo4-category-list .tone-purple .diablo4-category-icon,
.diablo4-category-list .tone-gold .diablo4-category-icon,
.diablo4-category-list .tone-blue .diablo4-category-icon,
.diablo4-category-list .tone-yellow .diablo4-category-icon,
.diablo4-category-list .tone-red .diablo4-category-icon,
.diablo4-category-list .tone-violet .diablo4-category-icon,
.diablo4-category-list .tone-green .diablo4-category-icon {
color: var(--color-text-primary);
}

2
website/src/styles/_games.scss
View file

@ -1,4 +1,6 @@
.game-card .card-cover {
display: block;
height: 170px;
min-height: 170px;
}

2
website/src/styles/_mhwilds.scss
View file

@ -2,7 +2,7 @@
.mhwilds-home-grid {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 380px));
grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-6);

1
website/src/styles/main.scss
View file

@ -9,4 +9,5 @@
@use "toolboxes";
@use "overlays";
@use "mhwilds";
@use "diablo4";
@use "responsive";