Refine 2026 election showcase layout
This commit is contained in:
28
index.html
28
index.html
@@ -339,15 +339,27 @@
|
||||
</div>
|
||||
|
||||
<div class="election-spotlight__media reveal" data-delay="1" aria-label="2026 지방선거 지역민방 그래픽 화면">
|
||||
<figure class="election-frame election-frame--main">
|
||||
<img src="assets/media/local-election-2026-race.webp" alt="2026 지방선거 광역단체장 1위 후보 그래픽">
|
||||
</figure>
|
||||
<figure class="election-frame">
|
||||
<img src="assets/media/local-election-2026-title.webp" alt="2026 지방선거 지역민방 타이틀 그래픽">
|
||||
</figure>
|
||||
<figure class="election-frame">
|
||||
<img src="assets/media/local-election-2026-landscape.webp" alt="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 지방선거 지역민방 그래픽 쇼케이스">
|
||||
</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="지역민방 적용 방송사">
|
||||
|
||||
99
styles.css
99
styles.css
@@ -960,45 +960,105 @@ body.is-ready .loader {
|
||||
|
||||
.election-spotlight__media {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.election-frame {
|
||||
.election-showcase {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #050505;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.election-frame::before {
|
||||
.election-showcase::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
z-index: 1;
|
||||
inset: 14px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
border: 1px solid rgba(200, 255, 73, 0.18);
|
||||
}
|
||||
|
||||
.election-frame img {
|
||||
.election-showcase img {
|
||||
width: 100%;
|
||||
aspect-ratio: 7.7 / 1;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.election-frame--main {
|
||||
transform: translateX(-18px);
|
||||
.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-frame:nth-child(2) {
|
||||
width: 86%;
|
||||
justify-self: end;
|
||||
.election-showcase__bar span {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: var(--muted-dark);
|
||||
}
|
||||
|
||||
.election-frame:nth-child(3) {
|
||||
width: 92%;
|
||||
.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 {
|
||||
@@ -1708,10 +1768,6 @@ html.js .reveal[data-delay="2"] {
|
||||
max-width: 880px;
|
||||
}
|
||||
|
||||
.election-frame--main {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.hero__console {
|
||||
max-width: 560px;
|
||||
}
|
||||
@@ -1825,9 +1881,8 @@ html.js .reveal[data-delay="2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.election-frame:nth-child(2),
|
||||
.election-frame:nth-child(3) {
|
||||
width: 100%;
|
||||
.election-preview-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.value-strip strong,
|
||||
|
||||
Reference in New Issue
Block a user