Spaces:
Running
Running
File size: 3,656 Bytes
9d8447d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<div class="cs" role="img" aria-label="Content folder structure: MDX, assets, embeds">
<div class="cs__header">
<svg class="cs__folder" viewBox="0 0 64 32" aria-hidden="true">
<path d="M6 10h14l4 4h30"/>
<rect x="4" y="14" width="56" height="12" rx="4" ry="4"/>
</svg>
<span class="cs__path">/app/src/content</span>
</div>
<div class="cs__grid">
<div class="cs__box">
<div class="cs__box-head">
<svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
<rect x="4" y="4" width="12" height="16" rx="2" ry="2"/>
<path d="M16 4l4 4h-4z"/>
</svg>
<span class="cs__label">MDX</span>
</div>
<div class="cs__items">
<div class="cs__item">article.mdx</div>
<div class="cs__item"><a href="#chapters">chapters/</a>*.mdx</div>
</div>
</div>
<div class="cs__box">
<div class="cs__box-head">
<svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 4h10a2 2 0 0 1 2 2v14c-2-1-4-2-6-2s-4 1-6 2V6a2 2 0 0 1 2-2z"/>
<path d="M6 8h10"/>
</svg>
<span class="cs__label">Bib</span>
</div>
<div class="cs__items">
<div class="cs__item">bibliography.bib</div>
</div>
</div>
<div class="cs__box">
<div class="cs__box-head">
<svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
<rect x="4" y="6" width="16" height="12" rx="2" ry="2"/>
<circle cx="8" cy="10" r="1.2"/>
<path d="M6 16l4-3 2 2 3-2-1 3H6z"/>
</svg>
<span class="cs__label">assets/</span>
</div>
<div class="cs__items">
<div class="cs__item">audio/</div>
<div class="cs__item">image/</div>
<div class="cs__item">data/</div>
</div>
</div>
<div class="cs__box">
<div class="cs__box-head">
<svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 16l-4-4 4-4"/>
<path d="M16 16l4-4-4-4"/>
</svg>
<span class="cs__label">embeds/</span>
</div>
<div class="cs__items">
<div class="cs__item"><a href="#htmlembed">*.html</a></div>
</div>
</div>
</div>
</div>
<style>
.cs {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--surface-bg);
color: var(--text-color);
padding: 10px 12px 12px;
}
.cs__header {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0 10px 0;
}
.cs__folder { width: 28px; height: 20px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs__path { font-weight: 600; font-size: 14px; }
.cs__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.cs__box {
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--surface-bg);
padding: 10px 12px;
display: flex;
flex-direction: column;
min-height: 120px;
}
.cs__box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cs__icon { width: 18px; height: 18px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; }
.cs__label { font-weight: 700; font-size: 13px; }
.cs__items { display: grid; gap: 4px; }
.cs__item { font-size: 12px; color: var(--muted-color); }
@media (max-width: 1180px) { .cs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cs__grid { grid-template-columns: 1fr; } }
</style>
|