From 39dfc1559f9d7cdae063aa72ca06ee7b44a9fac2 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Mon, 2 Mar 2020 13:49:51 +0000
Subject: [PATCH 01/23] Move docs folder under site

---
 {docs => site}/404.html                       |  0
 {docs => site}/500.html                       |  0
 {docs => site}/_layouts/default.html          |  0
 {docs => site}/_layouts/examples.html         |  0
 {docs => site/docs}/base/code.md              |  0
 {docs => site/docs}/base/forms.md             |  0
 {docs => site/docs}/base/reset.md             |  0
 {docs => site/docs}/base/tables.md            |  0
 {docs => site/docs}/base/typography.md        |  0
 {docs => site/docs}/building-vanilla.md       |  0
 {docs => site/docs}/component-status.md       |  0
 {docs => site/docs}/customising-vanilla.md    |  0
 {docs => site/docs}/examples/base/abbr.html   |  0
 .../docs}/examples/base/blockquotes.html      |  0
 {docs => site/docs}/examples/base/button.html |  0
 {docs => site/docs}/examples/base/code.html   |  0
 .../docs}/examples/base/details.html          |  0
 .../docs}/examples/base/font-weights.html     |  0
 .../base/forms/aligned-checkboxes.html        |  0
 .../examples/base/forms/aligned-radio.html    |  0
 .../docs}/examples/base/forms/checkboxes.html |  0
 .../examples/base/forms/disabled-input.html   |  0
 .../docs}/examples/base/forms/fieldset.html   |  0
 .../docs}/examples/base/forms/form.html       |  0
 .../docs}/examples/base/forms/input.html      |  0
 .../docs}/examples/base/forms/labels.html     |  0
 .../examples/base/forms/radio-buttons.html    |  0
 .../docs}/examples/base/forms/range.html      |  0
 .../examples/base/forms/select-multiple.html  |  0
 .../docs}/examples/base/forms/selects.html    |  0
 .../docs}/examples/base/forms/textarea.html   |  0
 .../docs}/examples/base/headings.html         |  0
 .../docs}/examples/base/hr-dark.html          |  0
 {docs => site/docs}/examples/base/hr.html     |  0
 {docs => site/docs}/examples/base/links.html  |  0
 .../examples/base/lists/definition-list.html  |  0
 .../examples/base/lists/ordered-list.html     |  0
 .../examples/base/lists/unordered-list.html   |  0
 {docs => site/docs}/examples/base/small.html  |  0
 {docs => site/docs}/examples/base/strong.html |  0
 .../docs}/examples/base/sub-headings.html     |  0
 {docs => site/docs}/examples/base/sub.html    |  0
 {docs => site/docs}/examples/base/sup.html    |  0
 {docs => site/docs}/examples/base/table.html  |  0
 {docs => site/docs}/examples/index.html       |  0
 .../docs}/examples/patterns/accordion.html    |  0
 .../examples/patterns/article-pagination.html |  0
 .../docs}/examples/patterns/breadcrumbs.html  |  0
 .../docs}/examples/patterns/buttons/base.html |  0
 .../examples/patterns/buttons/brand.html      |  0
 .../examples/patterns/buttons/dense.html      |  0
 .../docs}/examples/patterns/buttons/icon.html |  0
 .../examples/patterns/buttons/inline.html     |  0
 .../examples/patterns/buttons/negative.html   |  0
 .../examples/patterns/buttons/neutral.html    |  0
 .../examples/patterns/buttons/positive.html   |  0
 .../docs}/examples/patterns/card/default.html |  0
 .../docs}/examples/patterns/card/header.html  |  0
 .../examples/patterns/card/highlighted.html   |  0
 .../docs}/examples/patterns/card/overlay.html |  0
 .../examples/patterns/code-copyable.html      |  0
 .../examples/patterns/code-numbered.html      |  0
 .../patterns/contextual-menu/_script.js       |  0
 .../patterns/contextual-menu/dark.html        |  0
 .../patterns/contextual-menu/default.html     |  0
 .../contextual-menu/with-indicator.html       |  0
 .../docs}/examples/patterns/forms/dense.html  |  0
 .../patterns/forms/form-help-text.html        |  0
 .../examples/patterns/forms/form-inline.html  |  0
 .../examples/patterns/forms/form-stacked.html |  0
 .../patterns/forms/form-validation.html       |  0
 .../patterns/forms/forms-required.html        |  0
 .../examples/patterns/grid/bordered.html      |  0
 .../docs}/examples/patterns/grid/default.html |  0
 .../examples/patterns/grid/empty-columns.html |  0
 .../grid/incorrect-empty-columns.html         |  0
 .../examples/patterns/grid/nested-medium.html |  0
 .../examples/patterns/grid/nested-small.html  |  0
 .../docs}/examples/patterns/grid/nested.html  |  0
 .../docs}/examples/patterns/grid/offsets.html |  0
 .../heading-icon/heading-icon-small.html      |  0
 .../heading-icon/heading-icon-stacked.html    |  0
 .../patterns/heading-icon/heading-icon.html   |  0
 .../examples/patterns/headings/default.html   |  0
 .../examples/patterns/headings/mixed.html     |  0
 .../examples/patterns/headings/muted.html     |  0
 .../examples/patterns/icons/icons-dark.html   |  0
 .../examples/patterns/icons/icons-light.html  |  0
 .../examples/patterns/icons/icons-social.html |  0
 .../examples/patterns/image/bordered.html     |  0
 .../examples/patterns/image/shadowed.html     |  0
 .../examples/patterns/inline-images.html      |  0
 .../examples/patterns/labels/deprecated.html  |  0
 .../examples/patterns/labels/in-progress.html |  0
 .../docs}/examples/patterns/labels/new.html   |  0
 .../examples/patterns/labels/updated.html     |  0
 .../examples/patterns/labels/validated.html   |  0
 .../patterns/links/links-back-to-top.html     |  0
 .../patterns/links/links-external.html        |  0
 .../patterns/links/links-inverted.html        |  0
 .../examples/patterns/links/links-soft.html   |  0
 .../docs}/examples/patterns/list-tree.html    |  0
 .../examples/patterns/lists/divider.html      |  0
 .../docs}/examples/patterns/lists/list.html   |  0
 .../patterns/lists/lists-dividers-ticked.html |  0
 .../patterns/lists/lists-dividers.html        |  0
 .../examples/patterns/lists/lists-inline.html |  0
 .../patterns/lists/lists-mid-dot.html         |  0
 .../examples/patterns/lists/lists-split.html  |  0
 .../lists/lists-stepped-detailed.html         |  0
 .../patterns/lists/lists-stepped.html         |  0
 .../examples/patterns/lists/lists-ticked.html |  0
 .../docs}/examples/patterns/matrix.html       |  0
 .../media-object/media-object-circ-img.html   |  0
 .../media-object/media-object-large.html      |  0
 .../patterns/media-object/media-object.html   |  0
 .../docs}/examples/patterns/modal.html        |  0
 .../examples/patterns/navigation/_script.js   |  0
 .../patterns/navigation/default-dark.html     |  0
 .../examples/patterns/navigation/default.html |  0
 .../patterns/navigation/deprecated-dark.html  |  0
 .../patterns/navigation/deprecated.html       |  0
 .../patterns/navigation/full-width.html       |  0
 .../patterns/navigation/subnav-dark.html      |  0
 .../examples/patterns/navigation/subnav.html  |  0
 .../patterns/notifications/action.html        |  0
 .../patterns/notifications/caution.html       |  0
 .../patterns/notifications/information.html   |  0
 .../patterns/notifications/negative.html      |  0
 .../patterns/notifications/notifications.html |  0
 .../patterns/notifications/positive.html      |  0
 .../pagination/pagination-disabled.html       |  0
 .../pagination/pagination-truncated.html      |  0
 .../patterns/pagination/pagination.html       |  0
 .../patterns/pull-quotes/default-image.html   |  0
 .../patterns/pull-quotes/default.html         |  0
 .../examples/patterns/pull-quotes/large.html  |  0
 .../examples/patterns/pull-quotes/small.html  |  0
 .../patterns/search-box/default-dark.html     |  0
 .../examples/patterns/search-box/default.html |  0
 .../patterns/search-box/navigation-dark.html  |  0
 .../patterns/search-box/navigation.html       |  0
 .../patterns/slider/slider-input.html         |  0
 .../examples/patterns/strips/accent.html      |  0
 .../docs}/examples/patterns/strips/deep.html  |  0
 .../docs}/examples/patterns/strips/image.html |  0
 .../examples/patterns/strips/is-bordered.html |  0
 .../examples/patterns/strips/shallow.html     |  0
 .../examples/patterns/strips/strips-dark.html |  0
 .../patterns/strips/strips-light.html         |  0
 .../docs}/examples/patterns/switch.html       |  0
 .../examples/patterns/table-of-contents.html  |  0
 .../patterns/tables/table-expanding.html      |  0
 .../patterns/tables/table-mobile-card.html    |  0
 .../patterns/tables/table-sortable.html       |  0
 .../docs}/examples/patterns/tabs.html         |  0
 .../docs}/examples/patterns/tooltips.html     |  0
 {docs => site/docs}/examples/standalone.html  |  0
 .../examples/templates/external-links.html    |  0
 .../docs}/examples/templates/maas-layout.html |  0
 .../templates/tick-element-comparison.html    |  0
 .../templates/typographic-spacing.html        |  0
 .../examples/templates/vertical-spacing.html  |  0
 .../docs}/examples/utilities/align.html       |  0
 .../examples/utilities/animations/spin.html   |  0
 .../examples/utilities/baseline-grid.html     |  0
 .../docs}/examples/utilities/clearfix.html    |  0
 .../examples/utilities/embedded-media.html    |  0
 .../examples/utilities/equal-height.html      |  0
 .../utilities/fixed-width-container.html      |  0
 .../examples/utilities/floats/default.html    |  0
 .../utilities/floats/large-screens.html       |  0
 .../utilities/floats/medium-screens.html      |  0
 .../utilities/floats/small-screens.html       |  0
 .../examples/utilities/font-metrics.html      |  0
 .../docs}/examples/utilities/hide.html        |  0
 .../utilities/image-position/bottom-left.html |  0
 .../image-position/bottom-right.html          |  0
 .../utilities/image-position/bottom.html      |  0
 .../utilities/image-position/left.html        |  0
 .../utilities/image-position/right.html       |  0
 .../utilities/image-position/top-left.html    |  0
 .../utilities/image-position/top-right.html   |  0
 .../utilities/image-position/top.html         |  0
 .../examples/utilities/margin-collapse.html   |  0
 .../examples/utilities/max-width-unset.html   |  0
 .../docs}/examples/utilities/no-print.html    |  0
 .../docs}/examples/utilities/off-screen.html  |  0
 .../examples/utilities/padding-collapse.html  |  0
 .../docs}/examples/utilities/show.html        |  0
 .../utilities/table-cell-padding-overlap.html |  0
 .../docs}/examples/utilities/truncate.html    |  0
 .../examples/utilities/vertically-center.html |  0
 {docs => site/docs}/index.html                |  0
 {docs => site/docs}/patterns/accordion.md     |  0
 .../docs}/patterns/article-pagination.md      |  0
 {docs => site/docs}/patterns/breadcrumbs.md   |  0
 {docs => site/docs}/patterns/buttons.md       |  0
 {docs => site/docs}/patterns/card.md          |  0
 .../docs}/patterns/contextual-menu.md         |  0
 {docs => site/docs}/patterns/grid.md          |  0
 {docs => site/docs}/patterns/heading-icon.md  |  0
 {docs => site/docs}/patterns/icons.md         |  0
 {docs => site/docs}/patterns/images.md        |  0
 {docs => site/docs}/patterns/inline-images.md |  0
 {docs => site/docs}/patterns/labels.md        |  0
 {docs => site/docs}/patterns/links.md         |  0
 {docs => site/docs}/patterns/list-tree.md     |  0
 {docs => site/docs}/patterns/lists.md         |  0
 {docs => site/docs}/patterns/matrix.md        |  0
 {docs => site/docs}/patterns/media-object.md  |  0
 {docs => site/docs}/patterns/modal.md         |  0
 {docs => site/docs}/patterns/muted-heading.md |  0
 {docs => site/docs}/patterns/navigation.md    |  0
 {docs => site/docs}/patterns/notification.md  |  0
 {docs => site/docs}/patterns/pagination.md    |  0
 {docs => site/docs}/patterns/pull-quote.md    |  0
 {docs => site/docs}/patterns/search-box.md    |  0
 {docs => site/docs}/patterns/slider.md        |  0
 {docs => site/docs}/patterns/strip.md         |  0
 {docs => site/docs}/patterns/switch.md        |  0
 .../docs}/patterns/table-of-contents.md       |  0
 {docs => site/docs}/patterns/tabs.md          |  0
 {docs => site/docs}/patterns/tooltips.md      |  0
 {docs => site/docs}/search.html               |  0
 .../docs}/settings/animation-settings.md      |  0
 .../docs}/settings/assets-settings.md         |  0
 .../docs}/settings/breakpoint-settings.md     |  0
 .../docs}/settings/color-settings.md          |  0
 {docs => site/docs}/settings/font-settings.md |  0
 .../docs}/settings/layout-settings.md         |  0
 .../docs}/settings/placeholder-settings.md    |  0
 .../docs}/settings/spacing-settings.md        |  0
 {docs => site/docs}/settings/table-layout.md  |  0
 {docs => site/docs}/utilities/align.md        |  0
 .../docs}/utilities/baseline-grid.md          |  0
 {docs => site/docs}/utilities/clearfix.md     |  0
 .../docs}/utilities/embedded-media.md         |  0
 {docs => site/docs}/utilities/equal-height.md |  0
 {docs => site/docs}/utilities/floats.md       |  0
 {docs => site/docs}/utilities/font-metrics.md |  0
 {docs => site/docs}/utilities/functions.md    |  0
 {docs => site/docs}/utilities/hide.md         |  0
 .../docs}/utilities/image-position.md         |  0
 .../docs}/utilities/margin-collapse.md        |  0
 {docs => site/docs}/utilities/no-print.md     |  0
 {docs => site/docs}/utilities/off-screen.md   |  0
 .../docs}/utilities/padding-collapse.md       |  0
 {docs => site/docs}/utilities/show.md         |  0
 .../utilities/table-cell-padding-overlap.md   |  0
 {docs => site/docs}/utilities/truncate.md     |  0
 .../docs}/utilities/vertically-center.md      |  0
 {docs => site}/static/build                   |  0
 {docs => site}/static/js/example.js           |  0
 {docs => site}/static/js/scripts.js           |  0
 webapp/app.py                                 | 32 +++++++++----------
 256 files changed, 16 insertions(+), 16 deletions(-)
 rename {docs => site}/404.html (100%)
 rename {docs => site}/500.html (100%)
 rename {docs => site}/_layouts/default.html (100%)
 rename {docs => site}/_layouts/examples.html (100%)
 rename {docs => site/docs}/base/code.md (100%)
 rename {docs => site/docs}/base/forms.md (100%)
 rename {docs => site/docs}/base/reset.md (100%)
 rename {docs => site/docs}/base/tables.md (100%)
 rename {docs => site/docs}/base/typography.md (100%)
 rename {docs => site/docs}/building-vanilla.md (100%)
 rename {docs => site/docs}/component-status.md (100%)
 rename {docs => site/docs}/customising-vanilla.md (100%)
 rename {docs => site/docs}/examples/base/abbr.html (100%)
 rename {docs => site/docs}/examples/base/blockquotes.html (100%)
 rename {docs => site/docs}/examples/base/button.html (100%)
 rename {docs => site/docs}/examples/base/code.html (100%)
 rename {docs => site/docs}/examples/base/details.html (100%)
 rename {docs => site/docs}/examples/base/font-weights.html (100%)
 rename {docs => site/docs}/examples/base/forms/aligned-checkboxes.html (100%)
 rename {docs => site/docs}/examples/base/forms/aligned-radio.html (100%)
 rename {docs => site/docs}/examples/base/forms/checkboxes.html (100%)
 rename {docs => site/docs}/examples/base/forms/disabled-input.html (100%)
 rename {docs => site/docs}/examples/base/forms/fieldset.html (100%)
 rename {docs => site/docs}/examples/base/forms/form.html (100%)
 rename {docs => site/docs}/examples/base/forms/input.html (100%)
 rename {docs => site/docs}/examples/base/forms/labels.html (100%)
 rename {docs => site/docs}/examples/base/forms/radio-buttons.html (100%)
 rename {docs => site/docs}/examples/base/forms/range.html (100%)
 rename {docs => site/docs}/examples/base/forms/select-multiple.html (100%)
 rename {docs => site/docs}/examples/base/forms/selects.html (100%)
 rename {docs => site/docs}/examples/base/forms/textarea.html (100%)
 rename {docs => site/docs}/examples/base/headings.html (100%)
 rename {docs => site/docs}/examples/base/hr-dark.html (100%)
 rename {docs => site/docs}/examples/base/hr.html (100%)
 rename {docs => site/docs}/examples/base/links.html (100%)
 rename {docs => site/docs}/examples/base/lists/definition-list.html (100%)
 rename {docs => site/docs}/examples/base/lists/ordered-list.html (100%)
 rename {docs => site/docs}/examples/base/lists/unordered-list.html (100%)
 rename {docs => site/docs}/examples/base/small.html (100%)
 rename {docs => site/docs}/examples/base/strong.html (100%)
 rename {docs => site/docs}/examples/base/sub-headings.html (100%)
 rename {docs => site/docs}/examples/base/sub.html (100%)
 rename {docs => site/docs}/examples/base/sup.html (100%)
 rename {docs => site/docs}/examples/base/table.html (100%)
 rename {docs => site/docs}/examples/index.html (100%)
 rename {docs => site/docs}/examples/patterns/accordion.html (100%)
 rename {docs => site/docs}/examples/patterns/article-pagination.html (100%)
 rename {docs => site/docs}/examples/patterns/breadcrumbs.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/base.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/brand.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/dense.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/icon.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/inline.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/negative.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/neutral.html (100%)
 rename {docs => site/docs}/examples/patterns/buttons/positive.html (100%)
 rename {docs => site/docs}/examples/patterns/card/default.html (100%)
 rename {docs => site/docs}/examples/patterns/card/header.html (100%)
 rename {docs => site/docs}/examples/patterns/card/highlighted.html (100%)
 rename {docs => site/docs}/examples/patterns/card/overlay.html (100%)
 rename {docs => site/docs}/examples/patterns/code-copyable.html (100%)
 rename {docs => site/docs}/examples/patterns/code-numbered.html (100%)
 rename {docs => site/docs}/examples/patterns/contextual-menu/_script.js (100%)
 rename {docs => site/docs}/examples/patterns/contextual-menu/dark.html (100%)
 rename {docs => site/docs}/examples/patterns/contextual-menu/default.html (100%)
 rename {docs => site/docs}/examples/patterns/contextual-menu/with-indicator.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/dense.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/form-help-text.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/form-inline.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/form-stacked.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/form-validation.html (100%)
 rename {docs => site/docs}/examples/patterns/forms/forms-required.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/bordered.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/default.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/empty-columns.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/incorrect-empty-columns.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/nested-medium.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/nested-small.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/nested.html (100%)
 rename {docs => site/docs}/examples/patterns/grid/offsets.html (100%)
 rename {docs => site/docs}/examples/patterns/heading-icon/heading-icon-small.html (100%)
 rename {docs => site/docs}/examples/patterns/heading-icon/heading-icon-stacked.html (100%)
 rename {docs => site/docs}/examples/patterns/heading-icon/heading-icon.html (100%)
 rename {docs => site/docs}/examples/patterns/headings/default.html (100%)
 rename {docs => site/docs}/examples/patterns/headings/mixed.html (100%)
 rename {docs => site/docs}/examples/patterns/headings/muted.html (100%)
 rename {docs => site/docs}/examples/patterns/icons/icons-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/icons/icons-light.html (100%)
 rename {docs => site/docs}/examples/patterns/icons/icons-social.html (100%)
 rename {docs => site/docs}/examples/patterns/image/bordered.html (100%)
 rename {docs => site/docs}/examples/patterns/image/shadowed.html (100%)
 rename {docs => site/docs}/examples/patterns/inline-images.html (100%)
 rename {docs => site/docs}/examples/patterns/labels/deprecated.html (100%)
 rename {docs => site/docs}/examples/patterns/labels/in-progress.html (100%)
 rename {docs => site/docs}/examples/patterns/labels/new.html (100%)
 rename {docs => site/docs}/examples/patterns/labels/updated.html (100%)
 rename {docs => site/docs}/examples/patterns/labels/validated.html (100%)
 rename {docs => site/docs}/examples/patterns/links/links-back-to-top.html (100%)
 rename {docs => site/docs}/examples/patterns/links/links-external.html (100%)
 rename {docs => site/docs}/examples/patterns/links/links-inverted.html (100%)
 rename {docs => site/docs}/examples/patterns/links/links-soft.html (100%)
 rename {docs => site/docs}/examples/patterns/list-tree.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/divider.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/list.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-dividers-ticked.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-dividers.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-inline.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-mid-dot.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-split.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-stepped-detailed.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-stepped.html (100%)
 rename {docs => site/docs}/examples/patterns/lists/lists-ticked.html (100%)
 rename {docs => site/docs}/examples/patterns/matrix.html (100%)
 rename {docs => site/docs}/examples/patterns/media-object/media-object-circ-img.html (100%)
 rename {docs => site/docs}/examples/patterns/media-object/media-object-large.html (100%)
 rename {docs => site/docs}/examples/patterns/media-object/media-object.html (100%)
 rename {docs => site/docs}/examples/patterns/modal.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/_script.js (100%)
 rename {docs => site/docs}/examples/patterns/navigation/default-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/default.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/deprecated-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/deprecated.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/full-width.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/subnav-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/navigation/subnav.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/action.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/caution.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/information.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/negative.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/notifications.html (100%)
 rename {docs => site/docs}/examples/patterns/notifications/positive.html (100%)
 rename {docs => site/docs}/examples/patterns/pagination/pagination-disabled.html (100%)
 rename {docs => site/docs}/examples/patterns/pagination/pagination-truncated.html (100%)
 rename {docs => site/docs}/examples/patterns/pagination/pagination.html (100%)
 rename {docs => site/docs}/examples/patterns/pull-quotes/default-image.html (100%)
 rename {docs => site/docs}/examples/patterns/pull-quotes/default.html (100%)
 rename {docs => site/docs}/examples/patterns/pull-quotes/large.html (100%)
 rename {docs => site/docs}/examples/patterns/pull-quotes/small.html (100%)
 rename {docs => site/docs}/examples/patterns/search-box/default-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/search-box/default.html (100%)
 rename {docs => site/docs}/examples/patterns/search-box/navigation-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/search-box/navigation.html (100%)
 rename {docs => site/docs}/examples/patterns/slider/slider-input.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/accent.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/deep.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/image.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/is-bordered.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/shallow.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/strips-dark.html (100%)
 rename {docs => site/docs}/examples/patterns/strips/strips-light.html (100%)
 rename {docs => site/docs}/examples/patterns/switch.html (100%)
 rename {docs => site/docs}/examples/patterns/table-of-contents.html (100%)
 rename {docs => site/docs}/examples/patterns/tables/table-expanding.html (100%)
 rename {docs => site/docs}/examples/patterns/tables/table-mobile-card.html (100%)
 rename {docs => site/docs}/examples/patterns/tables/table-sortable.html (100%)
 rename {docs => site/docs}/examples/patterns/tabs.html (100%)
 rename {docs => site/docs}/examples/patterns/tooltips.html (100%)
 rename {docs => site/docs}/examples/standalone.html (100%)
 rename {docs => site/docs}/examples/templates/external-links.html (100%)
 rename {docs => site/docs}/examples/templates/maas-layout.html (100%)
 rename {docs => site/docs}/examples/templates/tick-element-comparison.html (100%)
 rename {docs => site/docs}/examples/templates/typographic-spacing.html (100%)
 rename {docs => site/docs}/examples/templates/vertical-spacing.html (100%)
 rename {docs => site/docs}/examples/utilities/align.html (100%)
 rename {docs => site/docs}/examples/utilities/animations/spin.html (100%)
 rename {docs => site/docs}/examples/utilities/baseline-grid.html (100%)
 rename {docs => site/docs}/examples/utilities/clearfix.html (100%)
 rename {docs => site/docs}/examples/utilities/embedded-media.html (100%)
 rename {docs => site/docs}/examples/utilities/equal-height.html (100%)
 rename {docs => site/docs}/examples/utilities/fixed-width-container.html (100%)
 rename {docs => site/docs}/examples/utilities/floats/default.html (100%)
 rename {docs => site/docs}/examples/utilities/floats/large-screens.html (100%)
 rename {docs => site/docs}/examples/utilities/floats/medium-screens.html (100%)
 rename {docs => site/docs}/examples/utilities/floats/small-screens.html (100%)
 rename {docs => site/docs}/examples/utilities/font-metrics.html (100%)
 rename {docs => site/docs}/examples/utilities/hide.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/bottom-left.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/bottom-right.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/bottom.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/left.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/right.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/top-left.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/top-right.html (100%)
 rename {docs => site/docs}/examples/utilities/image-position/top.html (100%)
 rename {docs => site/docs}/examples/utilities/margin-collapse.html (100%)
 rename {docs => site/docs}/examples/utilities/max-width-unset.html (100%)
 rename {docs => site/docs}/examples/utilities/no-print.html (100%)
 rename {docs => site/docs}/examples/utilities/off-screen.html (100%)
 rename {docs => site/docs}/examples/utilities/padding-collapse.html (100%)
 rename {docs => site/docs}/examples/utilities/show.html (100%)
 rename {docs => site/docs}/examples/utilities/table-cell-padding-overlap.html (100%)
 rename {docs => site/docs}/examples/utilities/truncate.html (100%)
 rename {docs => site/docs}/examples/utilities/vertically-center.html (100%)
 rename {docs => site/docs}/index.html (100%)
 rename {docs => site/docs}/patterns/accordion.md (100%)
 rename {docs => site/docs}/patterns/article-pagination.md (100%)
 rename {docs => site/docs}/patterns/breadcrumbs.md (100%)
 rename {docs => site/docs}/patterns/buttons.md (100%)
 rename {docs => site/docs}/patterns/card.md (100%)
 rename {docs => site/docs}/patterns/contextual-menu.md (100%)
 rename {docs => site/docs}/patterns/grid.md (100%)
 rename {docs => site/docs}/patterns/heading-icon.md (100%)
 rename {docs => site/docs}/patterns/icons.md (100%)
 rename {docs => site/docs}/patterns/images.md (100%)
 rename {docs => site/docs}/patterns/inline-images.md (100%)
 rename {docs => site/docs}/patterns/labels.md (100%)
 rename {docs => site/docs}/patterns/links.md (100%)
 rename {docs => site/docs}/patterns/list-tree.md (100%)
 rename {docs => site/docs}/patterns/lists.md (100%)
 rename {docs => site/docs}/patterns/matrix.md (100%)
 rename {docs => site/docs}/patterns/media-object.md (100%)
 rename {docs => site/docs}/patterns/modal.md (100%)
 rename {docs => site/docs}/patterns/muted-heading.md (100%)
 rename {docs => site/docs}/patterns/navigation.md (100%)
 rename {docs => site/docs}/patterns/notification.md (100%)
 rename {docs => site/docs}/patterns/pagination.md (100%)
 rename {docs => site/docs}/patterns/pull-quote.md (100%)
 rename {docs => site/docs}/patterns/search-box.md (100%)
 rename {docs => site/docs}/patterns/slider.md (100%)
 rename {docs => site/docs}/patterns/strip.md (100%)
 rename {docs => site/docs}/patterns/switch.md (100%)
 rename {docs => site/docs}/patterns/table-of-contents.md (100%)
 rename {docs => site/docs}/patterns/tabs.md (100%)
 rename {docs => site/docs}/patterns/tooltips.md (100%)
 rename {docs => site/docs}/search.html (100%)
 rename {docs => site/docs}/settings/animation-settings.md (100%)
 rename {docs => site/docs}/settings/assets-settings.md (100%)
 rename {docs => site/docs}/settings/breakpoint-settings.md (100%)
 rename {docs => site/docs}/settings/color-settings.md (100%)
 rename {docs => site/docs}/settings/font-settings.md (100%)
 rename {docs => site/docs}/settings/layout-settings.md (100%)
 rename {docs => site/docs}/settings/placeholder-settings.md (100%)
 rename {docs => site/docs}/settings/spacing-settings.md (100%)
 rename {docs => site/docs}/settings/table-layout.md (100%)
 rename {docs => site/docs}/utilities/align.md (100%)
 rename {docs => site/docs}/utilities/baseline-grid.md (100%)
 rename {docs => site/docs}/utilities/clearfix.md (100%)
 rename {docs => site/docs}/utilities/embedded-media.md (100%)
 rename {docs => site/docs}/utilities/equal-height.md (100%)
 rename {docs => site/docs}/utilities/floats.md (100%)
 rename {docs => site/docs}/utilities/font-metrics.md (100%)
 rename {docs => site/docs}/utilities/functions.md (100%)
 rename {docs => site/docs}/utilities/hide.md (100%)
 rename {docs => site/docs}/utilities/image-position.md (100%)
 rename {docs => site/docs}/utilities/margin-collapse.md (100%)
 rename {docs => site/docs}/utilities/no-print.md (100%)
 rename {docs => site/docs}/utilities/off-screen.md (100%)
 rename {docs => site/docs}/utilities/padding-collapse.md (100%)
 rename {docs => site/docs}/utilities/show.md (100%)
 rename {docs => site/docs}/utilities/table-cell-padding-overlap.md (100%)
 rename {docs => site/docs}/utilities/truncate.md (100%)
 rename {docs => site/docs}/utilities/vertically-center.md (100%)
 rename {docs => site}/static/build (100%)
 rename {docs => site}/static/js/example.js (100%)
 rename {docs => site}/static/js/scripts.js (100%)

