diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 29a7f0e4b6e..c9b12c94e0f 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -623,6 +623,103 @@ color: #1264ab; } +/* ---- Lesson plans (data/lesson_plans.json) ---- + One green marks lesson-plan sets everywhere: the dot on sub-cluster headers, + cluster stats and sidebar entries, the filter chip, and the teaching-materials strip. */ +$lp-green: #2f6b4f; + +.lp-dot { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + background: $lp-green; + margin-left: 0.35rem; + vertical-align: 0.05em; + flex-shrink: 0; +} +.cluster-stats .lp-dot { margin-left: 0; width: 0.45rem; height: 0.45rem; } +/* Sidebar sub-cluster: dot sits beside the reference count so it never wraps onto its own line */ +.cluster-nav-subs .badge .lp-dot { margin: 0 0.35rem 0 0; vertical-align: 0; } + +.lp-strip { + background: #fff; + border: 1px solid rgba(0,0,0,0.08); + border-left: 4px solid $lp-green; + border-radius: 4px; + padding: 0.45rem 0.7rem 0.4rem; + margin: 0.15rem 0 0.55rem; +} +/* Set topic, shown only when it differs from the sub-cluster it sits under (data: "heading") */ +.lp-strip__heading { text-transform: none; letter-spacing: 0; } +.lp-strip__label { + display: block; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + color: $lp-green; + margin-bottom: 0.25rem; +} +.lp-strip__chips { + display: flex; + flex-wrap: wrap; + gap: 0.3rem; + margin-bottom: 0.3rem; +} +.lp-chip { + font-size: 0.7rem; + font-weight: 600; + color: #333; + background: rgba($lp-green,0.07); + border: 1px solid rgba($lp-green,0.2); + border-radius: 3px; + padding: 0.12rem 0.45rem; + max-width: 100%; + overflow-wrap: anywhere; +} +.lp-chip__formats { + font-weight: 400; + color: #777; +} +.lp-chip a { + color: $lp-green; + font-weight: 600; + text-decoration: underline; + text-decoration-color: rgba($lp-green,0.35); + text-underline-offset: 2px; +} +.lp-chip a:hover { color: #1f4a36; text-decoration-color: currentColor; } +.lp-strip__meta { + font-size: 0.62rem; + line-height: 1.45; + color: #777; + margin: 0; +} +.lp-strip__meta a { color: #555; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.25); } +.lp-strip__meta a:hover { color: $lp-green; } + +/* Lesson-plan filter: a .fr-specificity-toggle checkbox whose label includes the dot */ +.lp-filter-toggle .lp-dot { margin: 0 0.2rem 0 0; } + +/* Lesson-plan filter on (.lp-filter-on set by featured-resources.js): hide everything without a set */ +.lp-filter-on .cluster-section:not([data-lp]), +.lp-filter-on .acc-section:not([data-lp]), +.lp-filter-on .cluster-nav-group:not([data-lp]), +.lp-filter-on .cluster-nav-subs .nav-item:not([data-lp]) { + display: none; +} +/* Remaining sub-clusters lose their visible neighbour, so drop the divider on the first one shown */ +.lp-filter-on .acc-section[data-lp] { border-top: 0; } +.lp-filter-on .acc-section[data-lp] ~ .acc-section[data-lp] { border-top: 1px solid rgba(0,0,0,0.06); } +.lp-filter-empty { display: none; } +.lp-filter-on .lp-filter-empty { + display: block; + font-size: 0.8rem; + color: #666; + padding: 1rem 0; +} + /* ---- Publication list ---- */ .publication-list { padding-left: 1.5rem; @@ -2175,7 +2272,7 @@ h1.clusters-site-heading.clusters-hub-page__title { display: flex; flex-wrap: wrap; gap: 0.75rem; - align-items: flex-start; + align-items: center; margin-bottom: 0.75rem; padding: 0.65rem 0.75rem; background: rgba(255,255,255,0.5); @@ -2228,6 +2325,7 @@ h1.clusters-site-heading.clusters-hub-page__title { display: flex; align-items: center; gap: 0.3rem; + margin: 0; /* Bootstrap gives