diff --git a/client/public/assets/curriculum/cur-landing-top.svg b/client/public/assets/curriculum/cur-landing-top.svg
new file mode 100644
index 000000000000..95c1b01fd2ec
--- /dev/null
+++ b/client/public/assets/curriculum/cur-landing-top.svg
@@ -0,0 +1,166 @@
+
diff --git a/client/src/curriculum/index.tsx b/client/src/curriculum/index.tsx
index dc907b1c7ad4..2083ca1a3651 100644
--- a/client/src/curriculum/index.tsx
+++ b/client/src/curriculum/index.tsx
@@ -1,6 +1,7 @@
import useSWR from "swr";
import { Route, Routes } from "react-router-dom";
+import { ReactComponent as LandingSVG } from "../../public/assets/curriculum/cur-landing-top.svg";
import { HydrationData } from "../../../libs/types/hydration";
import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum";
import { HTTPError, RenderDocumentBody } from "../document";
@@ -13,6 +14,8 @@ import { CurriculumModuleOverview } from "./overview";
import { CurriculumModule } from "./module";
import "./index.scss";
+import "./no-side.scss";
+
import { TopNavigation } from "../ui/organisms/top-navigation";
import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
import { topic2css, useDocTitle } from "./utils";
@@ -25,7 +28,7 @@ export function Curriculum(appProps: HydrationData) {
path="/:module"
element={}
/>
- } />
+ } />
);
}
@@ -66,29 +69,22 @@ export function CurriculumLanding(props: HydrationData) {
-
{PLACEMENT_ENABLED &&
}
- {doc.sidebar && (
-
- )}
+
{doc?.title}
{doc?.topic && {doc.topic}
}
- Modules:
+ Modules
{doc.modules && }
diff --git a/client/src/curriculum/module.scss b/client/src/curriculum/module.scss
index dd6f08571543..ce5f911bfa0c 100644
--- a/client/src/curriculum/module.scss
+++ b/client/src/curriculum/module.scss
@@ -69,6 +69,7 @@
justify-content: flex-start;
.topic-icon {
+ --background-primary: var(--cur-bg-color-topic);
align-self: flex-start;
grid-area: icon;
height: 4rem;
diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
index 2fecbd64adfa..e00efbbc237c 100644
--- a/client/src/curriculum/modules-list.scss
+++ b/client/src/curriculum/modules-list.scss
@@ -1,3 +1,5 @@
+@use "../ui/vars" as *;
+
.curriculum-content-container {
.curriculum-content {
.modules {
@@ -10,65 +12,148 @@
h2 {
width: 100%;
}
+ }
- ol {
- display: flex;
- flex-wrap: wrap;
+ ol.modules-list-list {
+ display: grid;
+ grid-template-areas:
+ "a b c spacer"
+ "h h h h"
+ "x x x x";
+ grid-template-columns: max-content max-content max-content auto;
+ margin: 0;
+ padding: 0;
- .module-list-item {
- border: 0;
- border-radius: var(--elem-radius);
- box-shadow: var(--shadow-02);
- display: flex;
- flex-direction: column;
- margin: 0.5rem;
- max-width: 100%;
- min-width: 10rem;
- width: 30%;
- height: 100%;
-
- > header {
- a {
- align-items: center;
- background-color: var(--cur-bg-color-topic);
- display: flex;
- flex-direction: column;
- height: 12rem;
- padding: 1rem;
-
- .topic-icon {
- height: 5rem;
- width: 5rem;
- }
-
- > span {
- color: var(--text-primary);
- font-weight: var(--font-body-strong-weight);
- margin: auto;
- text-align: center;
- }
- }
+ hr {
+ border: none;
+ border-top: 1px solid var(--text-primary);
+ grid-area: h;
+ margin: 0 0 1.5rem;
+ width: 100%;
+ }
+
+ li {
+ display: contents;
+
+ > input:checked + label {
+ text-decoration-color: var(--cur-color);
+ text-decoration-line: underline;
+ text-decoration-thickness: 0.25rem;
+ text-underline-offset: 0.4rem;
+ }
+
+ > label {
+ color: var(--text-secondary);
+ cursor: pointer;
+ }
+
+ &:nth-child(2) {
+ > label,
+ > input {
+ grid-area: a;
}
+ }
- > section {
+ &:nth-child(3) {
+ > label,
+ > input {
+ grid-area: b;
+ margin-left: 2rem;
+ }
+ }
+
+ &:nth-child(4) {
+ > label,
+ > input {
+ grid-area: c;
+ margin-left: 2rem;
+ }
+ }
+
+ > ol {
+ grid-area: x;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+
+ ol.modules-list {
+ container-name: module-list;
+ container-type: inline-size;
+ display: grid;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin: 0;
+ padding: 0;
+ @media screen and (min-width: $screen-sm) {
+ grid-template-columns: 1fr;
+ }
+ @media screen and (min-width: $screen-md) {
+ grid-template-columns: 1fr 1fr;
+ }
+ @media screen and (min-width: $screen-xl) {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ @container module-list (width >= 25rem) {
+ grid-template-columns: 1fr 1fr;
+ }
+ @container module-list (width >= 38rem) {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ .module-list-item {
+ border: 0;
+ border-radius: var(--elem-radius);
+ box-shadow: var(--shadow-02);
+ display: flex;
+ flex-direction: column;
+ justify-self: center;
+ max-width: 20rem;
+ width: 100%;
+
+ > header {
+ a {
align-items: center;
+ background-color: var(--cur-bg-color-topic);
display: flex;
flex-direction: column;
- font-size: var(--type-smaller-font-size);
- height: 11rem;
- justify-content: space-between;
- padding: 0.5rem 1rem;
+ height: 12rem;
+ padding: 1rem 2rem;
- p {
- margin: 0;
+ .topic-icon {
+ height: 5rem;
+ width: 5rem;
}
- p:last-child {
- color: var(--cur-color-topic);
+ > span {
+ color: var(--text-primary);
+ font-weight: var(--font-body-strong-weight);
+ margin: auto;
text-align: center;
}
}
}
+
+ > section {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ font-size: var(--type-smaller-font-size);
+ height: 11rem;
+ justify-content: space-between;
+ padding: 1rem 1.5rem;
+
+ p {
+ margin: 0;
+ }
+
+ p:last-child {
+ color: var(--cur-color-topic);
+ text-align: center;
+ }
+ }
}
}
}
diff --git a/client/src/curriculum/modules-list.tsx b/client/src/curriculum/modules-list.tsx
index 5d1ad9ee6521..716a1f564705 100644
--- a/client/src/curriculum/modules-list.tsx
+++ b/client/src/curriculum/modules-list.tsx
@@ -3,15 +3,25 @@ import { TopicIcon } from "./topic-icon";
import { topic2css } from "./utils";
import "./modules-list.scss";
+import { useState } from "react";
export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) {
+ const [tab, setTab] = useState(1);
return (
-
+
+
{modules.map((c, i) => {
return (
-
+ setTab(i)}
+ />
-
{c.children && }
);
@@ -22,7 +32,7 @@ export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) {
export function ModulesList({ modules }: { modules: ModuleIndexEntry[] }) {
return (
-
+
{modules.map((c, j) => {
return (
- header > h1 {
+ margin-bottom: 1rem;
+
+ > span {
+ color: var(--cur-color);
+ }
+ }
+
+ .module-contents {
+ > h2 {
+ margin-bottom: 2rem;
+ margin-top: 4rem;
+ }
+ }
+}
diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
index 6796ada2dfce..5833aec14535 100644
--- a/client/src/curriculum/overview.tsx
+++ b/client/src/curriculum/overview.tsx
@@ -9,6 +9,7 @@ import { TopNavigation } from "../ui/organisms/top-navigation";
import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
import { topic2css, useDocTitle } from "./utils";
+import "./no-side.scss";
import "./overview.scss";
export function CurriculumModuleOverview(
@@ -40,6 +41,7 @@ export function CurriculumModuleOverview(
);
const { doc }: { doc?: CurriculumDoc } = data || props || {};
useDocTitle(doc);
+ const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
return (
<>
{doc && (
@@ -49,16 +51,21 @@ export function CurriculumModuleOverview(
-
+
-
{doc?.title}
+
+ {coloredTitle} {restTitle.join(" ")}
+
{doc?.topic && {doc.topic}
}
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index 7743b797cc43..2ff440677565 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -214,7 +214,7 @@
--cur-bg-color-topic-tooling: #d5e4f5;
--cur-bg-color-topic-practices: #f5dfd5;
--cur-category-color: #e3642a;
- --cur-color: #fcefe2;
+ --cur-color: #d47d55;
--cur-color-topic-standards: #187b7f;
--cur-color-topic-styling: #187f22;
--cur-color-topic-scripting: #7f6f16;
@@ -434,7 +434,7 @@
--cur-color-topic-scripting: #fff8d6;
--cur-color-topic-tooling: #d5e4f5;
--cur-color-topic-practices: #f5dfd5;
- --cur-bg-color: #fcefe2;
+ --cur-bg-color: #d47d55;
--cur-bg-color-topic-standards: #187b7f;
--cur-bg-color-topic-styling: #187f22;
--cur-bg-color-topic-scripting: #7f6f16;
diff --git a/client/src/ui/molecules/breadcrumbs/index.tsx b/client/src/ui/molecules/breadcrumbs/index.tsx
index 313e62b332f8..36444621b4e4 100644
--- a/client/src/ui/molecules/breadcrumbs/index.tsx
+++ b/client/src/ui/molecules/breadcrumbs/index.tsx
@@ -25,8 +25,8 @@ export const Breadcrumbs = ({ parents }: { parents: DocParent[] }) => {
return (
-
- {
}
>
{parent.title}
-
+
);