diff --git a/src/docs/canvas.webc b/src/docs/canvas.webc deleted file mode 100644 index 0435fc0..0000000 --- a/src/docs/canvas.webc +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: docs.webc -title: Canvas -description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information. -tags: ['docs', 'Four Cs'] -icon: canvas ---- diff --git a/src/docs/canvas/canvas.webp b/src/docs/canvas/canvas.webp new file mode 100644 index 0000000..492f529 Binary files /dev/null and b/src/docs/canvas/canvas.webp differ diff --git a/src/docs/canvas/index.webc b/src/docs/canvas/index.webc new file mode 100644 index 0000000..c4a6b3d --- /dev/null +++ b/src/docs/canvas/index.webc @@ -0,0 +1,36 @@ +--- +layout: docs.webc +title: Canvas +description: A canvas represents a part of the page that content and controls sit within, they can provide padding and backgrounds for their content area. +tags: ['docs', 'Four Cs'] +icon: canvas +previous: /docs/controls/ +next: /docs/composition/ +--- + + \ No newline at end of file diff --git a/src/docs/composition.webc b/src/docs/composition.webc deleted file mode 100644 index d2b51d2..0000000 --- a/src/docs/composition.webc +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: docs.webc -title: Composition -description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information. -tags: ['docs', 'Four Cs'] -icon: composition ---- diff --git a/src/docs/composition/composition.webp b/src/docs/composition/composition.webp new file mode 100644 index 0000000..17ebe6f Binary files /dev/null and b/src/docs/composition/composition.webp differ diff --git a/src/docs/composition/index.webc b/src/docs/composition/index.webc new file mode 100644 index 0000000..3b4c392 --- /dev/null +++ b/src/docs/composition/index.webc @@ -0,0 +1,34 @@ +--- +layout: docs.webc +title: Composition +description: Compositions are an invisible element of the page that provides layout. +tags: ['docs', 'Four Cs'] +icon: composition +previous: /docs/canvas/ +next: /docs/the-realities/ +--- + + \ No newline at end of file diff --git a/src/docs/content.webc b/src/docs/content.webc deleted file mode 100644 index 3a4feb6..0000000 --- a/src/docs/content.webc +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: docs.webc -title: Content -description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information. -tags: ['docs', 'Four Cs'] -icon: content ---- diff --git a/src/docs/content/content.webp b/src/docs/content/content.webp new file mode 100644 index 0000000..43f2aec Binary files /dev/null and b/src/docs/content/content.webp differ diff --git a/src/docs/content/index.webc b/src/docs/content/index.webc new file mode 100644 index 0000000..d83cc8a --- /dev/null +++ b/src/docs/content/index.webc @@ -0,0 +1,35 @@ +--- +layout: docs.webc +title: Content +description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information. +tags: ['docs', 'Four Cs'] +icon: content +previous: /docs/the-solution/ +next: /docs/controls/ +--- + + diff --git a/src/docs/controls.webc b/src/docs/controls.webc deleted file mode 100644 index 25a61b1..0000000 --- a/src/docs/controls.webc +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: docs.webc -title: Controls -description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information. -tags: ['docs', 'Four Cs'] -icon: controls ---- diff --git a/src/docs/controls/controls.webp b/src/docs/controls/controls.webp new file mode 100644 index 0000000..b6d4871 Binary files /dev/null and b/src/docs/controls/controls.webp differ diff --git a/src/docs/controls/index.webc b/src/docs/controls/index.webc new file mode 100644 index 0000000..af6e3cd --- /dev/null +++ b/src/docs/controls/index.webc @@ -0,0 +1,34 @@ +--- +layout: docs.webc +title: Controls +description: Controls are interactive elements of the page. +tags: ['docs', 'Four Cs'] +icon: controls +previous: /docs/content/ +next: /docs/canvas/ +--- + + \ No newline at end of file diff --git a/src/docs/the-problem/index.webc b/src/docs/the-problem/index.webc index f33d270..0d60df3 100644 --- a/src/docs/the-problem/index.webc +++ b/src/docs/the-problem/index.webc @@ -46,7 +46,7 @@ A little while later a new request comes in for a slightly different hero &ndash alt="The page hero with a yellow background" /> -Easy, you add a prop to the hero to control the background colour and another one to pass the new button variant to the CTA. +Easy, you add a prop to the hero to control the background colour and another one to pass the new button variant to the button. It’s a couple more props, but it’s not too bad. @@ -54,9 +54,9 @@ It’s a couple more props, but it’s not too bad. ``` @@ -67,8 +67,8 @@ Over the months, more requirements come in and more props get added. Different t - Eyebrow text is added above the page title. - A second smaller paragraph gets added below the intro (this one has links in it too). -- The Marketing team wanted a way to feature multiple CTAs of different types (sometimes they are buttons, sometimes links). -- The SEO team decide the eyebrow needs to be the `h1` and the “page title” text actually needs to be a `p` for maximum search power. +- The marketing team wanted a way to feature multiple buttons of different types (sometimes they are buttons, sometimes links). +- The SEO team decide the eyebrow needs to be the `h1` and the “page title” text actually needs to be a `p` for maximum search power.

Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod @@ -103,7 +103,7 @@ Over the months, more requirements come in and more props get added. Different t This component is getting out of hand. -It’s riddled with conditional statements and testing the different combinations of props gets increasingly awkward. We would have done better just writing this out with HTML! +It’s riddled with conditional statements and testing the different combinations of props gets increasingly awkward. We would have done better just writing this out with HTML! There must be a better way! diff --git a/src/docs/the-solution/index.webc b/src/docs/the-solution.webc similarity index 100% rename from src/docs/the-solution/index.webc rename to src/docs/the-solution.webc diff --git a/src/layouts/docs.webc b/src/layouts/docs.webc index 0b0e10b..dbba4f5 100644 --- a/src/layouts/docs.webc +++ b/src/layouts/docs.webc @@ -37,7 +37,7 @@ layout: default.webc -

+
diff --git a/src/styles/util.css b/src/styles/util.css index af497e0..3192998 100644 --- a/src/styles/util.css +++ b/src/styles/util.css @@ -25,4 +25,16 @@ .text-title-case { text-transform: capitalize; +} + +.longform { + img, pre[class*=language-], .cp_embed_wrapper { + margin-block: var(--diamond-spacing-lg); + } + + img { + display: block; + width: 100%; + height: auto; + } } \ No newline at end of file