alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

update cards style

Browse source
This commit is contained in:
Alexander Navarro 2023-08-27 12:54:35 -04:00
parent 525d4de3cd
commit 5bde1eb8d3
4 changed files with 164 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/assets/style/themes.css
View file

@ -4,10 +4,20 @@
/* Variables prefixed with prj to avoid collisions */
:root {
/* Using catppuccin for now, make a theme switcher later */
--prj-bg: var(--ctp-macchiato-base);
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
--prj-bg: var(--ctp-macchiato-mantle);
--prj-text: var(--ctp-macchiato-text);
--prj-surface-1: var(--ctp-macchiato-base);
--prj-surface-2: var(--ctp-macchiato-surface0);
--prj-surface-3: var(--ctp-macchiato-surface1);
--prj-surface-text: var(--ctp-macchiato-text);
--prj-link-text: var(--ctp-macchiato-teal);
--prj-accent-bg: var(--ctp-macchiato-teal);
--prj-accent-text: var(--ctp-macchiato-base);
--prj-primary: var(--ctp-macchiato-teal);
--prj-primary-text: var(--ctp-macchiato-base);
}

118
src/assets/style/utils.css
View file

@ -13,6 +13,16 @@
align-items: center;
}
.vstack {
--prj-gap: var(--prj-spacing-3);
display: flex;
flex-direction: column;
}
.flex-grow {
flex-grow: 1;
}
.grid {
--prj-gap: var(--prj-spacing-3);
--prj-columns: repeat(3, 1fr);
@ -109,3 +119,111 @@
.text-end {
text-align: end;
}
/* Start Margins */
.m-1 {
margin: var(--prj-spacing-1);
}
.m-2 {
margin: var(--prj-spacing-2);
}
.m-3 {
margin: var(--prj-spacing-3);
}
.m-4 {
margin: var(--prj-spacing-4);
}
.m-5 {
margin: var(--prj-spacing-5);
}
.mx-1 {
margin-right: var(--prj-spacing-1) 0;
}
.mx-2 {
margin-right: var(--prj-spacing-2) 0;
}
.mx-3 {
margin-right: var(--prj-spacing-3) 0;
}
.mx-4 {
margin-right: var(--prj-spacing-4) 0;
}
.mx-5 {
margin-right: var(--prj-spacing-5) 0;
}
.my-1 {
margin-right: 0 var(--prj-spacing-1);
}
.my-2 {
margin-right: 0 var(--prj-spacing-2);
}
.my-3 {
margin-right: 0 var(--prj-spacing-3);
}
.my-4 {
margin-right: 0 var(--prj-spacing-4);
}
.my-5 {
margin-right: 0 var(--prj-spacing-5);
}
.mt-1 {
margin-top: var(--prj-spacing-1);
}
.mt-2 {
margin-top: var(--prj-spacing-2);
}
.mt-3 {
margin-top: var(--prj-spacing-3);
}
.mt-4 {
margin-top: var(--prj-spacing-4);
}
.mt-5 {
margin-top: var(--prj-spacing-5);
}
.mb-1 {
margin-bottom: var(--prj-spacing-1);
}
.mb-2 {
margin-bottom: var(--prj-spacing-2);
}
.mb-3 {
margin-bottom: var(--prj-spacing-3);
}
.mb-4 {
margin-bottom: var(--prj-spacing-4);
}
.mb-5 {
margin-bottom: var(--prj-spacing-5);
}
.ml-1 {
margin-left: var(--prj-spacing-1);
}
.ml-2 {
margin-left: var(--prj-spacing-2);
}
.ml-3 {
margin-left: var(--prj-spacing-3);
}
.ml-4 {
margin-left: var(--prj-spacing-4);
}
.ml-5 {
margin-left: var(--prj-spacing-5);
}
.mr-1 {
margin-right: var(--prj-spacing-1);
}
.mr-2 {
margin-right: var(--prj-spacing-2);
}
.mr-3 {
margin-right: var(--prj-spacing-3);
}
.mr-4 {
margin-right: var(--prj-spacing-4);
}
.mr-5 {
margin-right: var(--prj-spacing-5);
}
/* End Margins */