Wickedness/CompanyIntroduction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish 2026 election visual showcase

Browse Source
This commit is contained in:
y2keui
2026-06-24 12:38:27 +09:00
parent de1bda4782
commit 6926d4ff23
4 changed files with 9 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/media/local-election-2026-premium.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

20
index.html
View File

@@ -340,26 +340,8 @@
<div class="election-spotlight__media reveal" data-delay="1" aria-label="2026 지방선거 지역민방 그래픽 화면">
<figure class="election-showcase">
<div class="election-showcase__bar" aria-hidden="true">
<span></span><span></span><span></span>
<strong>Tornado3_2026Election</strong>
</div>
<img src="assets/media/local-election-2026-suite.webp" alt="2026 지방선거 지역민방 그래픽 쇼케이스">
<img src="assets/media/local-election-2026-premium.webp" alt="2026 지방선거 지역민방 방송 그래픽 운영 쇼케이스">
</figure>
<div class="election-preview-grid" aria-label="2026 지방선거 그래픽 구성 예시">
<figure>
<img src="assets/media/local-election-2026-title.webp" alt="2026 지방선거 지역민방 타이틀 그래픽">
<figcaption>Title</figcaption>
</figure>
<figure>
<img src="assets/media/local-election-2026-race.webp" alt="2026 지방선거 광역단체장 1위 후보 그래픽">
<figcaption>Candidate</figcaption>
</figure>
<figure>
<img src="assets/media/local-election-2026-landscape.webp" alt="2026 지방선거 기초단체장 판세 그래픽">
<figcaption>Landscape</figcaption>
</figure>
</div>
</div>
</div>
<div class="shell station-strip reveal" data-delay="2" aria-label="지역민방 적용 방송사">

2
script.js
View File

@@ -15,7 +15,7 @@ const caseData = {
"채널별 스케줄 큐, 반복 컷, 다음/대기/송출 상태를 분리한 운영 UI 개발"
],
images: [
{ src: "assets/media/local-election-2026-suite.webp", alt: "2026 지방선거 지역민방 그래픽 쇼케이스" },
{ src: "assets/media/local-election-2026-premium.webp", alt: "2026 지방선거 지역민방 방송 그래픽 운영 쇼케이스" },
{ src: "assets/media/local-election-2026-race.webp", alt: "2026 지방선거 광역단체장 1위 후보 그래픽" },
{ src: "assets/media/local-election-2026-landscape.webp", alt: "2026 지방선거 기초단체장 판세 그래픽" }
]

97
styles.css
View File

@@ -909,8 +909,8 @@ body.is-ready .loader {
.election-spotlight__grid {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
gap: 58px;
grid-template-columns: minmax(0, 0.72fr) minmax(580px, 1.12fr);
gap: 48px;
align-items: center;
}
@@ -966,101 +966,22 @@ body.is-ready .loader {
.election-showcase {
position: relative;
margin: 0;
border: 1px solid var(--line);
border: 1px solid rgba(241, 238, 230, 0.14);
border-radius: 6px;
background: #050505;
overflow: hidden;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}
.election-showcase::before {
content: "";
position: absolute;
inset: 14px;
z-index: 2;
pointer-events: none;
border: 1px solid rgba(200, 255, 73, 0.18);
box-shadow:
0 32px 100px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(200, 255, 73, 0.04);
}
.election-showcase img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.election-showcase__bar {
position: absolute;
top: 14px;
left: 14px;
right: 14px;
z-index: 3;
display: flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(241, 238, 230, 0.18);
border-radius: 4px;
background: rgba(7, 7, 6, 0.7);
backdrop-filter: blur(10px);
}
.election-showcase__bar span {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--muted-dark);
}
.election-showcase__bar span:first-child {
background: var(--hot-2);
}
.election-showcase__bar span:nth-child(2) {
background: var(--signal);
}
.election-showcase__bar strong {
margin-left: auto;
color: var(--paper-2);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 600;
}
.election-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.election-preview-grid figure {
position: relative;
margin: 0;
border: 1px solid var(--line);
border-radius: 5px;
background: #050505;
overflow: hidden;
}
.election-preview-grid img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
opacity: 0.76;
}
.election-preview-grid figcaption {
position: absolute;
left: 10px;
bottom: 8px;
color: var(--paper);
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
}
.station-strip {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -1881,10 +1802,6 @@ html.js .reveal[data-delay="2"] {
grid-template-columns: repeat(2, 1fr);
}
.election-preview-grid {
grid-template-columns: 1fr;
}
.value-strip strong,
.system-list div,
.system-list div:nth-child(2n),