Skip to content

Commit ac1fa11

Browse files
devbatterydevbattery
committed
fix: 게시글 상세 페이지 UI 수정
1 parent 13d6ef2 commit ac1fa11

2 files changed

Lines changed: 140 additions & 90 deletions

File tree

‎_layouts/single.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,28 +39,30 @@ <h1 id="page-title" class="page__title" itemprop="headline">
3939
</header>
4040
{% endunless %}
4141

42-
<section class="page__content {% if page.toc %}page__content--with-toc{% endif %}" itemprop="text">
42+
<div class="page__body {% if page.toc %}page__body--with-toc{% endif %}">
43+
<section class="page__content" itemprop="text">
44+
{{ content }}
45+
{% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
46+
</section>
47+
4348
{% if page.toc %}
44-
<aside class="sidebar__right {% if page.toc_sticky %}sticky{% endif %}">
49+
<aside class="page__toc {% if page.toc_sticky %}sticky{% endif %}">
4550
<nav class="toc">
4651
<header><h4 class="nav__title"><i class="fas fa-{{ page.toc_icon | default: 'file-alt' }}"></i> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label | default: "On this page" }}</h4></header>
4752
{% include toc.html sanitize=true html=content h_min=1 h_max=6 class="toc__menu" skip_no_ids=true %}
4853
</nav>
4954
</aside>
5055
{% endif %}
51-
{{ content }}
52-
{% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
53-
</section>
56+
</div>
5457

58+
{% if page.tags[0] or page.categories[0] %}
5559
<footer class="page__meta page__meta-footer">
5660
{% if site.data.ui-text[site.locale].meta_label %}
5761
<h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
5862
{% endif %}
5963
{% include page__taxonomy.html %}
60-
{% if page.date %}
61-
{% include page__date.html %}
62-
{% endif %}
6364
</footer>
65+
{% endif %}
6466

6567
{% if page.share %}{% include social-share.html %}{% endif %}
6668

‎_sass/minimal-mistakes/_site-modern.scss‎

Lines changed: 130 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -193,24 +193,39 @@ samp {
193193
),
194194
linear-gradient(
195195
165deg,
196-
mix($background-color, #fff, 97%) 0%,
197-
mix($background-color, $primary-color, 95%) 100%
196+
mix($background-color, #fff, 98%) 0%,
197+
mix($background-color, $primary-color, 97%) 100%
198198
);
199-
box-shadow: 0 24px 44px -34px rgba(#000, 0.72);
199+
box-shadow: 0 18px 36px -34px rgba(#000, 0.72);
200+
overflow: hidden;
201+
}
202+
203+
.page__header::before {
204+
content: "";
205+
display: block;
206+
width: 4.25rem;
207+
height: 3px;
208+
margin-bottom: 0.95rem;
209+
border-radius: 999px;
210+
background: linear-gradient(
211+
90deg,
212+
rgba($primary-color, 0.92) 0%,
213+
rgba($primary-color, 0.25) 100%
214+
);
200215
}
201216

202217
.page__title {
203-
margin-bottom: 0.85rem;
204-
line-height: 0.94;
205-
font-size: clamp(2rem, calc(1.7rem + 1vw), 3rem);
218+
margin-bottom: 0.7rem;
219+
line-height: 0.98;
220+
font-size: clamp(1.85rem, calc(1.6rem + 0.78vw), 2.65rem);
206221
}
207222

208223
.page__header .page__meta {
209224
display: flex;
210225
flex-wrap: wrap;
211-
gap: 0.32rem 0.9rem;
226+
gap: 0.32rem 1rem;
212227
margin-top: 0;
213-
font-size: 0.92rem;
228+
font-size: 0.9rem;
214229
}
215230

216231
.page__header .page__meta br,
@@ -226,11 +241,20 @@ samp {
226241
color: mix($text-color, $muted-text-color, 78%);
227242
}
228243

244+
.page__header .page__meta-date i,
245+
.page__header .page__meta-readtime i {
246+
color: rgba($primary-color, 0.72);
247+
}
248+
229249
.page__header .page__meta-date span,
230250
.page__header .page__meta-readtime {
231251
font-weight: 600;
232252
}
233253

254+
.page__body {
255+
margin-bottom: 1.1rem;
256+
}
257+
234258
.page__content {
235259
padding: clamp(1rem, calc(0.9rem + 0.5vw), 1.4rem);
236260
border: 1px solid mix($border-color, $primary-color, 88%);
@@ -244,77 +268,124 @@ samp {
244268
box-shadow: 0 26px 48px -38px rgba(#000, 0.72);
245269
}
246270

247-
@include breakpoint($large) {
248-
.page__content--with-toc > .sidebar__right {
249-
position: relative;
250-
top: auto;
251-
right: auto;
252-
float: none;
253-
width: auto;
254-
margin: 0 0 1rem;
255-
padding-left: 0;
256-
}
257-
258-
.page__content--with-toc > .sidebar__right.sticky {
259-
position: relative;
260-
top: auto;
261-
float: none;
262-
}
263-
}
264-
265-
.page__content--with-toc {
271+
.page__body--with-toc {
266272
@include breakpoint($x-large) {
267273
display: grid;
268-
grid-template-columns: minmax(0, 1fr) 17rem;
269-
column-gap: 1.4rem;
274+
grid-template-columns: minmax(0, 1fr) 15rem;
275+
column-gap: 1.15rem;
270276
align-items: start;
271277
}
272278

273279
@include breakpoint($x-large) {
274-
> :not(.sidebar__right) {
280+
> .page__content {
275281
grid-column: 1;
276282
min-width: 0;
277283
}
278284
}
279285

280286
@include breakpoint($x-large) {
281-
> .sidebar__right {
287+
> .page__toc {
282288
grid-column: 2;
283-
grid-row: 1 / span 999;
284-
position: sticky;
285-
top: 1.4rem;
286-
width: auto;
287-
margin: 0;
288-
padding: 0;
289+
align-self: start;
289290
}
290291
}
291292
}
292293

294+
.page__toc {
295+
margin-top: 1rem;
296+
297+
@include breakpoint($x-large) {
298+
margin-top: 0;
299+
}
300+
}
301+
302+
.page__toc.sticky {
303+
@include breakpoint($x-large) {
304+
position: sticky;
305+
top: 1.3rem;
306+
}
307+
}
308+
309+
.page__toc .toc {
310+
@include breakpoint(max-width $x-large - 1px) {
311+
max-width: 20rem;
312+
}
313+
314+
@include breakpoint(max-width $medium) {
315+
max-width: none;
316+
}
317+
}
318+
319+
.page__body--with-toc .page__toc .toc__menu {
320+
@include breakpoint($x-large) {
321+
max-height: calc(100vh - 9rem);
322+
overflow-y: auto;
323+
}
324+
}
325+
326+
.page__body--with-toc .page__toc .toc__menu::-webkit-scrollbar {
327+
@include breakpoint($x-large) {
328+
width: 6px;
329+
}
330+
}
331+
332+
.page__body--with-toc .page__toc .toc__menu::-webkit-scrollbar-thumb {
333+
@include breakpoint($x-large) {
334+
border-radius: 999px;
335+
background-color: rgba($primary-color, 0.3);
336+
}
337+
}
338+
339+
.page__content > :first-child {
340+
margin-top: 0;
341+
}
342+
343+
.page__content > :last-child {
344+
margin-bottom: 0;
345+
}
346+
347+
@include breakpoint($medium) {
348+
.page__content {
349+
padding: 1.25rem 1.35rem;
350+
}
351+
}
352+
353+
@include breakpoint($x-large) {
354+
.page__content {
355+
padding: 1.3rem 1.45rem;
356+
}
357+
}
358+
293359
.page__content p,
294360
.page__content li,
295361
.page__content dl {
296362
font-size: 0.98rem;
297363
line-height: 1.78;
298364
}
299365

366+
.page__content ul,
367+
.page__content ol {
368+
padding-left: 1.25rem;
369+
}
370+
300371
.page__content h2 {
301-
margin-top: 2.8rem;
302-
padding-bottom: 0.7rem;
372+
margin-top: 2.5rem;
373+
padding-bottom: 0.6rem;
303374
border-bottom: 1px solid mix($border-color, $primary-color, 82%);
304375
color: mix($text-color, $primary-color, 86%);
305-
font-size: clamp(1.35rem, calc(1.18rem + 0.45vw), 1.8rem);
376+
font-size: clamp(1.28rem, calc(1.16rem + 0.38vw), 1.66rem);
306377
}
307378

308379
.page__content h3 {
309-
margin-top: 2.1rem;
380+
margin-top: 1.9rem;
310381
color: mix($text-color, $primary-color, 78%);
311-
font-size: clamp(1.16rem, calc(1.05rem + 0.3vw), 1.45rem);
382+
font-size: clamp(1.12rem, calc(1.02rem + 0.24vw), 1.32rem);
312383
}
313384

314385
.page__content h4 {
315-
margin-top: 1.7rem;
386+
margin-top: 1.55rem;
316387
color: mix($text-color, $primary-color, 72%);
317-
font-size: 1.1rem;
388+
font-size: 1.02rem;
318389
}
319390

320391
.page__content blockquote {
@@ -342,45 +413,40 @@ samp {
342413
background: mix($background-color, $primary-color, 94%);
343414
}
344415

345-
.sidebar__right {
346-
margin-bottom: 1rem;
347-
}
348-
349416
.toc {
350417
overflow: hidden;
351-
border: 1px solid mix($border-color, $primary-color, 82%);
352-
border-radius: 1.25rem;
418+
border: 1px solid mix($border-color, $primary-color, 84%);
419+
border-radius: 1.2rem;
353420
background:
354421
linear-gradient(
355422
180deg,
356423
mix($background-color, #fff, 98%) 0%,
357-
mix($background-color, $primary-color, 95%) 100%
424+
mix($background-color, $primary-color, 96%) 100%
358425
);
359-
box-shadow: 0 20px 40px -34px rgba(#000, 0.8);
426+
box-shadow: 0 18px 30px -28px rgba(#000, 0.75);
360427
}
361428

362429
.toc .nav__title {
363430
display: flex;
364431
align-items: center;
365432
gap: 0.55rem;
366433
margin: 0;
367-
padding: 0.95rem 1rem 0.85rem;
368-
font-size: 0.9rem;
434+
padding: 0.9rem 0.95rem 0.8rem;
435+
border-bottom: 1px solid mix($border-color, $primary-color, 86%);
436+
color: mix($text-color, $primary-color, 78%);
437+
font-size: 0.86rem;
438+
font-weight: 700;
369439
letter-spacing: -0.02em;
370-
background: linear-gradient(
371-
135deg,
372-
mix($primary-color, #000, 88%),
373-
mix($primary-color, #fff, 78%)
374-
);
440+
background: transparent;
375441
}
376442

377443
.toc__menu {
378-
padding: 0.62rem;
379-
font-size: 0.86rem;
444+
padding: 0.56rem;
445+
font-size: 0.82rem;
380446
}
381447

382448
.toc__menu a {
383-
padding: 0.45rem 0.68rem;
449+
padding: 0.42rem 0.62rem;
384450
border-bottom: 0;
385451
border-radius: 0.8rem;
386452
font-weight: 600;
@@ -394,8 +460,8 @@ samp {
394460
}
395461

396462
.page__meta-footer {
397-
margin-top: 1.1rem;
398-
padding: 1rem 1.05rem;
463+
margin-top: 0;
464+
padding: 0.95rem 1rem;
399465
border: 1px solid mix($border-color, $primary-color, 88%);
400466
border-radius: 1.35rem;
401467
background: mix($background-color, $primary-color, 96%);
@@ -407,24 +473,6 @@ samp {
407473
letter-spacing: 0.08em;
408474
}
409475

410-
.page__meta-footer .page__date {
411-
margin-top: 1rem;
412-
padding-top: 0.9rem;
413-
border-top: 1px solid mix($border-color, $primary-color, 86%);
414-
font-size: 0.92rem;
415-
line-height: 1.7;
416-
}
417-
418-
.page__meta-footer .page__date strong {
419-
color: mix($text-color, $muted-text-color, 72%);
420-
}
421-
422-
.page__meta-footer .page__date br {
423-
display: block;
424-
content: "";
425-
margin-top: 0.3rem;
426-
}
427-
428476
.page__taxonomy-item {
429477
padding: 0.5rem 0.8rem;
430478
border: 1px solid rgba($primary-color, 0.2);

0 commit comments

Comments
 (0)