personal-page/src/assets/style/utils.css
2023-08-20 12:58:53 -04:00

99 lines
1.3 KiB
CSS

:root {
--prj-spacing-1: 0.25rem;
--prj-spacing-2: 0.5rem;
--prj-spacing-3: 1rem;
--prj-spacing-4: 2rem;
--prj-spacing-5: 3rem;
}
.hstack {
--prj-gap: var(--prj-spacing-3);
display: flex;
gap: var(--prj-gap);
align-items: center;
}
.grid {
--prj-gap: var(--prj-spacing-3);
--prj-columns: repeat(3, 1fr);
display: grid;
grid-template-columns: var(--prj-columns);
gap: var(--prj-gap);
}
.grid-cols-1 {
--prj-columns: repeat(1, 1fr);
}
.grid-cols-2 {
--prj-columns: repeat(2, 1fr);
}
.grid-cols-3 {
--prj-columns: repeat(3, 1fr);
}
.grid-cols-4 {
--prj-columns: repeat(4, 1fr);
}
.grid-cols-5 {
--prj-columns: repeat(5, 1fr);
}
.grid-cols-6 {
--prj-columns: repeat(6, 1fr);
}
.grid-cols-7 {
--prj-columns: repeat(7, 1fr);
}
.grid-cols-8 {
--prj-columns: repeat(8, 1fr);
}
.grid-cols-9 {
--prj-columns: repeat(9, 1fr);
}
.grid-cols-10 {
--prj-columns: repeat(10, 1fr);
}
.grid-cols-11 {
--prj-columns: repeat(11, 1fr);
}
.grid-cols-12 {
--prj-columns: repeat(12, 1fr);
}
.gap-1 {
--prj-gap: var(--prj-spacing-1);
}
.gap-2 {
--prj-gap: var(--prj-spacing-2);
}
.gap-3 {
--prj-gap: var(--prj-spacing-3);
}
.gap-4 {
--prj-gap: var(--prj-spacing-4);
}
.gap-5 {
--prj-gap: var(--prj-spacing-5);
}
.list-unstyle {
list-style: none;
}
.text-justify {
text-align: justify;
text-justify: inter-word;
}