diff --git a/src/assets/css/index.css b/src/assets/css/index.css index f233e58..d11b303 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -10,7 +10,7 @@ /* COMPOSITIONS */ @import 'src/1.1.compositions.auto-grid.css'; @import 'src/1.2.compositions.grid.css'; -@import 'src/1.3.compositions.flex.css'; +@import 'src/1.3.compositions.flex-columns.css'; @import 'src/1.4.compositions.with-sidebar.css'; /* BLOCKS */ @@ -22,6 +22,8 @@ /* UTILITY CLASSES */ @import 'src/3.utilities.border.css'; +@import 'src/3.utilities.colors.css'; +@import 'src/3.utilities.flex.css'; @import 'src/3.utilities.flow.css'; @import 'src/3.utilities.icons.css'; @import 'src/3.utilities.overflow.css'; diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css index 52299c4..e30b1b0 100755 --- a/src/assets/css/src/0.2.variables.css +++ b/src/assets/css/src/0.2.variables.css @@ -19,6 +19,7 @@ --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */ --color-black-20: hsla(0, 0%, 10%, .2); /* Black 20 */ + --color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */ --color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */ --color-black: var(--color-black-100); /* Black */ --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */ diff --git a/src/assets/css/src/1.3.compositions.flex-columns.css b/src/assets/css/src/1.3.compositions.flex-columns.css new file mode 100644 index 0000000..5ecdfcb --- /dev/null +++ b/src/assets/css/src/1.3.compositions.flex-columns.css @@ -0,0 +1,17 @@ +/* FLEX-COLUMNS COMPOSITION */ + +.flex-columns { + display: flex; + flex-direction: column; + margin-right: -1px; + gap: var(--gutter); +} + +@media (min-width: 60rem) { /* >= 960px */ + .flex-columns { + flex-direction: row; + } + .flex-columns > * { + flex-grow: 1; + } +} diff --git a/src/assets/css/src/1.3.compositions.flex.css b/src/assets/css/src/1.3.compositions.flex.css deleted file mode 100644 index d2c9e82..0000000 --- a/src/assets/css/src/1.3.compositions.flex.css +++ /dev/null @@ -1,17 +0,0 @@ -/* FLEX COMPOSITION */ - -.flex { - display: flex; - flex-direction: var(--direction, row); - flex-wrap: var(--wrap, wrap); - align-items: var(--items, center); - justify-content: var(--justify, flex-start); - column-gap: var(--column-gap, var(--gutter, var(--space-8))); - row-gap: var(--row-gap, var(--gutter, var(--space-8))); -} - -.flex-col { - --direction: column; - --justify: center; - --row-gap: var(--space-16); -} diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css index 2dfa031..b99aae7 100644 --- a/src/assets/css/src/2.blocks.card.css +++ b/src/assets/css/src/2.blocks.card.css @@ -1,16 +1,13 @@ /* CARD BLOCK */ .card { - --padding: clamp(1.5rem, 0.5rem + 5vw, 5rem); + --padding: var(--space-16); display: flex; flex-direction: column; position: relative; padding: var(--padding); -} - -.card header { - display: flex; - flex-direction: column-reverse; + background-color: var(--color-background); + border-radius: var(--rounded-2xl); } .card__title > a { @@ -18,12 +15,23 @@ color: currentColor; } -.card__date { +.card__images { + position: relative; + width: 100%; + border: 4px solid var(--color-grey-50); + border-radius: var(--rounded-2xl); + overflow: hidden; + margin: var(--space-16) 0; +} +.card__images::after { + content: '+'attr(data-count); position: absolute; - bottom: var(--padding); - right: var(--padding); -} - -.card:hover { - background-color: var(--color-background-hover); -} + bottom: var(--space-8); + right: var(--space-8); + background-color: var(--color-black-70); + color: var(--color-white); + border-radius: var(--rounded-lg); + padding: var(--space-4) var(--space-12) var(--space-8); + font-size: var(--text-sm); + font-weight: 500; +} \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.colors.css b/src/assets/css/src/3.utilities.colors.css new file mode 100644 index 0000000..ee0d033 --- /dev/null +++ b/src/assets/css/src/3.utilities.colors.css @@ -0,0 +1,42 @@ +/* COLORS UTILITY */ + +/* 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); +} +.text-primary-100, +.text-primary { + color: var(--color-primary); +} + + +/* Background colors */ + +.bg-white-100, +.bg-white { + background-color: var(--color-white, white); +} + +.bg-primary-100, +.bg-primary { + background-color: var(--color-primary); +} diff --git a/src/assets/css/src/3.utilities.flex.css b/src/assets/css/src/3.utilities.flex.css new file mode 100644 index 0000000..b9f6dff --- /dev/null +++ b/src/assets/css/src/3.utilities.flex.css @@ -0,0 +1,30 @@ +/* FLEX COMPOSITION */ + +.flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + column-gap: var(--column-gap, var(--gutter, var(--space-8))); + row-gap: var(--row-gap, var(--gutter, var(--space-8))); +} + +.flex-col, +.flex-col-reverse { + flex-direction: column; + flex-wrap: no-wrap; + justify-content: center; + --row-gap: var(--space-16); +} + +.flex-col-reverse { + flex-direction: column-reverse; +} + +.order-first { + order: -9999; +} +.order-last { + order: 9999; +} \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css index decd625..ed72ebf 100644 --- a/src/assets/css/src/3.utilities.spacing.css +++ b/src/assets/css/src/3.utilities.spacing.css @@ -53,7 +53,7 @@ /* Padding */ -.pl-0 { padding-left: 0 } +.pl-0 { padding-left: 0 } .pt-4 { padding-top: var(--space-4) } .pt-8 { padding-top: var(--space-8) } @@ -82,3 +82,10 @@ .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16) } .py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24) } .py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32) } + +.p-4 { padding: var(--space-4) } +.p-8 { padding: var(--space-8) } +.p-12 { padding: var(--space-12) } +.p-16 { padding: var(--space-16) } +.p-24 { padding: var(--space-24) } +.p-32 { padding: var(--space-32) } diff --git a/src/assets/css/src/3.utilities.text.css b/src/assets/css/src/3.utilities.text.css index 2909cbc..b3201c1 100644 --- a/src/assets/css/src/3.utilities.text.css +++ b/src/assets/css/src/3.utilities.text.css @@ -52,32 +52,6 @@ .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 { diff --git a/src/components/Menu.vue b/src/components/Menu.vue index aa052eb..c494f85 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -144,9 +144,9 @@ button[aria-controls="menu"][aria-expanded="true"] { transform: translateX(calc(var(--sidebar-width) - 100% - 1rem)); } button[aria-controls="menu"][aria-expanded="false"] { - width: 3.75rem; - height: 3.75rem; - padding: 1.25rem; + min-width: 3.5rem; + min-height: 3.5rem; + padding: 1.125rem; transform: rotate(180deg); } @@ -154,9 +154,9 @@ button[aria-controls="menu"][aria-expanded="false"] { #menu { --flow-space: var(--space-32); - --direction: column; - --items: flex-start; - --wrap: no-wrap; + flex-direction: column; + align-items: flex-start; + flex-wrap: no-wrap; position: -webkit-sticky; position: sticky; top: var(--gutter); @@ -173,7 +173,7 @@ button[aria-controls="menu"][aria-expanded="false"] { } #menu header { - --justify: center; + align-items: center; padding-left: var(--gap); min-height: var(--space-40); font-family: var(--font-serif); diff --git a/src/components/inspirations/Header.vue b/src/components/inspirations/Header.vue index a551d83..dde2203 100644 --- a/src/components/inspirations/Header.vue +++ b/src/components/inspirations/Header.vue @@ -36,9 +36,9 @@ const frenchFormattedDate = dayjs(inspiration.date).format("MMMM YYYY");