diff --git a/docs/404.html b/site/404.html
similarity index 100%
rename from docs/404.html
rename to site/404.html
diff --git a/docs/500.html b/site/500.html
similarity index 100%
rename from docs/500.html
rename to site/500.html
diff --git a/docs/_layouts/default.html b/site/_layouts/default.html
similarity index 100%
rename from docs/_layouts/default.html
rename to site/_layouts/default.html
diff --git a/docs/_layouts/examples.html b/site/_layouts/examples.html
similarity index 100%
rename from docs/_layouts/examples.html
rename to site/_layouts/examples.html
diff --git a/docs/base/code.md b/site/docs/base/code.md
similarity index 100%
rename from docs/base/code.md
rename to site/docs/base/code.md
diff --git a/docs/base/forms.md b/site/docs/base/forms.md
similarity index 100%
rename from docs/base/forms.md
rename to site/docs/base/forms.md
diff --git a/docs/base/reset.md b/site/docs/base/reset.md
similarity index 100%
rename from docs/base/reset.md
rename to site/docs/base/reset.md
diff --git a/docs/base/tables.md b/site/docs/base/tables.md
similarity index 100%
rename from docs/base/tables.md
rename to site/docs/base/tables.md
diff --git a/docs/base/typography.md b/site/docs/base/typography.md
similarity index 100%
rename from docs/base/typography.md
rename to site/docs/base/typography.md
diff --git a/docs/building-vanilla.md b/site/docs/building-vanilla.md
similarity index 100%
rename from docs/building-vanilla.md
rename to site/docs/building-vanilla.md
diff --git a/docs/component-status.md b/site/docs/component-status.md
similarity index 100%
rename from docs/component-status.md
rename to site/docs/component-status.md
diff --git a/docs/customising-vanilla.md b/site/docs/customising-vanilla.md
similarity index 100%
rename from docs/customising-vanilla.md
rename to site/docs/customising-vanilla.md
diff --git a/docs/examples/base/abbr.html b/site/docs/examples/base/abbr.html
similarity index 100%
rename from docs/examples/base/abbr.html
rename to site/docs/examples/base/abbr.html
diff --git a/docs/examples/base/blockquotes.html b/site/docs/examples/base/blockquotes.html
similarity index 100%
rename from docs/examples/base/blockquotes.html
rename to site/docs/examples/base/blockquotes.html
diff --git a/docs/examples/base/button.html b/site/docs/examples/base/button.html
similarity index 100%
rename from docs/examples/base/button.html
rename to site/docs/examples/base/button.html
diff --git a/docs/examples/base/code.html b/site/docs/examples/base/code.html
similarity index 100%
rename from docs/examples/base/code.html
rename to site/docs/examples/base/code.html
diff --git a/docs/examples/base/details.html b/site/docs/examples/base/details.html
similarity index 100%
rename from docs/examples/base/details.html
rename to site/docs/examples/base/details.html
diff --git a/docs/examples/base/font-weights.html b/site/docs/examples/base/font-weights.html
similarity index 100%
rename from docs/examples/base/font-weights.html
rename to site/docs/examples/base/font-weights.html
diff --git a/docs/examples/base/forms/aligned-checkboxes.html b/site/docs/examples/base/forms/aligned-checkboxes.html
similarity index 100%
rename from docs/examples/base/forms/aligned-checkboxes.html
rename to site/docs/examples/base/forms/aligned-checkboxes.html
diff --git a/docs/examples/base/forms/aligned-radio.html b/site/docs/examples/base/forms/aligned-radio.html
similarity index 100%
rename from docs/examples/base/forms/aligned-radio.html
rename to site/docs/examples/base/forms/aligned-radio.html
diff --git a/docs/examples/base/forms/checkboxes.html b/site/docs/examples/base/forms/checkboxes.html
similarity index 100%
rename from docs/examples/base/forms/checkboxes.html
rename to site/docs/examples/base/forms/checkboxes.html
diff --git a/docs/examples/base/forms/disabled-input.html b/site/docs/examples/base/forms/disabled-input.html
similarity index 100%
rename from docs/examples/base/forms/disabled-input.html
rename to site/docs/examples/base/forms/disabled-input.html
diff --git a/docs/examples/base/forms/fieldset.html b/site/docs/examples/base/forms/fieldset.html
similarity index 100%
rename from docs/examples/base/forms/fieldset.html
rename to site/docs/examples/base/forms/fieldset.html
diff --git a/docs/examples/base/forms/form.html b/site/docs/examples/base/forms/form.html
similarity index 100%
rename from docs/examples/base/forms/form.html
rename to site/docs/examples/base/forms/form.html
diff --git a/docs/examples/base/forms/input.html b/site/docs/examples/base/forms/input.html
similarity index 100%
rename from docs/examples/base/forms/input.html
rename to site/docs/examples/base/forms/input.html
diff --git a/docs/examples/base/forms/labels.html b/site/docs/examples/base/forms/labels.html
similarity index 100%
rename from docs/examples/base/forms/labels.html
rename to site/docs/examples/base/forms/labels.html
diff --git a/docs/examples/base/forms/radio-buttons.html b/site/docs/examples/base/forms/radio-buttons.html
similarity index 100%
rename from docs/examples/base/forms/radio-buttons.html
rename to site/docs/examples/base/forms/radio-buttons.html
diff --git a/docs/examples/base/forms/range.html b/site/docs/examples/base/forms/range.html
similarity index 100%
rename from docs/examples/base/forms/range.html
rename to site/docs/examples/base/forms/range.html
diff --git a/docs/examples/base/forms/select-multiple.html b/site/docs/examples/base/forms/select-multiple.html
similarity index 100%
rename from docs/examples/base/forms/select-multiple.html
rename to site/docs/examples/base/forms/select-multiple.html
diff --git a/docs/examples/base/forms/selects.html b/site/docs/examples/base/forms/selects.html
similarity index 100%
rename from docs/examples/base/forms/selects.html
rename to site/docs/examples/base/forms/selects.html
diff --git a/docs/examples/base/forms/textarea.html b/site/docs/examples/base/forms/textarea.html
similarity index 100%
rename from docs/examples/base/forms/textarea.html
rename to site/docs/examples/base/forms/textarea.html
diff --git a/docs/examples/base/headings.html b/site/docs/examples/base/headings.html
similarity index 100%
rename from docs/examples/base/headings.html
rename to site/docs/examples/base/headings.html
diff --git a/docs/examples/base/hr-dark.html b/site/docs/examples/base/hr-dark.html
similarity index 100%
rename from docs/examples/base/hr-dark.html
rename to site/docs/examples/base/hr-dark.html
diff --git a/docs/examples/base/hr.html b/site/docs/examples/base/hr.html
similarity index 100%
rename from docs/examples/base/hr.html
rename to site/docs/examples/base/hr.html
diff --git a/docs/examples/base/links.html b/site/docs/examples/base/links.html
similarity index 100%
rename from docs/examples/base/links.html
rename to site/docs/examples/base/links.html
diff --git a/docs/examples/base/lists/definition-list.html b/site/docs/examples/base/lists/definition-list.html
similarity index 100%
rename from docs/examples/base/lists/definition-list.html
rename to site/docs/examples/base/lists/definition-list.html
diff --git a/docs/examples/base/lists/ordered-list.html b/site/docs/examples/base/lists/ordered-list.html
similarity index 100%
rename from docs/examples/base/lists/ordered-list.html
rename to site/docs/examples/base/lists/ordered-list.html
diff --git a/docs/examples/base/lists/unordered-list.html b/site/docs/examples/base/lists/unordered-list.html
similarity index 100%
rename from docs/examples/base/lists/unordered-list.html
rename to site/docs/examples/base/lists/unordered-list.html
diff --git a/docs/examples/base/small.html b/site/docs/examples/base/small.html
similarity index 100%
rename from docs/examples/base/small.html
rename to site/docs/examples/base/small.html
diff --git a/docs/examples/base/strong.html b/site/docs/examples/base/strong.html
similarity index 100%
rename from docs/examples/base/strong.html
rename to site/docs/examples/base/strong.html
diff --git a/docs/examples/base/sub-headings.html b/site/docs/examples/base/sub-headings.html
similarity index 100%
rename from docs/examples/base/sub-headings.html
rename to site/docs/examples/base/sub-headings.html
diff --git a/docs/examples/base/sub.html b/site/docs/examples/base/sub.html
similarity index 100%
rename from docs/examples/base/sub.html
rename to site/docs/examples/base/sub.html
diff --git a/docs/examples/base/sup.html b/site/docs/examples/base/sup.html
similarity index 100%
rename from docs/examples/base/sup.html
rename to site/docs/examples/base/sup.html
diff --git a/docs/examples/base/table.html b/site/docs/examples/base/table.html
similarity index 100%
rename from docs/examples/base/table.html
rename to site/docs/examples/base/table.html
diff --git a/docs/examples/index.html b/site/docs/examples/index.html
similarity index 100%
rename from docs/examples/index.html
rename to site/docs/examples/index.html
diff --git a/docs/examples/patterns/accordion.html b/site/docs/examples/patterns/accordion.html
similarity index 100%
rename from docs/examples/patterns/accordion.html
rename to site/docs/examples/patterns/accordion.html
diff --git a/docs/examples/patterns/article-pagination.html b/site/docs/examples/patterns/article-pagination.html
similarity index 100%
rename from docs/examples/patterns/article-pagination.html
rename to site/docs/examples/patterns/article-pagination.html
diff --git a/docs/examples/patterns/breadcrumbs.html b/site/docs/examples/patterns/breadcrumbs.html
similarity index 100%
rename from docs/examples/patterns/breadcrumbs.html
rename to site/docs/examples/patterns/breadcrumbs.html
diff --git a/docs/examples/patterns/buttons/base.html b/site/docs/examples/patterns/buttons/base.html
similarity index 100%
rename from docs/examples/patterns/buttons/base.html
rename to site/docs/examples/patterns/buttons/base.html
diff --git a/docs/examples/patterns/buttons/brand.html b/site/docs/examples/patterns/buttons/brand.html
similarity index 100%
rename from docs/examples/patterns/buttons/brand.html
rename to site/docs/examples/patterns/buttons/brand.html
diff --git a/docs/examples/patterns/buttons/dense.html b/site/docs/examples/patterns/buttons/dense.html
similarity index 100%
rename from docs/examples/patterns/buttons/dense.html
rename to site/docs/examples/patterns/buttons/dense.html
diff --git a/docs/examples/patterns/buttons/icon.html b/site/docs/examples/patterns/buttons/icon.html
similarity index 100%
rename from docs/examples/patterns/buttons/icon.html
rename to site/docs/examples/patterns/buttons/icon.html
diff --git a/docs/examples/patterns/buttons/inline.html b/site/docs/examples/patterns/buttons/inline.html
similarity index 100%
rename from docs/examples/patterns/buttons/inline.html
rename to site/docs/examples/patterns/buttons/inline.html
diff --git a/docs/examples/patterns/buttons/negative.html b/site/docs/examples/patterns/buttons/negative.html
similarity index 100%
rename from docs/examples/patterns/buttons/negative.html
rename to site/docs/examples/patterns/buttons/negative.html
diff --git a/docs/examples/patterns/buttons/neutral.html b/site/docs/examples/patterns/buttons/neutral.html
similarity index 100%
rename from docs/examples/patterns/buttons/neutral.html
rename to site/docs/examples/patterns/buttons/neutral.html
diff --git a/docs/examples/patterns/buttons/positive.html b/site/docs/examples/patterns/buttons/positive.html
similarity index 100%
rename from docs/examples/patterns/buttons/positive.html
rename to site/docs/examples/patterns/buttons/positive.html
diff --git a/docs/examples/patterns/card/default.html b/site/docs/examples/patterns/card/default.html
similarity index 100%
rename from docs/examples/patterns/card/default.html
rename to site/docs/examples/patterns/card/default.html
diff --git a/docs/examples/patterns/card/header.html b/site/docs/examples/patterns/card/header.html
similarity index 100%
rename from docs/examples/patterns/card/header.html
rename to site/docs/examples/patterns/card/header.html
diff --git a/docs/examples/patterns/card/highlighted.html b/site/docs/examples/patterns/card/highlighted.html
similarity index 100%
rename from docs/examples/patterns/card/highlighted.html
rename to site/docs/examples/patterns/card/highlighted.html
diff --git a/docs/examples/patterns/card/overlay.html b/site/docs/examples/patterns/card/overlay.html
similarity index 100%
rename from docs/examples/patterns/card/overlay.html
rename to site/docs/examples/patterns/card/overlay.html
diff --git a/docs/examples/patterns/code-copyable.html b/site/docs/examples/patterns/code-copyable.html
similarity index 100%
rename from docs/examples/patterns/code-copyable.html
rename to site/docs/examples/patterns/code-copyable.html
diff --git a/docs/examples/patterns/code-numbered.html b/site/docs/examples/patterns/code-numbered.html
similarity index 100%
rename from docs/examples/patterns/code-numbered.html
rename to site/docs/examples/patterns/code-numbered.html
diff --git a/docs/examples/patterns/contextual-menu/_script.js b/site/docs/examples/patterns/contextual-menu/_script.js
similarity index 100%
rename from docs/examples/patterns/contextual-menu/_script.js
rename to site/docs/examples/patterns/contextual-menu/_script.js
diff --git a/docs/examples/patterns/contextual-menu/dark.html b/site/docs/examples/patterns/contextual-menu/dark.html
similarity index 100%
rename from docs/examples/patterns/contextual-menu/dark.html
rename to site/docs/examples/patterns/contextual-menu/dark.html
diff --git a/docs/examples/patterns/contextual-menu/default.html b/site/docs/examples/patterns/contextual-menu/default.html
similarity index 100%
rename from docs/examples/patterns/contextual-menu/default.html
rename to site/docs/examples/patterns/contextual-menu/default.html
diff --git a/docs/examples/patterns/contextual-menu/with-indicator.html b/site/docs/examples/patterns/contextual-menu/with-indicator.html
similarity index 100%
rename from docs/examples/patterns/contextual-menu/with-indicator.html
rename to site/docs/examples/patterns/contextual-menu/with-indicator.html
diff --git a/docs/examples/patterns/forms/dense.html b/site/docs/examples/patterns/forms/dense.html
similarity index 100%
rename from docs/examples/patterns/forms/dense.html
rename to site/docs/examples/patterns/forms/dense.html
diff --git a/docs/examples/patterns/forms/form-help-text.html b/site/docs/examples/patterns/forms/form-help-text.html
similarity index 100%
rename from docs/examples/patterns/forms/form-help-text.html
rename to site/docs/examples/patterns/forms/form-help-text.html
diff --git a/docs/examples/patterns/forms/form-inline.html b/site/docs/examples/patterns/forms/form-inline.html
similarity index 100%
rename from docs/examples/patterns/forms/form-inline.html
rename to site/docs/examples/patterns/forms/form-inline.html
diff --git a/docs/examples/patterns/forms/form-stacked.html b/site/docs/examples/patterns/forms/form-stacked.html
similarity index 100%
rename from docs/examples/patterns/forms/form-stacked.html
rename to site/docs/examples/patterns/forms/form-stacked.html
diff --git a/docs/examples/patterns/forms/form-validation.html b/site/docs/examples/patterns/forms/form-validation.html
similarity index 100%
rename from docs/examples/patterns/forms/form-validation.html
rename to site/docs/examples/patterns/forms/form-validation.html
diff --git a/docs/examples/patterns/forms/forms-required.html b/site/docs/examples/patterns/forms/forms-required.html
similarity index 100%
rename from docs/examples/patterns/forms/forms-required.html
rename to site/docs/examples/patterns/forms/forms-required.html
diff --git a/docs/examples/patterns/grid/bordered.html b/site/docs/examples/patterns/grid/bordered.html
similarity index 100%
rename from docs/examples/patterns/grid/bordered.html
rename to site/docs/examples/patterns/grid/bordered.html
diff --git a/docs/examples/patterns/grid/default.html b/site/docs/examples/patterns/grid/default.html
similarity index 100%
rename from docs/examples/patterns/grid/default.html
rename to site/docs/examples/patterns/grid/default.html
diff --git a/docs/examples/patterns/grid/empty-columns.html b/site/docs/examples/patterns/grid/empty-columns.html
similarity index 100%
rename from docs/examples/patterns/grid/empty-columns.html
rename to site/docs/examples/patterns/grid/empty-columns.html
diff --git a/docs/examples/patterns/grid/incorrect-empty-columns.html b/site/docs/examples/patterns/grid/incorrect-empty-columns.html
similarity index 100%
rename from docs/examples/patterns/grid/incorrect-empty-columns.html
rename to site/docs/examples/patterns/grid/incorrect-empty-columns.html
diff --git a/docs/examples/patterns/grid/nested-medium.html b/site/docs/examples/patterns/grid/nested-medium.html
similarity index 100%
rename from docs/examples/patterns/grid/nested-medium.html
rename to site/docs/examples/patterns/grid/nested-medium.html
diff --git a/docs/examples/patterns/grid/nested-small.html b/site/docs/examples/patterns/grid/nested-small.html
similarity index 100%
rename from docs/examples/patterns/grid/nested-small.html
rename to site/docs/examples/patterns/grid/nested-small.html
diff --git a/docs/examples/patterns/grid/nested.html b/site/docs/examples/patterns/grid/nested.html
similarity index 100%
rename from docs/examples/patterns/grid/nested.html
rename to site/docs/examples/patterns/grid/nested.html
diff --git a/docs/examples/patterns/grid/offsets.html b/site/docs/examples/patterns/grid/offsets.html
similarity index 100%
rename from docs/examples/patterns/grid/offsets.html
rename to site/docs/examples/patterns/grid/offsets.html
diff --git a/docs/examples/patterns/heading-icon/heading-icon-small.html b/site/docs/examples/patterns/heading-icon/heading-icon-small.html
similarity index 100%
rename from docs/examples/patterns/heading-icon/heading-icon-small.html
rename to site/docs/examples/patterns/heading-icon/heading-icon-small.html
diff --git a/docs/examples/patterns/heading-icon/heading-icon-stacked.html b/site/docs/examples/patterns/heading-icon/heading-icon-stacked.html
similarity index 100%
rename from docs/examples/patterns/heading-icon/heading-icon-stacked.html
rename to site/docs/examples/patterns/heading-icon/heading-icon-stacked.html
diff --git a/docs/examples/patterns/heading-icon/heading-icon.html b/site/docs/examples/patterns/heading-icon/heading-icon.html
similarity index 100%
rename from docs/examples/patterns/heading-icon/heading-icon.html
rename to site/docs/examples/patterns/heading-icon/heading-icon.html
diff --git a/docs/examples/patterns/headings/default.html b/site/docs/examples/patterns/headings/default.html
similarity index 100%
rename from docs/examples/patterns/headings/default.html
rename to site/docs/examples/patterns/headings/default.html
diff --git a/docs/examples/patterns/headings/mixed.html b/site/docs/examples/patterns/headings/mixed.html
similarity index 100%
rename from docs/examples/patterns/headings/mixed.html
rename to site/docs/examples/patterns/headings/mixed.html
diff --git a/docs/examples/patterns/headings/muted.html b/site/docs/examples/patterns/headings/muted.html
similarity index 100%
rename from docs/examples/patterns/headings/muted.html
rename to site/docs/examples/patterns/headings/muted.html
diff --git a/docs/examples/patterns/icons/icons-dark.html b/site/docs/examples/patterns/icons/icons-dark.html
similarity index 100%
rename from docs/examples/patterns/icons/icons-dark.html
rename to site/docs/examples/patterns/icons/icons-dark.html
diff --git a/docs/examples/patterns/icons/icons-light.html b/site/docs/examples/patterns/icons/icons-light.html
similarity index 100%
rename from docs/examples/patterns/icons/icons-light.html
rename to site/docs/examples/patterns/icons/icons-light.html
diff --git a/docs/examples/patterns/icons/icons-social.html b/site/docs/examples/patterns/icons/icons-social.html
similarity index 100%
rename from docs/examples/patterns/icons/icons-social.html
rename to site/docs/examples/patterns/icons/icons-social.html
diff --git a/docs/examples/patterns/image/bordered.html b/site/docs/examples/patterns/image/bordered.html
similarity index 100%
rename from docs/examples/patterns/image/bordered.html
rename to site/docs/examples/patterns/image/bordered.html
diff --git a/docs/examples/patterns/image/shadowed.html b/site/docs/examples/patterns/image/shadowed.html
similarity index 100%
rename from docs/examples/patterns/image/shadowed.html
rename to site/docs/examples/patterns/image/shadowed.html
diff --git a/docs/examples/patterns/inline-images.html b/site/docs/examples/patterns/inline-images.html
similarity index 100%
rename from docs/examples/patterns/inline-images.html
rename to site/docs/examples/patterns/inline-images.html
diff --git a/docs/examples/patterns/labels/deprecated.html b/site/docs/examples/patterns/labels/deprecated.html
similarity index 100%
rename from docs/examples/patterns/labels/deprecated.html
rename to site/docs/examples/patterns/labels/deprecated.html
diff --git a/docs/examples/patterns/labels/in-progress.html b/site/docs/examples/patterns/labels/in-progress.html
similarity index 100%
rename from docs/examples/patterns/labels/in-progress.html
rename to site/docs/examples/patterns/labels/in-progress.html
diff --git a/docs/examples/patterns/labels/new.html b/site/docs/examples/patterns/labels/new.html
similarity index 100%
rename from docs/examples/patterns/labels/new.html
rename to site/docs/examples/patterns/labels/new.html
diff --git a/docs/examples/patterns/labels/updated.html b/site/docs/examples/patterns/labels/updated.html
similarity index 100%
rename from docs/examples/patterns/labels/updated.html
rename to site/docs/examples/patterns/labels/updated.html
diff --git a/docs/examples/patterns/labels/validated.html b/site/docs/examples/patterns/labels/validated.html
similarity index 100%
rename from docs/examples/patterns/labels/validated.html
rename to site/docs/examples/patterns/labels/validated.html
diff --git a/docs/examples/patterns/links/links-back-to-top.html b/site/docs/examples/patterns/links/links-back-to-top.html
similarity index 100%
rename from docs/examples/patterns/links/links-back-to-top.html
rename to site/docs/examples/patterns/links/links-back-to-top.html
diff --git a/docs/examples/patterns/links/links-external.html b/site/docs/examples/patterns/links/links-external.html
similarity index 100%
rename from docs/examples/patterns/links/links-external.html
rename to site/docs/examples/patterns/links/links-external.html
diff --git a/docs/examples/patterns/links/links-inverted.html b/site/docs/examples/patterns/links/links-inverted.html
similarity index 100%
rename from docs/examples/patterns/links/links-inverted.html
rename to site/docs/examples/patterns/links/links-inverted.html
diff --git a/docs/examples/patterns/links/links-soft.html b/site/docs/examples/patterns/links/links-soft.html
similarity index 100%
rename from docs/examples/patterns/links/links-soft.html
rename to site/docs/examples/patterns/links/links-soft.html
diff --git a/docs/examples/patterns/list-tree.html b/site/docs/examples/patterns/list-tree.html
similarity index 100%
rename from docs/examples/patterns/list-tree.html
rename to site/docs/examples/patterns/list-tree.html
diff --git a/docs/examples/patterns/lists/divider.html b/site/docs/examples/patterns/lists/divider.html
similarity index 100%
rename from docs/examples/patterns/lists/divider.html
rename to site/docs/examples/patterns/lists/divider.html
diff --git a/docs/examples/patterns/lists/list.html b/site/docs/examples/patterns/lists/list.html
similarity index 100%
rename from docs/examples/patterns/lists/list.html
rename to site/docs/examples/patterns/lists/list.html
diff --git a/docs/examples/patterns/lists/lists-dividers-ticked.html b/site/docs/examples/patterns/lists/lists-dividers-ticked.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-dividers-ticked.html
rename to site/docs/examples/patterns/lists/lists-dividers-ticked.html
diff --git a/docs/examples/patterns/lists/lists-dividers.html b/site/docs/examples/patterns/lists/lists-dividers.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-dividers.html
rename to site/docs/examples/patterns/lists/lists-dividers.html
diff --git a/docs/examples/patterns/lists/lists-inline.html b/site/docs/examples/patterns/lists/lists-inline.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-inline.html
rename to site/docs/examples/patterns/lists/lists-inline.html
diff --git a/docs/examples/patterns/lists/lists-mid-dot.html b/site/docs/examples/patterns/lists/lists-mid-dot.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-mid-dot.html
rename to site/docs/examples/patterns/lists/lists-mid-dot.html
diff --git a/docs/examples/patterns/lists/lists-split.html b/site/docs/examples/patterns/lists/lists-split.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-split.html
rename to site/docs/examples/patterns/lists/lists-split.html
diff --git a/docs/examples/patterns/lists/lists-stepped-detailed.html b/site/docs/examples/patterns/lists/lists-stepped-detailed.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-stepped-detailed.html
rename to site/docs/examples/patterns/lists/lists-stepped-detailed.html
diff --git a/docs/examples/patterns/lists/lists-stepped.html b/site/docs/examples/patterns/lists/lists-stepped.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-stepped.html
rename to site/docs/examples/patterns/lists/lists-stepped.html
diff --git a/docs/examples/patterns/lists/lists-ticked.html b/site/docs/examples/patterns/lists/lists-ticked.html
similarity index 100%
rename from docs/examples/patterns/lists/lists-ticked.html
rename to site/docs/examples/patterns/lists/lists-ticked.html
diff --git a/docs/examples/patterns/matrix.html b/site/docs/examples/patterns/matrix.html
similarity index 100%
rename from docs/examples/patterns/matrix.html
rename to site/docs/examples/patterns/matrix.html
diff --git a/docs/examples/patterns/media-object/media-object-circ-img.html b/site/docs/examples/patterns/media-object/media-object-circ-img.html
similarity index 100%
rename from docs/examples/patterns/media-object/media-object-circ-img.html
rename to site/docs/examples/patterns/media-object/media-object-circ-img.html
diff --git a/docs/examples/patterns/media-object/media-object-large.html b/site/docs/examples/patterns/media-object/media-object-large.html
similarity index 100%
rename from docs/examples/patterns/media-object/media-object-large.html
rename to site/docs/examples/patterns/media-object/media-object-large.html
diff --git a/docs/examples/patterns/media-object/media-object.html b/site/docs/examples/patterns/media-object/media-object.html
similarity index 100%
rename from docs/examples/patterns/media-object/media-object.html
rename to site/docs/examples/patterns/media-object/media-object.html
diff --git a/docs/examples/patterns/modal.html b/site/docs/examples/patterns/modal.html
similarity index 100%
rename from docs/examples/patterns/modal.html
rename to site/docs/examples/patterns/modal.html
diff --git a/docs/examples/patterns/navigation/_script.js b/site/docs/examples/patterns/navigation/_script.js
similarity index 100%
rename from docs/examples/patterns/navigation/_script.js
rename to site/docs/examples/patterns/navigation/_script.js
diff --git a/docs/examples/patterns/navigation/default-dark.html b/site/docs/examples/patterns/navigation/default-dark.html
similarity index 100%
rename from docs/examples/patterns/navigation/default-dark.html
rename to site/docs/examples/patterns/navigation/default-dark.html
diff --git a/docs/examples/patterns/navigation/default.html b/site/docs/examples/patterns/navigation/default.html
similarity index 100%
rename from docs/examples/patterns/navigation/default.html
rename to site/docs/examples/patterns/navigation/default.html
diff --git a/docs/examples/patterns/navigation/deprecated-dark.html b/site/docs/examples/patterns/navigation/deprecated-dark.html
similarity index 100%
rename from docs/examples/patterns/navigation/deprecated-dark.html
rename to site/docs/examples/patterns/navigation/deprecated-dark.html
diff --git a/docs/examples/patterns/navigation/deprecated.html b/site/docs/examples/patterns/navigation/deprecated.html
similarity index 100%
rename from docs/examples/patterns/navigation/deprecated.html
rename to site/docs/examples/patterns/navigation/deprecated.html
diff --git a/docs/examples/patterns/navigation/full-width.html b/site/docs/examples/patterns/navigation/full-width.html
similarity index 100%
rename from docs/examples/patterns/navigation/full-width.html
rename to site/docs/examples/patterns/navigation/full-width.html
diff --git a/docs/examples/patterns/navigation/subnav-dark.html b/site/docs/examples/patterns/navigation/subnav-dark.html
similarity index 100%
rename from docs/examples/patterns/navigation/subnav-dark.html
rename to site/docs/examples/patterns/navigation/subnav-dark.html
diff --git a/docs/examples/patterns/navigation/subnav.html b/site/docs/examples/patterns/navigation/subnav.html
similarity index 100%
rename from docs/examples/patterns/navigation/subnav.html
rename to site/docs/examples/patterns/navigation/subnav.html
diff --git a/docs/examples/patterns/notifications/action.html b/site/docs/examples/patterns/notifications/action.html
similarity index 100%
rename from docs/examples/patterns/notifications/action.html
rename to site/docs/examples/patterns/notifications/action.html
diff --git a/docs/examples/patterns/notifications/caution.html b/site/docs/examples/patterns/notifications/caution.html
similarity index 100%
rename from docs/examples/patterns/notifications/caution.html
rename to site/docs/examples/patterns/notifications/caution.html
diff --git a/docs/examples/patterns/notifications/information.html b/site/docs/examples/patterns/notifications/information.html
similarity index 100%
rename from docs/examples/patterns/notifications/information.html
rename to site/docs/examples/patterns/notifications/information.html
diff --git a/docs/examples/patterns/notifications/negative.html b/site/docs/examples/patterns/notifications/negative.html
similarity index 100%
rename from docs/examples/patterns/notifications/negative.html
rename to site/docs/examples/patterns/notifications/negative.html
diff --git a/docs/examples/patterns/notifications/notifications.html b/site/docs/examples/patterns/notifications/notifications.html
similarity index 100%
rename from docs/examples/patterns/notifications/notifications.html
rename to site/docs/examples/patterns/notifications/notifications.html
diff --git a/docs/examples/patterns/notifications/positive.html b/site/docs/examples/patterns/notifications/positive.html
similarity index 100%
rename from docs/examples/patterns/notifications/positive.html
rename to site/docs/examples/patterns/notifications/positive.html
diff --git a/docs/examples/patterns/pagination/pagination-disabled.html b/site/docs/examples/patterns/pagination/pagination-disabled.html
similarity index 100%
rename from docs/examples/patterns/pagination/pagination-disabled.html
rename to site/docs/examples/patterns/pagination/pagination-disabled.html
diff --git a/docs/examples/patterns/pagination/pagination-truncated.html b/site/docs/examples/patterns/pagination/pagination-truncated.html
similarity index 100%
rename from docs/examples/patterns/pagination/pagination-truncated.html
rename to site/docs/examples/patterns/pagination/pagination-truncated.html
diff --git a/docs/examples/patterns/pagination/pagination.html b/site/docs/examples/patterns/pagination/pagination.html
similarity index 100%
rename from docs/examples/patterns/pagination/pagination.html
rename to site/docs/examples/patterns/pagination/pagination.html
diff --git a/docs/examples/patterns/pull-quotes/default-image.html b/site/docs/examples/patterns/pull-quotes/default-image.html
similarity index 100%
rename from docs/examples/patterns/pull-quotes/default-image.html
rename to site/docs/examples/patterns/pull-quotes/default-image.html
diff --git a/docs/examples/patterns/pull-quotes/default.html b/site/docs/examples/patterns/pull-quotes/default.html
similarity index 100%
rename from docs/examples/patterns/pull-quotes/default.html
rename to site/docs/examples/patterns/pull-quotes/default.html
diff --git a/docs/examples/patterns/pull-quotes/large.html b/site/docs/examples/patterns/pull-quotes/large.html
similarity index 100%
rename from docs/examples/patterns/pull-quotes/large.html
rename to site/docs/examples/patterns/pull-quotes/large.html
diff --git a/docs/examples/patterns/pull-quotes/small.html b/site/docs/examples/patterns/pull-quotes/small.html
similarity index 100%
rename from docs/examples/patterns/pull-quotes/small.html
rename to site/docs/examples/patterns/pull-quotes/small.html
diff --git a/docs/examples/patterns/search-box/default-dark.html b/site/docs/examples/patterns/search-box/default-dark.html
similarity index 100%
rename from docs/examples/patterns/search-box/default-dark.html
rename to site/docs/examples/patterns/search-box/default-dark.html
diff --git a/docs/examples/patterns/search-box/default.html b/site/docs/examples/patterns/search-box/default.html
similarity index 100%
rename from docs/examples/patterns/search-box/default.html
rename to site/docs/examples/patterns/search-box/default.html
diff --git a/docs/examples/patterns/search-box/navigation-dark.html b/site/docs/examples/patterns/search-box/navigation-dark.html
similarity index 100%
rename from docs/examples/patterns/search-box/navigation-dark.html
rename to site/docs/examples/patterns/search-box/navigation-dark.html
diff --git a/docs/examples/patterns/search-box/navigation.html b/site/docs/examples/patterns/search-box/navigation.html
similarity index 100%
rename from docs/examples/patterns/search-box/navigation.html
rename to site/docs/examples/patterns/search-box/navigation.html
diff --git a/docs/examples/patterns/slider/slider-input.html b/site/docs/examples/patterns/slider/slider-input.html
similarity index 100%
rename from docs/examples/patterns/slider/slider-input.html
rename to site/docs/examples/patterns/slider/slider-input.html
diff --git a/docs/examples/patterns/strips/accent.html b/site/docs/examples/patterns/strips/accent.html
similarity index 100%
rename from docs/examples/patterns/strips/accent.html
rename to site/docs/examples/patterns/strips/accent.html
diff --git a/docs/examples/patterns/strips/deep.html b/site/docs/examples/patterns/strips/deep.html
similarity index 100%
rename from docs/examples/patterns/strips/deep.html
rename to site/docs/examples/patterns/strips/deep.html
diff --git a/docs/examples/patterns/strips/image.html b/site/docs/examples/patterns/strips/image.html
similarity index 100%
rename from docs/examples/patterns/strips/image.html
rename to site/docs/examples/patterns/strips/image.html
diff --git a/docs/examples/patterns/strips/is-bordered.html b/site/docs/examples/patterns/strips/is-bordered.html
similarity index 100%
rename from docs/examples/patterns/strips/is-bordered.html
rename to site/docs/examples/patterns/strips/is-bordered.html
diff --git a/docs/examples/patterns/strips/shallow.html b/site/docs/examples/patterns/strips/shallow.html
similarity index 100%
rename from docs/examples/patterns/strips/shallow.html
rename to site/docs/examples/patterns/strips/shallow.html
diff --git a/docs/examples/patterns/strips/strips-dark.html b/site/docs/examples/patterns/strips/strips-dark.html
similarity index 100%
rename from docs/examples/patterns/strips/strips-dark.html
rename to site/docs/examples/patterns/strips/strips-dark.html
diff --git a/docs/examples/patterns/strips/strips-light.html b/site/docs/examples/patterns/strips/strips-light.html
similarity index 100%
rename from docs/examples/patterns/strips/strips-light.html
rename to site/docs/examples/patterns/strips/strips-light.html
diff --git a/docs/examples/patterns/switch.html b/site/docs/examples/patterns/switch.html
similarity index 100%
rename from docs/examples/patterns/switch.html
rename to site/docs/examples/patterns/switch.html
diff --git a/docs/examples/patterns/table-of-contents.html b/site/docs/examples/patterns/table-of-contents.html
similarity index 100%
rename from docs/examples/patterns/table-of-contents.html
rename to site/docs/examples/patterns/table-of-contents.html
diff --git a/docs/examples/patterns/tables/table-expanding.html b/site/docs/examples/patterns/tables/table-expanding.html
similarity index 100%
rename from docs/examples/patterns/tables/table-expanding.html
rename to site/docs/examples/patterns/tables/table-expanding.html
diff --git a/docs/examples/patterns/tables/table-mobile-card.html b/site/docs/examples/patterns/tables/table-mobile-card.html
similarity index 100%
rename from docs/examples/patterns/tables/table-mobile-card.html
rename to site/docs/examples/patterns/tables/table-mobile-card.html
diff --git a/docs/examples/patterns/tables/table-sortable.html b/site/docs/examples/patterns/tables/table-sortable.html
similarity index 100%
rename from docs/examples/patterns/tables/table-sortable.html
rename to site/docs/examples/patterns/tables/table-sortable.html
diff --git a/docs/examples/patterns/tabs.html b/site/docs/examples/patterns/tabs.html
similarity index 100%
rename from docs/examples/patterns/tabs.html
rename to site/docs/examples/patterns/tabs.html
diff --git a/docs/examples/patterns/tooltips.html b/site/docs/examples/patterns/tooltips.html
similarity index 100%
rename from docs/examples/patterns/tooltips.html
rename to site/docs/examples/patterns/tooltips.html
diff --git a/docs/examples/standalone.html b/site/docs/examples/standalone.html
similarity index 100%
rename from docs/examples/standalone.html
rename to site/docs/examples/standalone.html
diff --git a/docs/examples/templates/external-links.html b/site/docs/examples/templates/external-links.html
similarity index 100%
rename from docs/examples/templates/external-links.html
rename to site/docs/examples/templates/external-links.html
diff --git a/docs/examples/templates/maas-layout.html b/site/docs/examples/templates/maas-layout.html
similarity index 100%
rename from docs/examples/templates/maas-layout.html
rename to site/docs/examples/templates/maas-layout.html
diff --git a/docs/examples/templates/tick-element-comparison.html b/site/docs/examples/templates/tick-element-comparison.html
similarity index 100%
rename from docs/examples/templates/tick-element-comparison.html
rename to site/docs/examples/templates/tick-element-comparison.html
diff --git a/docs/examples/templates/typographic-spacing.html b/site/docs/examples/templates/typographic-spacing.html
similarity index 100%
rename from docs/examples/templates/typographic-spacing.html
rename to site/docs/examples/templates/typographic-spacing.html
diff --git a/docs/examples/templates/vertical-spacing.html b/site/docs/examples/templates/vertical-spacing.html
similarity index 100%
rename from docs/examples/templates/vertical-spacing.html
rename to site/docs/examples/templates/vertical-spacing.html
diff --git a/docs/examples/utilities/align.html b/site/docs/examples/utilities/align.html
similarity index 100%
rename from docs/examples/utilities/align.html
rename to site/docs/examples/utilities/align.html
diff --git a/docs/examples/utilities/animations/spin.html b/site/docs/examples/utilities/animations/spin.html
similarity index 100%
rename from docs/examples/utilities/animations/spin.html
rename to site/docs/examples/utilities/animations/spin.html
diff --git a/docs/examples/utilities/baseline-grid.html b/site/docs/examples/utilities/baseline-grid.html
similarity index 100%
rename from docs/examples/utilities/baseline-grid.html
rename to site/docs/examples/utilities/baseline-grid.html
diff --git a/docs/examples/utilities/clearfix.html b/site/docs/examples/utilities/clearfix.html
similarity index 100%
rename from docs/examples/utilities/clearfix.html
rename to site/docs/examples/utilities/clearfix.html
diff --git a/docs/examples/utilities/embedded-media.html b/site/docs/examples/utilities/embedded-media.html
similarity index 100%
rename from docs/examples/utilities/embedded-media.html
rename to site/docs/examples/utilities/embedded-media.html
diff --git a/docs/examples/utilities/equal-height.html b/site/docs/examples/utilities/equal-height.html
similarity index 100%
rename from docs/examples/utilities/equal-height.html
rename to site/docs/examples/utilities/equal-height.html
diff --git a/docs/examples/utilities/fixed-width-container.html b/site/docs/examples/utilities/fixed-width-container.html
similarity index 100%
rename from docs/examples/utilities/fixed-width-container.html
rename to site/docs/examples/utilities/fixed-width-container.html
diff --git a/docs/examples/utilities/floats/default.html b/site/docs/examples/utilities/floats/default.html
similarity index 100%
rename from docs/examples/utilities/floats/default.html
rename to site/docs/examples/utilities/floats/default.html
diff --git a/docs/examples/utilities/floats/large-screens.html b/site/docs/examples/utilities/floats/large-screens.html
similarity index 100%
rename from docs/examples/utilities/floats/large-screens.html
rename to site/docs/examples/utilities/floats/large-screens.html
diff --git a/docs/examples/utilities/floats/medium-screens.html b/site/docs/examples/utilities/floats/medium-screens.html
similarity index 100%
rename from docs/examples/utilities/floats/medium-screens.html
rename to site/docs/examples/utilities/floats/medium-screens.html
diff --git a/docs/examples/utilities/floats/small-screens.html b/site/docs/examples/utilities/floats/small-screens.html
similarity index 100%
rename from docs/examples/utilities/floats/small-screens.html
rename to site/docs/examples/utilities/floats/small-screens.html
diff --git a/docs/examples/utilities/font-metrics.html b/site/docs/examples/utilities/font-metrics.html
similarity index 100%
rename from docs/examples/utilities/font-metrics.html
rename to site/docs/examples/utilities/font-metrics.html
diff --git a/docs/examples/utilities/hide.html b/site/docs/examples/utilities/hide.html
similarity index 100%
rename from docs/examples/utilities/hide.html
rename to site/docs/examples/utilities/hide.html
diff --git a/docs/examples/utilities/image-position/bottom-left.html b/site/docs/examples/utilities/image-position/bottom-left.html
similarity index 100%
rename from docs/examples/utilities/image-position/bottom-left.html
rename to site/docs/examples/utilities/image-position/bottom-left.html
diff --git a/docs/examples/utilities/image-position/bottom-right.html b/site/docs/examples/utilities/image-position/bottom-right.html
similarity index 100%
rename from docs/examples/utilities/image-position/bottom-right.html
rename to site/docs/examples/utilities/image-position/bottom-right.html
diff --git a/docs/examples/utilities/image-position/bottom.html b/site/docs/examples/utilities/image-position/bottom.html
similarity index 100%
rename from docs/examples/utilities/image-position/bottom.html
rename to site/docs/examples/utilities/image-position/bottom.html
diff --git a/docs/examples/utilities/image-position/left.html b/site/docs/examples/utilities/image-position/left.html
similarity index 100%
rename from docs/examples/utilities/image-position/left.html
rename to site/docs/examples/utilities/image-position/left.html
diff --git a/docs/examples/utilities/image-position/right.html b/site/docs/examples/utilities/image-position/right.html
similarity index 100%
rename from docs/examples/utilities/image-position/right.html
rename to site/docs/examples/utilities/image-position/right.html
diff --git a/docs/examples/utilities/image-position/top-left.html b/site/docs/examples/utilities/image-position/top-left.html
similarity index 100%
rename from docs/examples/utilities/image-position/top-left.html
rename to site/docs/examples/utilities/image-position/top-left.html
diff --git a/docs/examples/utilities/image-position/top-right.html b/site/docs/examples/utilities/image-position/top-right.html
similarity index 100%
rename from docs/examples/utilities/image-position/top-right.html
rename to site/docs/examples/utilities/image-position/top-right.html
diff --git a/docs/examples/utilities/image-position/top.html b/site/docs/examples/utilities/image-position/top.html
similarity index 100%
rename from docs/examples/utilities/image-position/top.html
rename to site/docs/examples/utilities/image-position/top.html
diff --git a/docs/examples/utilities/margin-collapse.html b/site/docs/examples/utilities/margin-collapse.html
similarity index 100%
rename from docs/examples/utilities/margin-collapse.html
rename to site/docs/examples/utilities/margin-collapse.html
diff --git a/docs/examples/utilities/max-width-unset.html b/site/docs/examples/utilities/max-width-unset.html
similarity index 100%
rename from docs/examples/utilities/max-width-unset.html
rename to site/docs/examples/utilities/max-width-unset.html
diff --git a/docs/examples/utilities/no-print.html b/site/docs/examples/utilities/no-print.html
similarity index 100%
rename from docs/examples/utilities/no-print.html
rename to site/docs/examples/utilities/no-print.html
diff --git a/docs/examples/utilities/off-screen.html b/site/docs/examples/utilities/off-screen.html
similarity index 100%
rename from docs/examples/utilities/off-screen.html
rename to site/docs/examples/utilities/off-screen.html
diff --git a/docs/examples/utilities/padding-collapse.html b/site/docs/examples/utilities/padding-collapse.html
similarity index 100%
rename from docs/examples/utilities/padding-collapse.html
rename to site/docs/examples/utilities/padding-collapse.html
diff --git a/docs/examples/utilities/show.html b/site/docs/examples/utilities/show.html
similarity index 100%
rename from docs/examples/utilities/show.html
rename to site/docs/examples/utilities/show.html
diff --git a/docs/examples/utilities/table-cell-padding-overlap.html b/site/docs/examples/utilities/table-cell-padding-overlap.html
similarity index 100%
rename from docs/examples/utilities/table-cell-padding-overlap.html
rename to site/docs/examples/utilities/table-cell-padding-overlap.html
diff --git a/docs/examples/utilities/truncate.html b/site/docs/examples/utilities/truncate.html
similarity index 100%
rename from docs/examples/utilities/truncate.html
rename to site/docs/examples/utilities/truncate.html
diff --git a/docs/examples/utilities/vertically-center.html b/site/docs/examples/utilities/vertically-center.html
similarity index 100%
rename from docs/examples/utilities/vertically-center.html
rename to site/docs/examples/utilities/vertically-center.html
diff --git a/docs/index.html b/site/docs/index.html
similarity index 100%
rename from docs/index.html
rename to site/docs/index.html
diff --git a/docs/patterns/accordion.md b/site/docs/patterns/accordion.md
similarity index 100%
rename from docs/patterns/accordion.md
rename to site/docs/patterns/accordion.md
diff --git a/docs/patterns/article-pagination.md b/site/docs/patterns/article-pagination.md
similarity index 100%
rename from docs/patterns/article-pagination.md
rename to site/docs/patterns/article-pagination.md
diff --git a/docs/patterns/breadcrumbs.md b/site/docs/patterns/breadcrumbs.md
similarity index 100%
rename from docs/patterns/breadcrumbs.md
rename to site/docs/patterns/breadcrumbs.md
diff --git a/docs/patterns/buttons.md b/site/docs/patterns/buttons.md
similarity index 100%
rename from docs/patterns/buttons.md
rename to site/docs/patterns/buttons.md
diff --git a/docs/patterns/card.md b/site/docs/patterns/card.md
similarity index 100%
rename from docs/patterns/card.md
rename to site/docs/patterns/card.md
diff --git a/docs/patterns/contextual-menu.md b/site/docs/patterns/contextual-menu.md
similarity index 100%
rename from docs/patterns/contextual-menu.md
rename to site/docs/patterns/contextual-menu.md
diff --git a/docs/patterns/grid.md b/site/docs/patterns/grid.md
similarity index 100%
rename from docs/patterns/grid.md
rename to site/docs/patterns/grid.md
diff --git a/docs/patterns/heading-icon.md b/site/docs/patterns/heading-icon.md
similarity index 100%
rename from docs/patterns/heading-icon.md
rename to site/docs/patterns/heading-icon.md
diff --git a/docs/patterns/icons.md b/site/docs/patterns/icons.md
similarity index 100%
rename from docs/patterns/icons.md
rename to site/docs/patterns/icons.md
diff --git a/docs/patterns/images.md b/site/docs/patterns/images.md
similarity index 100%
rename from docs/patterns/images.md
rename to site/docs/patterns/images.md
diff --git a/docs/patterns/inline-images.md b/site/docs/patterns/inline-images.md
similarity index 100%
rename from docs/patterns/inline-images.md
rename to site/docs/patterns/inline-images.md
diff --git a/docs/patterns/labels.md b/site/docs/patterns/labels.md
similarity index 100%
rename from docs/patterns/labels.md
rename to site/docs/patterns/labels.md
diff --git a/docs/patterns/links.md b/site/docs/patterns/links.md
similarity index 100%
rename from docs/patterns/links.md
rename to site/docs/patterns/links.md
diff --git a/docs/patterns/list-tree.md b/site/docs/patterns/list-tree.md
similarity index 100%
rename from docs/patterns/list-tree.md
rename to site/docs/patterns/list-tree.md
diff --git a/docs/patterns/lists.md b/site/docs/patterns/lists.md
similarity index 100%
rename from docs/patterns/lists.md
rename to site/docs/patterns/lists.md
diff --git a/docs/patterns/matrix.md b/site/docs/patterns/matrix.md
similarity index 100%
rename from docs/patterns/matrix.md
rename to site/docs/patterns/matrix.md
diff --git a/docs/patterns/media-object.md b/site/docs/patterns/media-object.md
similarity index 100%
rename from docs/patterns/media-object.md
rename to site/docs/patterns/media-object.md
diff --git a/docs/patterns/modal.md b/site/docs/patterns/modal.md
similarity index 100%
rename from docs/patterns/modal.md
rename to site/docs/patterns/modal.md
diff --git a/docs/patterns/muted-heading.md b/site/docs/patterns/muted-heading.md
similarity index 100%
rename from docs/patterns/muted-heading.md
rename to site/docs/patterns/muted-heading.md
diff --git a/docs/patterns/navigation.md b/site/docs/patterns/navigation.md
similarity index 100%
rename from docs/patterns/navigation.md
rename to site/docs/patterns/navigation.md
diff --git a/docs/patterns/notification.md b/site/docs/patterns/notification.md
similarity index 100%
rename from docs/patterns/notification.md
rename to site/docs/patterns/notification.md
diff --git a/docs/patterns/pagination.md b/site/docs/patterns/pagination.md
similarity index 100%
rename from docs/patterns/pagination.md
rename to site/docs/patterns/pagination.md
diff --git a/docs/patterns/pull-quote.md b/site/docs/patterns/pull-quote.md
similarity index 100%
rename from docs/patterns/pull-quote.md
rename to site/docs/patterns/pull-quote.md
diff --git a/docs/patterns/search-box.md b/site/docs/patterns/search-box.md
similarity index 100%
rename from docs/patterns/search-box.md
rename to site/docs/patterns/search-box.md
diff --git a/docs/patterns/slider.md b/site/docs/patterns/slider.md
similarity index 100%
rename from docs/patterns/slider.md
rename to site/docs/patterns/slider.md
diff --git a/docs/patterns/strip.md b/site/docs/patterns/strip.md
similarity index 100%
rename from docs/patterns/strip.md
rename to site/docs/patterns/strip.md
diff --git a/docs/patterns/switch.md b/site/docs/patterns/switch.md
similarity index 100%
rename from docs/patterns/switch.md
rename to site/docs/patterns/switch.md
diff --git a/docs/patterns/table-of-contents.md b/site/docs/patterns/table-of-contents.md
similarity index 100%
rename from docs/patterns/table-of-contents.md
rename to site/docs/patterns/table-of-contents.md
diff --git a/docs/patterns/tabs.md b/site/docs/patterns/tabs.md
similarity index 100%
rename from docs/patterns/tabs.md
rename to site/docs/patterns/tabs.md
diff --git a/docs/patterns/tooltips.md b/site/docs/patterns/tooltips.md
similarity index 100%
rename from docs/patterns/tooltips.md
rename to site/docs/patterns/tooltips.md
diff --git a/docs/search.html b/site/docs/search.html
similarity index 100%
rename from docs/search.html
rename to site/docs/search.html
diff --git a/docs/settings/animation-settings.md b/site/docs/settings/animation-settings.md
similarity index 100%
rename from docs/settings/animation-settings.md
rename to site/docs/settings/animation-settings.md
diff --git a/docs/settings/assets-settings.md b/site/docs/settings/assets-settings.md
similarity index 100%
rename from docs/settings/assets-settings.md
rename to site/docs/settings/assets-settings.md
diff --git a/docs/settings/breakpoint-settings.md b/site/docs/settings/breakpoint-settings.md
similarity index 100%
rename from docs/settings/breakpoint-settings.md
rename to site/docs/settings/breakpoint-settings.md
diff --git a/docs/settings/color-settings.md b/site/docs/settings/color-settings.md
similarity index 100%
rename from docs/settings/color-settings.md
rename to site/docs/settings/color-settings.md
diff --git a/docs/settings/font-settings.md b/site/docs/settings/font-settings.md
similarity index 100%
rename from docs/settings/font-settings.md
rename to site/docs/settings/font-settings.md
diff --git a/docs/settings/layout-settings.md b/site/docs/settings/layout-settings.md
similarity index 100%
rename from docs/settings/layout-settings.md
rename to site/docs/settings/layout-settings.md
diff --git a/docs/settings/placeholder-settings.md b/site/docs/settings/placeholder-settings.md
similarity index 100%
rename from docs/settings/placeholder-settings.md
rename to site/docs/settings/placeholder-settings.md
diff --git a/docs/settings/spacing-settings.md b/site/docs/settings/spacing-settings.md
similarity index 100%
rename from docs/settings/spacing-settings.md
rename to site/docs/settings/spacing-settings.md
diff --git a/docs/settings/table-layout.md b/site/docs/settings/table-layout.md
similarity index 100%
rename from docs/settings/table-layout.md
rename to site/docs/settings/table-layout.md
diff --git a/docs/utilities/align.md b/site/docs/utilities/align.md
similarity index 100%
rename from docs/utilities/align.md
rename to site/docs/utilities/align.md
diff --git a/docs/utilities/baseline-grid.md b/site/docs/utilities/baseline-grid.md
similarity index 100%
rename from docs/utilities/baseline-grid.md
rename to site/docs/utilities/baseline-grid.md
diff --git a/docs/utilities/clearfix.md b/site/docs/utilities/clearfix.md
similarity index 100%
rename from docs/utilities/clearfix.md
rename to site/docs/utilities/clearfix.md
diff --git a/docs/utilities/embedded-media.md b/site/docs/utilities/embedded-media.md
similarity index 100%
rename from docs/utilities/embedded-media.md
rename to site/docs/utilities/embedded-media.md
diff --git a/docs/utilities/equal-height.md b/site/docs/utilities/equal-height.md
similarity index 100%
rename from docs/utilities/equal-height.md
rename to site/docs/utilities/equal-height.md
diff --git a/docs/utilities/floats.md b/site/docs/utilities/floats.md
similarity index 100%
rename from docs/utilities/floats.md
rename to site/docs/utilities/floats.md
diff --git a/docs/utilities/font-metrics.md b/site/docs/utilities/font-metrics.md
similarity index 100%
rename from docs/utilities/font-metrics.md
rename to site/docs/utilities/font-metrics.md
diff --git a/docs/utilities/functions.md b/site/docs/utilities/functions.md
similarity index 100%
rename from docs/utilities/functions.md
rename to site/docs/utilities/functions.md
diff --git a/docs/utilities/hide.md b/site/docs/utilities/hide.md
similarity index 100%
rename from docs/utilities/hide.md
rename to site/docs/utilities/hide.md
diff --git a/docs/utilities/image-position.md b/site/docs/utilities/image-position.md
similarity index 100%
rename from docs/utilities/image-position.md
rename to site/docs/utilities/image-position.md
diff --git a/docs/utilities/margin-collapse.md b/site/docs/utilities/margin-collapse.md
similarity index 100%
rename from docs/utilities/margin-collapse.md
rename to site/docs/utilities/margin-collapse.md
diff --git a/docs/utilities/no-print.md b/site/docs/utilities/no-print.md
similarity index 100%
rename from docs/utilities/no-print.md
rename to site/docs/utilities/no-print.md
diff --git a/docs/utilities/off-screen.md b/site/docs/utilities/off-screen.md
similarity index 100%
rename from docs/utilities/off-screen.md
rename to site/docs/utilities/off-screen.md
diff --git a/docs/utilities/padding-collapse.md b/site/docs/utilities/padding-collapse.md
similarity index 100%
rename from docs/utilities/padding-collapse.md
rename to site/docs/utilities/padding-collapse.md
diff --git a/docs/utilities/show.md b/site/docs/utilities/show.md
similarity index 100%
rename from docs/utilities/show.md
rename to site/docs/utilities/show.md
diff --git a/docs/utilities/table-cell-padding-overlap.md b/site/docs/utilities/table-cell-padding-overlap.md
similarity index 100%
rename from docs/utilities/table-cell-padding-overlap.md
rename to site/docs/utilities/table-cell-padding-overlap.md
diff --git a/docs/utilities/truncate.md b/site/docs/utilities/truncate.md
similarity index 100%
rename from docs/utilities/truncate.md
rename to site/docs/utilities/truncate.md
diff --git a/docs/utilities/vertically-center.md b/site/docs/utilities/vertically-center.md
similarity index 100%
rename from docs/utilities/vertically-center.md
rename to site/docs/utilities/vertically-center.md
diff --git a/docs/static/build b/site/static/build
similarity index 100%
rename from docs/static/build
rename to site/static/build
diff --git a/docs/static/js/example.js b/site/static/js/example.js
similarity index 100%
rename from docs/static/js/example.js
rename to site/static/js/example.js
diff --git a/docs/static/js/scripts.js b/site/static/js/scripts.js
similarity index 100%
rename from docs/static/js/scripts.js
rename to site/static/js/scripts.js
diff --git a/webapp/app.py b/webapp/app.py
index 6667736033..abca1db6e9 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -18,8 +18,8 @@
 app = FlaskBase(
     __name__,
     "docs.vanillaframework.io",
-    template_folder="../docs",
-    static_folder="../docs/static",
+    template_folder="../site",
+    static_folder="../site/static",
     template_404="404.html",
     template_500="500.html",
 )
