|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +--- |
| 4 | + |
| 5 | +{% include base_path %} |
| 6 | + |
| 7 | +<style> |
| 8 | + /* ===== Distill-style blog layout ===== */ |
| 9 | + .distill { |
| 10 | + --dt-text: #1a1a1a; |
| 11 | + --dt-muted: #6b6b6b; |
| 12 | + --dt-rule: #e7e7e7; |
| 13 | + --dt-accent: #b31b1b; /* arXiv-ish red accent */ |
| 14 | + --dt-link: #1a0dab; |
| 15 | + color: var(--dt-text); |
| 16 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| 17 | + line-height: 1.7; |
| 18 | + font-size: 17px; |
| 19 | + padding: 0 20px 120px; |
| 20 | + -webkit-font-smoothing: antialiased; |
| 21 | + } |
| 22 | + |
| 23 | + /* Centered reading column; figures can break out wider */ |
| 24 | + .distill .d-body { max-width: 800px; margin: 0 auto; } |
| 25 | + .distill .d-wide { max-width: 1040px; margin: 2.5rem auto; } |
| 26 | + /* Medium figures: centered, do not span the full frame */ |
| 27 | + .distill figure.d-mid { max-width: 680px; margin: 2.2rem auto; } |
| 28 | + /* Small figures: for light, low-information diagrams */ |
| 29 | + .distill figure.d-small { max-width: 460px; margin: 2rem auto; } |
| 30 | + |
| 31 | + /* Lead-in / standfirst paragraph above the TL;DR */ |
| 32 | + .distill .d-lead { font-size: 1.13rem; line-height: 1.72; color: #6f6f6f; margin: 0 0 2rem; } |
| 33 | + .distill .d-lead p { margin: 0 0 1rem; } |
| 34 | + .distill .d-lead p:last-child { margin-bottom: 0; } |
| 35 | + |
| 36 | + /* ---- Header ---- */ |
| 37 | + .distill .d-header { max-width: 920px; margin: 0 auto; padding: 64px 0 28px; text-align: center; } |
| 38 | + .distill .d-title { |
| 39 | + font-size: 2.6rem; line-height: 1.18; font-weight: 700; |
| 40 | + letter-spacing: -0.01em; margin: 0 0 0.6rem; |
| 41 | + } |
| 42 | + .distill .d-subtitle { font-size: 1.25rem; color: var(--dt-muted); font-weight: 400; margin: 0 0 1.6rem; } |
| 43 | + .distill .d-meta { font-size: 1.08rem; color: var(--dt-muted); margin: 1.6rem 0 1.6rem; } |
| 44 | + .distill .d-meta a { color: var(--dt-link); text-decoration: none; } |
| 45 | + .distill .d-affil { font-size: 0.92rem; color: var(--dt-muted); margin: 0 0 1.4rem; } |
| 46 | + |
| 47 | + /* ---- Institution logos row ---- */ |
| 48 | + .distill .d-logos { |
| 49 | + display: flex; flex-wrap: wrap; align-items: center; justify-content: center; |
| 50 | + gap: 26px; margin: 0 0 1.8rem; |
| 51 | + } |
| 52 | + .distill .d-logos img { height: 34px; width: auto; opacity: 0.78; } |
| 53 | + |
| 54 | + /* ---- Link buttons (paper / code / tweet) ---- */ |
| 55 | + .distill .d-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0.5rem 0 0; } |
| 56 | + .distill .d-links a { |
| 57 | + display: inline-flex; align-items: center; gap: 7px; |
| 58 | + padding: 8px 16px; border: 1px solid var(--dt-rule); border-radius: 999px; |
| 59 | + color: var(--dt-text); text-decoration: none; font-size: 0.92rem; font-weight: 500; |
| 60 | + transition: background 0.15s ease, border-color 0.15s ease; |
| 61 | + } |
| 62 | + .distill .d-links a:hover { background: #f6f6f6; border-color: #cfcfcf; } |
| 63 | + .distill .d-link-img { height: 0.95em; width: auto; vertical-align: -0.12em; } |
| 64 | + |
| 65 | + /* ---- Body typography ---- */ |
| 66 | + .distill h2 { |
| 67 | + font-size: 1.6rem; font-weight: 700; margin: 2.6rem 0 0.9rem; |
| 68 | + padding-top: 1.4rem; border-top: 1px solid var(--dt-rule); letter-spacing: -0.01em; |
| 69 | + } |
| 70 | + .distill h3 { font-size: 1.22rem; font-weight: 650; margin: 2rem 0 0.6rem; } |
| 71 | + .distill p { margin: 0 0 1.15rem; } |
| 72 | + .distill a { color: var(--dt-link); text-decoration: none; } |
| 73 | + .distill a:hover { text-decoration: underline; } |
| 74 | + .distill ul, .distill ol { margin: 0 0 1.15rem; padding-left: 1.4rem; } |
| 75 | + .distill li { margin: 0.35rem 0; } |
| 76 | + |
| 77 | + /* ---- Abstract box ---- */ |
| 78 | + .distill .d-abstract { |
| 79 | + background: #fafafa; border: 1px solid var(--dt-rule); border-radius: 10px; |
| 80 | + padding: 22px 26px; margin: 2.2rem auto 0; font-size: 1.02rem; text-align: left; |
| 81 | + } |
| 82 | + .distill .d-abstract h2 { |
| 83 | + border: 0; padding: 0; margin: 0 0 0.6rem; font-size: 0.85rem; |
| 84 | + text-transform: uppercase; letter-spacing: 0.08em; color: var(--dt-muted); |
| 85 | + } |
| 86 | + .distill .d-abstract p:last-child { margin-bottom: 0; } |
| 87 | + |
| 88 | + /* ---- TL;DR / key-takeaways box ---- */ |
| 89 | + .distill .d-tldr { |
| 90 | + background: #fff8f0; border: 1px solid #f0d9c0; border-left: 4px solid var(--dt-accent); |
| 91 | + border-radius: 10px; padding: 20px 24px; margin: 2rem auto; |
| 92 | + } |
| 93 | + .distill .d-tldr .d-tldr-label { |
| 94 | + font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; |
| 95 | + font-weight: 700; color: var(--dt-accent); margin: 0 0 0.6rem; |
| 96 | + } |
| 97 | + .distill .d-tldr ul { margin: 0; } |
| 98 | + .distill .d-tldr p:last-child, .distill .d-tldr li:last-child { margin-bottom: 0; } |
| 99 | + |
| 100 | + /* ---- Inline highlight / callout box ---- */ |
| 101 | + .distill .d-highlight { |
| 102 | + background: #f4f8ff; border: 1px solid #d7e3f7; border-left: 4px solid #1a0dab; |
| 103 | + border-radius: 8px; padding: 16px 20px; margin: 1.8rem auto; font-size: 0.98rem; |
| 104 | + } |
| 105 | + .distill .d-highlight b, .distill .d-highlight strong { color: #14258c; } |
| 106 | + .distill .d-highlight p:last-child { margin-bottom: 0; } |
| 107 | + |
| 108 | + /* ---- Yellow question box ---- */ |
| 109 | + .distill .d-question { |
| 110 | + background: #fff8d6; border: 1px solid #f0dca0; border-left: 4px solid #e8b000; |
| 111 | + border-radius: 8px; padding: 16px 22px; margin: 2rem auto; font-size: 1.05rem; |
| 112 | + } |
| 113 | + .distill .d-question b, .distill .d-question strong { color: #8a6100; } |
| 114 | + .distill .d-question p:last-child { margin-bottom: 0; } |
| 115 | + |
| 116 | + /* ---- Figures ---- */ |
| 117 | + .distill figure { margin: 2rem auto; text-align: center; } |
| 118 | + .distill figure img { max-width: 100%; height: auto; border-radius: 6px; } |
| 119 | + /* Shrink-wrap the caption so a single line centers, while a wrapped |
| 120 | + multi-line caption stays left-aligned (block centered under the figure). */ |
| 121 | + .distill figcaption { |
| 122 | + font-size: 0.88rem; color: var(--dt-muted); margin: 0.7rem auto 0; |
| 123 | + line-height: 1.5; text-align: left; display: table; |
| 124 | + } |
| 125 | + /* Force-center a multi-line caption when desired: add class="cap-center" */ |
| 126 | + .distill figcaption.cap-center { text-align: center; } |
| 127 | + |
| 128 | + /* ---- Blockquote / callout ---- */ |
| 129 | + .distill blockquote { |
| 130 | + border-left: 3px solid var(--dt-accent); margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.1rem; |
| 131 | + color: #333; font-style: italic; |
| 132 | + } |
| 133 | + |
| 134 | + /* ---- Code ---- */ |
| 135 | + .distill code { background: #f3f3f3; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } |
| 136 | + .distill pre { background: #f7f7f7; border: 1px solid var(--dt-rule); border-radius: 8px; padding: 16px; overflow-x: auto; } |
| 137 | + .distill pre code { background: none; padding: 0; } |
| 138 | + |
| 139 | + /* ---- Tables ---- */ |
| 140 | + .distill table { border-collapse: collapse; width: 100%; margin: 1.6rem 0; font-size: 0.95rem; } |
| 141 | + .distill th, .distill td { border: 1px solid var(--dt-rule); padding: 8px 12px; text-align: center; } |
| 142 | + .distill thead th { background: #fafafa; } |
| 143 | + |
| 144 | + /* ---- Footer / back link ---- */ |
| 145 | + .distill .d-back { max-width: 800px; margin: 3rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--dt-rule); font-size: 0.95rem; } |
| 146 | + |
| 147 | + @media (max-width: 760px) { |
| 148 | + .distill { font-size: 16px; } |
| 149 | + .distill .d-title { font-size: 2rem; } |
| 150 | + } |
| 151 | +</style> |
| 152 | + |
| 153 | +<div id="main" role="main" class="distill"> |
| 154 | + <article class="d-article" itemscope itemtype="http://schema.org/CreativeWork"> |
| 155 | + |
| 156 | + <header class="d-header"> |
| 157 | + {% if page.title %}<h1 class="d-title" itemprop="headline">{{ page.title }}</h1>{% endif %} |
| 158 | + {% if page.subtitle %}<p class="d-subtitle">{{ page.subtitle }}</p>{% endif %} |
| 159 | + |
| 160 | + {% if page.authors or page.blog_date %} |
| 161 | + <p class="d-meta">{% if page.authors %}{{ page.authors }}{% endif %}{% if page.authors and page.blog_date %} · {% endif %}{% if page.blog_date %}{{ page.blog_date }}{% endif %}</p> |
| 162 | + {% endif %} |
| 163 | + |
| 164 | + {% if page.logos %} |
| 165 | + <div class="d-logos"> |
| 166 | + {% for logo in page.logos %} |
| 167 | + <img src="{{ logo.src | relative_url }}" alt="{{ logo.alt }}"{% if logo.h %} style="height:{{ logo.h }}px"{% endif %}> |
| 168 | + {% endfor %} |
| 169 | + </div> |
| 170 | + {% elsif page.affiliation %} |
| 171 | + <p class="d-affil">{{ page.affiliation }}</p> |
| 172 | + {% endif %} |
| 173 | + |
| 174 | + {% if page.links %} |
| 175 | + <div class="d-links"> |
| 176 | + {% for link in page.links %} |
| 177 | + <a href="{{ link.url }}" target="_blank" rel="noopener">{% if link.img %}<img class="d-link-img" src="{{ link.img | relative_url }}" alt="">{% elsif link.icon %}<i class="{{ link.icon }}"></i>{% endif %}{{ link.name }}</a> |
| 178 | + {% endfor %} |
| 179 | + </div> |
| 180 | + {% endif %} |
| 181 | + |
| 182 | + {% if page.abstract %} |
| 183 | + <div class="d-abstract d-body"> |
| 184 | + <h2>Abstract</h2> |
| 185 | + <p>{{ page.abstract }}</p> |
| 186 | + </div> |
| 187 | + {% endif %} |
| 188 | + </header> |
| 189 | + |
| 190 | + <div class="d-body" itemprop="text"> |
| 191 | + {{ content }} |
| 192 | + </div> |
| 193 | + |
| 194 | + <div class="d-back d-body"> |
| 195 | + <a href="{{ base_path }}/">← Back to homepage</a> |
| 196 | + </div> |
| 197 | + |
| 198 | + </article> |
| 199 | +</div> |
0 commit comments