zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.2.0 피그마 기반 앱 셸 1차 리디자인

Browse Source
This commit is contained in:
zenn
2026-03-30 14:37:30 +09:00
parent 2bee78ba5e
commit b15398761b
11 changed files with 819 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/views/MyTierListsView.vue
View File

@@ -101,18 +101,19 @@ async function removeList(t) {
<style scoped>
.wrap {
padding: 10px 2px;
padding: 4px 2px;
}
.title {
margin: 0 0 10px;
font-size: 26px;
letter-spacing: -0.02em;
margin: 0 0 18px;
font-size: 30px;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.96);
}
.card {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
border: 0;
background: transparent;
border-radius: 0;
padding: 0;
}
.link {
padding: 8px 10px;
@@ -128,15 +129,15 @@ async function removeList(t) {
}
.list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.row {
display: grid;
gap: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(0, 0, 0, 0.16);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
}
@@ -155,7 +156,7 @@ async function removeList(t) {
.row__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
background: rgba(255, 255, 255, 0.03);
background: #555;
}
.row__thumb {
width: 100%;
@@ -166,8 +167,7 @@ async function removeList(t) {
.row__thumbPlaceholder {
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
background: #555;
}
.row__title {
font-weight: 900;
@@ -214,6 +214,11 @@ async function removeList(t) {
margin: 0 14px 14px;
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}