100 lines
3.3 KiB
HTML
100 lines
3.3 KiB
HTML
<div
|
|
class='tree-card'
|
|
style='margin-bottom: 16px; border: 1px solid #e1e4e8; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03);'
|
|
>
|
|
<details style='background: #ffffff;'>
|
|
<summary
|
|
style='cursor: pointer; padding: 10px 16px; background: #f6f8fa; border-bottom: 1px solid transparent; outline: none; list-style: none; display: flex; align-items: center; transition: background 0.2s ease;'
|
|
>
|
|
<svg
|
|
class='chevron'
|
|
width='16'
|
|
height='16'
|
|
viewBox='0 0 24 24'
|
|
fill='none'
|
|
stroke='#586069'
|
|
stroke-width='2'
|
|
stroke-linecap='round'
|
|
stroke-linejoin='round'
|
|
style='margin-right: 8px;'
|
|
>
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
<span style="font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; font-weight: 600; color: #24292e;">
|
|
_{{ include.name }}
|
|
</span>
|
|
</summary>
|
|
|
|
<div style='padding: 8px 0; border-top: 1px solid #e1e4e8;'>
|
|
{% for post in include.posts %}
|
|
<a
|
|
href='{{ post.url | relative_url }}'
|
|
class='tree-item'
|
|
style="display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 6px 36px; text-decoration: none; color: #586069; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; transition: all 0.2s ease;"
|
|
>
|
|
<div style='display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'>
|
|
{% if post.highlight == true %}
|
|
<svg
|
|
width='12'
|
|
height='12'
|
|
viewBox='0 0 24 24'
|
|
fill='#f1c40f'
|
|
stroke='#f1c40f'
|
|
stroke-width='2'
|
|
stroke-linecap='round'
|
|
stroke-linejoin='round'
|
|
style='margin-right: 9px; flex-shrink: 0;'
|
|
>
|
|
<polygon
|
|
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
</svg>
|
|
{% else %}
|
|
<span
|
|
style='width: 6px; height: 6px; border-radius: 50%; background: #e1e4e8; margin-right: 12px; margin-left: 3px; flex-shrink: 0;'
|
|
></span>
|
|
{% endif %}
|
|
|
|
<span style='white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
|
|
{{- post.title | escape -}}
|
|
</span>
|
|
</div>
|
|
|
|
<span style='font-size: 12px; color: #959da5; margin-left: 10px; flex-shrink: 0; font-variant-numeric: tabular-nums;'>
|
|
{{ post.date | date: '%b %d' }}
|
|
</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<style>
|
|
details[open] summary .chevron {
|
|
transform: rotate(90deg);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
details:not([open]) summary .chevron {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
details summary:hover {
|
|
background: #f0f3f6 !important;
|
|
}
|
|
|
|
details[open] summary {
|
|
border-bottom-color: #e1e4e8 !important;
|
|
}
|
|
|
|
a.tree-item:hover {
|
|
background-color: #f1f8ff;
|
|
color: #0366d6 !important;
|
|
}
|
|
|
|
a.tree-item:hover span:first-child {
|
|
background: #0366d6 !important;
|
|
}
|
|
|
|
/* Color the dot on hover */
|
|
</style>
|