software catalog

static/css/style.css

@@ -906,3 +906,87 @@ pre.has-copy code { display: block; padding-right: 64px; }
   text-decoration-thickness: 2px; text-underline-offset: .16em;
 }
 .section-text .wrap:not(:has(> .section-head)) .prose a:hover { color: var(--magenta); }
+
+/* ---- software catalog (content/software/, the catalog section) ---- */
+.cat-tools { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
+.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; }
+.cat-nav a {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 7px 10px 7px 14px; border-radius: 999px; background: var(--surface);
+  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
+  transition: background var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
+}
+.cat-nav a:hover { background: var(--magenta); color: #fff; }
+.cat-count {
+  min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--magenta-11);
+  font-family: var(--font-mono); font-size: 11px; text-align: center; color: var(--magenta);
+}
+.cat-nav a:hover .cat-count { background: #ffffff33; color: #fff; }
+.cat-filter input {
+  width: min(420px, 100%); height: 48px; padding: 0 18px;
+  border: 1.5px solid var(--ink-22); border-radius: 999px; background: #fff;
+  font: inherit; font-size: 16px; color: var(--ink);
+}
+.cat-filter input:focus { outline: none; border-color: var(--magenta); }
+
+.catalog { display: flex; flex-direction: column; gap: 56px; }
+.cat-group { scroll-margin-top: calc(var(--head-h) + 24px); }
+.cat-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
+.cat-group-head h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
+.cat-group-head p { font-size: 15px; color: var(--ink-60); }
+.cat-row {
+  position: relative;
+  display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline;
+  padding: 14px 0; border-bottom: 1px solid var(--rule);
+}
+.cat-row:hover { background: linear-gradient(90deg, transparent, var(--magenta-7) 12%, var(--magenta-7) 88%, transparent); }
+.cat-name { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }
+.cat-name::after { content: ""; position: absolute; inset: 0; }
+.cat-row:hover .cat-name { color: var(--magenta); }
+.cat-desc { font-size: 15.5px; line-height: 1.55; color: var(--ink-68); }
+.cat-desc p { display: inline; }
+.cat-src {
+  padding: 2px 9px; border-radius: 999px; background: var(--paper-2);
+  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60);
+  white-space: nowrap;
+}
+.cat-src-flathub { background: var(--magenta-11); color: var(--magenta-deep); }
+.cat-src-aur { background: #2ee6d633; color: #006b63; }
+.cat-none { font-size: 18px; color: var(--ink-68); }
+.cat-none a { color: var(--magenta); }
+@media (max-width: 800px) {
+  .cat-row { grid-template-columns: minmax(0, 1fr) auto; }
+  .cat-desc { grid-column: 1 / -1; grid-row: 2; }
+}
+
+/* one title's page */
+.app-facts {
+  display: flex; flex-direction: column;
+  padding: 8px 28px; border-radius: var(--radius);
+  background: var(--on-dark-8); box-shadow: inset 0 0 0 1px var(--on-dark-16);
+}
+.app-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 16px 0; }
+.app-facts > div + div { border-top: 1px solid var(--on-dark-16); }
+.app-facts dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-56); padding-top: 3px; }
+.app-facts dd { margin: 0; font-size: 16px; color: var(--on-dark); overflow-wrap: anywhere; }
+.app-facts a { color: var(--on-dark); text-decoration-color: var(--magenta-bright); text-underline-offset: .18em; }
+.app-facts a:hover { color: var(--cyan); }
+.app-facts code { font-family: var(--font-mono); font-size: 14px; }
+.app-replaces s { white-space: nowrap; text-decoration-color: var(--magenta-bright); }
+.app-replaces .sep { color: var(--on-dark-56); }
+.app-hero .note a { color: inherit; text-decoration: none; }
+.app-hero .note a:hover { color: var(--on-dark); text-decoration: underline; }
+@media (max-width: 500px) { .app-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
+
+.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; align-items: start; }
+.app-body .prose h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
+.app-body .prose h2:not(:first-child) { margin-top: 18px; }
+.app-aside { position: sticky; top: calc(var(--head-h) + 32px); display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--surface); }
+.app-others { display: flex; flex-direction: column; gap: 2px; }
+.app-others a { display: block; padding: 5px 0; font-size: 15px; color: var(--ink-86); text-decoration: none; }
+.app-others a:hover { color: var(--magenta); }
+.app-others [aria-current] a { color: var(--magenta); font-weight: 600; }
+@media (max-width: 1000px) {
+  .app-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
+  .app-aside { position: static; }
+}