- $s8
(4.76837rem)
+ $s8
(4.768371582rem)
<div class="ds-stack-larger">
<div>First element</div>
diff --git a/docs/components/status/index.html b/docs/components/status/index.html
index 9879786..e370460 100644
--- a/docs/components/status/index.html
+++ b/docs/components/status/index.html
@@ -2,124 +2,124 @@
-
-
-
+
+
+
Status (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
@@ -145,7 +145,7 @@
Markup
</ul>
</aside>
-
The status component should typically be added to the page just below the <h1>
(main) heading. See the layout demo .
+
The status component should typically be added to the page just below the <h1>
(main) heading. See the layout demo .
diff --git a/docs/components/subnavigation/index.html b/docs/components/subnavigation/index.html
index f26a622..6c5a583 100644
--- a/docs/components/subnavigation/index.html
+++ b/docs/components/subnavigation/index.html
@@ -2,130 +2,130 @@
-
-
-
+
+
+
Sub-navigation (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
Sub-navigation
- Use the Sub-navigation component when there are pages available related to the chosen main navigation link (as indicated by aria-current="true"
in the Header component above it). For example, if the chosen route on democracyclub.org.uk is “About”, use Sub-navigation to provide links to “About” (the index page), “The Team”, “Jobs”, and “Funding”. This group of pages represents a subsection of the site called “About”.
+ Use the Sub-navigation component when there are pages available related to the chosen main navigation link (as indicated by aria-current="true"
in the Header component above it). For example, if the chosen route on democracyclub.org.uk is “About”, use Sub-navigation to provide links to “About” (the index page), “The Team”, “Jobs”, and “Funding”. This group of pages represents a subsection of the site called “About”.
@@ -147,7 +147,7 @@ Sub-navigation
🗒️ Breadcrumbs
-
If you wish to indicate depth of location (how many links deep into a subsection of the site), use the Breadcrumbs component instead.
+
If you wish to indicate depth of location (how many links deep into a subsection of the site), use the Breadcrumbs component instead.
The class="ds-subnav"
element is a <nav>
, exposing it as a landmark region to screen readers. Note the use of aria-label="About"
. This differentiates this navigation landmark from the main one above it in screen reader landmark listings. Where the section is “Our work”, use aria-label="Our work"
.
@@ -172,7 +172,7 @@ 🗒️ Breadcrumbs
⚠️ Source order
-
As demonstrated in the page layout demo , the Sub-navigation component should appear first inside the <main>
element, before the page’s <h1>
. This is better for screen reader accessibility than the reverse configuration used in the live democracyclub.org.uk site at the time of writing.
+
As demonstrated in the page layout demo , the Sub-navigation component should appear first inside the <main>
element, before the page’s <h1>
. This is better for screen reader accessibility than the reverse configuration used in the live democracyclub.org.uk site at the time of writing.
<main id="main" tabindex="-1">
<nav class="ds-subnav" aria-label="About">
<!-- Sub-navigation links -->
diff --git a/docs/components/table/index.html b/docs/components/table/index.html
index 2d11a58..c3abf40 100644
--- a/docs/components/table/index.html
+++ b/docs/components/table/index.html
@@ -2,124 +2,124 @@
-
-
-
+
+
+
Table (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
@@ -281,7 +281,7 @@
Responsiveness
Tables in cards
-You can use a Card to “lift” a table and give it more affordance in the page.
+You can use a Card to “lift” a table and give it more affordance in the page.
@@ -322,7 +322,7 @@
Tables in cards
🗒️ Padding options
-
In this case, the ds-padded
utility class to pad the card. Alternatively, I could wrap the table in a class="ds-card-body"
element.
+
In this case, the ds-padded
utility class to pad the card. Alternatively, I could wrap the table in a class="ds-card-body"
element.
<div class="ds-card ds-padded">
<div class="ds-card-body">
<div class="ds-table">
diff --git a/docs/components/utilities/index.html b/docs/components/utilities/index.html
index 82e23ed..36bdb41 100644
--- a/docs/components/utilities/index.html
+++ b/docs/components/utilities/index.html
@@ -2,130 +2,130 @@
-
-
-
+
+
+
Utility classes (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
Utility classes
- These utility classes are a toolkit for making simple design/layout adjustments to individual elements. For generic layout helpers (concerning multiple elements), see Cluster , Stack , Grid , and Sidebar .
+ These utility classes are a toolkit for making simple design/layout adjustments to individual elements. For generic layout helpers (concerning multiple elements), see Cluster , Stack , Grid , and Sidebar .
diff --git a/docs/index.html b/docs/index.html
index 42d2768..1ae9e2a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,124 +2,124 @@
-
-
-
+
+
+
Democracy Club’s Design System (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
@@ -130,7 +130,7 @@
Democracy Club’s Design System
Contributing
Before contributing a new component to the design system, you must do two things:
-Find out if it already exists . It’s likely the component you want either exists (just not exactly as you imagined), has an equivalent that does the same job (you probably just want that), or can be created using a combination of existing components and utility classes . If you encounter problems, raise an issue .
+Find out if it already exists . It’s likely the component you want either exists (just not exactly as you imagined), has an equivalent that does the same job (you probably just want that), or can be created using a combination of existing components and utility classes . If you encounter problems, raise an issue .
Raise an issue . Before embarking on making the component (part component or other feature), raise an issue to make your intent public and confirm the necessity. Use the addition label.
When creating your component, follow these steps.
diff --git a/docs/layout-demo/index.html b/docs/layout-demo/index.html
index 5c44c4a..8b99f79 100644
--- a/docs/layout-demo/index.html
+++ b/docs/layout-demo/index.html
@@ -2,8 +2,8 @@
-
-
+
+
Page layout demo (Democracy Club Design System)
@@ -18,7 +18,7 @@
-
+
+
@@ -101,7 +102,7 @@
Labour
-
+
@@ -112,7 +113,7 @@
Independent
-
+
@@ -123,10 +124,18 @@
Conservative & Unionist Party
-
+
+
+
+
+
A subheading
+
Dignissimos asperiores sequi soluta, nemo voluptatum molestias repudiandae sunt mollitia placeat magnam sapiente inventore optio iure corporis facere laboriosam dolorem nisi nobis amet minima modi, adipisci tempora voluptatibus? Id, perspiciatis.
+
+
+
A subheading
Dignissimos asperiores sequi soluta, nemo voluptatum molestias repudiandae sunt mollitia placeat magnam sapiente inventore optio iure corporis facere laboriosam dolorem nisi nobis amet minima modi, adipisci tempora voluptatibus? Id, perspiciatis.
@@ -138,9 +147,10 @@
Animi maiores, earum quisquam porro mollitia maxime pariatur iure esse nesciunt obcaecati deleniti explicabo a, veritatis voluptatum, suscipit ipsum illo provident temporibus.
-
+
+
+
\ No newline at end of file
diff --git a/docs/styles/system.css b/docs/styles/system.css
index 1551268..cc187d2 100644
--- a/docs/styles/system.css
+++ b/docs/styles/system.css
@@ -15,6 +15,7 @@
.ds-scope .ds-stack-larger > *,
.ds-scope .ds-stack > *,
+.ds-scope .ds-page .fill-width-callout > *,
.ds-scope .ds-card .ds-card-body > *,
.ds-scope .ds-stack-smaller > *,
.ds-scope .ds-filter > *,
@@ -26,7 +27,7 @@
.ds-scope .ds-stack-larger > * + * {
margin-top: 4.76837rem; }
-.ds-scope .ds-stack > * + * {
+.ds-scope .ds-stack > * + *, .ds-scope .ds-page .fill-width-callout > * + * {
margin-top: 3.05176rem; }
.ds-scope .ds-card .ds-card-body > * + *, .ds-scope .ds-stack-smaller > * + *, .ds-scope .ds-filter > * + * {
@@ -149,23 +150,25 @@
max-width: 15rem;
margin-bottom: 0.5rem; }
-.ds-scope .ds-footer, .ds-scope .ds-language, .ds-scope .ds-dark, .ds-scope .ds-footer *, .ds-scope .ds-language *, .ds-scope .ds-dark * {
+.ds-scope .ds-footer, .ds-scope .ds-language, .ds-scope .ds-dark, .ds-scope .ds-page .fill-width-callout, .ds-scope .ds-footer *, .ds-scope .ds-language *, .ds-scope .ds-dark *, .ds-scope .ds-page .fill-width-callout * {
color: #fff;
background-color: #403F41; }
-.ds-scope .ds-footer .ds-card, .ds-scope .ds-language .ds-card, .ds-scope .ds-dark .ds-card,
+.ds-scope .ds-footer .ds-card, .ds-scope .ds-language .ds-card, .ds-scope .ds-dark .ds-card, .ds-scope .ds-page .fill-width-callout .ds-card,
.ds-scope .ds-footer form,
.ds-scope .ds-language form,
.ds-scope .ds-dark form,
+.ds-scope .ds-page .fill-width-callout form,
.ds-scope .ds-footer .ds-candidate,
.ds-scope .ds-language .ds-candidate,
-.ds-scope .ds-dark .ds-candidate {
+.ds-scope .ds-dark .ds-candidate,
+.ds-scope .ds-page .fill-width-callout .ds-candidate {
border: 1px solid; }
-.ds-scope .ds-footer .ds-select::after, .ds-scope .ds-language .ds-select::after, .ds-scope .ds-dark .ds-select::after {
+.ds-scope .ds-footer .ds-select::after, .ds-scope .ds-language .ds-select::after, .ds-scope .ds-dark .ds-select::after, .ds-scope .ds-page .fill-width-callout .ds-select::after {
border-top-color: #fff; }
-.ds-scope .ds-footer [class*="ds-button"]:not(:active), .ds-scope .ds-language [class*="ds-button"]:not(:active), .ds-scope .ds-dark [class*="ds-button"]:not(:active) {
+.ds-scope .ds-footer [class*="ds-button"]:not(:active), .ds-scope .ds-language [class*="ds-button"]:not(:active), .ds-scope .ds-dark [class*="ds-button"]:not(:active), .ds-scope .ds-page .fill-width-callout [class*="ds-button"]:not(:active) {
border-bottom-color: #000; }
.ds-scope .ds-visually-hidden {
@@ -374,7 +377,6 @@
}*/ }
.ds-scope input,
.ds-scope button,
- .ds-scope textarea,
.ds-scope select {
font: inherit; }
.ds-scope * {
@@ -413,7 +415,7 @@
.ds-scope p + p {
margin-top: 1rem !important; }
.ds-scope blockquote {
- font-size: 1.5625rem;
+ font-size: 1.25rem;
font-style: italic;
border-left: 0.5rem solid #FFC037;
padding-left: 1rem; }
@@ -428,22 +430,22 @@
word-break: break-word; }
.ds-scope h1, .ds-scope .ds-h1 {
font-size: 3.8147rem;
- font-size: clamp(2.44141rem, 7vw, 3.8147rem); }
+ font-size: clamp(1.95312rem, 7vw, 3.8147rem); }
.ds-scope h2, .ds-scope .ds-h2 {
font-size: 3.05176rem;
- font-size: clamp(2.44141rem, 6vw, 3.05176rem); }
+ font-size: clamp(1.95312rem, 6vw, 3.05176rem); }
.ds-scope h3, .ds-scope .ds-h3 {
font-size: 2.44141rem;
- font-size: clamp(1.95312rem, 5vw, 2.44141rem); }
+ font-size: clamp(1.5625rem, 5vw, 2.44141rem); }
.ds-scope h4, .ds-scope .ds-h4 {
font-size: 1.95312rem;
- font-size: clamp(1.5625rem, 4vw, 1.95312rem); }
+ font-size: clamp(1.25rem, 4vw, 1.95312rem); }
.ds-scope h5, .ds-scope .ds-h5 {
font-size: 1.5625rem;
- font-size: clamp(1.25rem, 3vw, 1.5625rem); }
+ font-size: clamp(1rem, 3vw, 1.5625rem); }
.ds-scope h6, .ds-scope .ds-h6 {
font-size: 1.25rem;
- font-size: clamp(0.875rem, 2vw, 1.25rem); }
+ font-size: clamp(0.75rem, 2vw, 1.25rem); }
.ds-scope h1, .ds-scope h2, .ds-scope h3, .ds-scope h4, .ds-scope h5, .ds-scope h6 {
font-weight: 500;
word-break: break-word; }
@@ -690,7 +692,6 @@
color: #403F41;
line-height: 1.5;
margin: 0;
- padding: 0;
list-style: none; }
.ds-scope nav.ds-breadcrumbs li {
display: inline-block; }
@@ -924,6 +925,8 @@
color: #fff; }
.ds-scope .ds-status-message {
background-color: #007CAD; }
+ .ds-scope .ds-status-message a {
+ color: #fff; }
.ds-scope .ds-status-success {
background-color: #32841A; }
.ds-scope .ds-status-error {
@@ -949,23 +952,12 @@
background-color: #403F41; }
.ds-scope ::-webkit-scrollbar-thumb {
background-color: #007CAD; }
- .ds-scope .ds-page {
- overflow-x: hidden; }
- .ds-scope .ds-page main {
- margin-left: auto;
- margin-right: auto;
- max-width: 70ch;
- margin-top: 4.76837rem;
- padding: 0 1.25rem; }
-
.ds-scope .ds-party {
position: relative;
display: flex;
flex-wrap: wrap;
border: 1px solid rgba(64, 63, 65, 0.2);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);;
- }
-
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
.ds-scope .ds-party-body {
padding: 1.5625rem;
flex-grow: 999;
@@ -973,13 +965,10 @@
display: flex;
flex-direction: column;
justify-content: center;
- flex-basis: 50%
- }
+ flex-basis: 50%; }
.ds-scope .ds-party-name {
hyphens: auto;
- word-break: break-word;
- }
-
+ word-break: break-word; }
.ds-scope .ds-party-name a::after {
content: '';
position: absolute;
@@ -987,8 +976,7 @@
right: 0;
bottom: 0;
left: 0;
- z-index: 2;
- }
+ z-index: 2; }
.ds-scope .ds-party-image {
background-color: #fff;
flex-grow: 1;
@@ -997,65 +985,51 @@
min-height: 10rem;
max-width: 100%;
position: relative;
- order:2;
- }
-
+ order: 2; }
.ds-scope .ds-party-image img {
- padding: 2.44141rem;
+ padding: 1.5625rem;
display: block;
height: 100%;
- position: absolute;
- }
-
+ position: absolute; }
@supports (object-fit: contain) {
.ds-scope .ds-party-image img {
object-fit: contain;
- width: 100%;
- }
- }
-
+ width: 100%; } }
@media (max-width: 400px) {
.ds-scope li.ds-party {
- flex-wrap: nowrap;
- }
-
- .ds-scope li .ds-party-body, li .ds-party-image {
- padding: 1.5625rem;
- }
-
+ flex-wrap: nowrap; }
+ .ds-scope li .ds-party-body, .ds-scope li .ds-party-image {
+ padding: 1rem; }
.ds-scope li .ds-party-image {
background-color: transparent;
min-width: 0;
display: flex;
align-items: center;
- min-height: 0;
- }
-
+ min-height: 0; }
.ds-scope li .ds-party-image img {
position: static;
object-fit: inherit;
height: 12vh;
width: auto;
- margin-left: auto;
- }
- }
-
+ margin-left: auto; } }
.ds-scope .ds-party:focus-within {
- outline: 0.25rem solid #FFC037;
- }
-
- .ds-scope .ds-scope .ds-party:focus-within a:focus {
- outline: none;
- }
-
+ outline: 0.25rem solid #FFC037; }
+ .ds-scope .ds-party:focus-within a:focus {
+ outline: none; }
.ds-scope :not(li).ds-party .ds-party-body {
- flex-basis: 50%;
- }
-
+ flex-basis: 50%; }
.ds-scope :not(li).ds-party .ds-party-image {
min-width: 20rem;
- min-width: min(20rem, 100%);
- }
+ min-width: min(20rem, 100%); }
+ .ds-scope .ds-page {
+ overflow-x: hidden; }
+ .ds-scope .ds-page .page-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 70ch;
+ padding: 0 1.25rem; }
+ .ds-scope .ds-page .fill-width-callout > * {
+ padding: 1.25rem 1.25rem; }
.ds-scope *,
.ds-scope *::before,
diff --git a/docs/usage/composition/index.html b/docs/usage/composition/index.html
index 322e13b..870acf7 100644
--- a/docs/usage/composition/index.html
+++ b/docs/usage/composition/index.html
@@ -2,130 +2,130 @@
-
-
-
+
+
+
Composing content (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
Composing content
- By combining Stacks , Grids , and the various components, you can quickly compose responsive layouts like the following “kitchen sink” example.
+ By combining Stacks , Grids , and the various components, you can quickly compose responsive layouts like the following “kitchen sink” example.
diff --git a/docs/usage/getting-started/index.html b/docs/usage/getting-started/index.html
index 8913f52..d1e947f 100644
--- a/docs/usage/getting-started/index.html
+++ b/docs/usage/getting-started/index.html
@@ -2,124 +2,124 @@
-
-
-
+
+
+
Getting started (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
@@ -149,7 +149,7 @@
Structure
The index.template.scss
file is a template for how you would pull in the partials and get the system running in your project.
Sass compilation
The first thing you need to do is take index.template.scss
, rename it if you desire, and make it the “in” file for Sass compilation. To reach the associated partials, you will need to configure libsass
to use the folder exposed in the installation step above as an include-path
.
-
Note the optional-styles
block in that file. For efficiency, you should comment out any components here you know you don’t need, keeping the design system’s footprint as small as possible. In the following example, I have commented out the Sidebar , Table , and Select components.
+
Note the optional-styles
block in that file. For efficiency, you should comment out any components here you know you don’t need, keeping the design system’s footprint as small as possible. In the following example, I have commented out the Sidebar , Table , and Select components.
@mixin optional-styles {
@include description-lists;
@include button;
@@ -190,7 +190,7 @@ CSS optimization
<link rel="stylesheet" href="path/to/system.min.css" />
Next steps
-Follow the HTML examples in individual components docs. If you are making a page layout from scratch, see Page layout .
+Follow the HTML examples in individual components docs. If you are making a page layout from scratch, see Page layout .
diff --git a/docs/usage/page-layout/index.html b/docs/usage/page-layout/index.html
index 4b01a8b..68736e0 100644
--- a/docs/usage/page-layout/index.html
+++ b/docs/usage/page-layout/index.html
@@ -2,130 +2,130 @@
-
-
-
+
+
+
Page layout (Democracy Club Design System)
skip to content
-
-
+
+
Basics
Components
Composition
Page layout
- Instate a standard page layout by wrapping a skip link, Language component, Header , a main content area, and a Footer in a <div>
with class="ds-page"
directly inside the <body>
element.
+ Instate a standard page layout by wrapping a skip link, Language component, Header , a main content area, and a Footer in a <div>
with class="ds-page"
directly inside the <body>
element.
🗒️ Skip link
@@ -145,14 +145,14 @@
🗒️ Skip link
Notes
-The Header component’s prescribed markup includes a skip link , so don’t implement one separately.
+The Header component’s prescribed markup includes a skip link , so don’t implement one separately.
For the skip link to work reliably in all browsers, the <main>
element needs id="main"
and tabindex="-1"
.
-The <main>
element needs class="ds-stack"
(see Stack ) to insert margin between all the flow elements. For dealing with flow content, see Composing content .
+The <main>
element needs class="ds-stack"
(see Stack ) to insert margin between all the flow elements. For dealing with flow content, see Composing content .
diff --git a/src-site/layout.md b/src-site/layout.md
index 070043a..c297484 100644
--- a/src-site/layout.md
+++ b/src-site/layout.md
@@ -43,7 +43,8 @@ layout: layouts/bare.njk
-
+
+
@@ -123,6 +124,15 @@ layout: layouts/bare.njk
+
+
+
+
A subheading
+
Dignissimos asperiores sequi soluta, nemo voluptatum molestias repudiandae sunt mollitia placeat magnam sapiente inventore optio iure corporis facere laboriosam dolorem nisi nobis amet minima modi, adipisci tempora voluptatibus? Id, perspiciatis.
+
+
+
+
A subheading
Dignissimos asperiores sequi soluta, nemo voluptatum molestias repudiandae sunt mollitia placeat magnam sapiente inventore optio iure corporis facere laboriosam dolorem nisi nobis amet minima modi, adipisci tempora voluptatibus? Id, perspiciatis.
@@ -137,6 +147,7 @@ layout: layouts/bare.njk
+
-
\ No newline at end of file
+
diff --git a/src-site/styles/system.css b/src-site/styles/system.css
index 1551268..cc187d2 100644
--- a/src-site/styles/system.css
+++ b/src-site/styles/system.css
@@ -15,6 +15,7 @@
.ds-scope .ds-stack-larger > *,
.ds-scope .ds-stack > *,
+.ds-scope .ds-page .fill-width-callout > *,
.ds-scope .ds-card .ds-card-body > *,
.ds-scope .ds-stack-smaller > *,
.ds-scope .ds-filter > *,
@@ -26,7 +27,7 @@
.ds-scope .ds-stack-larger > * + * {
margin-top: 4.76837rem; }
-.ds-scope .ds-stack > * + * {
+.ds-scope .ds-stack > * + *, .ds-scope .ds-page .fill-width-callout > * + * {
margin-top: 3.05176rem; }
.ds-scope .ds-card .ds-card-body > * + *, .ds-scope .ds-stack-smaller > * + *, .ds-scope .ds-filter > * + * {
@@ -149,23 +150,25 @@
max-width: 15rem;
margin-bottom: 0.5rem; }
-.ds-scope .ds-footer, .ds-scope .ds-language, .ds-scope .ds-dark, .ds-scope .ds-footer *, .ds-scope .ds-language *, .ds-scope .ds-dark * {
+.ds-scope .ds-footer, .ds-scope .ds-language, .ds-scope .ds-dark, .ds-scope .ds-page .fill-width-callout, .ds-scope .ds-footer *, .ds-scope .ds-language *, .ds-scope .ds-dark *, .ds-scope .ds-page .fill-width-callout * {
color: #fff;
background-color: #403F41; }
-.ds-scope .ds-footer .ds-card, .ds-scope .ds-language .ds-card, .ds-scope .ds-dark .ds-card,
+.ds-scope .ds-footer .ds-card, .ds-scope .ds-language .ds-card, .ds-scope .ds-dark .ds-card, .ds-scope .ds-page .fill-width-callout .ds-card,
.ds-scope .ds-footer form,
.ds-scope .ds-language form,
.ds-scope .ds-dark form,
+.ds-scope .ds-page .fill-width-callout form,
.ds-scope .ds-footer .ds-candidate,
.ds-scope .ds-language .ds-candidate,
-.ds-scope .ds-dark .ds-candidate {
+.ds-scope .ds-dark .ds-candidate,
+.ds-scope .ds-page .fill-width-callout .ds-candidate {
border: 1px solid; }
-.ds-scope .ds-footer .ds-select::after, .ds-scope .ds-language .ds-select::after, .ds-scope .ds-dark .ds-select::after {
+.ds-scope .ds-footer .ds-select::after, .ds-scope .ds-language .ds-select::after, .ds-scope .ds-dark .ds-select::after, .ds-scope .ds-page .fill-width-callout .ds-select::after {
border-top-color: #fff; }
-.ds-scope .ds-footer [class*="ds-button"]:not(:active), .ds-scope .ds-language [class*="ds-button"]:not(:active), .ds-scope .ds-dark [class*="ds-button"]:not(:active) {
+.ds-scope .ds-footer [class*="ds-button"]:not(:active), .ds-scope .ds-language [class*="ds-button"]:not(:active), .ds-scope .ds-dark [class*="ds-button"]:not(:active), .ds-scope .ds-page .fill-width-callout [class*="ds-button"]:not(:active) {
border-bottom-color: #000; }
.ds-scope .ds-visually-hidden {
@@ -374,7 +377,6 @@
}*/ }
.ds-scope input,
.ds-scope button,
- .ds-scope textarea,
.ds-scope select {
font: inherit; }
.ds-scope * {
@@ -413,7 +415,7 @@
.ds-scope p + p {
margin-top: 1rem !important; }
.ds-scope blockquote {
- font-size: 1.5625rem;
+ font-size: 1.25rem;
font-style: italic;
border-left: 0.5rem solid #FFC037;
padding-left: 1rem; }
@@ -428,22 +430,22 @@
word-break: break-word; }
.ds-scope h1, .ds-scope .ds-h1 {
font-size: 3.8147rem;
- font-size: clamp(2.44141rem, 7vw, 3.8147rem); }
+ font-size: clamp(1.95312rem, 7vw, 3.8147rem); }
.ds-scope h2, .ds-scope .ds-h2 {
font-size: 3.05176rem;
- font-size: clamp(2.44141rem, 6vw, 3.05176rem); }
+ font-size: clamp(1.95312rem, 6vw, 3.05176rem); }
.ds-scope h3, .ds-scope .ds-h3 {
font-size: 2.44141rem;
- font-size: clamp(1.95312rem, 5vw, 2.44141rem); }
+ font-size: clamp(1.5625rem, 5vw, 2.44141rem); }
.ds-scope h4, .ds-scope .ds-h4 {
font-size: 1.95312rem;
- font-size: clamp(1.5625rem, 4vw, 1.95312rem); }
+ font-size: clamp(1.25rem, 4vw, 1.95312rem); }
.ds-scope h5, .ds-scope .ds-h5 {
font-size: 1.5625rem;
- font-size: clamp(1.25rem, 3vw, 1.5625rem); }
+ font-size: clamp(1rem, 3vw, 1.5625rem); }
.ds-scope h6, .ds-scope .ds-h6 {
font-size: 1.25rem;
- font-size: clamp(0.875rem, 2vw, 1.25rem); }
+ font-size: clamp(0.75rem, 2vw, 1.25rem); }
.ds-scope h1, .ds-scope h2, .ds-scope h3, .ds-scope h4, .ds-scope h5, .ds-scope h6 {
font-weight: 500;
word-break: break-word; }
@@ -690,7 +692,6 @@
color: #403F41;
line-height: 1.5;
margin: 0;
- padding: 0;
list-style: none; }
.ds-scope nav.ds-breadcrumbs li {
display: inline-block; }
@@ -924,6 +925,8 @@
color: #fff; }
.ds-scope .ds-status-message {
background-color: #007CAD; }
+ .ds-scope .ds-status-message a {
+ color: #fff; }
.ds-scope .ds-status-success {
background-color: #32841A; }
.ds-scope .ds-status-error {
@@ -949,23 +952,12 @@
background-color: #403F41; }
.ds-scope ::-webkit-scrollbar-thumb {
background-color: #007CAD; }
- .ds-scope .ds-page {
- overflow-x: hidden; }
- .ds-scope .ds-page main {
- margin-left: auto;
- margin-right: auto;
- max-width: 70ch;
- margin-top: 4.76837rem;
- padding: 0 1.25rem; }
-
.ds-scope .ds-party {
position: relative;
display: flex;
flex-wrap: wrap;
border: 1px solid rgba(64, 63, 65, 0.2);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);;
- }
-
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
.ds-scope .ds-party-body {
padding: 1.5625rem;
flex-grow: 999;
@@ -973,13 +965,10 @@
display: flex;
flex-direction: column;
justify-content: center;
- flex-basis: 50%
- }
+ flex-basis: 50%; }
.ds-scope .ds-party-name {
hyphens: auto;
- word-break: break-word;
- }
-
+ word-break: break-word; }
.ds-scope .ds-party-name a::after {
content: '';
position: absolute;
@@ -987,8 +976,7 @@
right: 0;
bottom: 0;
left: 0;
- z-index: 2;
- }
+ z-index: 2; }
.ds-scope .ds-party-image {
background-color: #fff;
flex-grow: 1;
@@ -997,65 +985,51 @@
min-height: 10rem;
max-width: 100%;
position: relative;
- order:2;
- }
-
+ order: 2; }
.ds-scope .ds-party-image img {
- padding: 2.44141rem;
+ padding: 1.5625rem;
display: block;
height: 100%;
- position: absolute;
- }
-
+ position: absolute; }
@supports (object-fit: contain) {
.ds-scope .ds-party-image img {
object-fit: contain;
- width: 100%;
- }
- }
-
+ width: 100%; } }
@media (max-width: 400px) {
.ds-scope li.ds-party {
- flex-wrap: nowrap;
- }
-
- .ds-scope li .ds-party-body, li .ds-party-image {
- padding: 1.5625rem;
- }
-
+ flex-wrap: nowrap; }
+ .ds-scope li .ds-party-body, .ds-scope li .ds-party-image {
+ padding: 1rem; }
.ds-scope li .ds-party-image {
background-color: transparent;
min-width: 0;
display: flex;
align-items: center;
- min-height: 0;
- }
-
+ min-height: 0; }
.ds-scope li .ds-party-image img {
position: static;
object-fit: inherit;
height: 12vh;
width: auto;
- margin-left: auto;
- }
- }
-
+ margin-left: auto; } }
.ds-scope .ds-party:focus-within {
- outline: 0.25rem solid #FFC037;
- }
-
- .ds-scope .ds-scope .ds-party:focus-within a:focus {
- outline: none;
- }
-
+ outline: 0.25rem solid #FFC037; }
+ .ds-scope .ds-party:focus-within a:focus {
+ outline: none; }
.ds-scope :not(li).ds-party .ds-party-body {
- flex-basis: 50%;
- }
-
+ flex-basis: 50%; }
.ds-scope :not(li).ds-party .ds-party-image {
min-width: 20rem;
- min-width: min(20rem, 100%);
- }
+ min-width: min(20rem, 100%); }
+ .ds-scope .ds-page {
+ overflow-x: hidden; }
+ .ds-scope .ds-page .page-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 70ch;
+ padding: 0 1.25rem; }
+ .ds-scope .ds-page .fill-width-callout > * {
+ padding: 1.25rem 1.25rem; }
.ds-scope *,
.ds-scope *::before,
diff --git a/system/partials/_page.scss b/system/partials/_page.scss
index 635ae12..6f14c31 100644
--- a/system/partials/_page.scss
+++ b/system/partials/_page.scss
@@ -3,10 +3,18 @@
overflow-x: hidden;
}
- .ds-page main {
+ .ds-page .page-container {
margin-left: auto;
margin-right: auto;
max-width: $measure;
padding: 0 $s2;
}
-}
\ No newline at end of file
+
+ .ds-page .fill-width-callout {
+ @extend %ds-dark;
+ @extend .ds-stack;
+ & > * {
+ padding: $s2 $s2;
+ }
+ }
+}