gahusb/web-page-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish(insta-lab): 템플릿 동기화 (CSS | safe + cover clamp)

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-06-06 12:50:29 +09:00
parent 332525a6f0
commit cd9a73254b
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
insta-lab/app/templates/default/card.html.j2
View File

@@ -17,13 +17,13 @@
display: flex; flex-direction: column; display: flex; flex-direction: column;
background: #FFFFFF; background: #FFFFFF;
} }
.accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color }}; } .accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color | safe }}; }
.badge { .badge {
align-self: flex-start; padding: 10px 24px; border-radius: 999px; align-self: flex-start; padding: 10px 24px; border-radius: 999px;
background: {{ accent_color }}; color: #fff; background: {{ accent_color | safe }}; color: #fff;
font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
} }
.idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color }}; letter-spacing: -0.04em; } .idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color | safe }}; letter-spacing: -0.04em; }
.content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.headline { .headline {
font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A; font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A;
@@ -37,17 +37,18 @@
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8;
white-space: pre-wrap; white-space: pre-wrap;
} }
.cover .sub { -webkit-line-clamp: 5; }
.footer { .footer {
display: flex; justify-content: space-between; align-items: center; display: flex; justify-content: space-between; align-items: center;
font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px; font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px;
} }
.cta-pill { .cta-pill {
align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px; align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px;
background: {{ accent_color }}; color: #fff; font-size: 40px; font-weight: 700; background: {{ accent_color | safe }}; color: #fff; font-size: 40px; font-weight: 700;
} }
.progress { display: flex; gap: 10px; } .progress { display: flex; gap: 10px; }
.progress i { width: 14px; height: 14px; border-radius: 50%; background: #D8DCE0; display: inline-block; } .progress i { width: 14px; height: 14px; border-radius: 50%; background: #D8DCE0; display: inline-block; }
.progress i.on { background: {{ accent_color }}; } .progress i.on { background: {{ accent_color | safe }}; }
</style> </style>
</head> </head>
<body> <body>