File size: 6,838 Bytes
552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 a019081 552a9e9 9d7d3b1 552a9e9 9d7d3b1 552a9e9 9d7d3b1 a019081 | 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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | :root {
--bg: #fafafa;
--surface: #ffffff;
--surface-2: #f4f4f5;
--border: #e4e4e7;
--text: #18181b;
--muted: #52525b;
--faint: #71717a;
--accent: #6d28d9;
--accent-soft: #ede9fe;
--new: #047857;
--new-soft: #d1fae5;
--shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 4px 16px rgba(24, 24, 27, .04);
--radius: 14px;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b0b0f;
--surface: #131318;
--surface-2: #1b1b22;
--border: #26262f;
--text: #f4f4f5;
--muted: #a1a1aa;
--faint: #8b8b95;
--accent: #a78bfa;
--accent-soft: rgba(167, 139, 250, .14);
--new: #34d399;
--new-soft: rgba(52, 211, 153, .14);
--shadow: none;
}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 56px; }
.topbar {
max-width: 1120px; margin: 0 auto; padding: 20px 24px;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.back { color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--text); }
.hero { padding: 40px 0 28px; }
.hero-hub { padding: 56px 0 40px; }
.eyebrow {
display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent);
background: var(--accent-soft); padding: 4px 10px; border-radius: 999px;
}
h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin: 16px 0 12px; font-weight: 700; }
.lede { color: var(--muted); font-size: 17px; max-width: 680px; margin: 0; }
h2 { font-size: 20px; letter-spacing: -.01em; margin: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.stats div {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 12px 18px; min-width: 120px; box-shadow: var(--shadow);
}
.stats b { display: block; font-size: 24px; letter-spacing: -.02em; }
.stats span { color: var(--faint); font-size: 13px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 40px 0 16px; gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
#q {
flex: 1 1 260px; min-width: 0; font: inherit; color: var(--text);
background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--muted);
background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}
.chip[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.count { color: var(--faint); font-size: 13px; margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card {
display: flex; flex-direction: column; gap: 8px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 18px 16px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card[hidden] { display: none; }
.card h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; word-break: break-word; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--faint);
}
.badge.new { background: var(--new-soft); color: var(--new); }
.badge.lic { text-transform: none; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font: 500 11px/1.6 "JetBrains Mono", ui-monospace, monospace; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; }
.links { display: flex; gap: 12px; }
.link { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tile {
display: flex; flex-direction: column; gap: 4px; text-decoration: none;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile-emoji { font-size: 22px; }
.tile-title { font-weight: 600; letter-spacing: -.01em; }
.tile-sub { color: var(--muted); font-size: 14px; }
.tile-count { color: var(--faint); font-size: 12px; margin-top: 6px; }
.commercial {
display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
margin-top: 48px; padding: 24px; border-radius: var(--radius);
background: var(--accent-soft); border: 1px solid var(--border);
}
.commercial > div { flex: 1 1 420px; min-width: 0; }
.commercial p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.btn {
display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
text-decoration: none; padding: 11px 18px; border-radius: 10px; white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .btn { color: #0b0b0f; } }
.btn:hover { filter: brightness(1.08); }
.footer {
max-width: 1120px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--faint); font-size: 13px;
}
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }
@media (max-width: 640px) {
.wrap, .topbar, .footer { padding-left: 16px; padding-right: 16px; }
.grid, .tiles { grid-template-columns: 1fr; }
.count { margin-left: 0; width: 100%; }
}
.gguf { margin-top: 0; }
.cmd {
margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; overflow-x: auto;
font: 500 13px/1.5 "JetBrains Mono", ui-monospace, monospace;
background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
|