Update CSS
This commit is contained in:
parent
d85a5b3d2f
commit
26b86f94f9
6 changed files with 78 additions and 84 deletions
|
|
@ -19,6 +19,7 @@ html {
|
|||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,78 +2,80 @@
|
|||
|
||||
:root {
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
/* Fonts */
|
||||
--font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* Colors */
|
||||
--color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
|
||||
--color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
|
||||
--color-white: var(--color-white-100); /* White */
|
||||
--color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */
|
||||
--color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */
|
||||
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
|
||||
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
|
||||
--color-black: hsla(0, 0%, 10%, 1); /* Black */
|
||||
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
|
||||
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
|
||||
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
|
||||
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
|
||||
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
|
||||
--color-primary: var(--color-primary-100); /* Focus */
|
||||
--color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
|
||||
--color-brand: var(--color-brand-100); /* Brand */
|
||||
--color-background: var(--color-white);
|
||||
--color-text: var(--color-black);
|
||||
--color-focus-ring: var(--color-primary-100);
|
||||
--color-disabled: var(--color-grey-400);
|
||||
/* Colors */
|
||||
--color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
|
||||
--color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
|
||||
--color-white: var(--color-white-100); /* White */
|
||||
--color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */
|
||||
--color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */
|
||||
--color-grey-300: hsla(0, 0%, 74%, 1);
|
||||
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
|
||||
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
|
||||
--color-black: hsla(0, 0%, 10%, 1); /* Black */
|
||||
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
|
||||
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
|
||||
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
|
||||
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
|
||||
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
|
||||
--color-primary: var(--color-primary-100); /* Focus */
|
||||
--color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
|
||||
--color-brand: var(--color-brand-100); /* Brand */
|
||||
--color-background: var(--color-white);
|
||||
--color-text: var(--color-black);
|
||||
--color-focus-ring: var(--color-primary-100);
|
||||
--color-disabled: var(--color-grey-400);
|
||||
|
||||
/* Space scale */
|
||||
--space: .275em; /* typographic space */
|
||||
--space-xs: .25rem; /* 4px */
|
||||
--space-sm: .5rem; /* 8px */
|
||||
--space-md: .75rem; /* 12px */
|
||||
--space-lg: 1rem; /* 16px */
|
||||
--space-xl: 1.5rem; /* 24px */
|
||||
--space-2xl: 2rem; /* 32px */
|
||||
/* Space scale */
|
||||
--space: .275em; /* typographic space */
|
||||
--space-xs: .25rem; /* 4px */
|
||||
--space-sm: .5rem; /* 8px */
|
||||
--space-md: .75rem; /* 12px */
|
||||
--space-lg: 1rem; /* 16px */
|
||||
--space-xl: 1.5rem; /* 24px */
|
||||
--space-2xl: 2rem; /* 32px */
|
||||
|
||||
/* Type scale */
|
||||
--text-sm: 0.75rem; /* 12px */
|
||||
--text-md: 0.875rem; /* 14px */
|
||||
--text-lg: 0.9375rem; /* 16px */
|
||||
--text-xl: 1.5rem; /* 24px */
|
||||
/* Type scale */
|
||||
--text-sm: 0.75rem; /* 12px */
|
||||
--text-md: 0.875rem; /* 14px */
|
||||
--text-lg: 0.9375rem; /* 16px */
|
||||
--text-xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Leading */
|
||||
--leading-none: 1;
|
||||
--leading-sm: 1.25;
|
||||
--leading-md: 1.4285714286; /* 20/14 */
|
||||
--leading-lg: 1.5; /* 24/16 */
|
||||
/* Leading */
|
||||
--leading-none: 1;
|
||||
--leading-sm: 1.25;
|
||||
--leading-md: 1.4285714286; /* 20/14 */
|
||||
--leading-lg: 1.5; /* 24/16 */
|
||||
|
||||
/* Tracking */
|
||||
--tracking-wide: 0.01em;
|
||||
/* Tracking */
|
||||
--tracking-wide: 0.01em;
|
||||
|
||||
/* Layout */
|
||||
--gutter: 32px;
|
||||
--header-height: 3.5rem; /* 56px */
|
||||
--sidebar-width: 22.25rem; /* 356px */
|
||||
--flow-space: 1rem;
|
||||
--auto-grid-placement: auto-fill;
|
||||
--gap: var(--space-lg);
|
||||
/* Layout */
|
||||
--gutter: 32px;
|
||||
--header-height: 3.5rem; /* 56px */
|
||||
--sidebar-width: 22.25rem; /* 356px */
|
||||
--flow-space: 1rem;
|
||||
--auto-grid-placement: auto-fill;
|
||||
--gap: var(--space-lg);
|
||||
|
||||
/* Borders */
|
||||
--rounded-xs: 1px;
|
||||
--rounded-sm: 4px;
|
||||
--rounded-md: 12px;
|
||||
--rounded-lg: 20px;
|
||||
--rounded-full: 9999px;
|
||||
--border-width: 1px;
|
||||
--border-color: var(--color-black);
|
||||
--border: var(--border-width) solid var(--border-color);
|
||||
|
||||
/* Prose */
|
||||
--max-width: 64ch;
|
||||
|
||||
/* Transitions */
|
||||
--timing: 200ms;
|
||||
--easing: ease;
|
||||
|
||||
/* Borders */
|
||||
--rounded-xs: 1px;
|
||||
--rounded-sm: 4px;
|
||||
--rounded-md: 12px;
|
||||
--rounded-lg: 20px;
|
||||
--rounded-full: 9999px;
|
||||
--border-width: 1px;
|
||||
--border-color: var(--color-black);
|
||||
--border: var(--border-width) solid var(--border-color);
|
||||
|
||||
/* Prose */
|
||||
--max-width: 64ch;
|
||||
|
||||
/* Transitions */
|
||||
--timing: 200ms;
|
||||
--easing: ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@ body {
|
|||
/* Main */
|
||||
main {
|
||||
position: relative;
|
||||
border-top: var(--border);
|
||||
padding-top: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -254,16 +252,7 @@ button {
|
|||
/* General interactive states */
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
outline-offset: 0;
|
||||
color: var(--color-background) !important;
|
||||
background: var(--color-text);
|
||||
}
|
||||
input:focus-visible {
|
||||
text-decoration: none;
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-background);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
/* PILL BLOCK */
|
||||
|
||||
.pill {
|
||||
--background: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -15,6 +13,7 @@
|
|||
border-radius: var(--rounded-full);
|
||||
background-color: var(--background, var(--color-primary-100));
|
||||
color: var(--color, var(--color-white));
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.pill--secondary {
|
||||
|
|
@ -22,3 +21,7 @@
|
|||
--color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
.pill[data-icon] {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* TEXT UTILITY */
|
||||
|
||||
/* Font family*/
|
||||
/* Font family */
|
||||
|
||||
.font-serif {
|
||||
font-family: var(--font-serif);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue