From b419bccae176f2f71d0e1389477524b022f18927 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 14:30:42 +0200 Subject: [PATCH 01/15] Add CSS files to src/assets/css/src --- src/assets/css/src/0.0.reset.css | 83 ++++++ src/assets/css/src/0.1.fonts.css | 4 + src/assets/css/src/0.2.variables.css | 79 +++++ src/assets/css/src/1.0.global.css | 273 ++++++++++++++++++ .../css/src/1.1.compositions.auto-grid.css | 13 + src/assets/css/src/1.2.compositions.grid.css | 55 ++++ .../css/src/1.3.compositions.cluster.css | 11 + src/assets/css/src/2.blocks.button.css | 49 ++++ src/assets/css/src/2.blocks.card.css | 29 ++ src/assets/css/src/2.blocks.header.css | 11 + src/assets/css/src/2.blocks.menu.css | 47 +++ src/assets/css/src/2.blocks.pill.css | 24 ++ src/assets/css/src/2.blocks.skip-link.css | 34 +++ src/assets/css/src/3.utilities.border.css | 17 ++ src/assets/css/src/3.utilities.flow.css | 6 + src/assets/css/src/3.utilities.overflow.css | 5 + .../css/src/3.utilities.screen-readers.css | 13 + src/assets/css/src/3.utilities.size.css | 12 + src/assets/css/src/3.utilities.spacing.css | 84 ++++++ src/assets/css/src/3.utilities.text.css | 97 +++++++ 20 files changed, 946 insertions(+) create mode 100755 src/assets/css/src/0.0.reset.css create mode 100644 src/assets/css/src/0.1.fonts.css create mode 100755 src/assets/css/src/0.2.variables.css create mode 100644 src/assets/css/src/1.0.global.css create mode 100644 src/assets/css/src/1.1.compositions.auto-grid.css create mode 100644 src/assets/css/src/1.2.compositions.grid.css create mode 100644 src/assets/css/src/1.3.compositions.cluster.css create mode 100644 src/assets/css/src/2.blocks.button.css create mode 100644 src/assets/css/src/2.blocks.card.css create mode 100644 src/assets/css/src/2.blocks.header.css create mode 100644 src/assets/css/src/2.blocks.menu.css create mode 100644 src/assets/css/src/2.blocks.pill.css create mode 100644 src/assets/css/src/2.blocks.skip-link.css create mode 100644 src/assets/css/src/3.utilities.border.css create mode 100644 src/assets/css/src/3.utilities.flow.css create mode 100644 src/assets/css/src/3.utilities.overflow.css create mode 100644 src/assets/css/src/3.utilities.screen-readers.css create mode 100644 src/assets/css/src/3.utilities.size.css create mode 100644 src/assets/css/src/3.utilities.spacing.css create mode 100644 src/assets/css/src/3.utilities.text.css diff --git a/src/assets/css/src/0.0.reset.css b/src/assets/css/src/0.0.reset.css new file mode 100755 index 0000000..3f1dae2 --- /dev/null +++ b/src/assets/css/src/0.0.reset.css @@ -0,0 +1,83 @@ +/* RESET */ +/* Modified version of Modern CSS Reset by Piccalilli https://piccalil.li/blog/a-more-modern-css-reset/ */ + + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, h1, h2, h3, h4, p, +figure, blockquote, dl, dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; + padding: 0; + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, h2, h3, h4, +button, input, label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, h2, +h3, h4 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, button, +textarea, select { + -webkit-appareance: none; + appearance: none; + font-family: inherit; + font-size: inherit; + background: none; + border: none; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} diff --git a/src/assets/css/src/0.1.fonts.css b/src/assets/css/src/0.1.fonts.css new file mode 100644 index 0000000..9e9ac89 --- /dev/null +++ b/src/assets/css/src/0.1.fonts.css @@ -0,0 +1,4 @@ +/* FONTS */ + +/* Font sans */ +@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400..500&display=swap'); \ No newline at end of file diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css new file mode 100755 index 0000000..9d7422e --- /dev/null +++ b/src/assets/css/src/0.2.variables.css @@ -0,0 +1,79 @@ +/* CSS VARIABLES */ + +: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"; + + /* 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); + + /* 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 */ + + /* 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; + + /* 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; +} diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css new file mode 100644 index 0000000..2eab8d1 --- /dev/null +++ b/src/assets/css/src/1.0.global.css @@ -0,0 +1,273 @@ +/* GLOBAL CSS */ + +html { + font-size: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +body { + font: var(--text-md)/var(--leading-md) var(--font-sans); + letter-spacing: var(--tracking-wide); + text-rendering: optimizeSpeed; + font-variant-ligatures: common-ligatures; + -moz-font-feature-settings: "liga", "clig"; + -webkit-font-feature-settings: "liga", "clig"; + font-feature-settings: "liga", "clig"; + background-color: var(--color-grey-50); + color: var(--color-text, black); + padding: 2rem var(--gutter); +} + +/* If an element is [hidden] it needs to be max priority */ +.hidden, [hidden] { + display: none !important; +} + + +/* Disabled state */ +.disabled, [disabled] { + opacity: var(--alpha); +} + +/* Placeholder */ +::placeholder { + font: inherit; + color: rgba(0, 0, 0, .54); +} + + +/* Main */ +main { + position: relative; + border-top: var(--border); + padding-top: var(--space-md); +} + + +/* Headings */ + +h1, h2, h3, h4, h5, h6 { + font-size: var(--text-md); + font-weight: 400; + text-wrap: balance; + position: relative; +} + +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; + border-bottom: none; +} + +*:not(.sr-only) + h2, +*:not(.sr-only) + h3 { + margin-top: var(--space-xs); +} + + +/* General typesetting */ + +p { + max-width: 40em; +} + + +/* Lists */ + +ul:not([class]), +ol:not([class]) { + list-style: none; + padding-left: 0; +} + + +/* Blockquotes */ + +blockquote { + padding-left: 0; +} +blockquote > * { + padding-left: var(--space-md); +} + + +/* Separators */ + +hr { + border: none; + border-top: var(--border); + margin-inline: 0; +} + +hr, +hr + * { + --flow-space: var(--space-xs); +} + +/* Sub and sup */ +sub, +sup { + font-size: 0.75em; +} + +sub { + vertical-align: sub; +} + +sup { + vertical-align: middle; + position: relative; + top: -1ex; +} + + +/* Details */ + +summary { + -webkit-appearance: none; + list-style: none; + cursor: pointer; + width: fit-content; + display: flex; + -webkit-user-select: none; + user-select: none; +} +summary::-webkit-details-marker, +summary::marker { + display: none; + content: ""; +} +summary::before { + content: '+'; + margin-right: var(--space); +} +summary + p { + margin-top: 0; +} +summary + .gallery, +summary + figure { + margin-top: .5em; +} +details > *:last-child { + margin-bottom: var(--space-xs); +} +details[open] > summary::before { + content: '−'; +} + + +/* Media */ + +figure { + width: fit-content; + height: fit-content; +} +figcaption { + font-size: var(--text-md); + margin: .16666667em 0; + position: relative; +} +figcaption::before { + float: right; + margin-left: var(--gap); +} +figure + p { + margin-top: var(--space-xs); +} + +video { + background-color: var(--color-gray); + max-width: 100%; + border-radius: var(--rounded-md); +} + +/* Selects images that are likely to have a transparent BG and applies a */ +/* theme-driven mask to them */ +img[src$='.svg'], +img[src$='.png'] { + background-color: transparent; +} +img { + object-fit: cover; + background-size: cover; + background-repeat: no-repeat; +} +[data-ratio="auto"] img { + height: auto; +} + +/* Links */ + +a { + color: inherit; + text-decoration: none; +} +a:visited { + color: currentColor; +} +a:hover { + color: currentColor; +} + +a.link-full::after { + content: ''; + display: block; + position: absolute; + inset: 0; + z-index: 1; + transition: outline var(--timing) var(--easing); +} +a.link-full:focus-visible { + outline-width: 0; +} +a.link-full:focus-visible::after { + outline: none; + outline-offset: 2px; + text-decoration: underline; +} + + +/* Form, Input, Buttons */ + +form { + display: flex; + gap: var(--space-xs); +} +input { + font: inherit; + max-height: 1.125rem; /* 18px */ +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} +button { + cursor: pointer; +} + +/* 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); +} + + +/* High contrast selection style */ +::selection { + background: var(--color-grey); +} diff --git a/src/assets/css/src/1.1.compositions.auto-grid.css b/src/assets/css/src/1.1.compositions.auto-grid.css new file mode 100644 index 0000000..cdd58f6 --- /dev/null +++ b/src/assets/css/src/1.1.compositions.auto-grid.css @@ -0,0 +1,13 @@ +/* AUTO-GRID COMPOSITION */ + +.auto-grid { + --column-gap: var(--gap); + --row-gap: var(--gap); + display: grid; + grid-template-columns: repeat( + var(--auto-grid-placement, auto-fill), + minmax(var(--min, 50%), 1fr) + ); + grid-gap: var(--row-gap) var(--column-gap); + gap: var(--row-gap) var(--column-gap); +} diff --git a/src/assets/css/src/1.2.compositions.grid.css b/src/assets/css/src/1.2.compositions.grid.css new file mode 100644 index 0000000..8b7261e --- /dev/null +++ b/src/assets/css/src/1.2.compositions.grid.css @@ -0,0 +1,55 @@ +/* LAYOUT GRID */ + +.grid { + --gap: var(--gutter); + --column-gap: var(--gap); + --row-gap: var(--gap); + display: -ms-grid; + display: grid; + grid-gap: var(--column-gap) var(--row-gap); + gap: var(--column-gap) var(--row-gap); + grid-template-columns: 1fr; + position: relative; + width: 100%; +} + +.grid > .column { + margin-bottom: var(--gap); + display: flex; + flex-direction: column; + justify-content: var(--justify-content, flex-start); + align-items: var(--align-items, baseline); +} + +@media (min-width: 35rem) { /* >= 560px */ + + .grid { + -ms-grid-columns: repeat(6, 1fr); + grid-template-columns: repeat(6, 1fr); + } + + .grid > .column { + -ms-grid-column: span 6; + grid-column: span 6; + } + + .grid > .column[style*="--columns:3"] { + -ms-grid-column: span 3; + grid-column: span 3; + } + +} + +@media (min-width: 67.5rem) { /* >= 1080px */ + + .grid { + -ms-grid-columns: repeat(12, 1fr); + grid-template-columns: repeat(12, 1fr); + } + + .grid > .column { + -ms-grid-column: span var(--columns); + grid-column: span var(--columns); + } + +} \ No newline at end of file diff --git a/src/assets/css/src/1.3.compositions.cluster.css b/src/assets/css/src/1.3.compositions.cluster.css new file mode 100644 index 0000000..37d62ff --- /dev/null +++ b/src/assets/css/src/1.3.compositions.cluster.css @@ -0,0 +1,11 @@ +/* CLUSTER COMPOSITION */ + +.cluster { + display: flex; + flex-direction: var(--direction, row); + flex-wrap: var(--wrap, wrap); + align-items: var(--vertical-alignment, center); + justify-content: var(--horizontal-alignment, flex-start); + column-gap: var(--column-gap, var(--gutter, var(--space-sm))); + row-gap: var(--row-gap, var(--gutter, var(--space-sm))); +} diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css new file mode 100644 index 0000000..e5157c3 --- /dev/null +++ b/src/assets/css/src/2.blocks.button.css @@ -0,0 +1,49 @@ +/* BUTTON BLOCK */ + +.btn { + --background: var(--color-primary-100); + --color: var(--color-white); + 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; + font-size: var(--text-md); + line-height: var(--leading-md); + font-weight: 500; + border-radius: var(--rounded-md); + cursor: pointer; + background-color: var(--background, var(--color-primary-100)); + color: var(--color, var(--color-white)); +} + +.btn--secondary { + --background: var(--color-primary-10); + --color: var(--color-primary-100); +} +.btn--black { + --background: var(--color-black); + --color: var(--color-white); +} +.btn--white { + --background: var(--color-white); + --color: var(--color-grey-700); +} +.btn--white-10 { + --background: var(--color-white-10); + --color: var(--color-white); +} + +@media (hover: hover) { + +} + +.btn:focus-visible { + +} + +.btn:active { + +} diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css new file mode 100644 index 0000000..2dfa031 --- /dev/null +++ b/src/assets/css/src/2.blocks.card.css @@ -0,0 +1,29 @@ +/* CARD BLOCK */ + +.card { + --padding: clamp(1.5rem, 0.5rem + 5vw, 5rem); + display: flex; + flex-direction: column; + position: relative; + padding: var(--padding); +} + +.card header { + display: flex; + flex-direction: column-reverse; +} + +.card__title > a { + font: inherit; + color: currentColor; +} + +.card__date { + position: absolute; + bottom: var(--padding); + right: var(--padding); +} + +.card:hover { + background-color: var(--color-background-hover); +} diff --git a/src/assets/css/src/2.blocks.header.css b/src/assets/css/src/2.blocks.header.css new file mode 100644 index 0000000..2f5d61b --- /dev/null +++ b/src/assets/css/src/2.blocks.header.css @@ -0,0 +1,11 @@ +/* HEADER BLOCK */ + +.header { + display: flex; + flex-direction: column; + align-items: flex-start; + min-height: var(--header-height); + padding: 0 var(--gutter); + margin-bottom: var(--space-xl); +} + diff --git a/src/assets/css/src/2.blocks.menu.css b/src/assets/css/src/2.blocks.menu.css new file mode 100644 index 0000000..b208627 --- /dev/null +++ b/src/assets/css/src/2.blocks.menu.css @@ -0,0 +1,47 @@ +/* MENU BLOCK */ + +/* Button */ + +button[aria-controls="menu"] { + padding: 10px; +} +button[aria-controls="menu"][aria-expanded="true"] { + padding: 18px; +} +button[aria-controls="menu"][aria-expanded="false"] svg { + transform: rotate(180deg); +} + + +/* Menu */ + +#menu { + --flow-space: var(--space-2xl); + --direction: column; + --vertical-alignment: flex-start; + padding: var(--gap); + background: var(--color-background); +} + +#menu nav { + width: 100%; +} + +.menu ul { + --direction: column; + --vertical-alignment: flex-start; + --row-gap: var(--space-xs); + width: 100%; +} + +#menu li { + display: flex; + width: 100%; + min-height: 2.5rem; /* 40px */ + max-height: 2.75rem; /* 44px */ + padding: var(--space-md) var(--space-lg); +} + +#menu .active { + background-color: var(--color-grey-50); +} \ No newline at end of file diff --git a/src/assets/css/src/2.blocks.pill.css b/src/assets/css/src/2.blocks.pill.css new file mode 100644 index 0000000..f6dad82 --- /dev/null +++ b/src/assets/css/src/2.blocks.pill.css @@ -0,0 +1,24 @@ +/* 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; + padding: var(--space-xs) var(--space-md); + text-align: center; + text-decoration: none; + font-size: var(--text-md); + font-weight: 500; + border-radius: var(--rounded-full); + background-color: var(--background, var(--color-primary-100)); + color: var(--color, var(--color-white)); +} + +.pill--secondary { + --background: var(--color-primary-10); + --color: var(--color-primary-100); +} + diff --git a/src/assets/css/src/2.blocks.skip-link.css b/src/assets/css/src/2.blocks.skip-link.css new file mode 100644 index 0000000..4d0546e --- /dev/null +++ b/src/assets/css/src/2.blocks.skip-link.css @@ -0,0 +1,34 @@ +/* SKIP-LINK BLOCK */ + +/* The skip link is visually hidden when it is not focused. */ +/* It exists so when a user hits tab on load, they can quickly */ +/* skip to the main content of the site—avoiding navigation etc */ +.skip-link { + z-index: 9999; + display: inline-block; + width: max-content; + max-width: 10rem; + right: var(--gutter); + width: auto; + line-height: 1; + position: absolute; +} + +.skip-link:focus, +.skip-link:focus-visible { + background: var(--color-text); + color: var(--color-background) !important; +} + +.skip-link:not(:focus) { + /* @extend .visually-hidden */ + border: 0; + clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/src/assets/css/src/3.utilities.border.css b/src/assets/css/src/3.utilities.border.css new file mode 100644 index 0000000..a48c24e --- /dev/null +++ b/src/assets/css/src/3.utilities.border.css @@ -0,0 +1,17 @@ +/* BORDER UTILITY */ + +/* Borders */ + +.border-t { border-top: var(--border) } +.border-b { border-bottom: var(--border) } +.border-l { border-left: var(--border) } +.border-r { border-right: var(--border) } +.border { border: var(--border) } + +/* Border radius */ + +.rounded-xs { border-radius: var(--rounded-xs) } +.rounded-sm { border-radius: var(--rounded-sm) } +.rounded-md { border-radius: var(--rounded-md) } +.rounded-lg { border-radius: var(--rounded-lg) } +.rounded-full { border-radius: var(--rounded-gull) } \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.flow.css b/src/assets/css/src/3.utilities.flow.css new file mode 100644 index 0000000..1d0b412 --- /dev/null +++ b/src/assets/css/src/3.utilities.flow.css @@ -0,0 +1,6 @@ +/* FLOW UTILITY */ +/* Info: https://web.dev/design-system/css-utilities/#flow */ + +.flow > * + * { + margin-top: var(--flow-space); +} diff --git a/src/assets/css/src/3.utilities.overflow.css b/src/assets/css/src/3.utilities.overflow.css new file mode 100644 index 0000000..03f663d --- /dev/null +++ b/src/assets/css/src/3.utilities.overflow.css @@ -0,0 +1,5 @@ +/* OVERFLOW UTILITY */ + +.overflow-y-hidden { + overflow-y: hidden !important; +} diff --git a/src/assets/css/src/3.utilities.screen-readers.css b/src/assets/css/src/3.utilities.screen-readers.css new file mode 100644 index 0000000..91ff54c --- /dev/null +++ b/src/assets/css/src/3.utilities.screen-readers.css @@ -0,0 +1,13 @@ +/* SCREEN READERS */ + +.sr-only { + border: 0; + clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/src/assets/css/src/3.utilities.size.css b/src/assets/css/src/3.utilities.size.css new file mode 100644 index 0000000..c7c506e --- /dev/null +++ b/src/assets/css/src/3.utilities.size.css @@ -0,0 +1,12 @@ +/* SIZE UTILITY */ + +.h-full { + height: 100%; +} +.min-h-screen { + min-height: 100vh; + min-height: 100dvh; +} +.w-full { + width: 100%; +} diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css new file mode 100644 index 0000000..3940817 --- /dev/null +++ b/src/assets/css/src/3.utilities.spacing.css @@ -0,0 +1,84 @@ +/* SPACING UTILITY */ + +/* Margins */ + +.m-0 { margin: 0 } + +.mb-0 { margin-bottom: 0 } +.mb-xs { margin-bottom: var(--space-xs) } +.mb-sm { margin-bottom: var(--space-sm) } +.mb-md { margin-bottom: var(--space-md) } +.mb-lg { margin-bottom: var(--space-lg) } +.mb-xl { margin-bottom: var(--space-xl) } +.mb-2xl { margin-bottom: var(--space-2xl) } + +.ml-auto { margin-left: auto } +.ml-xs { margin-left: var(--space-xs) } +.ml-sm { margin-left: var(--space-sm) } +.ml-md { margin-left: var(--space-md) } +.ml-lg { margin-left: var(--space-lg) } +.ml-xl { margin-left: var(--space-xl) } + +.mr-auto { margin-right: auto } +.mr-xs { margin-right: var(--space-xs) } +.mr-sm { margin-right: var(--space-sm) } +.mr-md { margin-right: var(--space-md) } +.mr-lg { margin-right: var(--space-lg) } +.mr-xl { margin-right: var(--space-xl) } + +.-mt-px { margin-top: -1px } +.mt-0 { margin-top: 0 } +.mt-xs { margin-top: var(--space-xs) } +.mt-sm { margin-top: var(--space-sm) } +.mt-md { margin-top: var(--space-md) } +.mt-lg { margin-top: var(--space-lg) } +.mt-xl { margin-top: var(--space-xl) } +.mt-2xl { margin-top: var(--space-2xl) } + +.mx-px { margin-left: 1px ; margin-right: 1px } +.mx-xs { margin-left: var(--space-xs) ; margin-right: var(--space-xs) } +.mx-sm { margin-left: var(--space-sm) ; margin-right: var(--space-sm) } +.mx-md { margin-left: var(--space-md) ; margin-right: var(--space-md) } +.mx-lg { margin-left: var(--space-lg) ; margin-right: var(--space-lg) } +.mx-xl { margin-left: var(--space-xl) ; margin-right: var(--space-xl) } +.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl) } + +.my-xs { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs) } +.my-sm { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm) } +.my-md { margin-top: var(--space-md) ; margin-bottom: var(--space-md) } +.my-lg { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg) } +.my-xl { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl) } +.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) } + + +/* Padding */ + +.pl-0 { padding-left: 0 } + +.pt-xs { padding-top: var(--space-xs) } +.pt-sm { padding-top: var(--space-sm) } +.pt-md { padding-top: var(--space-md) } +.pt-lg { padding-top: var(--space-lg) } +.pt-xl { padding-top: var(--space-xl) } +.pt-2xl { padding-top: var(--space-2xl) } + +.pb-xs { padding-bottom: var(--space-xs) } +.pb-sm { padding-bottom: var(--space-sm) } +.pb-md { padding-bottom: var(--space-md) } +.pb-lg { padding-bottom: var(--space-lg) } +.pb-xl { padding-bottom: var(--space-xl) } +.pb-2xl { padding-bottom: var(--space-2xl) } + +.px-xs { padding-left: var(--space-xs) ; padding-right: var(--space-xs) } +.px-sm { padding-left: var(--space-sm) ; padding-right: var(--space-sm) } +.px-md { padding-left: var(--space-md) ; padding-right: var(--space-md) } +.px-lg { padding-left: var(--space-lg) ; padding-right: var(--space-lg) } +.px-xl { padding-left: var(--space-xl) ; padding-right: var(--space-xl) } +.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) } + +.py-xs { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs) } +.py-sm { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm) } +.py-md { padding-top: var(--space-md) ; padding-bottom: var(--space-md) } +.py-lg { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg) } +.py-xl { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl) } +.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) } diff --git a/src/assets/css/src/3.utilities.text.css b/src/assets/css/src/3.utilities.text.css new file mode 100644 index 0000000..93c512a --- /dev/null +++ b/src/assets/css/src/3.utilities.text.css @@ -0,0 +1,97 @@ +/* TEXT UTILITY */ + +/* Font family*/ + +.font-serif { + font-family: var(--font-serif); + font-optical-sizing: auto; + font-style: normal; +} + + +/* Fonts weights */ + +.font-normal { + font-weight: 400; +} +.font-medium { + font-weight: 500; +} + + +/* Font sizes */ + +.text-sm { + font-size: 1rem; + font-size: var(--text-sm); + line-height: 1.5; /* 24px */ +} +.text-md { + font-size: var(--text-md); + line-height: 1.4285714286; /* 20px */ +} +.text-lg { + font-size: var(--text-lg); + line-height: 1.5; /* 24px */ +} +.text-xl { + font-size: var(--text-xl); + line-height: 1.111; +} + + +/* Case */ + +.uppercase { + font-style: normal; + font-weight: 400; + line-height: 1.333; + letter-spacing: 0.3rem; + text-transform: uppercase; +} + + +/* Text align */ + +.text-right { text-align: right } +.text-center { text-align: center } + + + +/* Text colors */ + +.text-white { + color: var(--color-white); +} +.text-grey-200 { + color: var(--color-grey-200); +} +.text-grey-400 { + color: var(--color-grey-400); +} +.text-grey-700 { + color: var(--color-grey-700); +} +.text-background { + color: var(--color-background); +} +.text-transparent { + color: transparent; +} +.text-brand-100 { + color: var(--color-brand-100); +} + + +/* User select */ + +.select-none { + user-select: none; +} + + +/* Underline */ + +.underline { + text-decoration: underline; +} \ No newline at end of file From 3f7f5cc956900cbeda30bc782e0c89516c74fd8c Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 14:31:14 +0200 Subject: [PATCH 02/15] Rename style.css to index.css --- src/assets/css/index.css | 30 ++++++++++++++++++++++++++++++ src/assets/css/style.css | 0 src/main.js | 2 +- 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 src/assets/css/index.css delete mode 100644 src/assets/css/style.css diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 0000000..ed331ad --- /dev/null +++ b/src/assets/css/index.css @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +@import 'src/0.0.reset.css'; +@import 'src/0.1.fonts.css'; +@import 'src/0.2.variables.css'; + +/* GLOBAL CSS */ +@import 'src/1.0.global.css'; + +/* COMPOSITIONS */ +@import 'src/1.1.compositions.auto-grid.css'; +@import 'src/1.2.compositions.grid.css'; +@import 'src/1.3.compositions.cluster.css'; + +/* BLOCKS */ +@import 'src/2.blocks.button.css'; +@import 'src/2.blocks.card.css'; +@import 'src/2.blocks.header.css'; +@import 'src/2.blocks.menu.css'; +@import 'src/2.blocks.pill.css'; +@import 'src/2.blocks.skip-link.css'; + +/* UTILITY CLASSES */ +@import 'src/3.utilities.border.css'; +@import 'src/3.utilities.flow.css'; +@import 'src/3.utilities.overflow.css'; +@import 'src/3.utilities.screen-readers.css'; +@import 'src/3.utilities.size.css'; +@import 'src/3.utilities.spacing.css'; +@import 'src/3.utilities.text.css'; diff --git a/src/assets/css/style.css b/src/assets/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/main.js b/src/main.js index 84c8a88..eb8ba21 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ import { createApp } from "vue"; -import "./assets/css/style.css"; +import "./assets/css/index.css"; import App from "./App.vue"; import { createPinia } from "pinia"; From cd630deaf4ac52b1c48f946e831cb71724ec05be Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 14:31:50 +0200 Subject: [PATCH 03/15] Add Menu component --- src/components/Menu.vue | 35 +++++++++++++++++++++++++++++++++++ src/views/Home.vue | 7 ++++++- 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/components/Menu.vue diff --git a/src/components/Menu.vue b/src/components/Menu.vue new file mode 100644 index 0000000..f7d9681 --- /dev/null +++ b/src/components/Menu.vue @@ -0,0 +1,35 @@ + + \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue index 0e3188a..41fd2ca 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,7 +1,12 @@ \ No newline at end of file From 26b86f94f9e01bba0933ff9e6be5a5aac45aa0c0 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 21:19:06 +0200 Subject: [PATCH 06/15] 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); From a97942ace2641473060e3f74ef6bde68811b3e45 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Mon, 2 Sep 2024 21:20:48 +0200 Subject: [PATCH 07/15] Update Home.vue: add with-sidebar container, add tabs and project items templates and style --- src/views/Home.vue | 278 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 274 insertions(+), 4 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 41fd2ca..fe0581d 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,10 +1,280 @@ + + +