@@ -32,20 +32,20 @@ def _get_title(title):
 
 
 def _get_examples():
-    example_files = glob.glob("docs/examples/*/**/*.html", recursive=True)
+    example_files = glob.glob("site/docs/examples/*/**/*.html", recursive=True)
     examples = {}
 
     for filepath in sorted(example_files):
-        # Remove "docs/" prefix
-        docs_length = len("docs/")
+        # Remove "site/" prefix
+        docs_length = len("site/")
 
         # Get template object
         template_path = filepath[docs_length:]
         template = flask.current_app.jinja_env.get_template(template_path)
 
-        # Remove "examples/"
-        examples_length = len("examples/")
-        # Remove "examples/" and extension for the path
+        # Remove "docs/examples/"
+        examples_length = len("docs/examples/")
+        # Remove "docs/examples/" and extension for the path
         example_path = os.path.splitext(template_path[examples_length:])[0]
 
         outermost_parent = example_path.split(os.sep).pop(0)
@@ -71,33 +71,33 @@ def global_template_context():
 template_finder_view = TemplateFinder.as_view("template_finder")
 
 
-@app.route("/examples")
+@app.route("/docs/examples")
 def examples_index():
     return flask.render_template(
-        "examples/index.html", examples=_get_examples()
+        "docs/examples/index.html", examples=_get_examples()
     )
 
 
-@app.route("/examples/standalone")
+@app.route("/docs/examples/standalone")
 def standalone_examples_index():
     return flask.render_template(
-        "examples/standalone.html", examples=_get_examples()
+        "docs/examples/standalone.html", examples=_get_examples()
     )
 
 
-@app.route("/examples/standalone/<path:example_path>")
+@app.route("/docs/examples/standalone/<path:example_path>")
 def standalone_example(example_path):
     return flask.render_template(
-        f"examples/{example_path}.html", is_standalone=True
+        f"docs/examples/{example_path}.html", is_standalone=True
     )
 
 
 app.add_url_rule("/", view_func=template_finder_view)
 app.add_url_rule(
-    "/search",
+    "/docs/search",
     "search",
     build_search_view(
-        site="docs.vanillaframework.io", template_path="search.html"
+        site="docs.vanillaframework.io", template_path="docs/search.html"
     ),
 )
 app.add_url_rule("/<path:subpath>", view_func=template_finder_view)

From b4ccda0f3285d039546b7e15a8f4a07eb7aafd30 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Mon, 2 Mar 2020 14:25:41 +0000
Subject: [PATCH 02/23] Fix example links

---
 site/_layouts/default.html                    |  4 +--
 site/docs/base/code.md                        |  6 ++--
 site/docs/base/forms.md                       | 34 +++++++++----------
 site/docs/base/tables.md                      |  8 ++---
 site/docs/base/typography.md                  | 28 +++++++--------
 site/docs/examples/index.html                 | 10 +++---
 site/docs/examples/standalone.html            |  4 +--
 site/docs/patterns/accordion.md               |  2 +-
 site/docs/patterns/article-pagination.md      |  2 +-
 site/docs/patterns/breadcrumbs.md             |  2 +-
 site/docs/patterns/buttons.md                 | 16 ++++-----
 site/docs/patterns/card.md                    |  8 ++---
 site/docs/patterns/contextual-menu.md         |  6 ++--
 site/docs/patterns/grid.md                    | 10 +++---
 site/docs/patterns/heading-icon.md            |  6 ++--
 site/docs/patterns/images.md                  |  4 +--
 site/docs/patterns/inline-images.md           |  2 +-
 site/docs/patterns/labels.md                  | 10 +++---
 site/docs/patterns/links.md                   | 10 +++---
 site/docs/patterns/list-tree.md               |  2 +-
 site/docs/patterns/lists.md                   | 20 +++++------
 site/docs/patterns/matrix.md                  |  2 +-
 site/docs/patterns/media-object.md            |  6 ++--
 site/docs/patterns/modal.md                   |  2 +-
 site/docs/patterns/muted-heading.md           |  2 +-
 site/docs/patterns/navigation.md              |  4 +--
 site/docs/patterns/notification.md            | 12 +++----
 site/docs/patterns/pagination.md              |  6 ++--
 site/docs/patterns/pull-quote.md              |  8 ++---
 site/docs/patterns/search-box.md              |  4 +--
 site/docs/patterns/slider.md                  |  2 +-
 site/docs/patterns/strip.md                   | 14 ++++----
 site/docs/patterns/switch.md                  |  2 +-
 site/docs/patterns/table-of-contents.md       |  2 +-
 site/docs/patterns/tabs.md                    |  2 +-
 site/docs/patterns/tooltips.md                |  2 +-
 site/docs/settings/animation-settings.md      |  2 +-
 site/docs/settings/spacing-settings.md        |  2 +-
 site/docs/utilities/align.md                  |  2 +-
 site/docs/utilities/baseline-grid.md          |  2 +-
 site/docs/utilities/clearfix.md               |  2 +-
 site/docs/utilities/embedded-media.md         |  2 +-
 site/docs/utilities/equal-height.md           |  2 +-
 site/docs/utilities/floats.md                 |  8 ++---
 site/docs/utilities/font-metrics.md           |  2 +-
 site/docs/utilities/hide.md                   |  2 +-
 site/docs/utilities/image-position.md         | 16 ++++-----
 site/docs/utilities/margin-collapse.md        |  2 +-
 site/docs/utilities/no-print.md               |  2 +-
 site/docs/utilities/off-screen.md             |  2 +-
 site/docs/utilities/padding-collapse.md       |  2 +-
 site/docs/utilities/show.md                   |  2 +-
 .../utilities/table-cell-padding-overlap.md   |  2 +-
 site/docs/utilities/truncate.md               |  2 +-
 site/docs/utilities/vertically-center.md      |  2 +-
 55 files changed, 161 insertions(+), 161 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 451944bf4e..3dfd2d82a3 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -43,7 +43,7 @@
           </span>
           <ul class="p-navigation__items">
             <li class="p-navigation__item {% if '/examples' not in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/">Docs</a></li>
-            <li class="p-navigation__item {% if '/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/examples">Examples</a></li>
+            <li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/accessibility">Accessibility</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/browser-support">Browser support</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/contribute">Contribute</a></li>
@@ -162,7 +162,7 @@
               <li class="p-sidebar-nav__item">
                 <strong>Resources</strong>
                 <ul class="p-sidebar-nav__list">
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/examples' %}is-active{% endif %}" href="/examples">Component examples</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/examples' %}is-active{% endif %}" href="/docs/examples">Component examples</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/component-status' %}is-active{% endif %}" href="/component-status">Component status</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft" href="https://assets.ubuntu.com/latest-redirects/vanilla-framework.sketch">Download the Sketch UI Kit</a></li>
                 </ul>
diff --git a/site/docs/base/code.md b/site/docs/base/code.md
index 774a5c5638..750d44cb5b 100644
--- a/site/docs/base/code.md
+++ b/site/docs/base/code.md
@@ -18,7 +18,7 @@ When you refer to code inline with other text, use the <code>&lt;code></code> ta
 
 If you want to refer to a larger piece of code, use <code>&lt;pre></code> together with the <code>&lt;code></code> tag.
 
-<a href="/examples/base/code/" class="js-example">
+<a href="/docs/examples/base/code/" class="js-example">
 View example of the base code block
 </a>
 
@@ -41,7 +41,7 @@ This component should be used when displaying a single line of code, accompanied
   </div>
 </div>
 
-<a href="/examples/patterns/code-copyable/" class="js-example">
+<a href="/docs/examples/patterns/code-copyable/" class="js-example">
 View example of the code copyable pattern
 </a>
 
@@ -53,7 +53,7 @@ Please copy the entire JS in the example, for copy to clipboard functionality.
 
 The code numbered pattern can be used when displaying large blocks of code to enable users to quickly reference a specific line.
 
-<a href="/examples/patterns/code-numbered/" class="js-example">
+<a href="/docs/examples/patterns/code-numbered/" class="js-example">
 View example of the code numbered pattern
 </a>
 
diff --git a/site/docs/base/forms.md b/site/docs/base/forms.md
index 094960f72d..a76ff2ee07 100644
--- a/site/docs/base/forms.md
+++ b/site/docs/base/forms.md
@@ -10,7 +10,7 @@ context:
 
 Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
 
-<a href="/examples/base/forms/form/" class="js-example">
+<a href="/docs/examples/base/forms/form/" class="js-example">
 View example of a base form
 </a>
 
@@ -18,7 +18,7 @@ View example of a base form
 
 An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
 
-<a href="/examples/base/forms/input/" class="js-example">
+<a href="/docs/examples/base/forms/input/" class="js-example">
 View example of an input element
 </a>
 
@@ -30,7 +30,7 @@ We support all HTML5 input types: `text`, `password`, `datetime`, `datetime-loca
 
 The `<textarea>` tag defines a multi-line text input control.
 
-<a href="/examples/base/forms/textarea/" class="js-example">
+<a href="/docs/examples/base/forms/textarea/" class="js-example">
 View example of an input element
 </a>
 
@@ -40,7 +40,7 @@ Note: The attribute `readonly` disables the input but it still retains a default
 
 Use checkboxes to select one or more options, default checkboxes can appear in three states: selected, unselected and disabled.
 
-<a href="/examples/base/forms/checkboxes/" class="js-example">
+<a href="/docs/examples/base/forms/checkboxes/" class="js-example">
 View example of the base checkboxes
 </a>
 
@@ -49,7 +49,7 @@ View example of the base checkboxes
 By default, checkboxes are vertically aligned to the baseline of text wrapped in a `label`, `h5`, `h6`, or `p` tag. If you need to align them to other elements, use one of the following classes:
 `is-h1`, `is-h2`, `is-h3`, `is-h4`, `is-h5`, `is-muted-heading`, `is-muted-inline-heading`, `is-inline-label`, or `is-table-header`.
 
-<a href="/examples/base/forms/aligned-checkboxes/" class="js-example">
+<a href="/docs/examples/base/forms/aligned-checkboxes/" class="js-example">
 View example of checkboxes aligned to different headings
 </a>
 
@@ -57,7 +57,7 @@ View example of checkboxes aligned to different headings
 
 Use radio buttons to select one or more options, our radio buttons can appear in four states: both selected, unselected and disabled.
 
-<a href="/examples/base/forms/radio-buttons/" class="js-example">
+<a href="/docs/examples/base/forms/radio-buttons/" class="js-example">
 View example of the base radio buttons
 </a>
 
@@ -66,7 +66,7 @@ View example of the base radio buttons
 By default, radio buttons are vertically aligned to the baseline of text wrapped in a `label`, `h5`, `h6`, or `p` tag. If you need to align them to other elements, use one of the following classes:
 `is-h1`, `is-h2`, `is-h3`, `is-h4`, `is-h5`, `is-muted-heading`, `is-muted-inline-heading`, `is-inline-label`, or `is-table-header`.
 
-<a href="/examples/base/forms/aligned-radio/" class="js-example">
+<a href="/docs/examples/base/forms/aligned-radio/" class="js-example">
 View example of the aligned radio buttons
 </a>
 
@@ -74,13 +74,13 @@ View example of the aligned radio buttons
 
 Use the `<select>` element to create a drop-down list.
 
-<a href="/examples/base/forms/selects/" class="js-example">
+<a href="/docs/examples/base/forms/selects/" class="js-example">
 View example of the base selects
 </a>
 
 Use the `multiple` attribute to create a multiple select control.
 
-<a href="/examples/base/forms/select-multiple/" class="js-example">
+<a href="/docs/examples/base/forms/select-multiple/" class="js-example">
 View example of the base multiple selects
 </a>
 
@@ -90,7 +90,7 @@ View example of the base multiple selects
 
 The `<input type="range">` allows a user to select from a specified range of values, where the precise value is not considered important.
 
-<a href="/examples/base/forms/range/" class="js-example">
+<a href="/docs/examples/base/forms/range/" class="js-example">
 View example of the slider pattern
 </a>
 
@@ -98,7 +98,7 @@ View example of the slider pattern
 
 You can use the `<fieldset>` element to divide the form into different logical sections.
 
-<a href="/examples/base/forms/fieldset/" class="js-example">
+<a href="/docs/examples/base/forms/fieldset/" class="js-example">
 View example of the base form fieldset
 </a>
 
@@ -106,7 +106,7 @@ View example of the base form fieldset
 
 By applying the class `.p-form--inline` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be inline.
 
-<a href="/examples/patterns/forms/form-inline/" class="js-example">
+<a href="/docs/examples/patterns/forms/form-inline/" class="js-example">
 View examples of form inline patterns
 </a>
 
@@ -114,7 +114,7 @@ View examples of form inline patterns
 
 By applying the class `.p-form--stacked` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be stacked.
 
-<a href="/examples/patterns/forms/form-stacked/" class="js-example">
+<a href="/docs/examples/patterns/forms/form-stacked/" class="js-example">
 View examples of form stacked patterns
 </a>
 
@@ -128,7 +128,7 @@ Adding the `disabled` attribute to an input will prevent user interaction.
   </p>
 </div>
 
-<a href="/examples/base/forms/disabled-input/" class="js-example">
+<a href="/docs/examples/base/forms/disabled-input/" class="js-example">
 View example of a disabled input
 </a>
 
@@ -140,7 +140,7 @@ If your form uses select elements then you will additionally need to wrap only t
 
 Descriptive text relating to the element's validation status should use the class `p-form-validation__message`.
 
-<a href="/examples/patterns/forms/form-validation/" class="js-example">
+<a href="/docs/examples/patterns/forms/form-validation/" class="js-example">
 View example of form validation patterns
 </a>
 
@@ -148,7 +148,7 @@ View example of form validation patterns
 
 By applying the class `.is-required` the attribute specifies that an input field must be filled out before submitting the form.
 
-<a href="/examples/patterns/forms/forms-required/" class="js-example">
+<a href="/docs/examples/patterns/forms/forms-required/" class="js-example">
 View example of an input required element
 </a>
 
@@ -156,7 +156,7 @@ View example of an input required element
 
 In contexts where vertical space is limited, e.g. inside a table row, you might prefer form elements with reduced vertical padding. Add class `.is-dense` to achieve that:
 
-<a href="/examples/patterns/forms/dense/" class="js-example">
+<a href="/docs/examples/patterns/forms/dense/" class="js-example">
 View example of the dense form elements
 </a>
 
diff --git a/site/docs/base/tables.md b/site/docs/base/tables.md
index 5df10348d1..d05c5f23c7 100644
--- a/site/docs/base/tables.md
+++ b/site/docs/base/tables.md
@@ -15,7 +15,7 @@ to the right by adding the class `.u-align--right` to each individual cell,
 as in the example that follows. This is considered good practice when formatting
 data tables as it makes it easier to scan and compare the values quickly.
 
-<a href="/examples/base/table/" class="js-example">
+<a href="/docs/examples/base/table/" class="js-example">
 View example of the base table
 </a>
 
@@ -23,7 +23,7 @@ View example of the base table
 
 Using the class `p-table--sortable` and assigning `role="columnheader"` and `aria-sort` to each `<th>` element will show each table column to be sortable. With javascript toggling between `ascending` and `descending` for the `aria-sort` attribute it will change the chevron icon in that direction.
 
-<a href="/examples/patterns/tables/table-sortable/" class="js-example">
+<a href="/docs/examples/patterns/tables/table-sortable/" class="js-example">
 View example of the table sortable pattern
 </a>
 
@@ -35,7 +35,7 @@ This pattern should be used when a table requires configuration fields (add, edi
 
 Using `p-table-expanding__panel` it can be hidden using the `aria-hidden` attribute. The table must contain all table cells required.
 
-<a href="/examples/patterns/tables/table-expanding/" class="js-example">
+<a href="/docs/examples/patterns/tables/table-expanding/" class="js-example">
 View example of the expanding table pattern
 </a>
 
@@ -46,7 +46,7 @@ an `[aria-label]` to describe the cell on a mobile screen. We use the content to
 
 The `<thead>` element is completely hidden from view on a smaller screen and if the table holds a `.p-contextual-menu` pattern all the children elements will be visible and be interactive.
 
-<a href="/examples/patterns/tables/table-mobile-card/" class="js-example">
+<a href="/docs/examples/patterns/tables/table-mobile-card/" class="js-example">
 View example of the patterns table mobile card
 </a>
 
diff --git a/site/docs/base/typography.md b/site/docs/base/typography.md
index 7b55c65808..13279e6ba4 100644
--- a/site/docs/base/typography.md
+++ b/site/docs/base/typography.md
@@ -75,7 +75,7 @@ heading order and semantics.
 In the following example, each heading is actually a `<p>` element that has been
 modified to look like a particular heading size.
 
-<a href="/examples/patterns/headings/default/" class="js-example">
+<a href="/docs/examples/patterns/headings/default/" class="js-example">
 View example of the heading pattern
 </a>
 
@@ -85,7 +85,7 @@ View example of the heading pattern
 
 Sub-headings visually convey importance beneath a heading, or a line of text that expands on the meaning of the heading immediately before it.
 
-<a href="/examples/base/sub-headings/" class="js-example">
+<a href="/docs/examples/base/sub-headings/" class="js-example">
 View example of the heading pattern
 </a>
 
@@ -94,7 +94,7 @@ View example of the heading pattern
 It is also possible to apply heading classes directly to heading elements if that
 better suits your document style and tree.
 
-<a href="/examples/patterns/headings/mixed/" class="js-example">
+<a href="/docs/examples/patterns/headings/mixed/" class="js-example">
 View example of the mixed headings pattern
 </a>
 
@@ -105,7 +105,7 @@ Line length, measured in number of characters per line (CPL), has been shown to
 The max-width of text elements in Vanilla Framework is limited using the `$max-width--default` variable, currently set to `40em`, or around 90 characters.
 
 Vanilla also includes a utility to unset the max-width where necessary &ndash; `u-no-max-width`:
-<a href="/examples/utilities/max-width-unset/" class="js-example">
+<a href="/docs/examples/utilities/max-width-unset/" class="js-example">
 View example of how to unset max-width
 </a>
 
@@ -118,7 +118,7 @@ Overriding or unsetting the `max-width` is reasonable in certain cases:
 
 Use an ordered list when the order of the items is important.
 
-<a href="/examples/base/lists/ordered-list/" class="js-example">
+<a href="/docs/examples/base/lists/ordered-list/" class="js-example">
 View example of the base ordered list
 </a>
 
@@ -126,7 +126,7 @@ View example of the base ordered list
 
 Use an unordered list when the order of the items isn't important.
 
-<a href="/examples/base/lists/unordered-list/" class="js-example">
+<a href="/docs/examples/base/lists/unordered-list/" class="js-example">
 View example of the base unordered list
 </a>
 
@@ -135,43 +135,43 @@ View example of the base unordered list
 Use a definition list when you want to list a group of one or more terms and
 descriptions.
 
-<a href="/examples/base/lists/definition-list/" class="js-example">
+<a href="/docs/examples/base/lists/definition-list/" class="js-example">
 View example of the base definition list
 </a>
 
 ### Blockquotes and citations
 
-<a href="/examples/base/blockquotes/" class="js-example">
+<a href="/docs/examples/base/blockquotes/" class="js-example">
 View example of the base blockquotes
 </a>
 
 ### Small text
 
-<a href="/examples/base/small/" class="js-example">
+<a href="/docs/examples/base/small/" class="js-example">
 View example of the small text
 </a>
 
 ### Strong text
 
-<a href="/examples/base/strong/" class="js-example">
+<a href="/docs/examples/base/strong/" class="js-example">
 View example of the strong text
 </a>
 
 ### Superscripted text
 
-<a href="/examples/base/sup/" class="js-example">
+<a href="/docs/examples/base/sup/" class="js-example">
 View example of the superscripted pattern
 </a>
 
 ### Subscripted text
 
-<a href="/examples/base/sub/" class="js-example">
+<a href="/docs/examples/base/sub/" class="js-example">
 View example of the subscripted pattern
 </a>
 
 ### Abbreviation
 
-<a href="/examples/base/abbr/" class="js-example">
+<a href="/docs/examples/base/abbr/" class="js-example">
 View example of the abbreviation pattern
 </a>
 
@@ -179,7 +179,7 @@ View example of the abbreviation pattern
 
 If you are using the Ubuntu font, it comes in five weights; thin, light, regular, medium, and bold.
 
-<a href="/examples/base/font-weights/" class="js-example">
+<a href="/docs/examples/base/font-weights/" class="js-example">
 View example of the Ubuntu font weights.
 </a>
 
diff --git a/site/docs/examples/index.html b/site/docs/examples/index.html
index 04d2c3b985..5cd0dc4241 100755
--- a/site/docs/examples/index.html
+++ b/site/docs/examples/index.html
@@ -14,7 +14,7 @@ <h3>Base elements</h3>
       <ul class="p-list">
         {% for example in examples.base %}
           <li class="p-list__item">
-            <a href="/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -26,7 +26,7 @@ <h3>Components</h3>
       <ul class="p-list">
         {% for example in examples.patterns %}
           <li class="p-list__item">
-            <a href="/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -38,7 +38,7 @@ <h3>Utilities</h3>
       <ul class="p-list">
         {% for example in examples.utilities %}
           <li class="p-list__item">
-            <a href="/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -50,7 +50,7 @@ <h3>Templates</h3>
       <ul class="p-list">
         {% for example in examples.templates %}
           <li class="p-list__item">
-            <a href="/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -58,5 +58,5 @@ <h3>Templates</h3>
   </div>
 </div>
 
-<p><a href="/examples/standalone">Examples using standalone component CSS for testing/debugging</a></p>
+<p><a href="/docs/examples/standalone">Examples using standalone component CSS for testing/debugging</a></p>
 {% endblock %}
diff --git a/site/docs/examples/standalone.html b/site/docs/examples/standalone.html
index 91ec22db09..9c96cc491f 100644
--- a/site/docs/examples/standalone.html
+++ b/site/docs/examples/standalone.html
@@ -19,7 +19,7 @@ <h3>Base elements</h3>
       <ul class="p-list">
         {% for example in examples.base %}
           <li class="p-list__item">
-            <a href="/examples/standalone/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/standalone/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -31,7 +31,7 @@ <h3>Components</h3>
       <ul class="p-list">
         {% for example in examples.patterns %}
           <li class="p-list__item">
-            <a href="/examples/standalone/{{ example.path }}" class="p-link">{{ example.title }}</a>
+            <a href="/docs/examples/standalone/{{ example.path }}" class="p-link">{{ example.title }}</a>
           </li>
         {% endfor %}
       </ul>
diff --git a/site/docs/patterns/accordion.md b/site/docs/patterns/accordion.md
index c77cfe1632..13d302d882 100644
--- a/site/docs/patterns/accordion.md
+++ b/site/docs/patterns/accordion.md
@@ -20,7 +20,7 @@ Each tab styling can be changed to open or collapse using `aria-expanded`, set `
   </p>
 </div>
 
