Update CSS

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';

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% */

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;
+  }
+}

src/assets/css/src/1.3.compositions.flex.css

@@ -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);
-}

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);
-}
+  background-color: var(--color-background);
-
+  border-radius: var(--rounded-2xl);
-.card header {
-  display: flex;
-  flex-direction: column-reverse;
 }
 
 .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);
+  bottom: var(--space-8);
-  right: var(--padding);
+  right: var(--space-8);
-}
+  background-color: var(--color-black-70);
-
+  color: var(--color-white);
-.card:hover {
+  border-radius: var(--rounded-lg);
-  background-color: var(--color-background-hover);
+  padding: var(--space-4) var(--space-12) var(--space-8);
-}
+  font-size: var(--text-sm);
+  font-weight: 500;
+}

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);
+}

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;
+}

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) }

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 {

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;
+  min-width: 3.5rem;
-  height: 3.75rem;
+  min-height: 3.5rem;
-  padding: 1.25rem;
+  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;
+  flex-direction: column;
-  --items: flex-start;
+  align-items: flex-start;
-  --wrap: no-wrap;
+  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);

src/components/inspirations/Header.vue

@@ -36,9 +36,9 @@ const frenchFormattedDate = dayjs(inspiration.date).format("MMMM YYYY");
 
 <style scoped>
 .inspiration > header {
-  --direction: column;
-  --justify: center;
   --row-gap: var(--space-8);
+  flex-direction: column;
+  justify-content: center;
   clear: both;
   height: 15rem; /* 240px */
   background: linear-gradient(to right, transparent, var(--color-white-50) 100%),