studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS

Browse source
This commit is contained in:
Timothée Goguely 2024-09-17 17:23:39 +02:00
parent 40692b1cf3
commit a7caa79d47
11 changed files with 132 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/assets/css/index.css
View file

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

1
src/assets/css/src/0.2.variables.css
View file

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

17
src/assets/css/src/1.3.compositions.flex-columns.css Normal file
View file

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

17
src/assets/css/src/1.3.compositions.flex.css
View file

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

36
src/assets/css/src/2.blocks.card.css
View file

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

42
src/assets/css/src/3.utilities.colors.css Normal file
View file

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

30
src/assets/css/src/3.utilities.flex.css Normal file
View file

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

9
src/assets/css/src/3.utilities.spacing.css
View file

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

26
src/assets/css/src/3.utilities.text.css
View file

@ -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 {

14
src/components/Menu.vue
View file

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

4
src/components/inspirations/Header.vue
View file

@ -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%),