-<a href="/examples/patterns/accordion/" class="js-example">
+<a href="/docs/examples/patterns/accordion/" class="js-example">
 View example of the accordion pattern
 </a>
 
diff --git a/site/docs/patterns/article-pagination.md b/site/docs/patterns/article-pagination.md
index a77e346e43..1924973beb 100644
--- a/site/docs/patterns/article-pagination.md
+++ b/site/docs/patterns/article-pagination.md
@@ -10,7 +10,7 @@ context:
 
 The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
 
-<a href="/examples/patterns/article-pagination" class="js-example">
+<a href="/docs/examples/patterns/article-pagination" class="js-example">
 View example of the pagination pattern
 </a>
 
diff --git a/site/docs/patterns/breadcrumbs.md b/site/docs/patterns/breadcrumbs.md
index a3c7b90039..d2ca067761 100644
--- a/site/docs/patterns/breadcrumbs.md
+++ b/site/docs/patterns/breadcrumbs.md
@@ -12,7 +12,7 @@ You can use the breadcrumbs pattern to indicate where the current page sits in
 the site's navigation. The separators between each item are added via CSS, so
 you don't have to include them manually.
 
-<a href="/examples/patterns/breadcrumbs/" class="js-example">
+<a href="/docs/examples/patterns/breadcrumbs/" class="js-example">
 View example of the breadcrumbs pattern
 </a>
 
diff --git a/site/docs/patterns/buttons.md b/site/docs/patterns/buttons.md
index c89f5703cc..47e3dbd3a6 100644
--- a/site/docs/patterns/buttons.md
+++ b/site/docs/patterns/buttons.md
@@ -20,7 +20,7 @@ Buttons are clickable elements used to perform an action, you can apply `button`
 
 A base button is usually used alongside a neutral button.
 
-<a href="/examples/patterns/buttons/base/" class="js-example">
+<a href="/docs/examples/patterns/buttons/base/" class="js-example">
 View example of the base button pattern
 </a>
 
@@ -28,7 +28,7 @@ View example of the base button pattern
 
 A neutral button can be used to indicate a positive action that isn't necessarily the main call-to-action.
 
-<a href="/examples/patterns/buttons/neutral/" class="js-example">
+<a href="/docs/examples/patterns/buttons/neutral/" class="js-example">
 View example of the neutral button pattern
 </a>
 
@@ -36,7 +36,7 @@ View example of the neutral button pattern
 
 A positive button can be used to indicate a positive action that is the main call-to-action.
 
-<a href="/examples/patterns/buttons/positive/" class="js-example">
+<a href="/docs/examples/patterns/buttons/positive/" class="js-example">
 View example of the positive button pattern
 </a>
 
@@ -44,7 +44,7 @@ View example of the positive button pattern
 
 A negative button can be used to indicate a negative action that is destructive or permanent.
 
-<a href="/examples/patterns/buttons/negative/" class="js-example">
+<a href="/docs/examples/patterns/buttons/negative/" class="js-example">
 View example of the negative button pattern
 </a>
 
@@ -52,7 +52,7 @@ View example of the negative button pattern
 
 You can use the brand button with the main color of your brand.
 
-<a href="/examples/patterns/buttons/brand/" class="js-example">
+<a href="/docs/examples/patterns/buttons/brand/" class="js-example">
 View example of the brand button pattern
 </a>
 
@@ -60,7 +60,7 @@ View example of the brand button pattern
 
 Should you wish to place a button after a line of inline text, as a CTA for example, you can do so by adding the state class `is-inline` to the button element.
 
-<a href="/examples/patterns/buttons/inline/" class="js-example">
+<a href="/docs/examples/patterns/buttons/inline/" class="js-example">
 View example of the inline button pattern
 </a>
 
@@ -68,7 +68,7 @@ View example of the inline button pattern
 
 In contexts where vertical space is limited, you might want a button with reduced vertical padding. Add class `.is-dense` to achieve that:
 
-<a href="/examples/patterns/buttons/dense/" class="js-example">
+<a href="/docs/examples/patterns/buttons/dense/" class="js-example">
 View example of the dense button pattern
 </a>
 
@@ -76,7 +76,7 @@ View example of the dense button pattern
 
 Should you wish to place an icon in a button. You will not want to button to become full width on small screens. Therefore, you can add the state class `has-icon` to the button. If the contrast between the icon chosen and the button background is not sufficient then the `is-dark` or `is-light` classes can be added to the icon where appropriate.
 
-<a href="/examples/patterns/buttons/icon/" class="js-example">
+<a href="/docs/examples/patterns/buttons/icon/" class="js-example">
 View example of the icon button pattern
 </a>
 
diff --git a/site/docs/patterns/card.md b/site/docs/patterns/card.md
index b2ae4ad51b..70e9d2930e 100644
--- a/site/docs/patterns/card.md
+++ b/site/docs/patterns/card.md
@@ -14,7 +14,7 @@ There are four card styles available to use in Vanilla: default, header, highlig
 
 The purpose of the default card is to display information, without user interaction.
 
-<a href="/examples/patterns/card/default/" class="js-example">
+<a href="/docs/examples/patterns/card/default/" class="js-example">
 View example of the default card pattern
 </a>
 
@@ -22,7 +22,7 @@ View example of the default card pattern
 
 The purpose of the header card is to display information, grouped under a heading.
 
-<a href="/examples/patterns/card/header/" class="js-example">
+<a href="/docs/examples/patterns/card/header/" class="js-example">
 View example of the header card pattern
 </a>
 
@@ -30,7 +30,7 @@ View example of the header card pattern
 
 The purpose of the highlighted card should be used when you can interact with the content.
 
-<a href="/examples/patterns/card/highlighted/" class="js-example">
+<a href="/docs/examples/patterns/card/highlighted/" class="js-example">
 View example of the highlighted card pattern
 </a>
 
@@ -38,7 +38,7 @@ View example of the highlighted card pattern
 
 The purpose of the overlay card is to make the text visible in conjunction with a strip image.
 
-<a href="/examples/patterns/card/overlay/" class="js-example">
+<a href="/docs/examples/patterns/card/overlay/" class="js-example">
 View example of the patterns card overlay
 </a>
 
diff --git a/site/docs/patterns/contextual-menu.md b/site/docs/patterns/contextual-menu.md
index 13226852ba..8a773476e7 100644
--- a/site/docs/patterns/contextual-menu.md
+++ b/site/docs/patterns/contextual-menu.md
@@ -29,7 +29,7 @@ Using direction modifiers will change the placement of the drop-down menu. By de
   </div>
 </div>
 
-<a href="/examples/patterns/contextual-menu/default" class="js-example">
+<a href="/docs/examples/patterns/contextual-menu/default" class="js-example">
 View example of the contextual menu pattern
 </a>
 
@@ -43,7 +43,7 @@ If you require a drop-down button with a state indicator then the `p-contextual-
   </p>
 </div>
 
-<a href="/examples/patterns/contextual-menu/with-indicator" class="js-example">
+<a href="/docs/examples/patterns/contextual-menu/with-indicator" class="js-example">
 View example of the contextual menu pattern
 </a>
 
@@ -60,7 +60,7 @@ The contextual menu uses Vanilla's light theme by default. There are two ways to
 - Change the default: go to `_settings_themes.scss` and set `$theme-default-p-contextual-menu` to `dark`
 - Override the default by adding a state to `p-contextual-menu`: `is-dark` when the default navigation is light, or `is-light` when the default has been changed to dark:
 
-<a href="/examples/patterns/contextual-menu/dark" class="js-example">
+<a href="/docs/examples/patterns/contextual-menu/dark" class="js-example">
 View example of the contextual menu with an is-dark class
 </a>
 
diff --git a/site/docs/patterns/grid.md b/site/docs/patterns/grid.md
index 38ec0e997c..43c23060cb 100644
--- a/site/docs/patterns/grid.md
+++ b/site/docs/patterns/grid.md
@@ -26,7 +26,7 @@ Layouts can be created combining rows with different number of columns to an ide
 
 Read also: [Breakpoints](/settings/breakpoint-settings)
 
-<a href="/examples/patterns/grid/default/" class="js-example">
+<a href="/docs/examples/patterns/grid/default/" class="js-example">
     View example of the default grid
 </a>
 
@@ -34,7 +34,7 @@ Read also: [Breakpoints](/settings/breakpoint-settings)
 
 If you only want to constrain content so it matches the grid's fixed width, you can use the utility `.u-fixed-width`. It behaves as a grid `.row` with a single 12 column container inside:
 
-<a href="/examples/utilities/fixed-width-container/" class="js-example">
+<a href="/docs/examples/utilities/fixed-width-container/" class="js-example">
     View example of a fixed width container
 </a>
 
@@ -44,7 +44,7 @@ Columns can be nested infinitely by adding `.row` classes within columns. When n
 • keep track of the context (available columns), which is equal to the number of columns spanned by the parent element.
 • Ensure `.col-*` classes are direct descendants of `.row` classes. Failing to do so will result in a broken layout.
 
-<a href="/examples/patterns/grid/nested/" class="js-example">
+<a href="/docs/examples/patterns/grid/nested/" class="js-example">
     View example of the nested columns within the grid
 </a>
 
@@ -56,13 +56,13 @@ To leave gap columns, use `col-start-{breakpoint}{index}`, e.g.: `col-start-larg
 
 `{index}` options: an integer between 1 and the available columns.
 
-<a href="/examples/patterns/grid/empty-columns/" class="js-example">
+<a href="/docs/examples/patterns/grid/empty-columns/" class="js-example">
     View example of the empty columns within the grid
 </a>
 
 Please note, specifying a value that exceeds the available number of columns will result in incorrect offsets. This happens because the grid implicitly creates additional columns to accommodate the grid-column-start property. You should always keep track of how many available columns you have, especially when nesting. In the example below, we are indicating we want a `div` to span 3 columns, and start at position 7. This requires 10 total columns inside a `div` spanning only 4.
 
-<a href="/examples/patterns/grid/incorrect-empty-columns/" class="js-example">
+<a href="/docs/examples/patterns/grid/incorrect-empty-columns/" class="js-example">
 View example of the incorrect column offset within a nested grid
 </a>
 
diff --git a/site/docs/patterns/heading-icon.md b/site/docs/patterns/heading-icon.md
index d2df8d76bb..3424cb5853 100644
--- a/site/docs/patterns/heading-icon.md
+++ b/site/docs/patterns/heading-icon.md
@@ -11,7 +11,7 @@ context:
 
 A header can be emphasised by adding an icon alongside the text.
 
-<a href="/examples/patterns/heading-icon/heading-icon/" class="js-example">
+<a href="/docs/examples/patterns/heading-icon/heading-icon/" class="js-example">
 View example of the pattern heading icons
 </a>
 
@@ -19,7 +19,7 @@ View example of the pattern heading icons
 
 This variant positions the icon vertically with the text content for an alternate layout.
 
-<a href="/examples/patterns/heading-icon/heading-icon-stacked/" class="js-example">
+<a href="/docs/examples/patterns/heading-icon/heading-icon-stacked/" class="js-example">
 View example of the pattern heading icon stacked
 </a>
 
@@ -27,7 +27,7 @@ View example of the pattern heading icon stacked
 
 The icon for this component is also available at a smaller size of 32 x 32 pixels rather than our default size of 60 x 60 pixels.
 
-<a href="/examples/patterns/heading-icon/heading-icon-small/" class="js-example">
+<a href="/docs/examples/patterns/heading-icon/heading-icon-small/" class="js-example">
 View example of the pattern heading icon small
 </a>
 
diff --git a/site/docs/patterns/images.md b/site/docs/patterns/images.md
index 2fb715b2ae..301817fde9 100644
--- a/site/docs/patterns/images.md
+++ b/site/docs/patterns/images.md
@@ -14,7 +14,7 @@ Enhance images by adding a variant style with a border or drop shadow.
 
 A simple key-line around your image.
 
-<a href="/examples/patterns/image/bordered/" class="js-example">
+<a href="/docs/examples/patterns/image/bordered/" class="js-example">
 View example of image with border
 </a>
 
@@ -22,7 +22,7 @@ View example of image with border
 
 Add depth using our drop shadow around your image.
 
-<a href="/examples/patterns/image/shadowed/" class="js-example">
+<a href="/docs/examples/patterns/image/shadowed/" class="js-example">
 View example of image with shadow
 </a>
 
diff --git a/site/docs/patterns/inline-images.md b/site/docs/patterns/inline-images.md
index 91616aa58d..c8a39770d7 100644
--- a/site/docs/patterns/inline-images.md
+++ b/site/docs/patterns/inline-images.md
@@ -10,7 +10,7 @@ context:
 
 The Inline images pattern can be used to showcase a group of related images, such as a group of customer or partner logos.
 
-<a href="/examples/patterns/inline-images/" class="js-example">
+<a href="/docs/examples/patterns/inline-images/" class="js-example">
 View example of the inline images pattern
 </a>
 
diff --git a/site/docs/patterns/labels.md b/site/docs/patterns/labels.md
index a2a307942d..fedecd674f 100644
--- a/site/docs/patterns/labels.md
+++ b/site/docs/patterns/labels.md
@@ -20,7 +20,7 @@ Labels are static elements which you can apply to signify status, tags or any ot
 
 Label to be used on newly released components, utilities or settings that are safe to use in projects.
 
-<a href="/examples/patterns/labels/new/" class="js-example">
+<a href="/docs/examples/patterns/labels/new/" class="js-example">
 View example of the new label pattern
 </a>
 
@@ -28,7 +28,7 @@ View example of the new label pattern
 
 Label to be used on components, utilities or settings are in the process of being removed and should no longer be used in projects.
 
-<a href="/examples/patterns/labels/deprecated/" class="js-example">
+<a href="/docs/examples/patterns/labels/deprecated/" class="js-example">
 View example of the deprecated label pattern
 </a>
 
@@ -36,7 +36,7 @@ View example of the deprecated label pattern
 
 Label to be used when a design spec and code implementation are not yet finished.
 
-<a href="/examples/patterns/labels/in-progress/" class="js-example">
+<a href="/docs/examples/patterns/labels/in-progress/" class="js-example">
 View example of the in progress label pattern
 </a>
 
@@ -44,7 +44,7 @@ View example of the in progress label pattern
 
 Label to be used on existing components, utilities or settings that have been updated either through design or code.
 
-<a href="/examples/patterns/labels/updated/" class="js-example">
+<a href="/docs/examples/patterns/labels/updated/" class="js-example">
 View example of the updated label pattern
 </a>
 
@@ -52,7 +52,7 @@ View example of the updated label pattern
 
 Label to be used on a proposal approved in our bi-weekly meeting. A design spec is created and development starts ready for code review.
 
-<a href="/examples/patterns/labels/validated/" class="js-example">
+<a href="/docs/examples/patterns/labels/validated/" class="js-example">
 View example of the validated label pattern
 </a>
 
diff --git a/site/docs/patterns/links.md b/site/docs/patterns/links.md
index 79332ee181..4887a071ba 100644
--- a/site/docs/patterns/links.md
+++ b/site/docs/patterns/links.md
@@ -14,7 +14,7 @@ Links are used to embed actions or pathways to more information, allowing users
 
 Default links are a color defined by `$color-link` and are 10% darker when already visited.
 
-<a href="/examples/base/links/" class="js-example">
+<a href="/docs/examples/base/links/" class="js-example">
 View example of the default link pattern
 </a>
 
@@ -30,7 +30,7 @@ The `.p-link--external` class should be used on hyperlinks that go to a differen
   </p>
 </div>
 
-<a href="/examples/patterns/links/links-external/" class="js-example">
+<a href="/docs/examples/patterns/links/links-external/" class="js-example">
 View example of the external link pattern
 </a>
 
@@ -38,7 +38,7 @@ View example of the external link pattern
 
 The `.p-link--soft` class should be used on hyperlinks where many links are grouped together, such as a link cloud.
 
-<a href="/examples/patterns/links/links-soft/" class="js-example">
+<a href="/docs/examples/patterns/links/links-soft/" class="js-example">
 View example of the soft link pattern
 </a>
 
@@ -46,7 +46,7 @@ View example of the soft link pattern
 
 The `.p-link--inverted` class should be used where links are placed on a dark background.
 
-<a href="/examples/patterns/links/links-inverted/" class="js-example">
+<a href="/docs/examples/patterns/links/links-inverted/" class="js-example">
 View example of the inverted link pattern
 </a>
 
@@ -54,7 +54,7 @@ View example of the inverted link pattern
 
 The `.p-top` link can be used to make it easier to go back to the top on long pages. If the page is divided into different sections, you can use more than one per page.
 
-<a href="/examples/patterns/links/links-back-to-top/" class="js-example">
+<a href="/docs/examples/patterns/links/links-back-to-top/" class="js-example">
 View example of the back to top pattern
 </a>
 
diff --git a/site/docs/patterns/list-tree.md b/site/docs/patterns/list-tree.md
index 70c94acef5..880f66b0bf 100644
--- a/site/docs/patterns/list-tree.md
+++ b/site/docs/patterns/list-tree.md
@@ -12,7 +12,7 @@ The list tree pattern can be used to show a directory style listing, such as a l
 
 Each directory can be opened or collapse using `aria-hidden`, set `true` for open and `false` to close on the nested list. Using JS this can be changed and should also update the `aria-expanded` attribute on the folder element.
 
-<a href="/examples/patterns/list-tree/" class="js-example">
+<a href="/docs/examples/patterns/list-tree/" class="js-example">
 View example of the list tree pattern
 </a>
 
diff --git a/site/docs/patterns/lists.md b/site/docs/patterns/lists.md
index 06e451853b..5aab271815 100644
--- a/site/docs/patterns/lists.md
+++ b/site/docs/patterns/lists.md
@@ -16,7 +16,7 @@ standard `<ol>` and `<ul>`, we have 7 list styles at your disposal.
 Use the class `.p-list` for a list without bullets and more spacing between
 items than the basic lists.
 
-<a href="/examples/patterns/lists/list/" class="js-example">
+<a href="/docs/examples/patterns/lists/list/" class="js-example">
 View example of the list pattern
 </a>
 
@@ -30,7 +30,7 @@ Add the class `.is-ticked` to each list item to display tick icons.
   </p>
 </div>
 
-<a href="/examples/patterns/lists/lists-ticked/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-ticked/" class="js-example">
 View example of the ticked list pattern
 </a>
 
@@ -38,7 +38,7 @@ View example of the ticked list pattern
 
 Use the class `.p-list--divided` to add horizontal lines between the items.
 
-<a href="/examples/patterns/lists/lists-dividers/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-dividers/" class="js-example">
 View example of the divided list pattern
 </a>
 
@@ -47,7 +47,7 @@ View example of the divided list pattern
 You can combine both `.is-ticked` and `.p-list--divided` to style a
 list with horizontal dividers and tick icons.
 
-<a href="/examples/patterns/lists/lists-dividers-ticked/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-dividers-ticked/" class="js-example">
 View example of the ticked divided list pattern
 </a>
 
@@ -55,7 +55,7 @@ View example of the ticked divided list pattern
 
 A responsive divider inserts divider lines between sections of content. On small screens (up to `$breakpoint-medium`), the divider lines appear horizontally. On screens bigger than \$breakpoint-medium, the divider lines appear vertically, centered in the column gutters.
 
-<a href="/examples/patterns/lists/divider/" class="js-example">
+<a href="/docs/examples/patterns/lists/divider/" class="js-example">
 View example of lists with a responsive divider
 </a>
 
@@ -63,7 +63,7 @@ View example of lists with a responsive divider
 
 Apply the class `.p-inline-list` to display all the list items in one line.
 
-<a href="/examples/patterns/lists/lists-inline/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-inline/" class="js-example">
 View example of the inline list pattern
 </a>
 
@@ -72,7 +72,7 @@ View example of the inline list pattern
 Apply the class `.p-inline-list--middot` to add a middot character between
 inline list items.
 
-<a href="/examples/patterns/lists/lists-mid-dot/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-mid-dot/" class="js-example">
 View example of the middot list pattern
 </a>
 
@@ -81,7 +81,7 @@ View example of the middot list pattern
 If you want to display a list of items that form a set of steps — like a
 tutorial or instructions — you can use the class `.p-stepped-list`.
 
-<a href="/examples/patterns/lists/lists-stepped/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-stepped/" class="js-example">
 View example of the stepped list pattern
 </a>
 
@@ -91,7 +91,7 @@ The stepped list should be used for step by step instructions. This pattern is b
 used on a `.p-strip--light` as the description sections are displayed in a white
 box.
 
-<a href="/examples/patterns/lists/lists-stepped-detailed/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-stepped-detailed/" class="js-example">
 View example of the pattern stepped list detailed
 </a>
 
@@ -99,7 +99,7 @@ View example of the pattern stepped list detailed
 
 If you wish to split the items in a list into two columns above `$breakpoint-medium`, you can do so by adding the class `is-split` to the list element.
 
-<a href="/examples/patterns/lists/lists-split/" class="js-example">
+<a href="/docs/examples/patterns/lists/lists-split/" class="js-example">
 View example of the patterns list split
 </a>
 
