diff --git a/assets/css/doors/clusters.css b/assets/css/doors/clusters.css index c778c11b676..a8b0e21ed96 100644 --- a/assets/css/doors/clusters.css +++ b/assets/css/doors/clusters.css @@ -952,7 +952,7 @@ .clusters-map__line { fill: none; stroke: var(--soft); stroke-width: 2; stroke-linecap: round; } .clusters-map__seg path:first-of-type, .clusters-map__label rect, .clusters-map__pill rect { fill: var(--c); } .clusters-map__icon { fill: #fff; } -.clusters-map__label text { font-size: 20px; font-weight: 700; } +.clusters-map__label text { font-size: 32px; font-weight: 700; } .clusters-map__pill text { font-size: 17px; font-weight: 400; } .clusters-map__disc { fill: #fff; stroke: var(--res); stroke-width: 7; } .clusters-map__cluster { transition: opacity 0.15s; } @@ -964,13 +964,6 @@ border: 1px solid var(--line); border-radius: var(--r-small); padding: 0.35rem 0.9rem; cursor: pointer; } .clusters-map__enlarge:hover, .clusters-map__close:hover { border-color: var(--ink); } -.clusters-map__list { flex: 1 1 20rem; } -.clusters-map__list summary { cursor: pointer; color: var(--link); font-size: 0.95rem; } -.clusters-map__list ol { margin: 0.75rem 0 0; padding-left: 1.4rem; columns: 2 22rem; column-gap: 2rem; font-size: 0.95rem; } -.clusters-map__list li { break-inside: avoid; margin-bottom: 0.5rem; } -.clusters-map__list ul { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; } -.clusters-map__list ul li { margin: 0; } -.clusters-map__list a { color: var(--ink); } .clusters-map__dialog { width: 96vw; max-width: none; height: 94vh; max-height: none; padding: 0; border: 0; border-radius: var(--r-large); background: var(--page); } .clusters-map__dialog::backdrop { background: rgba(38, 45, 53, 0.6); } .clusters-map__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; box-shadow: 0 1px 4px rgba(38, 45, 53, 0.25); } @@ -979,22 +972,15 @@ .clusters-map__compact { display: none; } .clusters-map__hub { display: block; width: min(240px, 70%); margin: 0 auto 1rem; } .clusters-map__segment { fill: var(--c); } -.clusters-map__chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } -.clusters-map__chips a { - display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.9rem; border-radius: 12px; - background: var(--c); color: #fff; font-weight: 700; line-height: 1.25; text-decoration: none; -} -.clusters-map__chips svg { flex: 0 0 1.4rem; height: 1.4rem; fill: currentColor; } -.clusters-map__chips small { display: block; font-size: 0.85rem; font-weight: 400; } -/* Phones: the hub and the cluster labels; the pills are in the list and the full-size view. */ -@media (max-width: 760px) { +/* Below 1256 px the full drawing would set cluster names under 15 px, so phones, tablets and small laptops get + the hub, and the clusters in the linked list after it; the pills are in the text list and the full-size view. */ +@media (max-width: 1255px) { .clusters-map__frame { display: none; } .clusters-map__compact { display: block; } } @media (forced-colors: active) { .clusters-map__art text, .clusters-map__icon { fill: CanvasText; } .clusters-map__seg path:first-of-type, .clusters-map__segment, .clusters-map__label rect, .clusters-map__pill rect { fill: Canvas; stroke: CanvasText; } - .clusters-map__chips a { border: 1px solid CanvasText; } } /* Stack on small screens */ @@ -2406,3 +2392,131 @@ body.clusters-mobile-nav-open #just-os-widget{display:none} .disciplines-areas{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px;padding:0;list-style:none} .disciplines-areas li{margin:0} .disciplines-areas .badge{padding:4px 10px;border-radius:999px;font:600 15px/1.3 var(--text)} + +/* Resource cards: the kind of resource as quiet text ("Overview · Paper"), not filled chips, and the + title as an underlined link to the resource. The reference button is a secondary action beside Save. */ +.card-kind{margin:0 0 6px;font:400 15px/1.35 var(--text);color:var(--soft);letter-spacing:0;text-transform:none} +.card-purpose{display:inline-block;margin-right:6px;padding:1px 9px;border:1px solid var(--line);border-radius:var(--r-small,6px);background:var(--surface);color:var(--ink);font-weight:600} +.fc-card .fc-body{min-width:0;flex:1} +.fc-title a,.fr-title a,.ref-popup-title a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} +.fc-title a:hover,.fr-title a:hover,.ref-popup-title a:hover{color:var(--ink)} +.fc-title,.fr-title{margin-bottom:4px} +.fc-summary a{color:var(--link);text-decoration:underline;text-underline-offset:3px} +.fr-ref-trigger{color:var(--soft);border:1px solid rgba(0,0,0,.1);border-radius:4px;padding:.2rem .5rem} +.fr-ref-trigger:hover{color:var(--ink);border-color:var(--ink)} +.ref-popup .card-kind{margin-bottom:4px} + +/* Filter bar: search, then a Filters disclosure holding Focus, Type and the specialist toggle. From 761 px + the disclosure is open and its summary hidden, so the bar reads as one row of controls. */ +.fr-filter-bar{align-items:center} +.fr-filter-more{flex:1 1 520px;min-width:0} +.fr-filter-more__body{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px} +.fr-filter-more>summary{display:none} +.fr-filter-group--specialist{flex-direction:column;align-items:flex-start;gap:2px} +.fr-filter-hint{font-size:15px;line-height:1.35;color:var(--soft);max-width:34em} +.fr-search-input::-webkit-search-cancel-button{cursor:pointer} +.fr-filter-result{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px} +.fr-filter-status{margin:0;font-size:16px;color:var(--ink)} +.fr-filter-status:empty{display:none} +.fr-filter-result__clear{background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;font:600 15px/1.3 var(--text);color:var(--ink);cursor:pointer} +.fr-filter-result__clear:hover{background:var(--ink);color:#fff} +.fr-filter-result__clear[hidden]{display:none} +@media (max-width:760px){ + .fr-filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px} + .fr-filter-search-group,.fr-filter-search-group .fr-search-input{width:100%;max-width:none} + .fr-filter-more{flex:none} + .fr-filter-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:600 16px/1.3 var(--text);color:var(--ink);cursor:pointer;list-style:none;width:max-content} + .fr-filter-more>summary::-webkit-details-marker{display:none} + .fr-filter-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 4px} + .fr-filter-more[open]>summary::after{transform:rotate(-135deg);margin-top:4px} + .fr-filter-more[open]>summary{margin-bottom:12px} + .fr-filter-more__body{flex-direction:column;align-items:stretch;gap:14px} + .fr-filter-group{align-items:flex-start;flex-direction:column;gap:6px} + .fr-clear-btn{margin-left:0;align-self:flex-start} +} +/* Tap targets of at least 44 px on phones and touch screens. */ +@media (max-width:760px),(pointer:coarse){ + .fr-tag-btn{min-height:44px;padding-inline:14px} + .fr-search-input{min-height:44px} + .fr-specificity-toggle{min-height:44px} + .fr-clear-btn{min-height:44px;padding-inline:14px} + .fr-filter-result__clear{min-height:44px} +} +.fr-filter-result__go{font-size:16px;text-decoration:underline;text-underline-offset:3px} +.fr-filter-result__go[hidden]{display:none} + +/* /clusters/: the clusters as a plain linked list after the filters, each numbered in its own colour, + in two columns on a wide screen; then the introduction and diagram, then every cluster in full. */ +.clusters-section-heading,.clusters-overview__heading{font:var(--display-weight) clamp(26px,2.4vw,32px)/1.2 var(--display);color:var(--ink);margin:36px 0 14px} +.clusters-overview__heading{margin-top:20px} +.clusters-overview__list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:18px 40px} +@media (min-width:992px){.clusters-overview__list{grid-template-columns:repeat(2,minmax(0,1fr))}} +.clusters-overview__list li{display:flex;gap:12px;align-items:flex-start;margin:0} +.clusters-overview__num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font:700 15px/30px var(--text);text-align:center;margin-top:1px} +.clusters-overview__text{min-width:0} +.clusters-overview__name{font:600 18px/1.35 var(--text);color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} +.clusters-overview__name:hover{color:var(--ink)} +.clusters-overview__desc{margin:2px 0 0;font-size:16px;line-height:1.45;color:var(--ink);max-width:60ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} +.clusters-overview__count{margin:2px 0 0;font-size:15px;color:var(--soft)} +.clusters-intro-section .clusters-intro{margin:0} +/* Each cluster panel numbers itself in its own colour, and on /clusters/ its name links to its page. */ +.cluster-section[style*="--c"] .cluster-number{background:var(--c);color:#fff;font-size:15px;width:1.8em;height:1.8em} +.cluster-title a{color:var(--link);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} +.cluster-title a:hover{color:var(--ink)} +/* A jump to a cluster or sub-cluster stops below the pinned filters. */ +.cluster-section,.acc-section{scroll-margin-top:calc(var(--clusters-controls-height,0px) + 90px)} + +/* Side list: the cluster and sub-cluster names are underlined as links; the current cluster is marked by + weight (and aria-current), not by an underline. A shadow at the top or foot of the box shows that it + scrolls when there is more above or below. */ +.cluster-nav-heading:has(.cluster-nav-name){font-weight:400} +.cluster-nav-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:currentColor} +.cluster-nav-heading[aria-current]{font-weight:700} +.cluster-nav-heading[aria-current] .cluster-nav-name{text-decoration:none} +.cluster-nav-subs .nav-link .cluster-nav-name{flex:1 1 auto;min-width:0} +.cluster-nav-heading:hover .cluster-nav-name,.cluster-nav-subs .nav-link:hover .cluster-nav-name{text-decoration-thickness:2px} +@media (min-width:992px){ + .clusters-sidebar-inner{background: + linear-gradient(var(--surface) 30%,rgba(240,243,245,0)) center top/100% 40px no-repeat local, + linear-gradient(rgba(240,243,245,0),var(--surface) 70%) center bottom/100% 40px no-repeat local, + radial-gradient(farthest-side at 50% 0,rgba(38,45,53,.18),rgba(38,45,53,0)) center top/100% 12px no-repeat scroll, + radial-gradient(farthest-side at 50% 100%,rgba(38,45,53,.18),rgba(38,45,53,0)) center bottom/100% 12px no-repeat scroll, + var(--surface)} +} + +/* /clusters/ diagram as the way in: the cluster pointed at, or focused in the list after it, is described + in a line that sticks to the foot of the window while the drawing runs below it (desktop only; phones + show the hub and the list). */ +.clusters-map__info{position:sticky;bottom:0;z-index:3;margin:8px 0 0;padding:10px 16px;min-height:76px;background:var(--surface);border-radius:var(--r-large);display:flex;align-items:center} +.clusters-map__info[hidden]{display:none} +.clusters-map__hint{margin:0;font-size:16px;color:var(--soft)} +.clusters-map__about{display:flex;gap:12px;align-items:flex-start} +.clusters-map__about[hidden]{display:none} +.clusters-map__num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font:700 15px/30px var(--text);text-align:center} +.clusters-map__name{margin:0;font:600 18px/1.3 var(--text);color:var(--ink)} +.clusters-map__desc{margin:2px 0 0;font-size:16px;line-height:1.4;color:var(--ink);max-width:80ch} +.clusters-map__count{margin:2px 0 0;font-size:15px;color:var(--soft)} +@media (max-width:1255px){.clusters-map__info{display:none}} +.clusters-map__art .clusters-map__label,.clusters-map__art .clusters-map__seg{cursor:pointer} +.clusters-overview__list li[data-cluster]:hover .clusters-overview__name{color:var(--ink)} +.clusters-map__info{bottom:var(--banner,0px)} +.clusters-map__art .clusters-map__label:focus{outline:none} +.clusters-map__art .clusters-map__label:focus-visible rect{stroke:var(--ink);stroke-width:7px;paint-order:stroke} +.clusters-map__art .clusters-map__label:focus-visible{outline:3px solid var(--ink);outline-offset:4px} + +/* Cluster cards keep the same inner space at every width (the old theme shrank it to 9 px on phones), + and the phone "Navigate" button stands clear of the card below it. */ +.cluster-section.cluster-section{padding:24px 24px 20px} +@media(max-width:760px){.cluster-section.cluster-section{padding:20px 16px 16px}} +.clusters-mobile-toggle.clusters-mobile-toggle{margin:0 0 20px} +/* Each cluster's sub-clusters, behind its counts. */ +.clusters-overview__subs{margin:2px 0 0} +.clusters-overview__subs summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--link);font-size:16px;list-style:none} +.clusters-overview__subs summary::-webkit-details-marker{display:none} +.clusters-overview__subs summary::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s} +.clusters-overview__subs[open] summary::before{transform:rotate(90deg)} +.clusters-overview__subs summary:hover{color:var(--ink)} +.clusters-overview__subs ul{margin:0 0 8px;padding:0 0 0 18px;list-style:none;border-left:3px solid var(--c)} +.clusters-overview__subs li{margin:0;padding:4px 0 4px 12px;font-size:16px;line-height:1.4} +.clusters-overview__subs a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} +@media(prefers-reduced-motion:reduce){.clusters-overview__subs summary::before{transition:none}} diff --git a/assets/css/doors/lists.css b/assets/css/doors/lists.css index df6b4a8ee63..25f97774bcb 100644 --- a/assets/css/doors/lists.css +++ b/assets/css/doors/lists.css @@ -91,11 +91,24 @@ .list-item-image{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px} .list-item-image img{width:120px;height:72px} } -.cluster-resources{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px 36px;margin:18px 0 0;padding:0;list-style:none} -.cluster-resources li{margin:0;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.35} -.cluster-resources a{color:var(--link);text-decoration:none;font-weight:600} -.cluster-resources a:hover{text-decoration:underline;text-underline-offset:3px} -.cluster-resources span{display:block;margin-top:4px;color:var(--soft);font-size:15px} +/* /forrt_clusters//: one toolbar across the list, the search (label above, count beside the box) on + the left and the routes to the directory and the clusters on the right; on a phone they stack. */ +.article-layout .article-style .list-filter.topic-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 40px;max-width:1080px;margin:4px 0 20px;padding:18px 20px} +.topic-tools .list-filter-search{flex:0 1 520px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px} +.topic-tools .list-filter-search label{grid-column:1/-1} +.topic-tools .list-filter-search input{grid-column:1;grid-row:2} +.article-layout .article-style .topic-tools .list-filter-count{grid-column:2;grid-row:2;margin:0;white-space:nowrap} +.topic-tools__links{flex:1 1 260px;margin:0;padding:0 0 10px;font-size:16px;line-height:1.45;color:var(--soft)} +.topic-tools__links a{color:var(--link);text-decoration:underline;text-underline-offset:3px} +@media(max-width:760px){.topic-tools .list-filter-search{grid-template-columns:1fr}.article-layout .article-style .topic-tools .list-filter-count{grid-column:1;grid-row:3;margin:8px 0 0}.topic-tools__links{padding:0}} +/* /forrt_clusters//: one column of underlined titles, each with its type as plain text. */ +.article-style .cluster-resources{display:block;margin:10px 0 0;padding:0;list-style:none;max-width:none} +.article-style .list-filter~ul.cluster-resources>li{margin:0;padding:7px 0;border:0;font-size:17px;line-height:1.4} +.cluster-resources a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} +.cluster-resources a:hover{color:var(--ink)} +.cluster-resources__type{color:var(--soft);font-size:16px} +/* Wide screens: two columns, so the list does not leave half the screen empty. */ +@media(min-width:1001px){.article-style.cluster-resources-list{max-width:none}.article-style .cluster-resources{columns:2;column-gap:48px;max-width:1080px}.article-style .list-filter~ul.cluster-resources>li{break-inside:avoid}} .tag-find{max-width:520px;margin:20px 0 6px} .tag-find label{display:block;margin:0 0 6px;font:600 17px/1.3 var(--text)} .tag-find input{width:100%;box-sizing:border-box;padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font:400 17px/1.3 var(--text);color:var(--ink)} diff --git a/assets/css/doors/tokens.css b/assets/css/doors/tokens.css index cb6a16586a3..66aaee48519 100644 --- a/assets/css/doors/tokens.css +++ b/assets/css/doors/tokens.css @@ -21,6 +21,11 @@ --jus-bg:#ebe6f4; --com-bg:#f8eadc; --urgent:#b3261e; + /* Cluster colours: one hue per cluster, across the spectrum (owner decision). --clN marks cluster N + (arrows, list markers, the diagram) and meets 4.5:1 on the page, white and its pale --clN-bg, which + tints the cluster's panel. Equal OKLCH lightness, hues 33 degrees apart from blue. */ + --cl1:#1263a6;--cl2:#5853a7;--cl3:#7c4692;--cl4:#933c6d;--cl5:#9d3b3f;--cl6:#934a07;--cl7:#795b01;--cl8:#5a690d;--cl9:#16733c;--cl10:#176f66;--cl11:#196b7e; + --cl1-bg:#e2eefb;--cl2-bg:#eaebfc;--cl3-bg:#f3e9f7;--cl4-bg:#f9e7ef;--cl5-bg:#fbe7e6;--cl6-bg:#f9e9df;--cl7-bg:#f3ecdd;--cl8-bg:#ebefdf;--cl9-bg:#e3f1e6;--cl10-bg:#def2ee;--cl11-bg:#ddf1f7; /* Type */ --display:'Newsreader',Georgia,'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',serif; --text:'Source Sans 3','Source Sans Pro',system-ui,'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif; diff --git a/content/clusters/FORRT_Clusters.webp b/content/clusters/FORRT_Clusters.webp index b31d755adac..b9264c39c76 100644 Binary files a/content/clusters/FORRT_Clusters.webp and b/content/clusters/FORRT_Clusters.webp differ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 4597f46f06b..38573090beb 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -20,11 +20,24 @@

{{ .Title }}

All {{ len .Data.Pages }} teaching resources are in the directory, where you can search and filter them.

Open the resources directory

{{ else if and (eq (.Type | lower) "forrt_clusters") (ne .Kind "taxonomy") }} -

{{ len .Data.Pages }} resources. Search and filter them all in the resources directory.

- {{/* Alphabetical rows that read across, each with its type, rather than a wall of bare links. */}} - + {{/* One toolbar: the search of shortcodes/list_filter.html (same markup; site.js filters the list + items after the h2 that follows it and keeps the count) with the routes to the directory and the + clusters beside it. The directory's cluster filter uses the current clusters (forrt_clusters_new), + not these tags, so there is no pre-filtered link to it. Then linked titles, two columns on wide + screens, each with its type as plain text. */}} +
+ + + +
    + {{ range sort .Data.Pages "Title" }}
  • {{ .Title }}{{ with .Params.material_type }} · {{ delimit . ", " }}{{ end }}
    • {{ end }} +
+
{{ else }} {{ $pager := .Paginate .Data.Pages }}
{{ range $pager.Pages }}{{ partial "doors/list_item" . }}{{ end }}
diff --git a/layouts/clusters/cluster.html b/layouts/clusters/cluster.html index 3c7b18f565b..4f6cbcf03a7 100644 --- a/layouts/clusters/cluster.html +++ b/layouts/clusters/cluster.html @@ -61,7 +61,7 @@

{{ .Params.heading_title |
{{ . }}
{{ end }} - {{ partial "clusters/cluster_section.html" (dict "cluster" $cluster "ci" $ci "colors" $colors) }} + {{ partial "clusters/cluster_section.html" (dict "cluster" $cluster "ci" $ci "colors" $colors "marks" $arrowColors) }} diff --git a/layouts/clusters/single.html b/layouts/clusters/single.html index 6b4a814e6d6..20f49d67def 100644 --- a/layouts/clusters/single.html +++ b/layouts/clusters/single.html @@ -8,7 +8,7 @@

{{ .Params.heading_title | {{ with .Params.subtitle }}

{{ . | markdownify }}

{{ end }} - {{/* CLUSTERS INTRO SECTION */}} + {{/* The diagram and the list of clusters lead; every cluster in full, with the filters, follows. */}}
{{ partial "clusters/intro.html" . }} diff --git a/layouts/partials/clusters/all_clusters.html b/layouts/partials/clusters/all_clusters.html index 1bdc0408a58..1e54fac8920 100644 --- a/layouts/partials/clusters/all_clusters.html +++ b/layouts/partials/clusters/all_clusters.html @@ -13,6 +13,8 @@
+

Every cluster and its references

+ {{ partial "clusters/clusters_controls.html" . }}
@@ -20,7 +22,7 @@
{{ range $ci, $cluster := $data.clusters }} - {{ partial "clusters/cluster_section.html" (dict "cluster" $cluster "ci" $ci "colors" $colors) }} + {{ partial "clusters/cluster_section.html" (dict "cluster" $cluster "ci" $ci "colors" $colors "marks" $arrowColors "link" true) }} {{ end }}
diff --git a/layouts/partials/clusters/card_head.html b/layouts/partials/clusters/card_head.html new file mode 100644 index 00000000000..a5ed87e1ace --- /dev/null +++ b/layouts/partials/clusters/card_head.html @@ -0,0 +1,6 @@ +{{/* A resource card's kind and title: its purpose ("Overview") as a quiet tag, so a list can be scanned by + purpose, and its type ("Paper") in plain text, then the title as a link to the + resource (its DOI). Expects dict: focus, type, title, doi, cls ("fc" for compact cards, "fr" for + recommended ones). The reference button below the card stays the way to the citation. */}} +{{ if or .focus .type }}

{{ with .focus }}{{ partial "clusters/sentence_case.html" . }} {{ end }}{{ with .type }}{{ partial "clusters/sentence_case.html" . }}{{ end }}

{{ end }} +
{{ if .doi }}{{ partial "clusters/rich_text.html" .title }}{{ else }}{{ partial "clusters/rich_text.html" .title }}{{ end }}
diff --git a/layouts/partials/clusters/cluster_section.html b/layouts/partials/clusters/cluster_section.html index 16b907b55a1..0df1c168032 100644 --- a/layouts/partials/clusters/cluster_section.html +++ b/layouts/partials/clusters/cluster_section.html @@ -1,4 +1,5 @@ -{{/* One cluster block (used on /clusters/ and /clusters/cluster-N/). Expects dict: cluster, ci, colors */}} +{{/* One cluster block (used on /clusters/ and /clusters/cluster-N/). Expects dict: cluster, ci, colors, marks; + link true (on /clusters/) makes the heading a link to the cluster's own page. */}} {{ $cluster := .cluster }} {{ $ci := .ci }} {{ $colors := .colors }} @@ -19,11 +20,12 @@ {{ end }} {{ $hasFeatured := and $featuredEnabled $featuredData }} -
+{{ $mark := "var(--soft)" }}{{ with .marks }}{{ $mark = index . (mod $ci (len .)) }}{{ end }} +

{{ (int $cluster.number) }} - {{ $cluster.name }} + {{ if .link }}{{ $cluster.name }}{{ else }}{{ $cluster.name }}{{ end }}

{{ len $cluster.sub_clusters }} sub-clusters · {{ $totalPubs }} references @@ -43,7 +45,7 @@

- {{ len $featuredData }} of {{ len $featuredData }} + {{ len $featuredData }} of {{ len $featuredData }} shown
{{ partial "clusters/featured_cards.html" (dict "resources" $featuredData "cluster_number" (int $cluster.number)) }} @@ -59,7 +61,7 @@

- {{ len $sc.publications }} of {{ len $sc.publications }} + {{ len $sc.publications }} of {{ len $sc.publications }} shown @@ -87,14 +89,10 @@

@@ -147,18 +145,12 @@

diff --git a/layouts/partials/clusters/clusters_controls.html b/layouts/partials/clusters/clusters_controls.html index 673037fa735..0874237e9e8 100644 --- a/layouts/partials/clusters/clusters_controls.html +++ b/layouts/partials/clusters/clusters_controls.html @@ -1,45 +1,58 @@ {{/* Search toolbar + card filters + mobile nav toggle (shared by hub and cluster subpages) */}}
- {{/* Filter bar: search + Focus/Type tags + specificity toggle */}} + {{/* Filter bar: search, then Focus, Type and the specialist toggle. On a phone those three sit in a + closed "Filters" disclosure under a full-width search; from 761 px the disclosure is open and its + summary hidden (the script after it, and featured-resources.js on resize). */}}
-
{{ $tags := hugo.Data.filter_tags }} -
- Focus -
- - {{ with $tags }}{{ range .focus }} - - {{ end }}{{ end }} +
+ Filters +
+
+ Focus +
+ + {{ with $tags }}{{ range .focus }} + + {{ end }}{{ end }} +
+
+
+ Type +
+ + {{ with $tags }}{{ range .type }} + + {{ end }}{{ end }} +
+
+
+ + Resources on narrow, specialist topics stay hidden until this is ticked. +
-
-
- Type -
- - {{ with $tags }}{{ range .type }} - - {{ end }}{{ end }} -
-
-
- -
+ +
- {{/* Inline search results panel (kept for cluster/subcluster name search) */}} -
- -
+ {{/* What the filters leave: a count while any is set, or a short message when nothing matches. + The message is the live region; its link and Clear button stay outside it. The search filters the + resources in place, so the old drop-down of search hits (clusters-page.js, still used on + /disciplines/) is not on these pages: it counted differently and announced a second result. */}} +
+

+ +
@@ -89,18 +85,12 @@ data-specificity="{{ cond (eq .specificity "Narrow") "narrow" "broad" }}" {{ if eq .specificity "Narrow" }}style="display:none;"{{ end }}>
-
-
- {{ if .focus }}{{ .focus }}{{ end }} - {{ if .resource_type }}{{ .resource_type }}{{ end }} -
-
{{ partial "clusters/rich_text.html" .title }}
-
+ {{ partial "clusters/card_head.html" (dict "focus" .focus "type" .resource_type "title" .title "doi" .doi "cls" "fc") }} {{ if .summary }}
{{ .summary }}
{{ end }}
- diff --git a/layouts/partials/clusters/featured_global.html b/layouts/partials/clusters/featured_global.html index 54930fe3e3c..3eeafad6103 100644 --- a/layouts/partials/clusters/featured_global.html +++ b/layouts/partials/clusters/featured_global.html @@ -4,7 +4,7 @@ {{/* Reference popup */}}
diff --git a/layouts/partials/clusters/intro.html b/layouts/partials/clusters/intro.html index c6f6d9c2d32..0d9dc59dcdc 100644 --- a/layouts/partials/clusters/intro.html +++ b/layouts/partials/clusters/intro.html @@ -1,7 +1,12 @@ -{{/* intro.html - Intro text, then the clusters map (drawn from data/clusters_v4.json) */}} +{{/* intro.html - The way into the clusters on /clusters/: the diagram (drawn from data/clusters_v4.json), + whose clusters link to their own pages, then the same clusters as a linked list, which is the route + for keyboards, screen readers and phones, then the introduction. */}} +{{ $palette := partial "clusters/colors.html" }}
+ {{ partial "clusters/map.html" (dict "link_mode" "subpath") }} + {{ partial "clusters/overview_list.html" (dict "data" hugo.Data.clusters_v4 "arrowColors" $palette.arrowColors) }} +

About the clusters

Teaching Open and Reproducible Science shouldn't require educators to spend months sifting through a decade of literature. FORRT simplifies this process by providing a curated, expert-backed framework. Developed by over 100 scholars, our taxonomy organizes open scholarship into {{ with hugo.Data.clusters_v4 }}{{ len .clusters }}{{ else }}11{{ end }} distinct clusters, offering a clear pathway for integrating these tenets into your teaching and mentoring, regardless of your field or level of expertise.

- {{ partial "clusters/map.html" (dict "link_mode" "anchor") }}
diff --git a/layouts/partials/clusters/map.html b/layouts/partials/clusters/map.html index 97150e890b5..a5f10b113ca 100644 --- a/layouts/partials/clusters/map.html +++ b/layouts/partials/clusters/map.html @@ -21,7 +21,8 @@ {{/* Sizes, in drawing units (one unit is one CSS pixel at full size). */}} {{ $fs := 17.0 }}{{ $lh := 21.0 }}{{ $padX := 14.0 }}{{ $padY := 8.0 }}{{ $pillMax := 272.0 }}{{ $pillGap := 7.0 }} {{ $colGap := 12.0 }}{{ $colMax := 520.0 }}{{ $stackGap := 26.0 }} -{{ $lfs := 20.0 }}{{ $llh := 24.0 }}{{ $lpadX := 16.0 }}{{ $lpadY := 11.0 }}{{ $labelMin := 230.0 }}{{ $labelMax := 300.0 }}{{ $labelGap := 14.0 }} +{{/* Cluster names at 32 units, so that at 1440 px, where the drawing shows at about half size, they read at 15 px or more. */}} +{{ $lfs := 32.0 }}{{ $llh := 37.0 }}{{ $lpadX := 16.0 }}{{ $lpadY := 12.0 }}{{ $labelMin := 300.0 }}{{ $labelMax := 440.0 }}{{ $labelGap := 14.0 }} {{ $Ro := 165.0 }}{{ $Ri := 104.0 }}{{ $disc := 94.0 }}{{ $dMin := 26.0 }}{{ $dMax := 205.0 }}{{ $margin := 24.0 }} {{/* 1. Each cluster: its pills, their columns and its label. */}} @@ -31,15 +32,13 @@ {{ $base := cond (eq $.link_mode "anchor") "" ((printf "/clusters/cluster-%d/" $num) | relURL) }} {{ $pills := slice }}{{ $natW := 0.0 }}{{ $total := 0.0 }} {{ range $c.sub_clusters }} - {{/* Same slug as cluster_section.html and sidebar_nav.html, from the full name. */}} - {{ $slug := .name | lower | replaceRE "[^a-z0-9]+" "-" | replaceRE "^-+|-+$" "" }} {{/* Shown text: the name without a closing parenthetical aside or full stop, in at most 3 lines. */}} {{ $short := .name | strings.TrimSpace | replaceRE `\.$` "" }} {{ with replaceRE `\s*\([^()]*\)$` "" $short }}{{ $short = . }}{{ end }} {{ $wrap := partial "clusters/map_wrap.html" (dict "text" $short "width" (sub $pillMax (mul 2 $padX)) "size" $fs "weight" "400" "max_lines" 3) }} {{ $h := add (mul 2 $padY) (mul (len $wrap.lines) $lh) }} {{ $natW = math.Max $natW (add $wrap.widest (mul 2 $padX)) }} - {{ $pills = $pills | append (dict "lines" $wrap.lines "h" $h "title" .name "href" (printf "%s#c%d-%s" $base $num $slug)) }} + {{ $pills = $pills | append (dict "lines" $wrap.lines "h" $h "title" .name "href" (partial "clusters/sub_href.html" (dict "base" $base "num" $num "name" .name))) }} {{ $total = add $total $h $pillGap }} {{ end }} {{ $colW := math.Ceil (math.Min $pillMax (math.Max $natW 150.0)) }} @@ -138,22 +137,26 @@ {{ $hub := printf `` $cx $cy $disc ("img/FORRT%20Badge%20-%20Color%20-%20v4.webp" | relURL) (sub $cx 62) (sub $cy 65) | safeHTML }}
- {{/* The drawing is for pointers and eyes: it is hidden from assistive technology and none of its - links is a tab stop. The list below carries the same links for everyone. */}} + {{/* The drawing is the way into the clusters on a wide screen. Each cluster name is a link and a tab stop, + named "Cluster N: name", in cluster order; pointing at a cluster or focusing its name lights it up and + describes it in the line below the drawing. The ring segments repeat those links and the sub-cluster + pills are in the list of clusters after the figure, so both are out of the tab order and hidden from assistive technology. + Below 1256 px, where the names would be under 15 px, the hub and the linked list of clusters after the + figure (clusters/overview_list.html) take its place. */}}
-
- {{/* Phones get the hub and the cluster labels; the pills are in the list and the full-size view. */}} + {{/* Phones get the hub and the cluster labels; the sub-clusters are in the list of clusters and the full-size view. */}}
-
    - {{ range sort $laid "i" }} -
  1. {{ .name }} {{ len .pills }} sub-clusters
    2. - {{ end }} -
+
+ {{/* The cluster pointed at or focused: its number, name, first sentence and counts, copied from the list + of clusters after the figure (so it repeats it, and is hidden from assistive technology). It sticks to + the foot of the window while the drawing runs below it. */}} +
-
- The {{ $n }} clusters and their sub-clusters as a list -
    - {{ range sort $laid "i" }} -
  1. {{ .name }} - -
    2. - {{ end }} -
-