From 26b86f94f9e01bba0933ff9e6be5a5aac45aa0c0 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 21:19:06 +0200 Subject: [PATCH] Update CSS --- src/assets/css/src/0.0.reset.css | 1 + src/assets/css/src/0.2.variables.css | 136 ++++++++++++------------ src/assets/css/src/1.0.global.css | 13 +-- src/assets/css/src/2.blocks.button.css | 1 - src/assets/css/src/2.blocks.pill.css | 9 +- src/assets/css/src/3.utilities.text.css | 2 +- 6 files changed, 78 insertions(+), 84 deletions(-) diff --git a/src/assets/css/src/0.0.reset.css b/src/assets/css/src/0.0.reset.css index 3f1dae2..1f2cc47 100755 --- a/src/assets/css/src/0.0.reset.css +++ b/src/assets/css/src/0.0.reset.css @@ -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; } diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css index 9d7422e..2682489 100755 --- a/src/assets/css/src/0.2.variables.css +++ b/src/assets/css/src/0.2.variables.css @@ -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; } diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css index 2eab8d1..b41d9bd 100644 --- a/src/assets/css/src/1.0.global.css +++ b/src/assets/css/src/1.0.global.css @@ -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); + } diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css index e5157c3..b1bb6e9 100644 --- a/src/assets/css/src/2.blocks.button.css +++ b/src/assets/css/src/2.blocks.button.css @@ -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; diff --git a/src/assets/css/src/2.blocks.pill.css b/src/assets/css/src/2.blocks.pill.css index f6dad82..7d5c2fa 100644 --- a/src/assets/css/src/2.blocks.pill.css +++ b/src/assets/css/src/2.blocks.pill.css @@ -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); +} + diff --git a/src/assets/css/src/3.utilities.text.css b/src/assets/css/src/3.utilities.text.css index 93c512a..bb4b566 100644 --- a/src/assets/css/src/3.utilities.text.css +++ b/src/assets/css/src/3.utilities.text.css @@ -1,6 +1,6 @@ /* TEXT UTILITY */ -/* Font family*/ +/* Font family */ .font-serif { font-family: var(--font-serif);