diff --git a/site/docs/patterns/matrix.md b/site/docs/patterns/matrix.md
index a6ce9f1ccb..4d19dd6fba 100644
--- a/site/docs/patterns/matrix.md
+++ b/site/docs/patterns/matrix.md
@@ -18,7 +18,7 @@ Items will display in one column on small screens. At resolutions above `$breakp
   </p>
 </div>
 
-<a href="/examples/patterns/matrix/" class="js-example">
+<a href="/docs/examples/patterns/matrix/" class="js-example">
 View example of the matrix pattern
 </a>
 
diff --git a/site/docs/patterns/media-object.md b/site/docs/patterns/media-object.md
index e6cec0c268..49cb1b4c31 100644
--- a/site/docs/patterns/media-object.md
+++ b/site/docs/patterns/media-object.md
@@ -11,7 +11,7 @@ context:
 
 A media object should be used to display events or articles.
 
-<a href="/examples/patterns/media-object/media-object/" class="js-example">
+<a href="/docs/examples/patterns/media-object/media-object/" class="js-example">
 View example of the pattern media object
 </a>
 
@@ -19,7 +19,7 @@ View example of the pattern media object
 
 You can add an `is-round` state to the `.p-media-object__image` element to create a circular image style, which we recommend to be used for head shots of people. In order for this variant to work, the original image must be square.
 
-<a href="/examples/patterns/media-object/media-object-circ-img/" class="js-example">
+<a href="/docs/examples/patterns/media-object/media-object-circ-img/" class="js-example">
 View example of the pattern media object
 </a>
 
@@ -27,7 +27,7 @@ View example of the pattern media object
 
 Use a large variant of the component to display details of a single object on a page.
 
-<a href="/examples/patterns/media-object/media-object-large/" class="js-example">
+<a href="/docs/examples/patterns/media-object/media-object-large/" class="js-example">
 View example of the pattern media object large
 </a>
 
diff --git a/site/docs/patterns/modal.md b/site/docs/patterns/modal.md
index 1eb683520e..31a92bf736 100644
--- a/site/docs/patterns/modal.md
+++ b/site/docs/patterns/modal.md
@@ -12,7 +12,7 @@ The modal component can be used to overlay an area of the screen which can conta
 
 On `p-modal` set display to `display:flex` or `display:none` to toggle the visibility of the modal.
 
-<a href="/examples/patterns/modal/" class="js-example">
+<a href="/docs/examples/patterns/modal/" class="js-example">
 View example of the modal pattern
 </a>
 
diff --git a/site/docs/patterns/muted-heading.md b/site/docs/patterns/muted-heading.md
index 9101cf7b93..a6dbc4d80a 100644
--- a/site/docs/patterns/muted-heading.md
+++ b/site/docs/patterns/muted-heading.md
@@ -11,7 +11,7 @@ context:
 
 A muted heading can be used to subtly provide context to content without the heading itself being too prominent.
 
-<a href="/examples/patterns/headings/muted/" class="js-example">
+<a href="/docs/examples/patterns/headings/muted/" class="js-example">
 View example of the pattern muted heading
 </a>
 
diff --git a/site/docs/patterns/navigation.md b/site/docs/patterns/navigation.md
index df22bfa868..eb74fb9a5e 100644
--- a/site/docs/patterns/navigation.md
+++ b/site/docs/patterns/navigation.md
@@ -32,7 +32,7 @@ You can also manually override the background color of the navigation using the
 You can change the breakpoint at which the menu changes to a small screen menu
 by adjusting the `$breakpoint-navigation-threshold` in `_settings_breakpoints.scss`.
 
-<a href="/examples/patterns/navigation/default/" class="js-example">
+<a href="/docs/examples/patterns/navigation/default/" class="js-example">
 View example of the navigation pattern
 </a>
 
@@ -57,7 +57,7 @@ To open the subnav-menu you need to set the `is-active` class on `p-subnav` elem
 
 By default the sub-navigation menus are left-aligned with their parent, if you'd prefer the menu to be positioned from the right, use the `p-subnav__items--right` modifier. This can be seen in the "My account" menu in the example.
 
-<a href="/examples/patterns/navigation/subnav" class="js-example">
+<a href="/docs/examples/patterns/navigation/subnav" class="js-example">
 View example of the sub-navigation pattern
 </a>
 
diff --git a/site/docs/patterns/notification.md b/site/docs/patterns/notification.md
index 6216d487b8..6dc9eaa93a 100644
--- a/site/docs/patterns/notification.md
+++ b/site/docs/patterns/notification.md
@@ -16,7 +16,7 @@ You can also include a close button using the `p-icon--close` pattern, although
 
 The default variant should be used to display global messages.
 
-<a href="/examples/patterns/notifications/notifications/" class="js-example">
+<a href="/docs/examples/patterns/notifications/notifications/" class="js-example">
 View example of the default notification pattern
 </a>
 
@@ -24,7 +24,7 @@ View example of the default notification pattern
 
 The caution variant should be used to convey information that is not critical but the user should be aware of.
 
-<a href="/examples/patterns/notifications/caution/" class="js-example">
+<a href="/docs/examples/patterns/notifications/caution/" class="js-example">
 View example of the caution notification pattern
 </a>
 
@@ -32,7 +32,7 @@ View example of the caution notification pattern
 
 The negative variant should be used to convey information that is critical and the user should take action.
 
-<a href="/examples/patterns/notifications/negative/" class="js-example">
+<a href="/docs/examples/patterns/notifications/negative/" class="js-example">
 View example of the negative notification pattern
 </a>
 
@@ -40,7 +40,7 @@ View example of the negative notification pattern
 
 The positive variant should be used to convey success or completion.
 
-<a href="/examples/patterns/notifications/positive/" class="js-example">
+<a href="/docs/examples/patterns/notifications/positive/" class="js-example">
 View example of the positive notification pattern
 </a>
 
@@ -48,7 +48,7 @@ View example of the positive notification pattern
 
 The information variant should be used to convey an information message.
 
-<a href="/examples/patterns/notifications/information/" class="js-example">
+<a href="/docs/examples/patterns/notifications/information/" class="js-example">
 View example of the information notification pattern
 </a>
 
@@ -62,7 +62,7 @@ Notifications have the ability to add an action link to them. These should appea
   </p>
 </div>
 
-<a href="/examples/patterns/notifications/action/" class="js-example">
+<a href="/docs/examples/patterns/notifications/action/" class="js-example">
 View example of the caution notification pattern
 </a>
 
diff --git a/site/docs/patterns/pagination.md b/site/docs/patterns/pagination.md
index 7ea15480ae..b834dd40b2 100644
--- a/site/docs/patterns/pagination.md
+++ b/site/docs/patterns/pagination.md
@@ -10,7 +10,7 @@ context:
 
 The pagination component should be used to navigate between pages of content. Depending on the length provided, the pagination component will automatically scale.
 
-<a href="/examples/patterns/pagination/pagination" class="js-example">
+<a href="/docs/examples/patterns/pagination/pagination" class="js-example">
 View example of the pagination pattern
 </a>
 
@@ -18,7 +18,7 @@ View example of the pagination pattern
 
 When it is not possible to fit all pages into the component, a truncated option should be used to give the first, last and as many siblings of the current page as possible.
 
-<a href="/examples/patterns/pagination/pagination-truncated" class="js-example">
+<a href="/docs/examples/patterns/pagination/pagination-truncated" class="js-example">
 View example of the pagination pattern
 </a>
 
@@ -26,7 +26,7 @@ View example of the pagination pattern
 
 When a user is at the first or last item then the previous or next button, respectively, should be disabled.
 
-<a href="/examples/patterns/pagination/pagination-disabled" class="js-example">
+<a href="/docs/examples/patterns/pagination/pagination-disabled" class="js-example">
 View example of the pagination pattern
 </a>
 
diff --git a/site/docs/patterns/pull-quote.md b/site/docs/patterns/pull-quote.md
index cc4c6d6ce8..ca28e7395b 100644
--- a/site/docs/patterns/pull-quote.md
+++ b/site/docs/patterns/pull-quote.md
@@ -11,7 +11,7 @@ context:
 Use the pull quote pattern to highlight content from different sources in a
 visually prominent way.
 
-<a href="/examples/patterns/pull-quotes/default/" class="js-example">
+<a href="/docs/examples/patterns/pull-quotes/default/" class="js-example">
 View example of the pull quote pattern
 </a>
 
@@ -19,7 +19,7 @@ View example of the pull quote pattern
 
 A small variant is available which displays the quote text at the same size as normal paragraph text.
 
-<a href="/examples/patterns/pull-quotes/small/" class="js-example">
+<a href="/docs/examples/patterns/pull-quotes/small/" class="js-example">
 View example of the small pull quote pattern
 </a>
 
@@ -27,7 +27,7 @@ View example of the small pull quote pattern
 
 To give more prominence to a quote, there is also a large variant.
 
-<a href="/examples/patterns/pull-quotes/large/" class="js-example">
+<a href="/docs/examples/patterns/pull-quotes/large/" class="js-example">
 View example of the small pull quote pattern
 </a>
 
@@ -35,7 +35,7 @@ View example of the small pull quote pattern
 
 To add an image to any size of pull-quote, add the class `has-image` and use the following markup for the image.
 
-<a href="/examples/patterns/pull-quotes/default-image/" class="js-example">
+<a href="/docs/examples/patterns/pull-quotes/default-image/" class="js-example">
 View example of the small pull quote pattern with an image
 </a>
 
diff --git a/site/docs/patterns/search-box.md b/site/docs/patterns/search-box.md
index 08976d9e61..71aca02584 100644
--- a/site/docs/patterns/search-box.md
+++ b/site/docs/patterns/search-box.md
@@ -14,7 +14,7 @@ Search boxes enable search functionality on a page and are typically used in a n
 
 The component expands to the full width of its container by default.
 
-<a href="/examples/patterns/search-box/default/" class="js-example">
+<a href="/docs/examples/patterns/search-box/default/" class="js-example">
 View examples of search box patterns
 </a>
 
@@ -22,7 +22,7 @@ View examples of search box patterns
 
 This component integrates with `.p-navigation__nav` for both small and large screens.
 
-<a href="/examples/patterns/search-box/navigation/" class="js-example">
+<a href="/docs/examples/patterns/search-box/navigation/" class="js-example">
 View examples of search box navigation patterns
 </a>
 
diff --git a/site/docs/patterns/slider.md b/site/docs/patterns/slider.md
index 19c493eccd..55750ccc46 100644
--- a/site/docs/patterns/slider.md
+++ b/site/docs/patterns/slider.md
@@ -11,7 +11,7 @@ context:
 The `p-slider__wrapper` and `p-slider__input` classes should be used with `<input type="range">` elements
 when you want to provide a numeric representation of the slider value, as well as allow the user to specify a value.
 
-<a href="/examples/patterns/slider/slider-input/" class="js-example">
+<a href="/docs/examples/patterns/slider/slider-input/" class="js-example">
 View example of the slider pattern
 </a>
 
diff --git a/site/docs/patterns/strip.md b/site/docs/patterns/strip.md
index edf98000e9..2d3c5e7d72 100644
--- a/site/docs/patterns/strip.md
+++ b/site/docs/patterns/strip.md
@@ -12,11 +12,11 @@ The strip pattern provides a full width strip container in which to wrap a row.
 
 A `.p-strip` container should always be the parent of a `.row` (from the [Grid pattern](/patterns/grid/)) and never the other way around.
 
-<a href="/examples/patterns/strips/strips-light/" class="js-example">
+<a href="/docs/examples/patterns/strips/strips-light/" class="js-example">
 View example of the strip light pattern
 </a>
 
-<a href="/examples/patterns/strips/strips-dark/" class="js-example">
+<a href="/docs/examples/patterns/strips/strips-dark/" class="js-example">
 View example of the strip dark pattern
 </a>
 
@@ -25,7 +25,7 @@ View example of the strip dark pattern
 The purpose of the strip accent pattern is to display content with a
 highlighted strip using the accent colour.
 
-<a href="/examples/patterns/strips/accent/" class="js-example">
+<a href="/docs/examples/patterns/strips/accent/" class="js-example">
 View example of the pattern strip accent
 </a>
 
@@ -42,7 +42,7 @@ This pattern allows for an image background to be appear as a background on a st
 You can also add the classes '.is-light' and '.is-dark' to the strips to describe the background image.
 These classes will then override the text color to ensure it remains visible.
 
-<a href="/examples/patterns/strips/image/" class="js-example">
+<a href="/docs/examples/patterns/strips/image/" class="js-example">
 View example of the pattern strip image
 </a>
 
@@ -56,7 +56,7 @@ This pattern is used to add a dividing border at the bottom of the strip.
   </p>
 </div>
 
-<a href="/examples/patterns/strips/is-bordered/" class="js-example">
+<a href="/docs/examples/patterns/strips/is-bordered/" class="js-example">
 View example of the pattern strip is-bordered
 </a>
 
@@ -64,7 +64,7 @@ View example of the pattern strip is-bordered
 
 This state gives the strip larger vertical padding.
 
-<a href="/examples/patterns/strips/deep/" class="js-example">
+<a href="/docs/examples/patterns/strips/deep/" class="js-example">
 View example of the pattern strip is-deep
 </a>
 
@@ -72,7 +72,7 @@ View example of the pattern strip is-deep
 
 This state gives the strip smaller vertical padding.
 
-<a href="/examples/patterns/strips/shallow/" class="js-example">
+<a href="/docs/examples/patterns/strips/shallow/" class="js-example">
 View example of the pattern strip is-shallow
 </a>
 
diff --git a/site/docs/patterns/switch.md b/site/docs/patterns/switch.md
index 8eec639741..72ada77b16 100644
--- a/site/docs/patterns/switch.md
+++ b/site/docs/patterns/switch.md
@@ -10,7 +10,7 @@ context:
 
 You can use this switch component to display on and off content, such as for settings or simple controls. By changing the `aria-checked` attribute from true or false will animate the switch on/off.
 
-<a href="/examples/patterns/switch/" class="js-example">
+<a href="/docs/examples/patterns/switch/" class="js-example">
 View example of the switch pattern
 </a>
 
diff --git a/site/docs/patterns/table-of-contents.md b/site/docs/patterns/table-of-contents.md
index a27098b023..561778f66c 100644
--- a/site/docs/patterns/table-of-contents.md
+++ b/site/docs/patterns/table-of-contents.md
@@ -10,7 +10,7 @@ context:
 
 A table of contents can be used to display supplementary links to a page.
 
-<a href="/examples/patterns/table-of-contents/" class="js-example">
+<a href="/docs/examples/patterns/table-of-contents/" class="js-example">
 View example of the table of contents pattern
 </a>
 
diff --git a/site/docs/patterns/tabs.md b/site/docs/patterns/tabs.md
index 030b71c213..ea3bcd63c7 100644
--- a/site/docs/patterns/tabs.md
+++ b/site/docs/patterns/tabs.md
@@ -14,7 +14,7 @@ To select the active tab add the attribute `aria-selected="true"` and that list
 
 To horizontally align the tab list with other content, the whole tab set can be contained within a `.row` element to provide correct gutters.
 
-<a href="/examples/patterns/tabs/" class="js-example">
+<a href="/docs/examples/patterns/tabs/" class="js-example">
 View example of the tabs pattern
 </a>
 
diff --git a/site/docs/patterns/tooltips.md b/site/docs/patterns/tooltips.md
index e139bee80c..7eb990deed 100644
--- a/site/docs/patterns/tooltips.md
+++ b/site/docs/patterns/tooltips.md
@@ -19,7 +19,7 @@ Tooltips are text labels that appear when the user hovers over, focuses on, or t
   </p>
 </div>
 
-<a href="/examples/patterns/tooltips/" class="js-example">
+<a href="/docs/examples/patterns/tooltips/" class="js-example">
 View example of the tooltips pattern
 </a>
 
diff --git a/site/docs/settings/animation-settings.md b/site/docs/settings/animation-settings.md
index 8678c79656..bbfc9c8acc 100644
--- a/site/docs/settings/animation-settings.md
+++ b/site/docs/settings/animation-settings.md
@@ -43,7 +43,7 @@ Recommended durations for easing can be `easeInCubic` or `easeOutCubic`.
 
 Add a spin animation to an element with the following utility class.
 
-<a href="/examples/utilities/animations/spin/" class="js-example">
+<a href="/docs/examples/utilities/animations/spin/" class="js-example">
 View example of the spin animation utility
 </a>
 
diff --git a/site/docs/settings/spacing-settings.md b/site/docs/settings/spacing-settings.md
index 71081850e2..35fc9a5425 100644
--- a/site/docs/settings/spacing-settings.md
+++ b/site/docs/settings/spacing-settings.md
@@ -14,7 +14,7 @@ Vanilla uses numerous spacing variables across the codebase in order to ensure c
 
 Vanilla uses a default spacing unit of `.5rem` (`8px`) as a basis to calculate spacing inside and between components, as well as the line-heights of the different type sizes.
 
-<a href="/examples/utilities/baseline-grid/" class="js-example">
+<a href="/docs/examples/utilities/baseline-grid/" class="js-example">
 View example of the baseline grid utility
 </a>
 
diff --git a/site/docs/utilities/align.md b/site/docs/utilities/align.md
index 244a8390c2..50d8b23531 100644
--- a/site/docs/utilities/align.md
+++ b/site/docs/utilities/align.md
@@ -10,7 +10,7 @@ context:
 
 You can use these utilities to force the content inside an element to align center, left or right.
 
-<a href="/examples/utilities/align/" class="js-example">
+<a href="/docs/examples/utilities/align/" class="js-example">
 View example of the content align utility
 </a>
 
diff --git a/site/docs/utilities/baseline-grid.md b/site/docs/utilities/baseline-grid.md
index bd2b2e9a9e..3eb5fe01ba 100644
--- a/site/docs/utilities/baseline-grid.md
+++ b/site/docs/utilities/baseline-grid.md
@@ -10,7 +10,7 @@ context:
 
 You can apply this utility to an element (such as `<body>`) to visualise the `.5rem` baseline grid to which text elements adhere.
 
-<a href="/examples/utilities/baseline-grid/" class="js-example">
+<a href="/docs/examples/utilities/baseline-grid/" class="js-example">
 View example of the baseline grid utility
 </a>
 
diff --git a/site/docs/utilities/clearfix.md b/site/docs/utilities/clearfix.md
index 6a8de0b3cd..72ba43b503 100644
--- a/site/docs/utilities/clearfix.md
+++ b/site/docs/utilities/clearfix.md
@@ -14,7 +14,7 @@ The clearfix is a way to combat the zero-height container problem for floated el
 
 In the example below, the parent wrapping container does not collapse even though it's only two children are floated.
 
-<a href="/examples/utilities/clearfix/" class="js-example">
+<a href="/docs/examples/utilities/clearfix/" class="js-example">
 View example of the clearfix utility
 </a>
 
diff --git a/site/docs/utilities/embedded-media.md b/site/docs/utilities/embedded-media.md
index 4202e4fbae..1b05836ab1 100644
--- a/site/docs/utilities/embedded-media.md
+++ b/site/docs/utilities/embedded-media.md
@@ -10,7 +10,7 @@ context:
 
 Embed media objects such as videos, maps and calendars.
 
-<a href="/examples/utilities/embedded-media/" class="js-example" data-height="600">
+<a href="/docs/examples/utilities/embedded-media/" class="js-example" data-height="600">
 View example of the embedded media utility
 </a>
 
diff --git a/site/docs/utilities/equal-height.md b/site/docs/utilities/equal-height.md
index 5844a151c4..763890aae4 100644
--- a/site/docs/utilities/equal-height.md
+++ b/site/docs/utilities/equal-height.md
@@ -10,7 +10,7 @@ context:
 
 To ensure two or more elements have an equal height regardless of their content, add the class `.u-equal-height` to their wrapping parent element.
 
-<a href="/examples/utilities/equal-height/" class="js-example">
+<a href="/docs/examples/utilities/equal-height/" class="js-example">
 View example of the equal height utility
 </a>
 
diff --git a/site/docs/utilities/floats.md b/site/docs/utilities/floats.md
index 2726c5c1d3..ce1cb7eac5 100644
--- a/site/docs/utilities/floats.md
+++ b/site/docs/utilities/floats.md
@@ -15,7 +15,7 @@ The float utilities allow you to float an element left or right.
 You can use the following to float an element on left or right on all screen
 sizes.
 
-<a href="/examples/utilities/floats/default/" class="js-example">
+<a href="/docs/examples/utilities/floats/default/" class="js-example">
 View example of the all screen floats utility
 </a>
 
@@ -23,7 +23,7 @@ View example of the all screen floats utility
 
 You can limit floats to only large screen sizes using the following example.
 
-<a href="/examples/utilities/floats/large-screens/" class="js-example">
+<a href="/docs/examples/utilities/floats/large-screens/" class="js-example">
 View example of the large screen floats utility
 </a>
 
@@ -31,7 +31,7 @@ View example of the large screen floats utility
 
 You can limit floats to only medium screen sizes using the following example.
 
-<a href="/examples/utilities/floats/medium-screens/" class="js-example">
+<a href="/docs/examples/utilities/floats/medium-screens/" class="js-example">
 View example of the medium screen floats utility
 </a>
 
@@ -39,7 +39,7 @@ View example of the medium screen floats utility
 
 You can limit floats to only small screen sizes using the following example.
 
-<a href="/examples/utilities/floats/small-screens/" class="js-example">
+<a href="/docs/examples/utilities/floats/small-screens/" class="js-example">
 View example of the small screen floats utility
 </a>
 
diff --git a/site/docs/utilities/font-metrics.md b/site/docs/utilities/font-metrics.md
index ff423d0f7e..a6461b2591 100644
--- a/site/docs/utilities/font-metrics.md
+++ b/site/docs/utilities/font-metrics.md
@@ -12,7 +12,7 @@ Being able to visualise the <a target="_blank" href="https://en.wikipedia.org/wi
 
 These properties are not directly accessible via css, but can be obtained from font-editing software like <a target="_blank" href="https://fontforge.github.io/">FontForge</a>. The values are stored in `_settings_font.scss` (the defaults apply to the Ubuntu font family). If you want to use this utility with another font, you will need to change the default values to match your font.
 
-<a href="/examples/utilities/font-metrics/" class="js-example">
+<a href="/docs/examples/utilities/font-metrics/" class="js-example">
 View an example of the font metrics utility
 </a>
 
diff --git a/site/docs/utilities/hide.md b/site/docs/utilities/hide.md
index b9628a42b7..c6dd684558 100644
--- a/site/docs/utilities/hide.md
+++ b/site/docs/utilities/hide.md
@@ -14,7 +14,7 @@ To hide an element from the user, use the class `u-hide`.
 
 To hide only at a specific viewport, add `--small`, `--medium` or `--large` modifiers to the `u-hide` class.
 
-<a href="/examples/utilities/hide/" class="js-example">
+<a href="/docs/examples/utilities/hide/" class="js-example">
 View example of the Hide utility
 </a>
 
diff --git a/site/docs/utilities/image-position.md b/site/docs/utilities/image-position.md
index 7f1390aaf2..9fbb4c7dda 100644
--- a/site/docs/utilities/image-position.md
+++ b/site/docs/utilities/image-position.md
@@ -20,49 +20,49 @@ most cases it would be a strip.
 
 ### Bottom
 
-<a href="/examples/utilities/image-position/bottom/" class="js-example">
+<a href="/docs/examples/utilities/image-position/bottom/" class="js-example">
 View example of the utilities image position bottom
 </a>
 
 ### Top
 
-<a href="/examples/utilities/image-position/top/" class="js-example">
+<a href="/docs/examples/utilities/image-position/top/" class="js-example">
 View example of the utilities image position top
 </a>
 
 ### Left
 
-<a href="/examples/utilities/image-position/left/" class="js-example">
+<a href="/docs/examples/utilities/image-position/left/" class="js-example">
 View example of the utilities image position top
 </a>
 
 ### Right
 
-<a href="/examples/utilities/image-position/right/" class="js-example">
+<a href="/docs/examples/utilities/image-position/right/" class="js-example">
 View example of the utilities image position top
 </a>
 
 ### Top right
 
-<a href="/examples/utilities/image-position/top-right/" class="js-example">
+<a href="/docs/examples/utilities/image-position/top-right/" class="js-example">
 View example of the utilities image position top right
 </a>
 
 ### Top left
 
-<a href="/examples/utilities/image-position/top-left/" class="js-example">
+<a href="/docs/examples/utilities/image-position/top-left/" class="js-example">
 View example of the utilities image position top left
 </a>
 
 ### Bottom right
 
-<a href="/examples/utilities/image-position/bottom-right/" class="js-example">
+<a href="/docs/examples/utilities/image-position/bottom-right/" class="js-example">
 View example of the utilities image position bottom right
 </a>
 
 ### Bottom left
 
-<a href="/examples/utilities/image-position/bottom-left/" class="js-example">
+<a href="/docs/examples/utilities/image-position/bottom-left/" class="js-example">
 View example of the utilities image position bottom left
 </a>
 
diff --git a/site/docs/utilities/margin-collapse.md b/site/docs/utilities/margin-collapse.md
index 2f796c98c6..2949d76d2e 100644
--- a/site/docs/utilities/margin-collapse.md
+++ b/site/docs/utilities/margin-collapse.md
@@ -10,7 +10,7 @@ context:
 
 Remove one or more margins of an element.
 
-<a href="/examples/utilities/margin-collapse/" class="js-example">
+<a href="/docs/examples/utilities/margin-collapse/" class="js-example">
 View example of the margin collapse utility
 </a>
 
diff --git a/site/docs/utilities/no-print.md b/site/docs/utilities/no-print.md
index f2c63937b6..9e76315c41 100644
--- a/site/docs/utilities/no-print.md
+++ b/site/docs/utilities/no-print.md
@@ -13,7 +13,7 @@ Add the class `u-no-print` to elements you want to hide when the page is printed
 
 Use your browser's print preview to see the following example working.
 
-<a href="/examples/utilities/no-print" class="js-example">
+<a href="/docs/examples/utilities/no-print" class="js-example">
 View example of the no-print utility
 </a>
 
diff --git a/site/docs/utilities/off-screen.md b/site/docs/utilities/off-screen.md
index 6179289d2d..536c133d8d 100644
--- a/site/docs/utilities/off-screen.md
+++ b/site/docs/utilities/off-screen.md
@@ -10,7 +10,7 @@ context:
 
 The `.u-off-screen` class will position an element out of the page flow and off-screen, while still making it available to screen readers.
 
-<a href="/examples/utilities/off-screen/" class="js-example">
+<a href="/docs/examples/utilities/off-screen/" class="js-example">
 View example of the off-screen utility
 </a>
 
diff --git a/site/docs/utilities/padding-collapse.md b/site/docs/utilities/padding-collapse.md
index 5a03de0b48..7415c51536 100644
--- a/site/docs/utilities/padding-collapse.md
+++ b/site/docs/utilities/padding-collapse.md
@@ -10,7 +10,7 @@ context:
 
 Remove one or more paddings on an element.
 
-<a href="/examples/utilities/padding-collapse/" class="js-example">
+<a href="/docs/examples/utilities/padding-collapse/" class="js-example">
 View example of the padding collapse utility
 </a>
 
diff --git a/site/docs/utilities/show.md b/site/docs/utilities/show.md
index 8821b5e0cd..e1d287e92c 100644
--- a/site/docs/utilities/show.md
+++ b/site/docs/utilities/show.md
@@ -10,7 +10,7 @@ context:
 
 Show an element within a certain breakpoint.
 
-<a href="/examples/utilities/show/" class="js-example">
+<a href="/docs/examples/utilities/show/" class="js-example">
 View example of the Show utility
 </a>
 
diff --git a/site/docs/utilities/table-cell-padding-overlap.md b/site/docs/utilities/table-cell-padding-overlap.md
index 1b3a75637e..6951ca0c4c 100644
--- a/site/docs/utilities/table-cell-padding-overlap.md
+++ b/site/docs/utilities/table-cell-padding-overlap.md
@@ -12,6 +12,6 @@ Vanilla applies padding-top and padding bottom to table cells. This is done to p
 
 In some cases it can be helpful to override this behaviour for specific children of the table cell, e.g. a `button`:
 
-<a href="/examples/utilities/table-cell-padding-overlap/" class="js-example">
+<a href="/docs/examples/utilities/table-cell-padding-overlap/" class="js-example">
 View example of the table padding overlap
 </a>
diff --git a/site/docs/utilities/truncate.md b/site/docs/utilities/truncate.md
index 3506cb2e3d..2b1b2f28d0 100644
--- a/site/docs/utilities/truncate.md
+++ b/site/docs/utilities/truncate.md
@@ -13,7 +13,7 @@ To truncate text, use the class `u-truncate`.
 When applied to a parent container, it will truncate any elements placed inside, so long as the parent's width is set.
 When applied to individual elements within a parent, e.g. a table cell, only those elements will be truncated.
 
-<a href="/examples/utilities/truncate/" class="js-example">
+<a href="/docs/examples/utilities/truncate/" class="js-example">
 View example of the truncate utility
 </a>
 
diff --git a/site/docs/utilities/vertically-center.md b/site/docs/utilities/vertically-center.md
index 4194f62b10..b4481df3ff 100644
--- a/site/docs/utilities/vertically-center.md
+++ b/site/docs/utilities/vertically-center.md
@@ -12,7 +12,7 @@ The `.u-vertically-center` class will vertically center the direct child of the
 
 Note: only affects medium and large screens.
 
-<a href="/examples/utilities/vertically-center/" class="js-example">
+<a href="/docs/examples/utilities/vertically-center/" class="js-example">
 View example of the vertically center utility
 </a>
 

From 54a97d8fd61652dcb8c113c627024ee7ebca726c Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Mon, 2 Mar 2020 18:07:10 +0100
Subject: [PATCH 03/23] Update docs path in prettierignore

---
 .prettierignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.prettierignore b/.prettierignore
index 584c5a9337..05160a2229 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,2 @@
 # ignore html files in docs not to mess up with template formatting
-docs/**/*.html
+site/**/*.html

From 643a0363d2363d617fdd792b513dc07598577c66 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Mon, 2 Mar 2020 14:57:10 +0000
Subject: [PATCH 04/23] Fix 'Utilities' links

---
 site/_layouts/default.html    | 66 +++++++++++++++++++++++++----------
 site/docs/component-status.md |  6 ++--
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 3dfd2d82a3..834c586f34 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -123,30 +123,59 @@
               <li class="p-sidebar-nav__item">
                 <strong>Utilities</strong>
                 <ul class="p-sidebar-nav__list">
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/align' %}is-active{% endif %}" href="/utilities/align">Alignment</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/baseline-grid' %}is-active{% endif %}" href="/utilities/baseline-grid">Baseline grid</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/clearfix' %}is-active{% endif %}" href="/utilities/clearfix">Clearfix</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/embedded-media' %}is-active{% endif %}" href="/utilities/embedded-media">Embedded media</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/equal-height' %}is-active{% endif %}" href="/utilities/equal-height">Equal height</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/floats' %}is-active{% endif %}" href="/utilities/floats">Floats</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/font-metrics' %}is-active{% endif %}" href="/utilities/font-metrics">Font metrics</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/functions' %}is-active{% endif %}" href="/utilities/functions">Functions</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/hide' %}is-active{% endif %}" href="/utilities/hide">Hide</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/image-position' %}is-active{% endif %}" href="/utilities/image-position">Image position</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/margin-collapse' %}is-active{% endif %}" href="/utilities/margin-collapse">Margin collapse</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/no-print' %}is-active{% endif %}" href="/utilities/no-print">No print</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/off-screen' %}is-active{% endif %}" href="/utilities/off-screen">Off-screen</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/padding-collapse' %}is-active{% endif %}" href="/utilities/padding-collapse">Padding collapse</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/table-cell-padding-overlap' %}is-active{% endif %}" href="/utilities/table-cell-padding-overlap">Table cell padding overlap</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/truncate' %}is-active{% endif %}" href="/utilities/truncate">Truncation</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/show' %}is-active{% endif %}" href="/utilities/show">Show</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/utilities/vertically-center' %}is-active{% endif %}" href="/utilities/vertically-center">Vertically center</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/align' %}is-active{% endif %}" href="/docs/utilities/align">Alignment</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/baseline-grid' %}is-active{% endif %}" href="/docs/utilities/baseline-grid">Baseline grid</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/clearfix' %}is-active{% endif %}" href="/docs/utilities/clearfix">Clearfix</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/embedded-media' %}is-active{% endif %}" href="/docs/utilities/embedded-media">Embedded media</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/equal-height' %}is-active{% endif %}" href="/docs/utilities/equal-height">Equal height</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/floats' %}is-active{% endif %}" href="/docs/utilities/floats">Floats</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/font-metrics' %}is-active{% endif %}" href="/docs/utilities/font-metrics">Font metrics</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/functions' %}is-active{% endif %}" href="/docs/utilities/functions">Functions</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/hide' %}is-active{% endif %}" href="/docs/utilities/hide">Hide</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/image-position' %}is-active{% endif %}" href="/docs/utilities/image-position">Image position</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/margin-collapse' %}is-active{% endif %}" href="/docs/utilities/margin-collapse">Margin collapse</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/no-print' %}is-active{% endif %}" href="/docs/utilities/no-print">No print</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/off-screen' %}is-active{% endif %}" href="/docs/utilities/off-screen">Off-screen</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/padding-collapse' %}is-active{% endif %}" href="/docs/utilities/padding-collapse">Padding collapse</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/table-cell-padding-overlap' %}is-active{% endif %}" href="/docs/utilities/table-cell-padding-overlap">Table cell padding overlap</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/truncate' %}is-active{% endif %}" href="/docs/utilities/truncate">Truncation</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/show' %}is-active{% endif %}" href="/docs/utilities/show">Show</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/utilities/vertically-center' %}is-active{% endif %}" href="/docs/utilities/vertically-center">Vertically center</a></li>
                 </ul>
               </li>
 
               <li class="p-sidebar-nav__item">
                 <strong>Settings</strong>
                 <ul class="p-sidebar-nav__list">
+<<<<<<< Updated upstream
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/animation-settings' %}is-active{% endif %}" href="/settings/animation-settings">Animations</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/assets-settings' %}is-active{% endif %}" href="/settings/assets-settings">Assets</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/breakpoint-settings' %}is-active{% endif %}" href="/settings/breakpoint-settings">Breakpoints</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/color-settings' %}is-active{% endif %}" href="/settings/color-settings">Color</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/font-settings' %}is-active{% endif %}" href="/settings/font-settings">Font</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/layout-settings' %}is-active{% endif %}" href="/settings/layout-settings">Layout</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/placeholder-settings' %}is-active{% endif %}" href="/settings/placeholder-settings">Placeholders</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/spacing-settings' %}is-active{% endif %}" href="/settings/spacing-settings">Spacing</a>
+                  </li>
+                  <li class="p-sidebar-nav__item">
+                    <a class="p-link--soft {% if path == '/settings/table-layout' %}is-active{% endif %}" href="/settings/table-layout">Table layout</a>
+                  </li>
+=======
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/animation-settings' %}is-active{% endif %}" href="/settings/animation-settings">Animations</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/assets-settings' %}is-active{% endif %}" href="/settings/assets-settings">Assets</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/breakpoint-settings' %}is-active{% endif %}" href="/settings/breakpoint-settings">Breakpoints</a></li>
@@ -156,6 +185,7 @@
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/placeholder-settings' %}is-active{% endif %}" href="/settings/placeholder-settings">Placeholders</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/spacing-settings' %}is-active{% endif %}" href="/settings/spacing-settings">Spacing</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/table-layout' %}is-active{% endif %}" href="/settings/table-layout">Table layout</a></li>
+>>>>>>> Stashed changes
                 </ul>
               </li>
 
diff --git a/site/docs/component-status.md b/site/docs/component-status.md
index f406a82c03..5524282980 100644
--- a/site/docs/component-status.md
+++ b/site/docs/component-status.md
@@ -95,7 +95,7 @@ When we add, make significant updates, or deprecate a component we update their
       <td>Optional state indicator was added to contextual menu</td>
     </tr>
     <tr>
-      <th><a href="/utilities/font-metrics/">Font metrics</a></th>
+      <th><a href="/docs/utilities/font-metrics/">Font metrics</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.5.0</td>
       <td>Added <code>u-visualise-font-metrics</code> utility to visualise font metrics</td>
@@ -107,13 +107,13 @@ When we add, make significant updates, or deprecate a component we update their
       <td>Added <code>$max-width--default</code> variable and <code>u-no-max-width</code> utility to control line length</td>
     </tr>
     <tr>
-      <th><a href="/utilities/table-cell-padding-overlap/">Table cell padding overlap</a></th>
+      <th><a href="/docs/utilities/table-cell-padding-overlap/">Table cell padding overlap</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.5.0</td>
       <td>Added <code>u-table-cell-padding-overlap</code> utility to overlap table cell padding</td>
     </tr>
     <tr>
-      <th><a href="/utilities/truncate/">Truncation</a></th>
+      <th><a href="/docs/utilities/truncate/">Truncation</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.5.0</td>
       <td>Added <code>u-truncate</code> utility to truncate text with ellipsis</td>

From b2033b48afd599e1628c15ff805b6c28d6641884 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 08:11:05 +0000
Subject: [PATCH 05/23] Fix 'Settings' links

---
 site/_layouts/default.html                 | 48 ++++------------------
 site/docs/base/typography.md               |  2 +-
 site/docs/customising-vanilla.md           | 16 ++++----
 site/docs/patterns/grid.md                 |  2 +-
 site/docs/settings/placeholder-settings.md |  2 +-
 5 files changed, 20 insertions(+), 50 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 834c586f34..341aba5266 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -147,45 +147,15 @@
               <li class="p-sidebar-nav__item">
                 <strong>Settings</strong>
                 <ul class="p-sidebar-nav__list">
-<<<<<<< Updated upstream
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/animation-settings' %}is-active{% endif %}" href="/settings/animation-settings">Animations</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/assets-settings' %}is-active{% endif %}" href="/settings/assets-settings">Assets</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/breakpoint-settings' %}is-active{% endif %}" href="/settings/breakpoint-settings">Breakpoints</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/color-settings' %}is-active{% endif %}" href="/settings/color-settings">Color</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/font-settings' %}is-active{% endif %}" href="/settings/font-settings">Font</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/layout-settings' %}is-active{% endif %}" href="/settings/layout-settings">Layout</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/placeholder-settings' %}is-active{% endif %}" href="/settings/placeholder-settings">Placeholders</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/spacing-settings' %}is-active{% endif %}" href="/settings/spacing-settings">Spacing</a>
-                  </li>
-                  <li class="p-sidebar-nav__item">
-                    <a class="p-link--soft {% if path == '/settings/table-layout' %}is-active{% endif %}" href="/settings/table-layout">Table layout</a>
-                  </li>
-=======
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/animation-settings' %}is-active{% endif %}" href="/settings/animation-settings">Animations</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/assets-settings' %}is-active{% endif %}" href="/settings/assets-settings">Assets</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/breakpoint-settings' %}is-active{% endif %}" href="/settings/breakpoint-settings">Breakpoints</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/color-settings' %}is-active{% endif %}" href="/settings/color-settings">Color</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/font-settings' %}is-active{% endif %}" href="/settings/font-settings">Font</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/layout-settings' %}is-active{% endif %}" href="/settings/layout-settings">Layout</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/placeholder-settings' %}is-active{% endif %}" href="/settings/placeholder-settings">Placeholders</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/spacing-settings' %}is-active{% endif %}" href="/settings/spacing-settings">Spacing</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/settings/table-layout' %}is-active{% endif %}" href="/settings/table-layout">Table layout</a></li>
->>>>>>> Stashed changes
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/animation-settings' %}is-active{% endif %}" href="/docs/settings/animation-settings">Animations</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/assets-settings' %}is-active{% endif %}" href="/docs/settings/assets-settings">Assets</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/breakpoint-settings' %}is-active{% endif %}" href="/docs/settings/breakpoint-settings">Breakpoints</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/color-settings' %}is-active{% endif %}" href="/docs/settings/color-settings">Color</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/font-settings' %}is-active{% endif %}" href="/docs/settings/font-settings">Font</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/layout-settings' %}is-active{% endif %}" href="/docs/settings/layout-settings">Layout</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/placeholder-settings' %}is-active{% endif %}" href="/docs/settings/placeholder-settings">Placeholders</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/spacing-settings' %}is-active{% endif %}" href="/docs/settings/spacing-settings">Spacing</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/settings/table-layout' %}is-active{% endif %}" href="/docs/settings/table-layout">Table layout</a></li>
                 </ul>
               </li>
 
diff --git a/site/docs/base/typography.md b/site/docs/base/typography.md
index 13279e6ba4..4bb45590a8 100644
--- a/site/docs/base/typography.md
+++ b/site/docs/base/typography.md
@@ -227,4 +227,4 @@ For more information [view the typography design spec](https://github.com/ubuntu
 
 ### Related
 
-For more typographic related information view the [code](/base/code) and [pull quote pattern](/patterns/pull-quote) component or our [font settings](/settings/font-settings).
+For more typographic related information view the [code](/base/code) and [pull quote pattern](/patterns/pull-quote) component or our [font settings](/docs/settings/font-settings).
diff --git a/site/docs/customising-vanilla.md b/site/docs/customising-vanilla.md
index 508182f954..2ef3584ce5 100644
--- a/site/docs/customising-vanilla.md
+++ b/site/docs/customising-vanilla.md
@@ -53,22 +53,22 @@ Your project may not warrant including all of Vanilla, in which case you can inc
 <div class="row">
   <div class="col-4">
   <ul class="p-list--divided">
-  <li class="p-list__item"><a href="/settings/animation-settings">Animation</a></li>
-  <li class="p-list__item"><a href="/settings/assets-settings">Assets</a></li>
-  <li class="p-list__item"><a href="/settings/breakpoint-settings">Breakpoint</a></li>
+  <li class="p-list__item"><a href="/docs/settings/animation-settings">Animation</a></li>
+  <li class="p-list__item"><a href="/docs/settings/assets-settings">Assets</a></li>
+  <li class="p-list__item"><a href="/docs/settings/breakpoint-settings">Breakpoint</a></li>
   </ul>
   </div>
   <div class="col-4">
   <ul class="p-list--divided">
-  <li class="p-list__item"><a href="/settings/color-settings">Color</a></li>
-  <li class="p-list__item"><a href="/settings/font-settings">Font</a></li>
-  <li class="p-list__item"><a href="/settings/layout-settings">Layout</a></li>
+  <li class="p-list__item"><a href="/docs/settings/color-settings">Color</a></li>
+  <li class="p-list__item"><a href="/docs/settings/font-settings">Font</a></li>
+  <li class="p-list__item"><a href="/docs/settings/layout-settings">Layout</a></li>
   </ul>
   </div>
   <div class="col-4">
   <ul class="p-list--divided">
-  <li class="p-list__item"><a href="/settings/placeholder-settings">Placeholder</a></li>
-  <li class="p-list__item"><a href="/settings/spacing-settings">Spacing</a></li>
+  <li class="p-list__item"><a href="/docs/settings/placeholder-settings">Placeholder</a></li>
+  <li class="p-list__item"><a href="/docs/settings/spacing-settings">Spacing</a></li>
   </ul>
   </div>
 </div>
diff --git a/site/docs/patterns/grid.md b/site/docs/patterns/grid.md
index 43c23060cb..d197c77fc5 100644
--- a/site/docs/patterns/grid.md
+++ b/site/docs/patterns/grid.md
@@ -24,7 +24,7 @@ Vanilla has a responsive grid with the following columns and gutters:
 
 Layouts can be created combining rows with different number of columns to an ideal maximum of 4 columns per row. Each column containing text should span a minimum of 3 columns.
 
-Read also: [Breakpoints](/settings/breakpoint-settings)
+Read also: [Breakpoints](/docs/settings/breakpoint-settings)
 
 <a href="/docs/examples/patterns/grid/default/" class="js-example">
     View example of the default grid
diff --git a/site/docs/settings/placeholder-settings.md b/site/docs/settings/placeholder-settings.md
index 56668db293..cd26e3ac12 100644
--- a/site/docs/settings/placeholder-settings.md
+++ b/site/docs/settings/placeholder-settings.md
@@ -19,4 +19,4 @@ Vanilla uses several global placeholders to share common styles between componen
 
 ### Related
 
-- [Spacing settings](/settings/spacing-settings)
+- [Spacing settings](/docs/settings/spacing-settings)

From 78dea032c238c80a3332223770bda339e58767f2 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 3 Mar 2020 09:15:34 +0100
Subject: [PATCH 06/23] Fix generic links

---
 site/_layouts/default.html               | 10 +++++-----
 site/docs/base/code.md                   |  2 +-
 site/docs/base/forms.md                  |  2 +-
 site/docs/base/tables.md                 |  2 +-
 site/docs/base/typography.md             |  2 +-
 site/docs/index.html                     |  4 ++--
 site/docs/patterns/accordion.md          |  2 +-
 site/docs/patterns/article-pagination.md |  2 +-
 site/docs/patterns/breadcrumbs.md        |  2 +-
 site/docs/patterns/buttons.md            |  2 +-
 site/docs/patterns/card.md               |  2 +-
 site/docs/patterns/contextual-menu.md    |  2 +-
 site/docs/patterns/grid.md               |  2 +-
 site/docs/patterns/heading-icon.md       |  2 +-
 site/docs/patterns/icons.md              |  2 +-
 site/docs/patterns/images.md             |  2 +-
 site/docs/patterns/inline-images.md      |  2 +-
 site/docs/patterns/labels.md             |  4 ++--
 site/docs/patterns/links.md              |  2 +-
 site/docs/patterns/list-tree.md          |  2 +-
 site/docs/patterns/lists.md              |  2 +-
 site/docs/patterns/matrix.md             |  2 +-
 site/docs/patterns/media-object.md       |  2 +-
 site/docs/patterns/modal.md              |  2 +-
 site/docs/patterns/muted-heading.md      |  2 +-
 site/docs/patterns/navigation.md         |  2 +-
 site/docs/patterns/notification.md       |  2 +-
 site/docs/patterns/pagination.md         |  2 +-
 site/docs/patterns/pull-quote.md         |  2 +-
 site/docs/patterns/search-box.md         |  2 +-
 site/docs/patterns/slider.md             |  2 +-
 site/docs/patterns/strip.md              |  2 +-
 site/docs/patterns/switch.md             |  2 +-
 site/docs/patterns/table-of-contents.md  |  2 +-
 site/docs/patterns/tabs.md               |  2 +-
 site/docs/patterns/tooltips.md           |  2 +-
 site/docs/settings/layout-settings.md    |  2 +-
 site/docs/settings/spacing-settings.md   |  2 +-
 site/docs/utilities/align.md             |  2 +-
 site/docs/utilities/baseline-grid.md     |  2 +-
 site/docs/utilities/clearfix.md          |  2 +-
 site/docs/utilities/embedded-media.md    |  2 +-
 site/docs/utilities/equal-height.md      |  2 +-
 site/docs/utilities/floats.md            |  2 +-
 site/docs/utilities/font-metrics.md      |  2 +-
 site/docs/utilities/hide.md              |  2 +-
 site/docs/utilities/image-position.md    |  2 +-
 site/docs/utilities/margin-collapse.md   |  2 +-
 site/docs/utilities/no-print.md          |  2 +-
 site/docs/utilities/off-screen.md        |  2 +-
 site/docs/utilities/padding-collapse.md  |  2 +-
 site/docs/utilities/show.md              |  2 +-
 site/docs/utilities/truncate.md          |  2 +-
 site/docs/utilities/vertically-center.md |  2 +-
 54 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 341aba5266..f801ca1475 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -42,7 +42,7 @@
             <a href="#main-content">Jump to main content</a>
           </span>
           <ul class="p-navigation__items">
-            <li class="p-navigation__item {% if '/examples' not in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/">Docs</a></li>
+            <li class="p-navigation__item {% if path.startswith('/docs') %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
             <li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/accessibility">Accessibility</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/browser-support">Browser support</a></li>
@@ -66,9 +66,9 @@
               <li class="p-sidebar-nav__item">
                 <strong>Welcome</strong>
                 <ul class="p-sidebar-nav__list">
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/' %}is-active{% endif %}" href="/">Get started</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/building-vanilla' %}is-active{% endif %}" href="/building-vanilla">Building with Vanilla</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/customising-vanilla' %}is-active{% endif %}" href="/customising-vanilla">Customising Vanilla</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs' %}is-active{% endif %}" href="/docs">Get started</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/building-vanilla' %}is-active{% endif %}" href="/docs/building-vanilla">Building with Vanilla</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/customising-vanilla' %}is-active{% endif %}" href="/docs/customising-vanilla">Customising Vanilla</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft" href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest">What’s new in {{ version }}</a></li>
                 </ul>
               </li>
@@ -163,7 +163,7 @@
                 <strong>Resources</strong>
                 <ul class="p-sidebar-nav__list">
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/examples' %}is-active{% endif %}" href="/docs/examples">Component examples</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/component-status' %}is-active{% endif %}" href="/component-status">Component status</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/component-status' %}is-active{% endif %}" href="/docs/component-status">Component status</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft" href="https://assets.ubuntu.com/latest-redirects/vanilla-framework.sketch">Download the Sketch UI Kit</a></li>
                 </ul>
               </li>
diff --git a/site/docs/base/code.md b/site/docs/base/code.md
index 750d44cb5b..c39b23f59a 100644
--- a/site/docs/base/code.md
+++ b/site/docs/base/code.md
@@ -69,7 +69,7 @@ To import just code copyable or numbered component into your project, copy eithe
 @import 'patterns_code-numbered';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/base/forms.md b/site/docs/base/forms.md
index a76ff2ee07..e3a9955866 100644
--- a/site/docs/base/forms.md
+++ b/site/docs/base/forms.md
@@ -176,7 +176,7 @@ To add form help text or validation into your project, copy either or both snipp
 @import 'patterns_form-validation';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/base/tables.md b/site/docs/base/tables.md
index d05c5f23c7..f3ef1188ad 100644
--- a/site/docs/base/tables.md
+++ b/site/docs/base/tables.md
@@ -66,7 +66,7 @@ To import either or all of these components into your project, copy the snippets
 @import 'patterns_table-sortable';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/base/typography.md b/site/docs/base/typography.md
index 4bb45590a8..23ccb98dcf 100644
--- a/site/docs/base/typography.md
+++ b/site/docs/base/typography.md
@@ -219,7 +219,7 @@ To import just this base element into your project, copy the snippet below and i
 @import 'patterns_headings';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/index.html b/site/docs/index.html
index 0e0b6a6eb7..58c272d1eb 100644
--- a/site/docs/index.html
+++ b/site/docs/index.html
@@ -15,7 +15,7 @@ <h2>Get started</h2>
 
 <hr>
 
-<p>You can use Vanilla in your projects in a few different ways. See <a href="/building-vanilla">Building with Vanilla</a> and <a href="/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>
+<p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>
 
 <h3>Install</h3>
 <div class="row">
@@ -34,7 +34,7 @@ <h3>Install</h3>
 // Include all of Vanilla Framework
 @include vanilla;</code></pre>
 
-    <p><em>For information on overriding settings and importing only parts of Vanilla, see <a href="/customising-vanilla">Customising Vanilla</a>.</em></p>
+    <p><em>For information on overriding settings and importing only parts of Vanilla, see <a href="/docs/customising-vanilla">Customising Vanilla</a>.</em></p>
   </div>
 </div>
 
diff --git a/site/docs/patterns/accordion.md b/site/docs/patterns/accordion.md
index 13d302d882..4f60a1ecd5 100644
--- a/site/docs/patterns/accordion.md
+++ b/site/docs/patterns/accordion.md
@@ -37,7 +37,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-accordion;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/article-pagination.md b/site/docs/patterns/article-pagination.md
index 1924973beb..5738725831 100644
--- a/site/docs/patterns/article-pagination.md
+++ b/site/docs/patterns/article-pagination.md
@@ -23,7 +23,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-article-pagination;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/breadcrumbs.md b/site/docs/patterns/breadcrumbs.md
index d2ca067761..042765df3e 100644
--- a/site/docs/patterns/breadcrumbs.md
+++ b/site/docs/patterns/breadcrumbs.md
@@ -25,7 +25,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-breadcrumbs;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/buttons.md b/site/docs/patterns/buttons.md
index 47e3dbd3a6..bb9b6f4b01 100644
--- a/site/docs/patterns/buttons.md
+++ b/site/docs/patterns/buttons.md
@@ -95,7 +95,7 @@ To import just this component into your project, copy the snippet below and incl
 
 If you only need a small subset of the icons consider [including them individually](/patterns/icons/#import) to reduce the size of your CSS file.
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/card.md b/site/docs/patterns/card.md
index 70e9d2930e..9ceb3d9f01 100644
--- a/site/docs/patterns/card.md
+++ b/site/docs/patterns/card.md
@@ -51,7 +51,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-card;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/contextual-menu.md b/site/docs/patterns/contextual-menu.md
index 8a773476e7..bddc6559f3 100644
--- a/site/docs/patterns/contextual-menu.md
+++ b/site/docs/patterns/contextual-menu.md
@@ -81,7 +81,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-icon-contextual-menu;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/grid.md b/site/docs/patterns/grid.md
index d197c77fc5..48040c4fbf 100644
--- a/site/docs/patterns/grid.md
+++ b/site/docs/patterns/grid.md
@@ -75,7 +75,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-grid;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/heading-icon.md b/site/docs/patterns/heading-icon.md
index 3424cb5853..52855ff972 100644
--- a/site/docs/patterns/heading-icon.md
+++ b/site/docs/patterns/heading-icon.md
@@ -40,7 +40,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-heading-icon;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/icons.md b/site/docs/patterns/icons.md
index 10717dba95..319ddb6b58 100644
--- a/site/docs/patterns/icons.md
+++ b/site/docs/patterns/icons.md
@@ -270,7 +270,7 @@ If you use a limited set of icons you may want to include them individually to r
 @include vf-p-icon-in-button;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/images.md b/site/docs/patterns/images.md
index 301817fde9..6cdb4dc8a9 100644
--- a/site/docs/patterns/images.md
+++ b/site/docs/patterns/images.md
@@ -35,7 +35,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-image;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/inline-images.md b/site/docs/patterns/inline-images.md
index c8a39770d7..6cbb8b5bd7 100644
--- a/site/docs/patterns/inline-images.md
+++ b/site/docs/patterns/inline-images.md
@@ -23,7 +23,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-inline-images;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/labels.md b/site/docs/patterns/labels.md
index fedecd674f..fc84e65311 100644
--- a/site/docs/patterns/labels.md
+++ b/site/docs/patterns/labels.md
@@ -12,7 +12,7 @@ Labels are static elements which you can apply to signify status, tags or any ot
 
 <div class="p-notification--information">
   <p class="p-notification__response">
-    <span class="p-notification__status">Note:</span>These labels are used to inform <a href="/component-status" class="p-notification__action">status</a> of components in Vanilla.
+    <span class="p-notification__status">Note:</span>These labels are used to inform <a href="/docs/component-status" class="p-notification__action">status</a> of components in Vanilla.
   </p>
 </div>
 
@@ -65,7 +65,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-label;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/links.md b/site/docs/patterns/links.md
index 4887a071ba..3569a3ea30 100644
--- a/site/docs/patterns/links.md
+++ b/site/docs/patterns/links.md
@@ -67,7 +67,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-links;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/list-tree.md b/site/docs/patterns/list-tree.md
index 880f66b0bf..25b965e823 100644
--- a/site/docs/patterns/list-tree.md
+++ b/site/docs/patterns/list-tree.md
@@ -25,7 +25,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-list-tree;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/lists.md b/site/docs/patterns/lists.md
index 5aab271815..1a3687984e 100644
--- a/site/docs/patterns/lists.md
+++ b/site/docs/patterns/lists.md
@@ -123,7 +123,7 @@ To add dividers into your project, copy the snippet below and include it in your
 @include vf-p-grid;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/matrix.md b/site/docs/patterns/matrix.md
index 4d19dd6fba..87de5ba432 100644
--- a/site/docs/patterns/matrix.md
+++ b/site/docs/patterns/matrix.md
@@ -31,7 +31,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-matrix;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/media-object.md b/site/docs/patterns/media-object.md
index 49cb1b4c31..a6a7c3daca 100644
--- a/site/docs/patterns/media-object.md
+++ b/site/docs/patterns/media-object.md
@@ -40,7 +40,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-media-object;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/modal.md b/site/docs/patterns/modal.md
index 31a92bf736..0134867162 100644
--- a/site/docs/patterns/modal.md
+++ b/site/docs/patterns/modal.md
@@ -25,7 +25,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-modal;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/muted-heading.md b/site/docs/patterns/muted-heading.md
index a6dbc4d80a..08ff341d23 100644
--- a/site/docs/patterns/muted-heading.md
+++ b/site/docs/patterns/muted-heading.md
@@ -24,7 +24,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-muted-heading;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/navigation.md b/site/docs/patterns/navigation.md
index eb74fb9a5e..291cad18cf 100644
--- a/site/docs/patterns/navigation.md
+++ b/site/docs/patterns/navigation.md
@@ -74,7 +74,7 @@ To import just navigation or sub-navigation component into your project, copy sn
 @include vf-p-subnav;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/notification.md b/site/docs/patterns/notification.md
index 6dc9eaa93a..085dfd0676 100644
--- a/site/docs/patterns/notification.md
+++ b/site/docs/patterns/notification.md
@@ -75,7 +75,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-notification;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/pagination.md b/site/docs/patterns/pagination.md
index b834dd40b2..e83cda040d 100644
--- a/site/docs/patterns/pagination.md
+++ b/site/docs/patterns/pagination.md
@@ -44,7 +44,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-icon-contextual-menu;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/pull-quote.md b/site/docs/patterns/pull-quote.md
index ca28e7395b..e740dfc583 100644
--- a/site/docs/patterns/pull-quote.md
+++ b/site/docs/patterns/pull-quote.md
@@ -48,7 +48,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-pull-quotes;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/search-box.md b/site/docs/patterns/search-box.md
index 71aca02584..10d5c29961 100644
--- a/site/docs/patterns/search-box.md
+++ b/site/docs/patterns/search-box.md
@@ -41,7 +41,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-icon-search;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/slider.md b/site/docs/patterns/slider.md
index 55750ccc46..853e2c5334 100644
--- a/site/docs/patterns/slider.md
+++ b/site/docs/patterns/slider.md
@@ -27,7 +27,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-slider;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/strip.md b/site/docs/patterns/strip.md
index 2d3c5e7d72..824ebd83f5 100644
--- a/site/docs/patterns/strip.md
+++ b/site/docs/patterns/strip.md
@@ -85,7 +85,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-strip;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/switch.md b/site/docs/patterns/switch.md
index 72ada77b16..91da174d66 100644
--- a/site/docs/patterns/switch.md
+++ b/site/docs/patterns/switch.md
@@ -23,7 +23,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-switch;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/table-of-contents.md b/site/docs/patterns/table-of-contents.md
index 561778f66c..1ac3e5cf69 100644
--- a/site/docs/patterns/table-of-contents.md
+++ b/site/docs/patterns/table-of-contents.md
@@ -27,7 +27,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-lists;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/tabs.md b/site/docs/patterns/tabs.md
index ea3bcd63c7..7431307e16 100644
--- a/site/docs/patterns/tabs.md
+++ b/site/docs/patterns/tabs.md
@@ -45,7 +45,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-tabs;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/patterns/tooltips.md b/site/docs/patterns/tooltips.md
index 7eb990deed..39e01b95d9 100644
--- a/site/docs/patterns/tooltips.md
+++ b/site/docs/patterns/tooltips.md
@@ -32,7 +32,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-tooltips;
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/settings/layout-settings.md b/site/docs/settings/layout-settings.md
index 1bb273aabb..43e1275d77 100644
--- a/site/docs/settings/layout-settings.md
+++ b/site/docs/settings/layout-settings.md
@@ -24,4 +24,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_layout';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/settings/spacing-settings.md b/site/docs/settings/spacing-settings.md
index 35fc9a5425..bf17dcdffd 100644
--- a/site/docs/settings/spacing-settings.md
+++ b/site/docs/settings/spacing-settings.md
@@ -99,4 +99,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_vertical-spacing';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/align.md b/site/docs/utilities/align.md
index 50d8b23531..5d76886f69 100644
--- a/site/docs/utilities/align.md
+++ b/site/docs/utilities/align.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_content-align';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/baseline-grid.md b/site/docs/utilities/baseline-grid.md
index 3eb5fe01ba..cc39165524 100644
--- a/site/docs/utilities/baseline-grid.md
+++ b/site/docs/utilities/baseline-grid.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_baseline-grid';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/clearfix.md b/site/docs/utilities/clearfix.md
index 72ba43b503..b54328cd0f 100644
--- a/site/docs/utilities/clearfix.md
+++ b/site/docs/utilities/clearfix.md
@@ -26,4 +26,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_clearfix';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/embedded-media.md b/site/docs/utilities/embedded-media.md
index 1b05836ab1..308f7e05ba 100644
--- a/site/docs/utilities/embedded-media.md
+++ b/site/docs/utilities/embedded-media.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_embedded-media';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/equal-height.md b/site/docs/utilities/equal-height.md
index 763890aae4..fa12fc7c3d 100644
--- a/site/docs/utilities/equal-height.md
+++ b/site/docs/utilities/equal-height.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_equal-height';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/floats.md b/site/docs/utilities/floats.md
index ce1cb7eac5..6aa017af7d 100644
--- a/site/docs/utilities/floats.md
+++ b/site/docs/utilities/floats.md
@@ -51,4 +51,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_floats';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/font-metrics.md b/site/docs/utilities/font-metrics.md
index a6461b2591..44caecc2b3 100644
--- a/site/docs/utilities/font-metrics.md
+++ b/site/docs/utilities/font-metrics.md
@@ -31,4 +31,4 @@ The `$horisontal-bleed` variable (default value `2rem`) makes the lines protrude
 
 For more information on font metrics, this <a class="p-link--external" href="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">blog post</a> gives a good overview.
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/hide.md b/site/docs/utilities/hide.md
index c6dd684558..19de3afc47 100644
--- a/site/docs/utilities/hide.md
+++ b/site/docs/utilities/hide.md
@@ -26,4 +26,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_hide';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/image-position.md b/site/docs/utilities/image-position.md
index 9fbb4c7dda..ad9983e5d6 100644
--- a/site/docs/utilities/image-position.md
+++ b/site/docs/utilities/image-position.md
@@ -74,7 +74,7 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_image-position';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
 ### Design
 
diff --git a/site/docs/utilities/margin-collapse.md b/site/docs/utilities/margin-collapse.md
index 2949d76d2e..3e43b35745 100644
--- a/site/docs/utilities/margin-collapse.md
+++ b/site/docs/utilities/margin-collapse.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_margin-collapse';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/no-print.md b/site/docs/utilities/no-print.md
index 9e76315c41..cb881c823e 100644
--- a/site/docs/utilities/no-print.md
+++ b/site/docs/utilities/no-print.md
@@ -25,4 +25,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_no-print';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/off-screen.md b/site/docs/utilities/off-screen.md
index 536c133d8d..78b510e460 100644
--- a/site/docs/utilities/off-screen.md
+++ b/site/docs/utilities/off-screen.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_off-screen';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/padding-collapse.md b/site/docs/utilities/padding-collapse.md
index 7415c51536..13da2ecb5b 100644
--- a/site/docs/utilities/padding-collapse.md
+++ b/site/docs/utilities/padding-collapse.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_padding-collapse';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/show.md b/site/docs/utilities/show.md
index e1d287e92c..5f586e7c6f 100644
--- a/site/docs/utilities/show.md
+++ b/site/docs/utilities/show.md
@@ -22,4 +22,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_show';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/truncate.md b/site/docs/utilities/truncate.md
index 2b1b2f28d0..48ac4e3100 100644
--- a/site/docs/utilities/truncate.md
+++ b/site/docs/utilities/truncate.md
@@ -27,4 +27,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_truncate';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/site/docs/utilities/vertically-center.md b/site/docs/utilities/vertically-center.md
index b4481df3ff..73bebfb4d7 100644
--- a/site/docs/utilities/vertically-center.md
+++ b/site/docs/utilities/vertically-center.md
@@ -24,4 +24,4 @@ To import just this utility into your project, copy the snippet below and includ
 @import 'utilities_vertically-center';
 ```
 
-For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions.
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.

From b358e52d6091e5be48edfa29e80569b9144372c1 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 3 Mar 2020 09:23:12 +0100
Subject: [PATCH 07/23] Fix base links

---
 site/_layouts/default.html          | 10 +++++-----
 site/docs/base/typography.md        |  2 +-
 site/docs/component-status.md       | 10 +++++-----
 site/docs/patterns/pull-quote.md    |  2 +-
 site/docs/settings/font-settings.md |  4 ++--
 site/docs/utilities/functions.md    |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index f801ca1475..d5399a14dc 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -76,11 +76,11 @@
               <li class="p-sidebar-nav__item">
                 <strong>Base elements</strong>
                 <ul class="p-sidebar-nav__list">
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/base/code' %}is-active{% endif %}" href="/base/code">Code</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/base/forms' %}is-active{% endif %}" href="/base/forms">Forms</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/base/reset' %}is-active{% endif %}" href="/base/reset">Reset</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/base/tables' %}is-active{% endif %}" href="/base/tables">Tables</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/base/typography' %}is-active{% endif %}" href="/base/typography">Typography</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/base/code' %}is-active{% endif %}" href="/docs/base/code">Code</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/base/forms' %}is-active{% endif %}" href="/docs/base/forms">Forms</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/base/reset' %}is-active{% endif %}" href="/docs/base/reset">Reset</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/base/tables' %}is-active{% endif %}" href="/docs/base/tables">Tables</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/base/typography' %}is-active{% endif %}" href="/docs/base/typography">Typography</a></li>
                 </ul>
               </li>
 
diff --git a/site/docs/base/typography.md b/site/docs/base/typography.md
index 23ccb98dcf..60f75c5e7d 100644
--- a/site/docs/base/typography.md
+++ b/site/docs/base/typography.md
@@ -227,4 +227,4 @@ For more information [view the typography design spec](https://github.com/ubuntu
 
 ### Related
 
-For more typographic related information view the [code](/base/code) and [pull quote pattern](/patterns/pull-quote) component or our [font settings](/docs/settings/font-settings).
+For more typographic related information view the [code](/docs/base/code) and [pull quote pattern](/docs/patterns/pull-quote) component or our [font settings](/docs/settings/font-settings).
diff --git a/site/docs/component-status.md b/site/docs/component-status.md
index 5524282980..5a60ff395a 100644
--- a/site/docs/component-status.md
+++ b/site/docs/component-status.md
@@ -57,26 +57,26 @@ When we add, make significant updates, or deprecate a component we update their
       <td>Added dark theme to contextual menu.</td>
     </tr>
     <tr>
-      <th><a href="/base/typography#heading-classes">Heading classes</a></th>
+      <th><a href="/docs/base/typography#heading-classes">Heading classes</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.7.0</td>
       <td>New heading classes with numbers (<code>p-heading--1</code>, ...) were added for consistency with other class names we use.</td>
     </tr>
     <tr>
-      <th><a href="/base/typography#heading-classes">Heading classes</a></th>
+      <th><a href="/docs/base/typography#heading-classes">Heading classes</a></th>
       <td><div class="p-label--deprecated">Deprecated</div></td>
       <td>2.7.0</td>
       <td>Heading classes with numbers as words (<code>p-heading--one</code>, <code>--two</code>, ...) are deprecated and will be removed in future release v3.0. Please use class names with numbers (<code>p-heading--1</code>, <code>--2</code>, ...) instead.</td>
     </tr>
 
     <tr>
-      <th><a href="/base/forms/#range">Range input</a></th>
+      <th><a href="/docs/base/forms/#range">Range input</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.6.0</td>
       <td>Styling of Slider component was added to all <code>&lt;input type="range"&gt;</code> elements by default. This makes <code>p-slider</code> class optional for styling range inputs.</td>
     </tr>
     <tr>
-      <th><a href="/base/forms/#checkbox">Checkbox, radio button</a></th>
+      <th><a href="/docs/base/forms/#checkbox">Checkbox, radio button</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.6.0</td>
       <td>New `is-table-header` added to properly align checkboxes and radio buttons used in table headers.</td>
@@ -101,7 +101,7 @@ When we add, make significant updates, or deprecate a component we update their
       <td>Added <code>u-visualise-font-metrics</code> utility to visualise font metrics</td>
     </tr>
     <tr>
-      <th><a href="/base/typography/#line-length">Line length</a></th>
+      <th><a href="/docs/base/typography/#line-length">Line length</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.5.0</td>
       <td>Added <code>$max-width--default</code> variable and <code>u-no-max-width</code> utility to control line length</td>
diff --git a/site/docs/patterns/pull-quote.md b/site/docs/patterns/pull-quote.md
index e740dfc583..ee1f7fd91c 100644
--- a/site/docs/patterns/pull-quote.md
+++ b/site/docs/patterns/pull-quote.md
@@ -56,4 +56,4 @@ For more information [view the quotes design spec](https://github.com/ubuntudesi
 
 ### Related
 
-For more typographic related information view the [blockquotes and citations](https://docs.vanillaframework.io/base/typography#blockquotes-and-citations) in base typography.
+For more typographic related information view the [blockquotes and citations](https://docs.vanillaframework.io/docs/base/typography#blockquotes-and-citations) in base typography.
diff --git a/site/docs/settings/font-settings.md b/site/docs/settings/font-settings.md
index 621dd75b10..d29dd4fa96 100644
--- a/site/docs/settings/font-settings.md
+++ b/site/docs/settings/font-settings.md
@@ -30,6 +30,6 @@ All Ubuntu sites and applications should use the Ubuntu font, as it has been spe
 
 ### Related
 
-- [Base typography](/base/typography)
-- [Code](/base/code)
+- [Base typography](/docs/base/typography)
+- [Code](/docs/base/code)
 - [Pull quote pattern](/patterns/pull-quote)
diff --git a/site/docs/utilities/functions.md b/site/docs/utilities/functions.md
index 24d3cef3c4..9ebecdffeb 100644
--- a/site/docs/utilities/functions.md
+++ b/site/docs/utilities/functions.md
@@ -112,4 +112,4 @@ This function adds a `3px` thick, coloured bar to one side of a component (for e
 
 - [Icons](/patterns/icons)
 - [Strip](/patterns/strip)
-- [Typography](/base/typography)
+- [Typography](/docs/base/typography)

From 7759710d26ac740c0f0f50a7131cb0cedbf04463 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 3 Mar 2020 09:49:17 +0100
Subject: [PATCH 08/23] Fix pattern links

---
 site/_layouts/default.html            | 60 +++++++++++++--------------
 site/docs/component-status.md         | 14 +++----
 site/docs/patterns/buttons.md         |  2 +-
 site/docs/patterns/contextual-menu.md |  2 +-
 site/docs/patterns/list-tree.md       |  2 +-
 site/docs/patterns/lists.md           |  2 +-
 site/docs/patterns/search-box.md      |  2 +-
 site/docs/patterns/strip.md           |  2 +-
 site/docs/patterns/tooltips.md        |  2 +-
 site/docs/settings/color-settings.md  |  2 +-
 site/docs/settings/font-settings.md   |  2 +-
 site/docs/utilities/functions.md      |  4 +-
 12 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index d5399a14dc..753ed40516 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -87,36 +87,36 @@
               <li class="p-sidebar-nav__item">
                 <strong>Components</strong>
                 <ul class="p-sidebar-nav__list">
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/accordion' %}is-active{% endif %}" href="/patterns/accordion">Accordion</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/article-pagination' %}is-active{% endif %}" href="/patterns/article-pagination">Article pagination</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/breadcrumbs' %}is-active{% endif %}" href="/patterns/breadcrumbs">Breadcrumbs</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/buttons' %}is-active{% endif %}" href="/patterns/buttons">Buttons</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/card' %}is-active{% endif %}" href="/patterns/card">Cards</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/contextual-menu' %}is-active{% endif %}" href="/patterns/contextual-menu">Contextual menu</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/grid' %}is-active{% endif %}" href="/patterns/grid">Grid</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/heading-icon' %}is-active{% endif %}" href="/patterns/heading-icon">Heading icon</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/icons' %}is-active{% endif %}" href="/patterns/icons">Icons</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/images' %}is-active{% endif %}" href="/patterns/images">Images</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/inline-images' %}is-active{% endif %}" href="/patterns/inline-images">Inline images</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/labels' %}is-active{% endif %}" href="/patterns/labels">Labels</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/links' %}is-active{% endif %}" href="/patterns/links">Links</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/list-tree' %}is-active{% endif %}" href="/patterns/list-tree">List tree</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/lists' %}is-active{% endif %}" href="/patterns/lists">Lists</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/matrix' %}is-active{% endif %}" href="/patterns/matrix">Matrix</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/media-object' %}is-active{% endif %}" href="/patterns/media-object">Media object</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/modal' %}is-active{% endif %}" href="/patterns/modal">Modal</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/muted-heading' %}is-active{% endif %}" href="/patterns/muted-heading">Muted heading</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/navigation' %}is-active{% endif %}" href="/patterns/navigation">Navigation</a><div class="p-label--updated u-float-right u-no-margin--bottom">Updated</div></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/notification' %}is-active{% endif %}" href="/patterns/notification">Notifications</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/pagination' %}is-active{% endif %}" href="/patterns/pagination">Pagination</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/pull-quote' %}is-active{% endif %}" href="/patterns/pull-quote">Quotes</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/search-box' %}is-active{% endif %}" href="/patterns/search-box">Search box</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/slider' %}is-active{% endif %}" href="/patterns/slider">Slider</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/strip' %}is-active{% endif %}" href="/patterns/strip">Strip</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/switch' %}is-active{% endif %}" href="/patterns/switch">Switch</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/table-of-contents' %}is-active{% endif %}" href="/patterns/table-of-contents">Table of contents</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/tabs' %}is-active{% endif %}" href="/patterns/tabs">Tabs</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/patterns/tooltips' %}is-active{% endif %}" href="/patterns/tooltips">Tooltips</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/accordion' %}is-active{% endif %}" href="/docs/patterns/accordion">Accordion</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/article-pagination' %}is-active{% endif %}" href="/docs/patterns/article-pagination">Article pagination</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/breadcrumbs' %}is-active{% endif %}" href="/docs/patterns/breadcrumbs">Breadcrumbs</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/buttons' %}is-active{% endif %}" href="/docs/patterns/buttons">Buttons</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/card' %}is-active{% endif %}" href="/docs/patterns/card">Cards</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/contextual-menu' %}is-active{% endif %}" href="/docs/patterns/contextual-menu">Contextual menu</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/grid' %}is-active{% endif %}" href="/docs/patterns/grid">Grid</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/heading-icon' %}is-active{% endif %}" href="/docs/patterns/heading-icon">Heading icon</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/icons' %}is-active{% endif %}" href="/docs/patterns/icons">Icons</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/images' %}is-active{% endif %}" href="/docs/patterns/images">Images</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/inline-images' %}is-active{% endif %}" href="/docs/patterns/inline-images">Inline images</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/labels' %}is-active{% endif %}" href="/docs/patterns/labels">Labels</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/links' %}is-active{% endif %}" href="/docs/patterns/links">Links</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/list-tree' %}is-active{% endif %}" href="/docs/patterns/list-tree">List tree</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/lists' %}is-active{% endif %}" href="/docs/patterns/lists">Lists</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/matrix' %}is-active{% endif %}" href="/docs/patterns/matrix">Matrix</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/media-object' %}is-active{% endif %}" href="/docs/patterns/media-object">Media object</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/modal' %}is-active{% endif %}" href="/docs/patterns/modal">Modal</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/muted-heading' %}is-active{% endif %}" href="/docs/patterns/muted-heading">Muted heading</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--updated u-float-right u-no-margin--bottom">Updated</div></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/notification' %}is-active{% endif %}" href="/docs/patterns/notification">Notifications</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pagination' %}is-active{% endif %}" href="/docs/patterns/pagination">Pagination</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pull-quote' %}is-active{% endif %}" href="/docs/patterns/pull-quote">Quotes</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/search-box' %}is-active{% endif %}" href="/docs/patterns/search-box">Search box</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/slider' %}is-active{% endif %}" href="/docs/patterns/slider">Slider</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/strip' %}is-active{% endif %}" href="/docs/patterns/strip">Strip</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/switch' %}is-active{% endif %}" href="/docs/patterns/switch">Switch</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/table-of-contents' %}is-active{% endif %}" href="/docs/patterns/table-of-contents">Table of contents</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/tabs' %}is-active{% endif %}" href="/docs/patterns/tabs">Tabs</a></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/tooltips' %}is-active{% endif %}" href="/docs/patterns/tooltips">Tooltips</a></li>
                 </ul>
               </li>
 
diff --git a/site/docs/component-status.md b/site/docs/component-status.md
index 5a60ff395a..804f519d2e 100644
--- a/site/docs/component-status.md
+++ b/site/docs/component-status.md
@@ -23,13 +23,13 @@ When we add, make significant updates, or deprecate a component we update their
   </thead>
   <tbody>
     <tr>
-      <th><a href="/patterns/navigation">Navigation</a></th>
+      <th><a href="/docs/patterns/navigation">Navigation</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.8.0</td>
       <td>New navigation classes (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) were added to replace existing (<code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code>).</td>
     </tr>
     <tr>
-      <th><a href="/patterns/navigation">Navigation</a></th>
+      <th><a href="/docs/patterns/navigation">Navigation</a></th>
       <td><div class="p-label--deprecated">Deprecated</div></td>
       <td>2.8.0</td>
       <td>Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> are deprecated and will be removed in future release v3.0. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.</td>
@@ -51,7 +51,7 @@ When we add, make significant updates, or deprecate a component we update their
   <tbody>
     <!-- 2.7.0 -->
     <tr>
-      <th><a href="/patterns/contextual-menu#theming">Contextual menu</a></th>
+      <th><a href="/docs/patterns/contextual-menu#theming">Contextual menu</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.7.0</td>
       <td>Added dark theme to contextual menu.</td>
@@ -82,14 +82,14 @@ When we add, make significant updates, or deprecate a component we update their
       <td>New `is-table-header` added to properly align checkboxes and radio buttons used in table headers.</td>
     </tr>
     <tr>
-      <th><a href="/patterns/slider">Slider</a></th>
+      <th><a href="/docs/patterns/slider">Slider</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.6.0</td>
       <td>Styling of Slider component was added to all <code>&lt;input type="range"&gt;</code> elements by default. This makes <code>p-slider</code> class optional for styling range inputs.</td>
     </tr>
 
     <tr>
-      <th><a href="/patterns/contextual-menu/#indicator">Contextual menu</a></th>
+      <th><a href="/docs/patterns/contextual-menu/#indicator">Contextual menu</a></th>
       <td><div class="p-label--new">New</div></td>
       <td>2.5.0</td>
       <td>Optional state indicator was added to contextual menu</td>
@@ -119,13 +119,13 @@ When we add, make significant updates, or deprecate a component we update their
       <td>Added <code>u-truncate</code> utility to truncate text with ellipsis</td>
     </tr>
     <tr>
-      <th><a href="/patterns/icons/#social">Social icons</a></th>
+      <th><a href="/docs/patterns/icons/#social">Social icons</a></th>
       <td><div class="p-label--updated">Updated</div></td>
       <td>2.5.0</td>
       <td>Updated style of social icons. Added new <code>.p-icon--rss</code> and <code>p-icon--email</code> icons.</td>
     </tr>
     <tr>
-      <th><a href="/patterns/icons/#social">Social icons</a></th>
+      <th><a href="/docs/patterns/icons/#social">Social icons</a></th>
       <td><div class="p-label--deprecated">Deprecated</div></td>
       <td>2.5.0</td>
       <td>We will be removing <code>p-icon--canonical</code> and <code>p-icon--ubuntu</code> from social icon set in future release v3.0</td>
