templates/home.html (5716B)
1 {#- 홈. 첫 화면은 문턱이다 — 마크와 한 문장만 두고, 나머지는 스크롤 뒤에 있다.
2
3 루트의 page.children 은 최상위 섹션들이라 글 목록이 여기 없다. 대신
4 site.sections 를 돌면서 URL 로 갈래를 찾는다. 테스트나 필터를 쓰지 않고
5 문자열을 비교하는 이유는 그 URL 을 만드는 규칙이 이미 home 에 있어서다.
6
7 카피는 전부 [extra] 에 있고 이 파일은 구조만 안다. #}
8 {% extends "base.html" %}
9 {% from "partials/ledger.html" import ledger %}
10
11 {% block content %}
12 {%- set ko = page.language == "ko" %}
13 {%- set home = site.base_path ~ ("/ko/" if ko else "/") %}
14
15 <section class="hero-home">
16 <div class="wrap">
17 <span class="hero-mark" data-rise aria-hidden="true"></span>
18 <h1 class="statement" data-rise="1">{{ page.extra.hero_title }}</h1>
19 {%- if page.extra.hero_sub %}
20 <p class="statement-sub" data-rise="2">{{ page.extra.hero_sub }}</p>
21 {%- endif %}
22 <a class="door" href="{{ home }}about/" data-rise="3">{{ page.extra.hero_door }}</a>
23 </div>
24 </section>
25
26 {#- 글. 맨 위 한 편은 크게, 나머지는 원장으로. 같은 자료를 두 크기로 보여 줄
27 뿐이라 두 곳을 따로 관리하지 않는다. #}
28 {%- for s in site.sections %}
29 {%- if s.url == home ~ "posts/" and s.pages %}
30 <section class="room wrap">
31 {%- for p in s.pages %}
32 {%- if loop.first %}
33 <a class="feature" href="{{ p.url }}">
34 {#- 미리보기가 있으면 액자가 먼저 선다. poster 만 먼저 오고 영상은 preload="none"
35 이라, 손이 닿기 전에는 한 바이트도 안 받는다. 재생은 ui.js 가 건다. #}
36 {%- for m in page.extra.preview %}
37 {%- if m.url == p.url %}
38 <video class="feature-media" poster="{{ asset(m.poster) }}" src="{{ asset(m.video) }}"
39 width="960" height="540" muted loop playsinline preload="none"
40 aria-hidden="true" tabindex="-1"></video>
41 {%- endif %}
42 {%- endfor %}
43 {#- 이름표. 액자 안에서 그림 옆에 붙는다 — 미술관에서 작품에 딸린 라벨과
44 같은 관계라, 따로 떼면 둘이 다른 물건이 된다. #}
45 <div class="feature-label">
46 {%- if p.date %}
47 <time class="feature-date" datetime="{{ p.date.date }}">{{ p.date.year }}.{% if p.date.month < 10 %}0{% endif %}{{ p.date.month }}.{% if p.date.day < 10 %}0{% endif %}{{ p.date.day }}</time>
48 {%- endif %}
49 <h3 class="feature-title">{{ p.title }}</h3>
50 {%- if p.description %}
51 <p class="feature-desc">{{ p.description }}</p>
52 {%- endif %}
53 {#- 네 번째 줄. 카드가 링크라는 건 커서가 알려 주지만, 글 덩이에 아래 끝이
54 있어야 라벨이 반쪽 안에 떠 있지 않고 앉는다. #}
55 <span class="feature-cta">{{ t("read_post") }}</span>
56 </div>
57 </a>
58 {%- endif %}
59 {%- endfor %}
60
61 {#- 갈래 이름과 그 갈래로 가는 문이 한 줄에 선다. 사이의 헤어라인이 둘을 같은
62 줄의 양끝으로 묶는다.
63
64 맨 위 글이 이 줄보다 **앞에** 온다. 그 한 편은 갈래의 목록이 아니라 지금
65 내놓는 것이고, 머리는 그 뒤에 이어지는 목록의 머리다. 카드를 머리 아래
66 첫 항목으로 두면 "Writing 의 첫 줄"로 읽히는데, 크기가 다른 첫 줄이다. #}
67 <header class="room-head">
68 <h2>{{ t("writing") }}</h2>
69 <span class="room-rule" aria-hidden="true"></span>
70 <a class="room-door" href="{{ s.url }}">{{ t("all_posts") }}</a>
71 </header>
72
73 {#- 맨 위 한 편은 위에서 카드로 냈으므로 건너뛴다. 최대 세 줄 — 그 이상은
74 Posts 페이지가 받는다. #}
75 {{ ledger(s.pages, 3, false, 1, page.language) }}
76 </section>
77 {%- endif %}
78 {%- endfor %}
79
80 {#- 프로젝트. 여기서는 이름과 한 줄만 낸다 — 배지와 링크는 목록이 실어 오지
81 않는 값이라, 홈에 두려면 카탈로그를 한 번 더 적어야 한다. 그건 두 곳이
82 어긋날 자리를 만드는 일이고, 그 값이 궁금해진 사람은 Projects 로 간다. #}
83 {%- for s in site.sections %}
84 {%- if s.url == home ~ "projects/" and s.pages %}
85 <section class="room wrap">
86 <header class="room-head">
87 <h2>{{ s.title }}</h2>
88 <span class="room-rule" aria-hidden="true"></span>
89 <a class="room-door" href="{{ s.url }}">{{ t("all_projects") }}</a>
90 </header>
91 {#- 모자이크. 첫 장이 크고 나머지 셋이 옆에 쌓인다 — 대칭 격자는 여섯 개가
92 다 같은 무게라고 말하는데, 갈래에는 앞에 세울 것이 있다.
93 그림은 카탈로그가 준다. 목록은 이름과 설명만 준다. #}
94 <div class="mosaic">
95 {%- for m in page.extra.mosaic %}
96 {%- for p in s.pages %}
97 {%- if p.url == m.url %}
98 <a class="mtile" href="{{ p.url }}" style="--tint: {{ m.accent }}">
99 <span class="mtile-art" aria-hidden="true">
100 {%- if m.cover %}
101 <img src="{{ asset(m.cover) }}" alt="" loading="lazy" decoding="async">
102 {%- elif m.mark %}
103 <span class="mtile-mark" style="--mark-src: url('/{{ m.mark }}')"></span>
104 {%- endif %}
105 </span>
106 <span class="mtile-body">
107 <span class="mtile-title">{{ p.title }}</span>
108 {%- if p.description %}
109 <span class="mtile-blurb">{{ p.description }}</span>
110 {%- endif %}
111 {#- 별 개수는 stars.py 가 카탈로그에 구워 둔 값이다. 0 이어도 낸다. #}
112 {%- if m.repo %}
113 <span class="mtile-stars stars">{{ m.stars }} ★</span>
114 {%- endif %}
115 </span>
116 </a>
117 {%- endif %}
118 {%- endfor %}
119 {%- endfor %}
120 </div>
121 </section>
122 {%- endif %}
123 {%- endfor %}
124 {% endblock %}