diff --git a/site/docs/patterns/buttons.md b/site/docs/patterns/buttons.md
index bb9b6f4b01..46c30b0e8a 100644
--- a/site/docs/patterns/buttons.md
+++ b/site/docs/patterns/buttons.md
@@ -93,7 +93,7 @@ To import just this component into your project, copy the snippet below and incl
 @include vf-p-icons;
 ```
 
-If you only need a small subset of the icons consider [including them individually](/patterns/icons/#import) to reduce the size of your CSS file.
+If you only need a small subset of the icons consider [including them individually](/docs/patterns/icons/#import) to reduce the size of your CSS file.
 
 For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
 
diff --git a/site/docs/patterns/contextual-menu.md b/site/docs/patterns/contextual-menu.md
index bddc6559f3..ff3022b77a 100644
--- a/site/docs/patterns/contextual-menu.md
+++ b/site/docs/patterns/contextual-menu.md
@@ -89,4 +89,4 @@ For more information [view the contextual menu design spec](https://github.com/u
 
 ### Related
 
-For more interactive elements that hide/show content[view the tooltips component](https://docs.vanillaframework.io/patterns/tooltips).
+For more interactive elements that hide/show content[view the tooltips component](https://docs.vanillaframework.io/docs/patterns/tooltips).
diff --git a/site/docs/patterns/list-tree.md b/site/docs/patterns/list-tree.md
index 25b965e823..16a1324523 100644
--- a/site/docs/patterns/list-tree.md
+++ b/site/docs/patterns/list-tree.md
@@ -33,4 +33,4 @@ For more information view the [list tree design spec](https://github.com/ubuntud
 
 ### Related
 
-For alternative list style layouts [view our range of list components.](/patterns/lists)
+For alternative list style layouts [view our range of list components.](/docs/patterns/lists)
diff --git a/site/docs/patterns/lists.md b/site/docs/patterns/lists.md
index 1a3687984e..3f2a1b320b 100644
--- a/site/docs/patterns/lists.md
+++ b/site/docs/patterns/lists.md
@@ -131,4 +131,4 @@ For more information [view the lists design spec](https://github.com/ubuntudesig
 
 ### Related
 
-For a more interactive layered lists style [view the list tree component](/patterns/list-tree).
+For a more interactive layered lists style [view the list tree component](/docs/patterns/list-tree).
diff --git a/site/docs/patterns/search-box.md b/site/docs/patterns/search-box.md
index 10d5c29961..ca41929347 100644
--- a/site/docs/patterns/search-box.md
+++ b/site/docs/patterns/search-box.md
@@ -49,4 +49,4 @@ For more information [view the search design spec](https://github.com/ubuntudesi
 
 ### Related
 
-For more interactive information adding search [view the navigation component](/patterns/navigation).
+For more interactive information adding search [view the navigation component](/docs/patterns/navigation).
diff --git a/site/docs/patterns/strip.md b/site/docs/patterns/strip.md
index 824ebd83f5..c185d57fed 100644
--- a/site/docs/patterns/strip.md
+++ b/site/docs/patterns/strip.md
@@ -10,7 +10,7 @@ context:
 
 The strip pattern provides a full width strip container in which to wrap a row. A strip can have light (`.p-strip--light`) or dark (`.p-strip--dark`) grey background.
 
-A `.p-strip` container should always be the parent of a `.row` (from the [Grid pattern](/patterns/grid/)) and never the other way around.
+A `.p-strip` container should always be the parent of a `.row` (from the [Grid pattern](/docs/patterns/grid/)) and never the other way around.
 
 <a href="/docs/examples/patterns/strips/strips-light/" class="js-example">
 View example of the strip light pattern
diff --git a/site/docs/patterns/tooltips.md b/site/docs/patterns/tooltips.md
index 39e01b95d9..5ecf45fff9 100644
--- a/site/docs/patterns/tooltips.md
+++ b/site/docs/patterns/tooltips.md
@@ -40,4 +40,4 @@ For more information [view the tooltips design spec](https://github.com/ubuntude
 
 ### Related
 
-For an alternative way of displaying discoverable information [view our contextual menu component](/patterns/contextual-menu).
+For an alternative way of displaying discoverable information [view our contextual menu component](/docs/patterns/contextual-menu).
diff --git a/site/docs/settings/color-settings.md b/site/docs/settings/color-settings.md
index 17fba346a9..66340eaa1a 100644
--- a/site/docs/settings/color-settings.md
+++ b/site/docs/settings/color-settings.md
@@ -151,7 +151,7 @@ Starting with the [2.3.0](https://github.com/canonical-web-and-design/vanilla-fr
 - `checkbox`
 - `hr`
 - `radio`
-- <a href="/patterns/navigation">navigation</a>
+- <a href="/docs/patterns/navigation">navigation</a>
 - search box
 
 | Element / Component | Variable                      | Default value |
diff --git a/site/docs/settings/font-settings.md b/site/docs/settings/font-settings.md
index d29dd4fa96..d18e25c01b 100644
--- a/site/docs/settings/font-settings.md
+++ b/site/docs/settings/font-settings.md
@@ -32,4 +32,4 @@ All Ubuntu sites and applications should use the Ubuntu font, as it has been spe
 
 - [Base typography](/docs/base/typography)
 - [Code](/docs/base/code)
-- [Pull quote pattern](/patterns/pull-quote)
+- [Pull quote pattern](/docs/patterns/pull-quote)
diff --git a/site/docs/utilities/functions.md b/site/docs/utilities/functions.md
index 9ebecdffeb..8b662def88 100644
--- a/site/docs/utilities/functions.md
+++ b/site/docs/utilities/functions.md
@@ -110,6 +110,6 @@ This function adds a `3px` thick, coloured bar to one side of a component (for e
 
 ### Related
 
-- [Icons](/patterns/icons)
-- [Strip](/patterns/strip)
+- [Icons](/docs/patterns/icons)
+- [Strip](/docs/patterns/strip)
 - [Typography](/docs/base/typography)

From e059a642b06755a6f798647c0bbee962fc8eb50c Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 10:44:51 +0000
Subject: [PATCH 09/23] Add homepage

---
 site/_layouts/site.html | 126 ++++++++++++++++++++++
 site/index.html         | 225 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 351 insertions(+)
 create mode 100644 site/_layouts/site.html
 create mode 100644 site/index.html

diff --git a/site/_layouts/site.html b/site/_layouts/site.html
new file mode 100644
index 0000000000..8dcd8e4b09
--- /dev/null
+++ b/site/_layouts/site.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Vanilla Framework</title>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-K7ZB6FL');</script>
+    <!-- End Google Tag Manager -->
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="css/main.css">
+    <!-- Crazy Egg A/B testing -->
+    <script type="text/javascript" src="https://script.crazyegg.com/pages/scripts/0011/8875.js" async="async"></script>
+    <script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
+    <script>
+      var bLazy = new Blazy();
+    </script>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    {% if self.description() %}
+    <meta name="description" content="{% block description %}{% endblock %}">    
+    {% endif %}
+    <link rel="icon" href="https://assets.ubuntu.com/v1/bbba0152-vanilla_favicon_16px.png" type="image/x-icon" />
+    <!-- PWA -->
+    <link rel="manifest" href="manifest.json">
+    <meta name="msapplication-navbutton-color" content="#E7542D">
+    <meta name="msapplication-starturl" content="/">
+    <!-- Chrome for Android theme color -->
+    <meta name="theme-color" content="#E7542D">
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Vanilla Framework">
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Vanilla Framework">
+    <!-- Tile for Win8 -->
+    <meta name="msapplication-TileColor" content="#E7542D">
+    {% if self.copydoc() %}
+      <meta name="copydoc" content="{% block copydoc %}{% endblock %}" />
+    {% endif %}
+    <!-- Register service worker for offline -->
+    <script type="text/javascript">
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js', {scope: '/'})
+          .then(function(reg) {
+            console.log('Registration succeeded. Scope is ' + reg.scope);
+          }).catch(function(error) {
+            console.log('Registration failed with ' + error);
+          });
+      }
+    </script>
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7ZB6FL"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <header id="navigation" class="p-navigation">
+      <div class="p-navigation__row">
+        <div class="p-navigation__banner">
+          <div class="p-navigation__logo" style="margin-bottom: 0">
+            <a class="p-navigation__link" href="/">
+              <img
+              class="b-lazy p-navigation__image"
+              src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
+              data-src="https://assets.ubuntu.com/v1/d96d86b5-vanilla_black-orange_hex.svg"
+              alt="Vanilla">
+            </a>
+          </div>
+          <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
+          <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+        </div>
+        <nav class="p-navigation__nav">
+          <span class="u-off-screen">
+            <a href="#main-content">Jump to main content</a>
+          </span>
+          <ul class="p-navigation__links">
+            <li class="p-navigation__link"><a href="https://docs.vanillaframework.io">Docs</a></li>
+            <li class="p-navigation__link"><a href="https://docs.vanillaframework.io/examples">Examples</a></li>
+            <li class="p-navigation__link{% if path == '/accessibility' %} is-selected{% endif %}"><a href="/accessibility">Accessibility</a></li>
+            <li class="p-navigation__link{% if path == '/browser-support' %} is-selected{% endif %}"><a href="/browser-support">Browser support</a></li>
+            <li class="p-navigation__link{% if path == '/contribute' %} is-selected{% endif %}"><a href="/contribute">Contribute</a></li>
+            <li class="p-navigation__link{% if path == '/showcase' %} is-selected{% endif %}"><a href="/showcase">Showcase</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    {% block content %}{{ content | safe }}{% endblock content %}
+
+    <hr>
+    <footer class="p-strip is-shallow">
+      <div class="row">
+        <div class="col-12">
+          &copy; {{ now("%Y") }} Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.
+          <nav>
+            <ul class="p-inline-list--middot">
+              <li class="p-inline-list__item">
+                <a href="https://www.ubuntu.com/legal">Legal info</a>
+              </li>
+              <li class="p-inline-list__item">
+                <a href="https://github.com/canonical-web-and-design/vanillaframework.io/issues/new">Report a bug with this site</a>
+              </li>
+              <li class="p-inline-list__item">
+                <a href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new/choose">Report a bug with Vanilla framework</a>
+              </li>
+            </ul>
+            <span class="u-off-screen">
+              <a href="#">Go to the top of the page</a>
+            </span>
+          </nav>
+        </div>
+      </div>
+    </footer>
+
+    <!-- begin usabilla live embed code -->
+    <script type="text/javascript">/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
+    window.usabilla_live = lightningjs.require("usabilla_live", "//w.usabilla.com/4f2e23c6debc.js");
+    /*]]>{/literal}*/</script>
+    <!-- end usabilla live embed code -->
+  </body>
+</html>
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000000..c4f9fec372
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,225 @@
+{# ---
+layout: default
+desc: Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.
+sitemap:
+    priority: 1.0
+    changefreq: 'monthly'
+    lastmod: 2017-01-13T17:20:30+00:00
+copydoc: https://docs.google.com/document/d/1WQ3u4Eg9Vqp_yFBdIYUyGXkvhMxlPBMSr7g7O3rLzpg/edit
+--- #}
+
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<script defer src="https://buttons.github.io/buttons.js"></script>
+
+<div id="main-content" class="p-strip--image is-dark is-deep" style="background-image: url('https://assets.ubuntu.com/v1/b70dcf07-vanilla-grad-background-min.png'); background-position: 75% 50%;">
+  <div class="row">
+    <h1>A simple extensible CSS framework</h1>
+    <p>Backed by open-source code and written in Sass by the Canonical Web Team.</p>
+    <ul class="p-inline-list u-no-margin--bottom">
+      <li class="p-inline-list__item">
+        <a href="https://docs.vanillaframework.io" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Docs link', 'eventLabel' : 'See the docs', 'eventValue' : undefined });" class="p-button--positive u-no-margin--bottom">Get started</a>
+      </li>
+      <li class="p-inline-list__item">
+        <a href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download latest', 'eventValue' : undefined });" class="p-button--neutral p-link--external u-no-margin--bottom">Download Vanilla</a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="p-strip is-bordered is-deep">
+  <div class="row">
+    <div class="col-4">
+      <div class="p-heading-icon">
+        <div class="p-heading-icon__header is-stacked">
+          <img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/1958451f-pictogram_lightweight01b-dark.svg" alt="" />
+          <h3 class="p-heading-icon__title">Lightweight</h3>
+        </div>
+        <p>Vanilla contains a responsive CSS grid, basic style for HTML elements and a selection of key useful patterns and utility classes that you can extend.</p>
+      </div>
+    </div>
+    <div class="col-4">
+      <div class="p-heading-icon">
+        <div class="p-heading-icon__header is-stacked">
+          <img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/730b14b9-pictogram_extension01-dark.svg" alt="" />
+          <h3 class="p-heading-icon__title">Composable</h3>
+        </div>
+        <p>Designed to be composable — you can include the whole framework to avail of all styles or you can use only what you need for your project.</p>
+      </div>
+    </div>
+    <div class="col-4">
+      <div class="p-heading-icon">
+        <div class="p-heading-icon__header is-stacked">
+          <img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/ff78e55c-pictogram_opensource01-dark.svg" alt="" />
+          <h3 class="p-heading-icon__title">Open source</h3>
+        </div>
+        <p>Anyone can contribute to Vanilla, improve it and extend it. All the code is available on GitHub and is licensed under LGPLv3 by Canonical.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="quick-start" class="p-strip is-bordered is-deep">
+  <div class="row">
+    <div class="col-12">
+      <h2>Quick start</h2>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-6">
+      <p>The recommended method of including Vanilla Framework in your project is via <a href="https://www.npmjs.com/package/vanilla-framework">npm</a>. You can then simply include the framework in your SCSS files and compile.</p>
+      <p>For other methods, please see the <a href="https://docs.vanillaframework.io">advanced usage docs.</a></p>
+    </div>
+    <div class="col-6">
+      <pre><code>npm install --save-dev vanilla-framework
+<span class="hljs-built_in">export</span> SASS_PATH=`<span class="hljs-built_in">pwd</span>`/node_modules:<span class="hljs-variable">${SASS_PATH}</span>
+
+<span class="hljs-comment">// Add to your main build scss file the following line</span>
+<span class="hljs-annotation">@import</span> <span class="hljs-string">'vanilla-framework/scss/build'</span></code></pre>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-bordered is-deep">
+  <div class="row u-equal-height">
+    <div class="col-4">
+      <h2>Guidelines</h2>
+      <p>If you are <a href="https://vanillaframework.io/contribute">contributing to Vanilla</a>, make sure to read and follow these guidelines.</p>
+      <ul class="p-list--divided">
+        <li class="p-list__item">
+          <a href="/accessibility" class="p-link">Accessibility</a>
+        </li>
+        <li class="p-list__item">
+          <a href="/browser-support" class="p-link">Browser support</a>
+        </li>
+      </ul>
+    </div>
+    <div class="col-8 u-vertically-center u-align--center">
+      <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/af1e0f04-guidelines-illustration.svg" alt="">
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-bordered is-deep">
+  <div class="row">
+    <div class="col-4">
+      <h2>Downloads</h2>
+    </div>
+  </div>
+  <div class="row">
+    <div class="p-card--highlighted col-4">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/0276b842-github-icon.svg" alt="GitHub repo:" />
+          <h4 class="p-heading-icon__title">Vanilla Framework</h4>
+        </div>
+        <p>Use our CSS framework to start building&nbsp;your project.</p>
+        <p style="margin-bottom: 0px;"><a onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download Vanilla framework', 'eventValue' : undefined });" class="p-button--neutral p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest">Download latest release</a></p>
+        <small>See the <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/releases">release notes</a> for details on the latest&nbsp;updates.</small>
+      </div>
+    </div>
+    <div class="p-card--highlighted col-4">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/9a5b9c51-sketch-icon.svg" alt="Sketch library:" />
+          <h4 class="p-heading-icon__title">Vanilla Design</h4>
+        </div>
+        <p>Get our Sketch library of common design components.</p>
+        <p style="margin-bottom: 0px;"><a onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download Vanilla Design UI Kit', 'eventValue' : undefined });" class="p-button--neutral" href="https://assets.ubuntu.com/latest-redirects/vanilla-framework.sketch">Download the Sketch UI Kit</a></p>
+        <small>Filesize - 2.4 MB</small>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-deep is-bordered">
+  <div class="row">
+    <h2>Latest news from our blog</h2>
+  </div>
+  <div class="row">
+    <div class="col-3">
+      <h4><a href="https://ubuntu.com/blog/the-lifecycle-of-components-in-your-design-system">The lifecycle of a component</a></h4>
+      <p class="p-heading--6">21 November 2019</p>
+    </div>
+    <div class="col-3">
+      <h4><a href="https://ubuntu.com/blog/vanilla-framework-2-0-upgrade-guide">Vanilla Framework 2.0 upgrade guide</a></h4>
+      <p class="p-heading--6">20 June 2019</p>
+    </div>
+    <div class="col-3">
+      <h4><a href="https://ubuntu.com/blog/new-release-vanilla-framework-2-0">New release: Vanilla framework 2.0</a></h4>
+      <p class="p-heading--6">13 June 2019</p>
+    </div>
+    <div class="col-3">
+      <h4><a href="https://ubuntu.com/blog/a-fresh-look-for-releases-ubuntu-com">A fresh look for releases.ubuntu.com</a></h4>
+      <p class="p-heading--6">13 February 2019</p>
+    </div>
+  </div>
+  <div class="u-fixed-width"><a href="https://ubuntu.com/blog/topics/design" class="p-button--neutral">View more from our blog</a></div>
+</div>
+
+<div class="p-strip">
+  <div class="row">
+    <h2 class="p-muted-heading u-align-text--center">Who&rsquo;s using Vanilla</h2>
+  </div>
+  <div class="row">
+    <div class="col-small-2 col-medium-2 col-2">
+      <a href="https://ubuntu.com">
+        <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/5a8a0172-2018-logo-ubuntu.svg" alt="Ubuntu" /></a>
+    </div>
+    <div class="col-small-2 col-medium-2 col-2">
+      <a href="https://jaas.ai">
+        <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/7fe3f290-2019-logo-jaas.svg" alt="JAAS" />
+      </a>
+    </div>
+    <div class="col-small-2 col-medium-2 col-2">
+      <a href="https://docs.aliceos.app/master/index.html">
+        <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/07efa0fc-2019-alice-os-logo.svg" alt="AliceOS" /></a>
+    </div>
+    <div class="col-small-2 col-medium-2 col-2">
+      <a href="https://stmargarets.london/">
+        <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/b7c9c8ce-2019-st-margarets-logo.svg" alt="St Margarets" /></a>
+    </div>
+    <div class="col-small-2 col-medium-2 col-2">
+      <a href="https://snapcraft.io">
+        <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/35cbab33-2018-logo-snapcraft.svg" alt="Snapcraft" /></a>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip--light">
+  <div class="row">
+    <div class="col-3">
+      <h2 class="p-heading--3">Contribute</h2>
+      <p><a class="github-button" href="https://github.com/canonical-web-and-design/vanilla-framework" data-size="large" data-show-count="true" aria-label="Follow @vanilla-framework on GitHub">Follow @vanilla-framework</a></p>
+      <p><a class="github-button" href="https://github.com/canonical-web-and-design/vanilla-framework/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork vanilla-framework/vanilla-framework on GitHub">Fork</a></p>
+    </div>
+    <div class="col-3">
+      <h2 class="p-heading--3">Get involved</h2>
+      <ul class="p-list--divided">
+        <li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg'); background-size: 1rem;">
+          <a href="https://vanillaframework.slack.com" class="p-link--soft">Slack&nbsp;&rsaquo;</a>
+        </li>
+        <li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/7eae50ca-icon-twitter.svg'); background-size: 1rem;">
+          <a href="https://twitter.com/vanillaframewrk" class="p-link--soft">Twitter&nbsp;&rsaquo;</a>
+        </li>
+        <li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/f307a122-icon-github.svg'); background-size: 1rem;">
+          <a href="https://github.com/canonical-web-and-design/vanilla-framework" class="p-link--soft">GitHub&nbsp;&rsaquo;</a>
+        </li>
+      </ul>
+    </div>
+    <div class="col-6">
+      <h3>Subscribe to Vanilla updates</h3>
+      <form action="//canonical.us3.list-manage.com/subscribe/post?u=56dac47c206ba0f58ec25f314&amp;id=36f7d8394e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="p-form">
+        <div class="p-form__group">
+          <label for="mce-EMAIL">Email address</label>
+          <input type="email" value="" name="EMAIL" placeholder="vanilla@example.com" id="mce-EMAIL" aria-label="Email address" required />
+          <input class="u-off-screen" aria-hidden="true" type="text" name="b_56dac47c206ba0f58ec25f314_36f7d8394e" tabindex="-1" value="" />
+          <p class="p-form-help-text">Know about new releases, features, blog posts, calls&#8209;for&#8209;help&nbsp;and more.</p>
+        </div>
+        <button type="submit" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Subscribe', 'eventLabel' : 'Subcribe to Vanilla updates', 'eventValue' : undefined });" class="p-button--positive">Subscribe</button>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}

From 2e2dfeed2da4b380d51399a2d4938dd9fa1c9746 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 10:51:57 +0000
Subject: [PATCH 10/23] Fix styles

---
 scss/site/_patterns_grid.scss             | 13 +++++
 scss/site/_patterns_icons.scss            | 37 +++++++++++++
 scss/site/_patterns_syntax-highlight.scss | 65 +++++++++++++++++++++++
 scss/site/_settings_breakpoints.scss      |  1 +
 scss/site/_settings_colors.scss           |  1 +
 scss/site/main.scss                       | 37 +++++++++++++
 site/_layouts/site.html                   |  2 +-
 7 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 scss/site/_patterns_grid.scss
 create mode 100644 scss/site/_patterns_icons.scss
 create mode 100644 scss/site/_patterns_syntax-highlight.scss
 create mode 100644 scss/site/_settings_breakpoints.scss
 create mode 100644 scss/site/_settings_colors.scss
 create mode 100644 scss/site/main.scss

diff --git a/scss/site/_patterns_grid.scss b/scss/site/_patterns_grid.scss
new file mode 100644
index 0000000000..bba5a6398e
--- /dev/null
+++ b/scss/site/_patterns_grid.scss
@@ -0,0 +1,13 @@
+@mixin vfio-p-grid {
+  .mobile-col-2:nth-of-type(2n + 1) {
+    @media (max-width: $breakpoint-small - 1px) {
+      margin-left: 0;
+    }
+  }
+
+  .tablet-col-2:nth-of-type(3n + 1) {
+    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 1px) {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/scss/site/_patterns_icons.scss b/scss/site/_patterns_icons.scss
new file mode 100644
index 0000000000..59328a927f
--- /dev/null
+++ b/scss/site/_patterns_icons.scss
@@ -0,0 +1,37 @@
+@mixin vfio-p-icons {
+  .p-icon--chrome {
+    @extend %icon;
+    background-image: url('#{$assets-path}09a6a50e-vf.io-chrome.png');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--firefox {
+    @extend %icon;
+    background-image: url('#{$assets-path}a45d30aa-vf.io-firefox.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--safari {
+    @extend %icon;
+    background-image: url('#{$assets-path}a030d872-vf.io-safari.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--ie {
+    @extend %icon;
+    background-image: url('#{$assets-path}165a2220-vf.io-ie.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--edge {
+    @extend %icon;
+    background-image: url('#{$assets-path}de0673bb-vf.io-edge.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--opera {
+    @extend %icon;
+    background-image: url('#{$assets-path}74738acc-vf.io-opera.svg');
+    margin-right: $sph-inner;
+  }
+}
diff --git a/scss/site/_patterns_syntax-highlight.scss b/scss/site/_patterns_syntax-highlight.scss
new file mode 100644
index 0000000000..a58c2bf2ef
--- /dev/null
+++ b/scss/site/_patterns_syntax-highlight.scss
@@ -0,0 +1,65 @@
+// sass-lint:disable no-color-literals class-name-format
+@mixin vfio-p-syntax-highlight {
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-comment {
+    color: #595e62;
+  }
+
+  .hljs-string {
+    color: #183691;
+  }
+
+  .hljs-number {
+    color: #e95420;
+  }
+
+  .hljs-name {
+    color: #63a35c;
+  }
+
+  .hljs-selector-tag {
+    color: #63a35c;
+  }
+
+  .hljs-link {
+    color: #183691;
+  }
+
+  .hljs-keyword {
+    color: #a71d5d;
+  }
+
+  .hljs-attribute {
+    color: #a71d5d;
+  }
+
+  .hljs-attr {
+    color: #795da3;
+  }
+
+  .hljs-built_in {
+    color: #77216f;
+  }
+
+  .hljs-title {
+    color: #795da3;
+  }
+
+  .hljs-section {
+    color: #183691;
+    font-weight: bold;
+  }
+
+  .hljs-meta {
+    color: #183691;
+    font-weight: bold;
+  }
+}
+// sass-lint:enable no-color-literals class-name-format
diff --git a/scss/site/_settings_breakpoints.scss b/scss/site/_settings_breakpoints.scss
new file mode 100644
index 0000000000..fa40c8f7d8
--- /dev/null
+++ b/scss/site/_settings_breakpoints.scss
@@ -0,0 +1 @@
+$breakpoint-medium: 820px;
diff --git a/scss/site/_settings_colors.scss b/scss/site/_settings_colors.scss
new file mode 100644
index 0000000000..141a9285af
--- /dev/null
+++ b/scss/site/_settings_colors.scss
@@ -0,0 +1 @@
+$color-brand: #111;
diff --git a/scss/site/main.scss b/scss/site/main.scss
new file mode 100644
index 0000000000..3ee46c032d
--- /dev/null
+++ b/scss/site/main.scss
@@ -0,0 +1,37 @@
+@charset 'utf-8';
+
+// import settings
+@import 'settings_breakpoints';
+@import 'settings_colors';
+$sticky-footer: true;
+
+// import vanilla
+@import '../build';
+
+@import 'patterns_syntax-highlight';
+@include vfio-p-syntax-highlight;
+
+@import 'patterns_icons';
+@include vfio-p-icons;
+
+@import 'patterns_grid';
+@include vfio-p-grid;
+
+// Local website styles
+.vfio-hero {
+  background-image: url('https://assets.ubuntu.com/v1/775cc62b-vanilla-grad-background.png');
+  background-position: 75% 50%;
+  background-color: #e95420;
+}
+
+.p-list__icon--github {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='24' width='24'%3E%3Cdefs%3E%3Cpath id='a' d='M0 23.831h23.695V0H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23181616' mask='url%28%23b%29' d='M11.847 0C5.304 0 0 5.47 0 12.218c0 5.397 3.394 9.976 8.102 11.592.593.112.81-.265.81-.589 0-.29-.011-1.059-.017-2.078-3.295.738-3.99-1.638-3.99-1.638-.54-1.411-1.316-1.787-1.316-1.787-1.076-.758.081-.742.081-.742 1.19.086 1.815 1.259 1.815 1.259 1.057 1.867 2.773 1.327 3.448 1.015.108-.79.413-1.328.752-1.633-2.63-.309-5.397-1.357-5.397-6.039 0-1.333.462-2.423 1.22-3.278-.122-.309-.529-1.55.116-3.233 0 0 .995-.328 3.258 1.253a10.997 10.997 0 0 1 2.966-.411c1.006.004 2.02.139 2.966.41 2.262-1.58 3.255-1.252 3.255-1.252.647 1.682.24 2.924.118 3.233.759.855 1.218 1.945 1.218 3.278 0 4.694-2.77 5.727-5.41 6.029.426.377.805 1.123.805 2.263 0 1.632-.015 2.95-.015 3.351 0 .327.213.707.815.588 4.704-1.619 8.096-6.195 8.096-11.591C23.696 5.47 18.39 0 11.847 0'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.p-list__icon--twitter {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-9.813-5.596c-1.062.322-2.084 1.754-1.764 3.376-3.524-.213-5.08-2.1-6.017-3.003-.954 1.683.025 3.318.88 3.847-.452.025-.997-.17-1.268-.339-.103 1.552 1.163 2.628 2.24 2.907-.344.102-.668.117-1.223.034.472 1.561 1.74 1.979 2.686 2.047-1.217 1.055-2.678 1.285-4.267 1.208 4.12 2.518 8.28.969 10.305-1.008 1.7-1.659 2.461-4.144 2.487-6.368.389-.315 1.176-.985 1.39-1.51-.311.12-.925.404-1.565.43.528-.346 1.132-1.038 1.196-1.58-.585.318-1.261.594-1.84.681-1.091-1.052-2.154-1.052-3.24-.722z' fill='%231DA1F2' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+.p-list__icon--slack {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124' viewBox='0 0 124 124'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E01E5A' d='M26.4 13.2C26.4 20.3 20.6 26.1 13.5 26.1 6.4 26.1.6 20.3.6 13.2.6 6.1 6.4.3 13.5.3L26.4.3 26.4 13.2zM32.9 13.2C32.9 6.1 38.7.3 45.8.3 52.9.3 58.7 6.1 58.7 13.2L58.7 45.5C58.7 52.6 52.9 58.4 45.8 58.4 38.7 58.4 32.9 52.6 32.9 45.5L32.9 13.2z' transform='translate(0 65)'/%3E%3Cpath fill='%2336C5F0' d='M45.8 26.4C38.7 26.4 32.9 20.6 32.9 13.5 32.9 6.4 38.7.6 45.8.6 52.9.6 58.7 6.4 58.7 13.5L58.7 26.4 45.8 26.4zM45.8 32.9C52.9 32.9 58.7 38.7 58.7 45.8 58.7 52.9 52.9 58.7 45.8 58.7L13.5 58.7C6.4 58.7.6 52.9.6 45.8.6 38.7 6.4 32.9 13.5 32.9L45.8 32.9z'/%3E%3Cpath fill='%232EB67D' d='M32.6 45.8C32.6 38.7 38.4 32.9 45.5 32.9 52.6 32.9 58.4 38.7 58.4 45.8 58.4 52.9 52.6 58.7 45.5 58.7L32.6 58.7 32.6 45.8zM26.1 45.8C26.1 52.9 20.3 58.7 13.2 58.7 6.1 58.7.3 52.9.3 45.8L.3 13.5C.3 6.4 6.1.6 13.2.6 20.3.6 26.1 6.4 26.1 13.5L26.1 45.8z' transform='translate(65)'/%3E%3Cpath fill='%23ECB22E' d='M13.2 32.6C20.3 32.6 26.1 38.4 26.1 45.5 26.1 52.6 20.3 58.4 13.2 58.4 6.1 58.4.3 52.6.3 45.5L.3 32.6 13.2 32.6zM13.2 26.1C6.1 26.1.3 20.3.3 13.2.3 6.1 6.1.3 13.2.3L45.5.3C52.6.3 58.4 6.1 58.4 13.2 58.4 20.3 52.6 26.1 45.5 26.1L13.2 26.1z' transform='translate(65 65)'/%3E%3C/g%3E%3C/svg%3E");
+}
diff --git a/site/_layouts/site.html b/site/_layouts/site.html
index 8dcd8e4b09..9c280afd3d 100644
--- a/site/_layouts/site.html
+++ b/site/_layouts/site.html
@@ -12,7 +12,7 @@
     })(window,document,'script','dataLayer','GTM-K7ZB6FL');</script>
     <!-- End Google Tag Manager -->
     <!-- Stylesheet -->
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="/static/build/css/site/main.css" />
     <!-- Crazy Egg A/B testing -->
     <script type="text/javascript" src="https://script.crazyegg.com/pages/scripts/0011/8875.js" async="async"></script>
     <script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>

From c5c66c079bdf7e23e6cb25ecc1006c57c9c287c3 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 11:02:20 +0000
Subject: [PATCH 11/23] Update error page templates

---
 site/404.html | 17 ++++++++++++-----
 site/500.html | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/site/404.html b/site/404.html
index 53cbfa4ec7..6f142f4a18 100644
--- a/site/404.html
+++ b/site/404.html
@@ -1,11 +1,18 @@
-{% extends "_layouts/default.html" %}
+{% extends "_layouts/site.html" %}
 
 {% block content %}
-<div class="p-strip is-deep">
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">
-    <div class="col-8">
-      <h1>404: Page not found</h1>
-      <p class="p-heading--four">Sorry, we can't find the page you're looking for.<br>If you think this is an error on our site, please <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new">file a bug.</a></p>
+    <div class="col 12">
+      <h1 class="u-no-margin--bottom">404 - Page not found</h1>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col 12">
+      <p>Sorry, we can't find the page you're looking for. If you think this is an error on our site, please <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new">file a bug on GitHub.</a></p>
     </div>
   </div>
 </div>
diff --git a/site/500.html b/site/500.html
index b1716095cc..6fd5bf1bcb 100644
--- a/site/500.html
+++ b/site/500.html
@@ -1,11 +1,18 @@
-{% extends "_layouts/default.html" %}
+{% extends "_layouts/site.html" %}
 
 {% block content %}
-<div class="p-strip is-deep">
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">
-    <div class="col-8">
-      <h1>500: Server error</h1>
-      <p class="p-heading--four">Something went wrong.<br>Please <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new">file a bug.</a></p>
+    <div class="col 12">
+      <h1 class="u-no-margin--bottom">500 - Internal server error</h1>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col 12">
+      <p>Something went wrong on our end. If you have the time, please help us out by <a class="p-link--external" href="https://github.com/canonical-websites/vanillaframework.io/issues/new">filing a bug.</a></p>
     </div>
   </div>
 </div>

From 92bc16ca3a777d76d2eb27f216e6cd80c091d716 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 11:07:27 +0000
Subject: [PATCH 12/23] Add site pages

---
 site/accessibility.html   | 105 ++++++++++++++++++++++++++++++++
 site/browser-support.html |  52 ++++++++++++++++
 site/contribute.html      | 124 ++++++++++++++++++++++++++++++++++++++
 site/showcase.html        | 110 +++++++++++++++++++++++++++++++++
 4 files changed, 391 insertions(+)
 create mode 100644 site/accessibility.html
 create mode 100644 site/browser-support.html
 create mode 100644 site/contribute.html
 create mode 100644 site/showcase.html

diff --git a/site/accessibility.html b/site/accessibility.html
new file mode 100644
index 0000000000..076727caaf
--- /dev/null
+++ b/site/accessibility.html
@@ -0,0 +1,105 @@
+{# ---
+layout: default
+desc: Vanilla Framework accessibility guidelines
+sitemap:
+    priority: 1.0
+    changefreq: 'monthly'
+    lastmod: 2017-06-30T17:20:30+00:00
+copydoc: https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit
+--- #}
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <h1 class="u-no-margin--bottom">Accessibility guidelines</h1>
+  </div>
+</div>
+<div class="p-strip is-bordered">
+  <div class="row">
+    <div class="col-8">
+      <h2 class="p-heading--3">Vanilla aims to be as inclusive as possible.</h2>
+      <p>While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.</p>
+      <p>Accessibility should permeate the entire design and development process, rather than being something that you only think about after everything else has been defined and implemented. You should focus on accessibility when you are:</p>
+      <ul>
+        <li>Writing your content (whether that’s words, images, videos or any other media format)</li>
+        <li>Designing and building your components</li>
+      </ul>
+      <p>While the accessibility of some of the existing Vanilla design patterns is still being improved, all new and updated patterns should meet <a href="https://www.w3.org/TR/WCAG20/" class="p-link--external">WCAG 2.0</a>level AA.</p>
+    </div>
+  </div>
+</div>
+<div class="p-strip is-bordered">
+  <div class="row">
+    <div class="col-8">
+      <h2 class="p-heading--3">Accessibility testing</h2>
+      <p>Ideally, prototypes should be tested with real users with real accessibility issues, but that is not always possible.</p>
+      <p>If you are not able to test design patterns with real users, have a look at Anne Gibson’s "<a href="https://the-pastry-box-project.net/anne-gibson/2014-july-31" class="p-link--external">Accessibility Alphabet</a>" to consider a few real-world scenarios that might hamper a user’s accessibility. Can you improve these users’ access to content and features?</p>
+      <p>Use the following checklist to make sure your design patterns are designed and built to be accessible*:</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <ul class="p-list is-split">
+        <li class="p-list__item is-ticked">Make sure there is enough contrast between text and its background color</li>
+        <li class="p-list__item is-ticked">Don't indicate important information using colour alone</li>
+        <li class="p-list__item is-ticked">Design focus states to help users navigate and understand where they are</li>
+        <li class="p-list__item is-ticked">Help users understand inputs, and help them avoid and correct mistakes</li>
+        <li class="p-list__item is-ticked">Write good alt text for your images</li>
+        <li class="p-list__item is-ticked">If an experience cannot be made accessible, create another route for users to get that information</li>
+        <li class="p-list__item is-ticked">Be as consistent and clear as possible in layout and copy</li>
+        <li class="p-list__item is-ticked">Use the correct HTML element for your content</li>
+        <li class="p-list__item is-ticked">Use the correct lang attribute on the html element</li>
+        <li class="p-list__item is-ticked">Support keyboard navigation</li>
+        <li class="p-list__item is-ticked">Understand and use HTML landmarks</li>
+        <li class="p-list__item is-ticked">Use ARIA attributes when applicable</li>
+        <li class="p-list__item is-ticked">Give users a way to skip top level navigation to access main content</li>
+        <li class="p-list__item is-ticked">Make links descriptive</li>
+        <li class="p-list__item is-ticked">Avoid images and iconography in pseudo-elements</li>
+        <li class="p-list__item is-ticked">Make SVGs accessible to assistive technology</li>
+        <li class="p-list__item is-ticked">Hide decorative elements from screen readers</li>
+        <li class="p-list__item is-ticked">Links should be visually identifiable and have clear :focus and :active states</li>
+        <li class="p-list__item is-ticked">HTML document should have a language attribute</li>
+        <li class="p-list__item is-ticked">Users should be able to navigate content using a screen reader</li>
+        <li class="p-list__item is-ticked">The general architecture and hierarchy of the content should make sense</li>
+        <li class="p-list__item is-ticked">Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images</li>
+      </ul>
+      <small>*Adapted from <a class="p-link--external" href="http://accessibility.voxmedia.com">Accessibility Guidelines</a> checklist and <a class="p-link--external" href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a></small>
+    </div>
+  </div>
+</div>
+<div class="p-strip is-bordered">
+  <div class="row">
+    <div class="col-8">
+      <h3>Key WCAG documents</h3>
+      <p>The amount of different documents that revolve around the WCAG 2.0 guidelines can be disorienting. These are the official W3C documents, in order of relevance, that we think you should refer to when learning about and implementing accessibility:</p>
+    </div>
+  </div>
+  <div class="row">
+    <ul class="p-list is-split">
+      <li class="p-list__item"><a class="p-link--external" href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
+      <li class="p-list__item"><a class="p-link--external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
+      <li class="p-list__item"><a class="p-link--external" href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a>: a customisable quick reference, includes guidelines, success criteria and techniques</li>
+      <li class="p-list__item"><a class="p-link--external" href="https://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</a>: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures</li>
+    </ul>
+  </div>
+</div>
+<div class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <h3>Useful tools</h3>
+      <p>The web is abundant in tools that help to create and test for accessible sites. These are a few of the ones we consider the best and most useful ones:</p>
+    </div>
+  </div>
+  <div class="row">
+    <ul class="p-list--divided is-split">
+      <li class="p-list__item"><a class="p-link--external" href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb/related?hl=en">Chrome Accessibility Developer Tools</a></li>
+      <li class="p-list__item"><a class="p-link--external" href="https://contrast-ratio.com/">Contrast Ratio tool</a></li>
+      <li class="p-list__item"><a class="p-link--external" href="http://colororacle.org/">Color Oracle</a></li>
+      <li class="p-list__item"><a class="p-link--external" href="http://www.chromevox.com/">ChromeVox: a screen reader for Chrome</a></li>
+      <li class="p-list__item"><a class="p-link--external" href="https://tenon.io/index.php">Tenon.io: analyse your site’s accessibility</a></li>
+    </ul>
+    <p>If you think we could improve Vanilla’s accessibility in any way, let us know by <a href="https://github.com/canonical-web-and-design/vanilla-framework/issues" class="p-link--external">filing&nbsp;an&nbsp;issue</a> on GitHub.</p>
+  </div>
+</div>
+{% endblock %}
diff --git a/site/browser-support.html b/site/browser-support.html
new file mode 100644
index 0000000000..014f2ec89a
--- /dev/null
+++ b/site/browser-support.html
@@ -0,0 +1,52 @@
+{# ---
+layout: default
+desc: Vanilla Framework browser support
+sitemap:
+    priority: 1.0
+    changefreq: 'monthly'
+    lastmod: 2018-08-01T17:20:30+00:00
+copydoc: https://docs.google.com/document/d/1flcSinNnjOJw88ooVQfUjQW8ZDHSXOe2cTHmgwIEx6I/edit
+--- #}
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <h1 class="u-no-margin--bottom">Browser support</h1>
+  </div>
+</div>
+<div class="p-strip u-no-padding--bottom">
+  <div class="row">
+    <div class="col-8">
+      <p class="p-heading--4">Vanilla framework follows the principles of progressive enhancement and web standards. Users should be able to access core content and functionality from any browser or operating system, with varying degrees of access to visual and other enhancements — design components do not have to look exactly the same on every browser.</p>
+    </div>
+  </div>
+</div>
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col-8">
+      <h2>Bugs and prioritisation</h2>
+      <ul class="p-list">
+        <li class="p-list__item is-ticked">If the bug prevents access to core content (for example, by hiding it or covering it), it should be prioritised</li>
+        <li class="p-list__item is-ticked">If the bug relates to visual differences that do not affect access to content on modern browsers, it should be queued up</li>
+        <li class="p-list__item is-ticked">Priority level should be determined case by case</li>
+        <li class="p-list__item is-ticked">If the bug relates to visual differences that do not affect access to content on old browsers, it should be deprioritised</li>
+      </ul>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-8">
+      <h2>Supported browsers</h2>
+      <p>The following are the browsers that we actively test all components on. That does not mean other browsers are not supported or that bugs reported are not acted on.</p>
+      <ul class="p-list--divided is-split">
+        <li class="p-list__item"><span class="p-icon--chrome"></span>Chrome 62 or greater</li>
+        <li class="p-list__item"><span class="p-icon--firefox"></span>Firefox 56 or greater</li>
+        <li class="p-list__item"><span class="p-icon--safari"></span>Safari 11 or greater</li>
+        <li class="p-list__item"><span class="p-icon--ie"></span>IE 11 or greater</li>
+        <li class="p-list__item"><span class="p-icon--edge"></span>Edge 16 or greater</li>
+        <li class="p-list__item"><span class="p-icon--opera"></span>Opera 48 or greater</li>
+      </ul>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/site/contribute.html b/site/contribute.html
new file mode 100644
index 0000000000..f4e86096ef
--- /dev/null
+++ b/site/contribute.html
@@ -0,0 +1,124 @@
+{# ---
+layout: default
+desc: Vanilla Framework contribution guidelines
+sitemap:
+    priority: 1.0
+    changefreq: 'monthly'
+    lastmod: 2017-07-03T17:20:30+00:00
+copydoc: https://docs.google.com/document/d/1FIYkjR9Xu6Or0WUCi6EQGaZsiTq8ESk8Kv39CW4kkwo/edit
+--- #}
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <h1 class="u-no-margin--bottom">Contribute</h1>
+  </div>
+</div>
+<div class="p-strip is-bordered">
+  <div class="row">
+    <h2>Meet the team</h2>
+  </div>
+  <div class="row">
+    <div class="col-3">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/b943a4e7-ant.jpeg" alt="">
+          <h4 class="p-heading-icon__title"><a href="https://github.com/anthonydillon">anthonydillon</a></h4>
+        </div>
+        <p>Lead Web Developer</p>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/fced2b0d-kwm14-avater.jpeg" alt="">
+          <h4 class="p-heading-icon__title"><a href="https://github.com/kwm14">kwm14</a></h4>
+        </div>
+        <p>Lead Visual Designer</p>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/9d912294-deadlight.jpeg" alt="">
+          <h4 class="p-heading-icon__title"><a href="https://github.com/deadlight">deadlight</a></h4>
+        </div>
+        <p>Web Developer</p>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="p-heading-icon--small">
+        <div class="p-heading-icon__header">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/59a13d9e-lyubomir-popov-avater.jpeg" alt="">
+          <h4 class="p-heading-icon__title"><a href="https://github.com/lyubomir-popov">lyubomir-popov</a></h4>
+        </div>
+        <p>Senior Visual Designer</p>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="p-strip is-bordered">
+  <div class="row">
+    <h2>Contribute</h2>
+  </div>
+  <div class="row">
+    <div class="col-6">
+      <p>When <a href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new/choose" class="p-link--external">submitting a new issue</a>, please check that it hasn't already been raised by someone else. We've provided a template for new issues which will help you structure your issue to ensure it can be picked up and actioned easily.</p>
+      <p>Please provide as much information possible detailing what you're currently experiencing and what you'd expect to experience.</p>
+      <p>To work on an issue, please fork this repo and create a new branch on your local fork. When you're happy and would like to propose that changeset to be merged back upstream, open a pull request to merge from your local origin/master to upstream/master.</p>
+      <p>When committing changes, make sure to group related changes so that the project is always in a working state. Use succinct yet descriptive commit messages to allow for easy reading of the commit log.</p>
+    </div>
+    <div class="col-6">
+      <div class="row">
+        <div class="col-6 p-card">
+          <h3>Guidelines</h3>
+          <p>We follow two guideline documents that align with the practices that the Canonical Web Team follows across all projects.
+            <ul class="p-inline-list--middot" style="margin-bottom: 0px;">
+              <li class="p-inline-list__item"> <a href="https://canonical-web-and-design.github.io/practices/coding/html.html" class="p-link--external">HTML code standards</a> </li>
+              <li class="p-inline-list__item"> <a href="https://canonical-web-and-design.github.io/practices/coding/stylesheets.html" class="p-link--external">Stylesheets code standards</a> </li>
+            </ul>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3 p-card">
+          <h3>File a bug</h3>
+          <p>We use <a href="https://github.com/canonical-web-and-design/vanilla-framework/issues" class="p-link--external">GitHub issues</a> to track all our bugs and feature requests.</p>
+        </div>
+        <div class="col-3 p-card">
+          <h3>Chat with us</h3>
+          <p>Find out about new releases, latest features and get help on <a href="https://twitter.com/vanillaframewrk" class="p-link--external">Twitter</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="p-strip">
+  <div class="row">
+    <div class="col-6">
+      <div class="p-heading-icon">
+        <div class="p-heading-icon__header is-stacked">
+          <svg width="60" height="60" class="p-heading-icon__img" viewBox="0 0 12 16" version="1.1" aria-hidden="true">
+            <title>GitHub pull requist icon</title>
+            <path fill-rule="evenodd"
+              d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
+            </path>
+          </svg>
+          <h3 class="p-heading-icon__title">Running tests locally</h3>
+        </div>
+      </div>
+      <p>The simplest way to run Vanilla framework is to first <a href="https://docs.docker.com/install/" class="p-link--external">install Docker</a>, and then use the <code>./run</code> script to <a
+          href="https://github.com/canonical-web-and-design/vanilla-framework#vanilla-local-development" class="p-link--external">build the site</a>. Before proposing a pull request, ensure that the tests pass on your local fork. To kick off the tests for your project, in the terminal <code>./run test</code>.</p>
+    </div>
+    <div class="col-6">
+      <div class="p-heading-icon">
+        <div class="p-heading-icon__header is-stacked">
+          <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/60d9b81e-picto-canonical.svg" alt="">
+          <h3 class="p-heading-icon__title">Licences</h3>
+        </div>
+      </div>
+      <p>The content of this project is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="p-link--external">Creative Commons Attribution-ShareAlike 4.0 International license</a>, and the underlying code used to format and display that content is licensed under the <a href="https://opensource.org/licenses/lgpl-3.0.html" class="p-link--external">LGPLv3</a> by <a href="https://canonical.com" class="p-link--external">Canonical Ltd</a>.</p>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/site/showcase.html b/site/showcase.html
new file mode 100644
index 0000000000..2e9c90a076
--- /dev/null
+++ b/site/showcase.html
@@ -0,0 +1,110 @@
+{# ---
+layout: default
+desc: A showcase of websites and applications using Vanilla Framework
+sitemap:
+    priority: 1.0
+    changefreq: 'monthly'
+    lastmod: 2018-11-20T10:27:30+00:00
+copydoc: https://docs.google.com/document/d/1daLrp_H_BGhSefvrP-aj3v3505dEz-zoKF2Mar2Dpt4/edit
+--- #}
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<section id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <h1 class="u-no-margin--bottom">Showcase</h1>
+  </div>
+</section>
+
+<section class="p-strip u-no-padding--bottom">
+  <div class="row">
+    <p class="p-heading--4">Real life example websites, documentation websites and Cloud applications using Vanilla as the base CSS framework for their projects.</p>
+  </div>
+</section>
+
+<section class="p-strip is-shallow">
+  <div class="row">
+    <h2>Projects using Vanilla</h2>
+  </div>
+  <div class="row u-equal-height">
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/25df3b87-ubuntu-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="http://ubuntu.com">Ubuntu</a></h3>
+      <p>Ubuntu is an open source software operating system.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/e8ea14f4-maas-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="http://maas.io">MAAS</a></h3>
+      <p>MAAS (Metal as a Service) offers cloud style provisioning for physical servers.</p>
+    </div>
+    <div class="col-4 p-card" style="background-color: #f7f7f7;">
+      <h3 class="p-heading--4">Use Vanilla in your projects</h3>
+      <p>View our documentation to find out different ways of adding Vanilla framework into your projects.</p>
+      <a href="https://docs.vanillaframework.io" class="p-button--positive">Get started with Vanilla</a>
+    </div>
+  </div>
+  <div class="row u-equal-height">
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/9ac08e7e-juju-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="http://jujucharms.com">Juju</a></h3>
+      <p>Juju is an open source, application and service modelling tool.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/c1702401-snapcraft-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="http://snapcraft.io">Snapcraft</a></h3>
+      <p>Snaps are containerised software packages that are simple to create and install.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/c1ba7c75-lxd-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://linuxcontainers.org">LXD</a></h3>
+      <p>LXD is a next generation system container manager.</p>
+    </div>
+  </div>
+  <div class="row u-equal-height">
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/ffd04f88-conjure-up-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://conjure-up.io">Conjure-up</a></h3>
+      <p>Conjure-up lets you summon up a big-software stack as a “spell”.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/9eaa474a-cloud-init-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://cloud-init.io">Cloud-init</a></h3>
+      <p>Cloud-init is a package that contains utilities for early initialization of cloud instances.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/f3d58f55-canonical-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://canonical.com">Canonical</a></h3>
+      <p>Canonical produces Ubuntu.</p>
+    </div>
+  </div>
+  <div class="row u-equal-height">
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/3c5f3958-st-margarets-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://stmargarets.london">St Margarets Community</a></h3>
+      <p>Providing residents and visitors information about local news, events and resources.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/34327108-brian-douglass-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://bhdouglass.com">Brian Douglass</a></h3>
+      <p>Personal project folio of Software Engineer Brian Douglass.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/bb8f1550-psm-limited-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="http://psmlimited.com">PSM Limited</a></h3>
+      <p>For all your seamless flat roofing, balconies and car park waterproofing.</p>
+    </div>
+  </div>
+  <div class="row u-equal-height">
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/54dfa1cc-alice-os-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://aliceos.app">AliceOS</a></h3>
+      <p>AliceOS brings new features and experiences to any Ren'Py project.</p>
+    </div>
+    <div class="col-4 p-card">
+      <img src="https://assets.ubuntu.com/v1/4090d18f-development-winslow-vf.io-showcase.png" alt="">
+      <h3 class="p-heading--4"><a href="https://development.robinwinslow.uk">Notes on development</a></h3>
+      <p>Articles and musings about web development, performance, internet security and general tech geekery.</p>
+    </div>
+  </div>
+</section>
+{% endblock %}

From d9c99420b5cdcfc46743514743996464423f0eee Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 11:13:28 +0000
Subject: [PATCH 13/23] Fix docs links

---
 site/_layouts/site.html               | 4 ++--
 site/docs/patterns/contextual-menu.md | 2 +-
 site/docs/patterns/pull-quote.md      | 2 +-
 site/index.html                       | 2 +-
 site/showcase.html                    | 2 +-
 site/static/js/scripts.js             | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/_layouts/site.html b/site/_layouts/site.html
index 9c280afd3d..7b9f99ff47 100644
--- a/site/_layouts/site.html
+++ b/site/_layouts/site.html
@@ -79,8 +79,8 @@
             <a href="#main-content">Jump to main content</a>
           </span>
           <ul class="p-navigation__links">
-            <li class="p-navigation__link"><a href="https://docs.vanillaframework.io">Docs</a></li>
-            <li class="p-navigation__link"><a href="https://docs.vanillaframework.io/examples">Examples</a></li>
+            <li class="p-navigation__link"><a href="/docs">Docs</a></li>
+            <li class="p-navigation__link"><a href="/docs/examples">Examples</a></li>
             <li class="p-navigation__link{% if path == '/accessibility' %} is-selected{% endif %}"><a href="/accessibility">Accessibility</a></li>
             <li class="p-navigation__link{% if path == '/browser-support' %} is-selected{% endif %}"><a href="/browser-support">Browser support</a></li>
             <li class="p-navigation__link{% if path == '/contribute' %} is-selected{% endif %}"><a href="/contribute">Contribute</a></li>
diff --git a/site/docs/patterns/contextual-menu.md b/site/docs/patterns/contextual-menu.md
index ff3022b77a..94a14030f7 100644
--- a/site/docs/patterns/contextual-menu.md
+++ b/site/docs/patterns/contextual-menu.md
@@ -89,4 +89,4 @@ For more information [view the contextual menu design spec](https://github.com/u
 
 ### Related
 
-For more interactive elements that hide/show content[view the tooltips component](https://docs.vanillaframework.io/docs/patterns/tooltips).
+For more interactive elements that hide/show content[view the tooltips component](/docs/patterns/tooltips).
diff --git a/site/docs/patterns/pull-quote.md b/site/docs/patterns/pull-quote.md
index ee1f7fd91c..197bd442cd 100644
--- a/site/docs/patterns/pull-quote.md
+++ b/site/docs/patterns/pull-quote.md
@@ -56,4 +56,4 @@ For more information [view the quotes design spec](https://github.com/ubuntudesi
 
 ### Related
 
-For more typographic related information view the [blockquotes and citations](https://docs.vanillaframework.io/docs/base/typography#blockquotes-and-citations) in base typography.
+For more typographic related information view the [blockquotes and citations](/docs/base/typography#blockquotes-and-citations) in base typography.
diff --git a/site/index.html b/site/index.html
index c4f9fec372..b993c7c1e4 100644
--- a/site/index.html
+++ b/site/index.html
@@ -19,7 +19,7 @@ <h1>A simple extensible CSS framework</h1>
     <p>Backed by open-source code and written in Sass by the Canonical Web Team.</p>
     <ul class="p-inline-list u-no-margin--bottom">
       <li class="p-inline-list__item">
-        <a href="https://docs.vanillaframework.io" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Docs link', 'eventLabel' : 'See the docs', 'eventValue' : undefined });" class="p-button--positive u-no-margin--bottom">Get started</a>
+        <a href="/docs" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Docs link', 'eventLabel' : 'See the docs', 'eventValue' : undefined });" class="p-button--positive u-no-margin--bottom">Get started</a>
       </li>
       <li class="p-inline-list__item">
         <a href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download latest', 'eventValue' : undefined });" class="p-button--neutral p-link--external u-no-margin--bottom">Download Vanilla</a>
diff --git a/site/showcase.html b/site/showcase.html
index 2e9c90a076..7eb82dc53f 100644
--- a/site/showcase.html
+++ b/site/showcase.html
@@ -40,7 +40,7 @@ <h3 class="p-heading--4"><a href="http://maas.io">MAAS</a></h3>
     <div class="col-4 p-card" style="background-color: #f7f7f7;">
       <h3 class="p-heading--4">Use Vanilla in your projects</h3>
       <p>View our documentation to find out different ways of adding Vanilla framework into your projects.</p>
-      <a href="https://docs.vanillaframework.io" class="p-button--positive">Get started with Vanilla</a>
+      <a href="/docs" class="p-button--positive">Get started with Vanilla</a>
     </div>
   </div>
   <div class="row u-equal-height">
diff --git a/site/static/js/scripts.js b/site/static/js/scripts.js
index 8e1394d505..c0e537c053 100644
--- a/site/static/js/scripts.js
+++ b/site/static/js/scripts.js
@@ -19,7 +19,7 @@ links.forEach(function(link) {
   var parentClass = link.parentNode.classList;
   var ignoreNav = !(parentClass.contains('p-navigation__logo') || parentClass.contains('p-navigation__link'));
 
-  var isInternal = link.href.indexOf('https://docs.vanillaframework.io') === 0 || link.href.indexOf('https://vanillaframework.io') === 0;
+  var isInternal = link.href.indexOf('https://vanillaframework.io') === 0;
 
   if (!isInternal && link.hostname && link.hostname != location.hostname && ignoreNav) {
     link.className += ' p-link--external';

From c5fb74337e89db2711225d4a39218ceee6e6049c Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 14:36:33 +0000
Subject: [PATCH 14/23] Fix scss linting

---
 scss/site/main.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/scss/site/main.scss b/scss/site/main.scss
index 3ee46c032d..b297497f9c 100644
--- a/scss/site/main.scss
+++ b/scss/site/main.scss
@@ -17,11 +17,13 @@ $sticky-footer: true;
 @import 'patterns_grid';
 @include vfio-p-grid;
 
+$color-hero: #e95420;
+
 // Local website styles
 .vfio-hero {
-  background-image: url('https://assets.ubuntu.com/v1/775cc62b-vanilla-grad-background.png');
+  background-color: $color-hero;
+  background-image: url('#{$assets-path}775cc62b-vanilla-grad-background.png');
   background-position: 75% 50%;
-  background-color: #e95420;
 }
 
 .p-list__icon--github {

From 8e9ad91fcccacdd815ce70ee706634ae67bb0f77 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 3 Mar 2020 16:03:43 +0100
Subject: [PATCH 15/23] Move Jekyll metadata to Flask template blocks

---
 site/_layouts/site.html   |  7 +++++--
 site/accessibility.html   | 13 ++++---------
 site/browser-support.html | 14 +++++---------
 site/contribute.html      | 13 ++++---------
 site/index.html           | 13 +++----------
 site/showcase.html        | 13 ++++---------
 6 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/site/_layouts/site.html b/site/_layouts/site.html
index 7b9f99ff47..1b14222cee 100644
--- a/site/_layouts/site.html
+++ b/site/_layouts/site.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Vanilla Framework</title>
+    <title>{% block title %}{{ title }}{% endblock %}{% if self.title() %} | {% endif %}Vanilla framework</title>
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -21,8 +21,9 @@
     </script>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     {% if self.description() %}
-    <meta name="description" content="{% block description %}{% endblock %}">    
+      <meta name="description" content="{% block description %}{% endblock %}">
     {% endif %}
+
     <link rel="icon" href="https://assets.ubuntu.com/v1/bbba0152-vanilla_favicon_16px.png" type="image/x-icon" />
     <!-- PWA -->
     <link rel="manifest" href="manifest.json">
@@ -39,9 +40,11 @@
     <meta name="apple-mobile-web-app-title" content="Vanilla Framework">
     <!-- Tile for Win8 -->
     <meta name="msapplication-TileColor" content="#E7542D">
+
     {% if self.copydoc() %}
       <meta name="copydoc" content="{% block copydoc %}{% endblock %}" />
     {% endif %}
+
     <!-- Register service worker for offline -->
     <script type="text/javascript">
       if ('serviceWorker' in navigator) {
diff --git a/site/accessibility.html b/site/accessibility.html
index 076727caaf..11d60d67f0 100644
--- a/site/accessibility.html
+++ b/site/accessibility.html
@@ -1,14 +1,9 @@
-{# ---
-layout: default
-desc: Vanilla Framework accessibility guidelines
-sitemap:
-    priority: 1.0
-    changefreq: 'monthly'
-    lastmod: 2017-06-30T17:20:30+00:00
-copydoc: https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit
---- #}
 {% extends "_layouts/site.html" %}
 
+{% block title %}Accessibility guidelines{% endblock %}
+{% block description %}Vanilla Framework accessibility guidelines{% endblock %}
+{% block copydoc %}https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit{% endblock %}
+
 {% block content %}
 <div id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">
diff --git a/site/browser-support.html b/site/browser-support.html
index 014f2ec89a..091b2139ab 100644
--- a/site/browser-support.html
+++ b/site/browser-support.html
@@ -1,14 +1,10 @@
-{# ---
-layout: default
-desc: Vanilla Framework browser support
-sitemap:
-    priority: 1.0
-    changefreq: 'monthly'
-    lastmod: 2018-08-01T17:20:30+00:00
-copydoc: https://docs.google.com/document/d/1flcSinNnjOJw88ooVQfUjQW8ZDHSXOe2cTHmgwIEx6I/edit
---- #}
 {% extends "_layouts/site.html" %}
 
+{% block title %}Browser support{% endblock %}
+{% block description %}Vanilla Framework browser support{% endblock %}
+{% block copydoc %}https://docs.google.com/document/d/1flcSinNnjOJw88ooVQfUjQW8ZDHSXOe2cTHmgwIEx6I/edit{% endblock %}
+
+
 {% block content %}
 <div id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">
diff --git a/site/contribute.html b/site/contribute.html
index f4e86096ef..44d3e1b236 100644
--- a/site/contribute.html
+++ b/site/contribute.html
@@ -1,14 +1,9 @@
-{# ---
-layout: default
-desc: Vanilla Framework contribution guidelines
-sitemap:
-    priority: 1.0
-    changefreq: 'monthly'
-    lastmod: 2017-07-03T17:20:30+00:00
-copydoc: https://docs.google.com/document/d/1FIYkjR9Xu6Or0WUCi6EQGaZsiTq8ESk8Kv39CW4kkwo/edit
---- #}
 {% extends "_layouts/site.html" %}
 
+{% block title %}Contribute{% endblock %}
+{% block description %}Vanilla Framework contribution guidelines{% endblock %}
+{% block copydoc %}https://docs.google.com/document/d/1FIYkjR9Xu6Or0WUCi6EQGaZsiTq8ESk8Kv39CW4kkwo/edit{% endblock %}
+
 {% block content %}
 <div id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">
diff --git a/site/index.html b/site/index.html
index b993c7c1e4..8ccce236d4 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,15 +1,8 @@
-{# ---
-layout: default
-desc: Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.
-sitemap:
-    priority: 1.0
-    changefreq: 'monthly'
-    lastmod: 2017-01-13T17:20:30+00:00
-copydoc: https://docs.google.com/document/d/1WQ3u4Eg9Vqp_yFBdIYUyGXkvhMxlPBMSr7g7O3rLzpg/edit
---- #}
-
 {% extends "_layouts/site.html" %}
 
+{% block description %}Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.{% endblock %}
+{% block copydoc %}https://docs.google.com/document/d/1WQ3u4Eg9Vqp_yFBdIYUyGXkvhMxlPBMSr7g7O3rLzpg/edit{% endblock %}
+
 {% block content %}
 <script defer src="https://buttons.github.io/buttons.js"></script>
 
diff --git a/site/showcase.html b/site/showcase.html
index 7eb82dc53f..6d476150f4 100644
--- a/site/showcase.html
+++ b/site/showcase.html
@@ -1,14 +1,9 @@
-{# ---
-layout: default
-desc: A showcase of websites and applications using Vanilla Framework
-sitemap:
-    priority: 1.0
-    changefreq: 'monthly'
-    lastmod: 2018-11-20T10:27:30+00:00
-copydoc: https://docs.google.com/document/d/1daLrp_H_BGhSefvrP-aj3v3505dEz-zoKF2Mar2Dpt4/edit
---- #}
 {% extends "_layouts/site.html" %}
 
+{% block title %}Showcase{% endblock %}
+{% block description %}A showcase of websites and applications using Vanilla Framework{% endblock %}
+{% block copydoc %}https://docs.google.com/document/d/1daLrp_H_BGhSefvrP-aj3v3505dEz-zoKF2Mar2Dpt4/edit{% endblock %}
+
 {% block content %}
 <section id="main-content" class="p-strip--image is-dark vfio-hero">
   <div class="row">

From ab16259e867093a682f34af039a54ddf6543c935 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 4 Mar 2020 09:11:38 +0100
Subject: [PATCH 16/23] Fix links in docs main nav

---
 site/_layouts/default.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 753ed40516..68ea366e2d 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -27,7 +27,7 @@
       <div class="p-navigation__row--full-width">
         <div class="p-navigation__banner">
           <div class="p-navigation__logo">
-            <a class="p-navigation__item" href="https://vanillaframework.io">
+            <a class="p-navigation__item" href="/">
               <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/d96d86b5-vanilla_black-orange_hex.svg" alt="Vanilla framework logo">
             </a>
           </div>
@@ -44,9 +44,9 @@
           <ul class="p-navigation__items">
             <li class="p-navigation__item {% if path.startswith('/docs') %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
             <li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
-            <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/accessibility">Accessibility</a></li>
-            <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/browser-support">Browser support</a></li>
-            <li class="p-navigation__item"><a class="p-navigation__link" href="https://vanillaframework.io/contribute">Contribute</a></li>
+            <li class="p-navigation__item"><a class="p-navigation__link" href="/accessibility">Accessibility</a></li>
+            <li class="p-navigation__item"><a class="p-navigation__link" href="/browser-support">Browser support</a></li>
+            <li class="p-navigation__item"><a class="p-navigation__link" href="/contribute">Contribute</a></li>
           </ul>
           <form class="p-search-box" action="/search">
             <input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation" required />

From 301efbc90f65fbf27c76fcca7785e0ad88216d82 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Tue, 3 Mar 2020 13:17:34 +0000
Subject: [PATCH 17/23] Fix JavaScript links

---
 site/docs/examples/patterns/contextual-menu/dark.html           | 2 +-
 site/docs/examples/patterns/contextual-menu/default.html        | 2 +-
 site/docs/examples/patterns/contextual-menu/with-indicator.html | 2 +-
 site/docs/examples/patterns/navigation/deprecated-dark.html     | 2 +-
 site/docs/examples/patterns/navigation/deprecated.html          | 2 +-
 site/docs/examples/patterns/navigation/subnav-dark.html         | 2 +-
 site/docs/examples/patterns/navigation/subnav.html              | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/docs/examples/patterns/contextual-menu/dark.html b/site/docs/examples/patterns/contextual-menu/dark.html
index 7584f2627b..7f33aa01b2 100644
--- a/site/docs/examples/patterns/contextual-menu/dark.html
+++ b/site/docs/examples/patterns/contextual-menu/dark.html
@@ -65,6 +65,6 @@
 </span> vel eu.</p>
 
 <script>
-  {% include 'examples/patterns/contextual-menu/_script.js' %}
+  {% include 'docs/examples/patterns/contextual-menu/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/contextual-menu/default.html b/site/docs/examples/patterns/contextual-menu/default.html
index 09d8dd5200..19a1038870 100644
--- a/site/docs/examples/patterns/contextual-menu/default.html
+++ b/site/docs/examples/patterns/contextual-menu/default.html
@@ -65,6 +65,6 @@
 </span> vel eu.</p>
 
 <script>
-  {% include 'examples/patterns/contextual-menu/_script.js' %}
+  {% include 'docs/examples/patterns/contextual-menu/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/contextual-menu/with-indicator.html b/site/docs/examples/patterns/contextual-menu/with-indicator.html
index 6e750dea39..0c87f81361 100644
--- a/site/docs/examples/patterns/contextual-menu/with-indicator.html
+++ b/site/docs/examples/patterns/contextual-menu/with-indicator.html
@@ -21,6 +21,6 @@
 </span>
 
 <script>
-  {% include 'examples/patterns/contextual-menu/_script.js' %}
+  {% include 'docs/examples/patterns/contextual-menu/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/navigation/deprecated-dark.html b/site/docs/examples/patterns/navigation/deprecated-dark.html
index 4d0af70bea..f5b080baad 100644
--- a/site/docs/examples/patterns/navigation/deprecated-dark.html
+++ b/site/docs/examples/patterns/navigation/deprecated-dark.html
@@ -50,6 +50,6 @@
 </header>
 
 <script>
-  {% include 'examples/patterns/navigation/_script.js' %}
+  {% include 'docs/examples/patterns/navigation/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/navigation/deprecated.html b/site/docs/examples/patterns/navigation/deprecated.html
index 33d758b38c..20a1826a18 100644
--- a/site/docs/examples/patterns/navigation/deprecated.html
+++ b/site/docs/examples/patterns/navigation/deprecated.html
@@ -50,6 +50,6 @@
 </header>
 
 <script>
-  {% include 'examples/patterns/navigation/_script.js' %}
+  {% include 'docs/examples/patterns/navigation/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/navigation/subnav-dark.html b/site/docs/examples/patterns/navigation/subnav-dark.html
index 48dd2da389..fe3ee57c6d 100644
--- a/site/docs/examples/patterns/navigation/subnav-dark.html
+++ b/site/docs/examples/patterns/navigation/subnav-dark.html
@@ -86,6 +86,6 @@
 </header>
 
 <script>
-  {% include 'examples/patterns/navigation/_script.js' %}
+  {% include 'docs/examples/patterns/navigation/_script.js' %}
 </script>
 {% endblock %}
diff --git a/site/docs/examples/patterns/navigation/subnav.html b/site/docs/examples/patterns/navigation/subnav.html
index e939e24493..5a29611cad 100644
--- a/site/docs/examples/patterns/navigation/subnav.html
+++ b/site/docs/examples/patterns/navigation/subnav.html
@@ -86,6 +86,6 @@
 </header>
 
 <script>
-  {% include 'examples/patterns/navigation/_script.js' %}
+  {% include 'docs/examples/patterns/navigation/_script.js' %}
 </script>
 {% endblock %}

From ee5e6c3f76b3cb0daaa83605f8ef7ead140e7a40 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Wed, 4 Mar 2020 08:13:04 +0000
Subject: [PATCH 18/23] Remove references to manifest.json

---
 site/_layouts/site.html | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/site/_layouts/site.html b/site/_layouts/site.html
index 1b14222cee..003df0956b 100644
--- a/site/_layouts/site.html
+++ b/site/_layouts/site.html
@@ -26,7 +26,6 @@
 
     <link rel="icon" href="https://assets.ubuntu.com/v1/bbba0152-vanilla_favicon_16px.png" type="image/x-icon" />
     <!-- PWA -->
-    <link rel="manifest" href="manifest.json">
     <meta name="msapplication-navbutton-color" content="#E7542D">
     <meta name="msapplication-starturl" content="/">
     <!-- Chrome for Android theme color -->
@@ -44,18 +43,6 @@
     {% if self.copydoc() %}
       <meta name="copydoc" content="{% block copydoc %}{% endblock %}" />
     {% endif %}
-
-    <!-- Register service worker for offline -->
-    <script type="text/javascript">
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/sw.js', {scope: '/'})
-          .then(function(reg) {
-            console.log('Registration succeeded. Scope is ' + reg.scope);
-          }).catch(function(error) {
-            console.log('Registration failed with ' + error);
-          });
-      }
-    </script>
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->

From d15f910998c22f39120f8f51679f544c3a0a4375 Mon Sep 17 00:00:00 2001
From: Francisco Jimenez Cabrera <francisco.jimenez.cabrera@canonical.com>
Date: Wed, 4 Mar 2020 10:48:15 +0000
Subject: [PATCH 19/23] Fix docker image

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 0b46cb2709..aa39fcbac8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -43,7 +43,7 @@ ENV PATH="/root/.local/bin:${PATH}"
 ADD . .
 RUN rm -rf package.json yarn.lock .babelrc webpack.config.js
 COPY --from=build-vanilla /srv/package.json package.json
-COPY --from=build-vanilla /srv/build docs/static/build
+COPY --from=build-vanilla /srv/build build
 
 # Set revision ID
 ARG BUILD_ID

From 8a1a17304e902ae8e3d3c225dfa48351d08c5367 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 4 Mar 2020 12:15:02 +0100
Subject: [PATCH 20/23] Make search work on /docs

---
 site/_layouts/default.html | 2 +-
 webapp/app.py              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index 68ea366e2d..d56f8e3f00 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -48,7 +48,7 @@
             <li class="p-navigation__item"><a class="p-navigation__link" href="/browser-support">Browser support</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="/contribute">Contribute</a></li>
           </ul>
-          <form class="p-search-box" action="/search">
+          <form class="p-search-box" action="/docs/search">
             <input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation" required />
             <button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" alt="reset"><i class="p-icon--close"></i></button>
             <button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search"></i></button>
diff --git a/webapp/app.py b/webapp/app.py
index abca1db6e9..5d3adb7ab3 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -97,7 +97,7 @@ def standalone_example(example_path):
     "/docs/search",
     "search",
     build_search_view(
-        site="docs.vanillaframework.io", template_path="docs/search.html"
+        site="vanillaframework.io/docs", template_path="docs/search.html"
     ),
 )
 app.add_url_rule("/<path:subpath>", view_func=template_finder_view)

From c62fe3b072bf6684c81b205ace899dc5e8db3469 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 4 Mar 2020 12:17:03 +0100
Subject: [PATCH 21/23] Update references to docs.vanillaframework

---
 README.md       | 4 ++--
 site/index.html | 2 +-
 webapp/app.py   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index cbc7ecf557..40d73966d7 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 
 Vanilla Framework is a simple extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns.
 
-[Documentation](https://docs.vanillaframework.io) |
+[Documentation](https://vanillaframework.io/docs) |
 [Join the mailing list](http://canonical.us3.list-manage2.com/subscribe?u=56dac47c206ba0f58ec25f314&id=36f7d8394e)
 
 ## Hotlinking
@@ -69,7 +69,7 @@ The simplest way to run Vanilla framework is to first [install Docker](https://d
 
 ### Viewing documentation
 
-The documentation for the latest version of Vanilla framework is hosted at <https://docs.vanillaframework.io>.
+The documentation for the latest version of Vanilla framework is hosted at <https://vanillaframework.io/docs>.
 
 The documentation markdown files live in the [`docs` folder](/docs), and you can view this documentation in the browser by running:
 
diff --git a/site/index.html b/site/index.html
index 8ccce236d4..e4bcb07abd 100644
--- a/site/index.html
+++ b/site/index.html
@@ -62,7 +62,7 @@ <h2>Quick start</h2>
   <div class="row">
     <div class="col-6">
       <p>The recommended method of including Vanilla Framework in your project is via <a href="https://www.npmjs.com/package/vanilla-framework">npm</a>. You can then simply include the framework in your SCSS files and compile.</p>
-      <p>For other methods, please see the <a href="https://docs.vanillaframework.io">advanced usage docs.</a></p>
+      <p>For other methods, please see the <a href="/docs">advanced usage docs.</a></p>
     </div>
     <div class="col-6">
       <pre><code>npm install --save-dev vanilla-framework
diff --git a/webapp/app.py b/webapp/app.py
index 5d3adb7ab3..f0a205eb43 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -17,7 +17,7 @@
 
 app = FlaskBase(
     __name__,
-    "docs.vanillaframework.io",
+    "vanillaframework.io",
     template_folder="../site",
     static_folder="../site/static",
     template_404="404.html",

From 8ae172b8035398b2103fd287d1bc1009d355406c Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 4 Mar 2020 12:19:35 +0100
Subject: [PATCH 22/23] Keep searching old domain

---
 webapp/app.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/app.py b/webapp/app.py
index f0a205eb43..dbba90c462 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -97,7 +97,9 @@ def standalone_example(example_path):
     "/docs/search",
     "search",
     build_search_view(
-        site="vanillaframework.io/docs", template_path="docs/search.html"
+        # temporarly keep docs.vanillaframework.io until /docs are live and indexed
+        # change to vanillaframework.io/docs
+        site="docs.vanillaframework.io", template_path="docs/search.html"
     ),
 )
 app.add_url_rule("/<path:subpath>", view_func=template_finder_view)

From 556a58ca84a8e4afcd692ebe90c156fa0d160de9 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 4 Mar 2020 15:41:41 +0100
Subject: [PATCH 23/23] Fix selecting Docs in the navigation

---
 site/_layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
index d56f8e3f00..87ae890952 100644
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -42,7 +42,7 @@
             <a href="#main-content">Jump to main content</a>
           </span>
           <ul class="p-navigation__items">
-            <li class="p-navigation__item {% if path.startswith('/docs') %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
+            <li class="p-navigation__item {% if path.startswith('/docs') and path != '/docs/examples' %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
             <li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="/accessibility">Accessibility</a></li>
             <li class="p-navigation__item"><a class="p-navigation__link" href="/browser-support">Browser support</a></li>