From daa5eb27b6731eb846defed0736ffd4698ec2b4c Mon Sep 17 00:00:00 2001 From: aleidk Date: Wed, 13 Mar 2024 11:45:24 -0300 Subject: [PATCH] refactor(Style): add SASS to reduce style repetition - Use list, maps and loops to reduce code duplication with small variations - Use SASS functions for some extreme cases - Keep native CSS variables to allow overriding/reference in other styles refactor(Style): change css theme variables to SASS add sass files from catppuccin to the project instead of importing it from NPM refactor(Style): use SASS functions to reduce code boilerplate --- package.json | 1 + pnpm-lock.yaml | 30 +- src/assets/style/_utils.scss | 256 +++++++ src/assets/style/_variables.scss | 67 ++ src/assets/style/{global.css => style.scss} | 42 +- src/assets/style/themes.css | 33 - .../style/themes/catppuccin/_catppuccin.scss | 114 ++++ .../style/themes/catppuccin/_frappe.scss | 26 + .../style/themes/catppuccin/_latte.scss | 26 + .../style/themes/catppuccin/_macchiato.scss | 26 + .../style/themes/catppuccin/_mocha.scss | 26 + src/assets/style/utils.css | 622 ------------------ src/components/Card.astro | 2 +- src/layouts/Layout.astro | 2 +- 14 files changed, 579 insertions(+), 694 deletions(-) create mode 100644 src/assets/style/_utils.scss create mode 100644 src/assets/style/_variables.scss rename src/assets/style/{global.css => style.scss} (81%) delete mode 100644 src/assets/style/themes.css create mode 100644 src/assets/style/themes/catppuccin/_catppuccin.scss create mode 100644 src/assets/style/themes/catppuccin/_frappe.scss create mode 100644 src/assets/style/themes/catppuccin/_latte.scss create mode 100644 src/assets/style/themes/catppuccin/_macchiato.scss create mode 100644 src/assets/style/themes/catppuccin/_mocha.scss delete mode 100644 src/assets/style/utils.css diff --git a/package.json b/package.json index 15e1878..807ea3c 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "astro": "^4.0.6", "react": "^18.0.0", "react-dom": "^18.0.0", + "sass": "^1.71.1", "sharp": "^0.32.6" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2c94f6..5ca98ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,13 +19,16 @@ dependencies: version: 18.2.17 astro: specifier: ^4.0.6 - version: 4.0.6(typescript@5.2.2) + version: 4.0.6(sass@1.71.1)(typescript@5.2.2) react: specifier: ^18.0.0 version: 18.2.0 react-dom: specifier: ^18.0.0 version: 18.2.0(react@18.2.0) + sass: + specifier: ^1.71.1 + version: 1.71.1 sharp: specifier: ^0.32.6 version: 0.32.6 @@ -1142,7 +1145,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3) '@types/babel__core': 7.20.5 react-refresh: 0.14.0 - vite: 5.0.7 + vite: 5.0.7(sass@1.71.1) transitivePeerDependencies: - supports-color dev: false @@ -1372,7 +1375,7 @@ packages: engines: {node: '>=8'} dev: true - /astro@4.0.6(typescript@5.2.2): + /astro@4.0.6(sass@1.71.1)(typescript@5.2.2): resolution: {integrity: sha512-P7CfFqWKzkJozzF6IoOC6qoI2ONndV8P3ULhGDgMiXPL7xVkWI5haTBSpyrcjBx643tVXspIRsSV/v+Cx+CjGw==} engines: {node: '>=18.14.1', npm: '>=6.14.0'} hasBin: true @@ -1433,7 +1436,7 @@ packages: tsconfck: 3.0.0(typescript@5.2.2) unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.0.7 + vite: 5.0.7(sass@1.71.1) vitefu: 0.2.5(vite@5.0.7) which-pm: 2.1.1 yargs-parser: 21.1.1 @@ -3198,6 +3201,10 @@ packages: engines: {node: '>= 4'} dev: true + /immutable@4.3.5: + resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} + dev: false + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -5031,6 +5038,16 @@ packages: suf-log: 2.5.3 dev: true + /sass@1.71.1: + resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.5 + source-map-js: 1.0.2 + dev: false + /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: false @@ -5815,7 +5832,7 @@ packages: vfile-message: 4.0.2 dev: false - /vite@5.0.7: + /vite@5.0.7(sass@1.71.1): resolution: {integrity: sha512-B4T4rJCDPihrQo2B+h1MbeGL/k/GMAHzhQ8S0LjQ142s6/+l3hHTT095ORvsshj4QCkoWu3Xtmob5mazvakaOw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -5846,6 +5863,7 @@ packages: esbuild: 0.19.8 postcss: 8.4.32 rollup: 4.7.0 + sass: 1.71.1 optionalDependencies: fsevents: 2.3.3 dev: false @@ -5858,7 +5876,7 @@ packages: vite: optional: true dependencies: - vite: 5.0.7 + vite: 5.0.7(sass@1.71.1) dev: false /vscode-languageserver-textdocument@1.0.11: diff --git a/src/assets/style/_utils.scss b/src/assets/style/_utils.scss new file mode 100644 index 0000000..54b5dc1 --- /dev/null +++ b/src/assets/style/_utils.scss @@ -0,0 +1,256 @@ +@use './variables' as *; + +.d-none { + display: none; +} + +.d-flex { + display: flex; +} + +.flex-eq > * { + flex: 100%; +} + +.hstack { + --prj-gap: var(--prj-spacing-3); + display: flex; + gap: var(--prj-gap); + align-items: center; +} + +.hstack-reverse { + --prj-gap: var(--prj-spacing-3); + display: flex; + gap: var(--prj-gap); + align-items: center; + flex-direction: row-reverse; +} + +.vstack { + --prj-gap: var(--prj-spacing-3); + display: flex; + flex-direction: column; +} + +.vstack-reverse { + --prj-gap: var(--prj-spacing-3); + display: flex; + flex-direction: column-reverse; +} + +.flex-grow { + flex-grow: 1; +} + +.flex-wrap { + flex-wrap: wrap; +} +.flex-nowrap { + flex-wrap: nowrap; +} + +@each $name, $size in $screen-sizes { + @media screen and (min-width: $size) { + .flex-#{$name}-wrap { + flex-wrap: wrap; + } + + .flex-#{$name}-nowrap { + flex-wrap: nowrap; + } + } +} + +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +.justify-content-center { + justify-content: center !important; +} + +.grid { + --prj-gap: var(--prj-spacing-3); + --prj-columns: repeat(3, 1fr); + --prj-min-col-width: 150px; + display: grid; + grid-template-columns: var(--prj-columns); + gap: var(--prj-gap); +} + +@for $i from 1 through 12 { + .grid-cols-#{$i} { + --prj-columns: repeat(#{$i}, minmax(var(--prj-min-col-width), 1fr)); + } +} + +@each $index, $variable, $value in $spacings { + .gap-#{$index} { + --prj-gap: var(#{$variable}); + } +} + +.list-unstyle { + list-style: none; +} + +.text-justify { + text-align: justify; + text-justify: inter-word; +} + +.text-start { + text-align: start; +} + +.text-center { + text-align: center; +} + +.text-end { + text-align: end; +} + +.align-start { + vertical-align: start; +} + +.align-center { + vertical-align: middle; +} + +.align-end { + vertical-align: end; +} + +.overflow-scroll { + overflow: scroll; +} +.overflow-x-scroll { + overflow-x: scroll; +} +.overflow-y-scroll { + overflow-y: scroll; +} + +.w-auto { + width: auto; +} +.h-auto { + height: auto; +} +@for $i from 0 through 100 { + .w-#{$i} { + width: percentage($i / 100); + } + .h-#{$i} { + height: percentage($i / 100); + } +} + +.m-auto { + margin: auto !important; +} +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} +.mt-auto { + margin-top: auto !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.ml-auto { + margin-left: auto !important; +} +.mr-auto { + margin-right: auto !important; +} +.p-auto { + padding: auto !important; +} +.px-auto { + padding-left: auto !important; + padding-right: auto !important; +} +.py-auto { + padding-top: auto !important; + padding-bottom: auto !important; +} +.pt-auto { + padding-top: auto !important; +} +.pb-auto { + padding-bottom: auto !important; +} +.pl-auto { + padding-left: auto !important; +} +.pr-auto { + padding-right: var(--prj-spacing-5) !important; +} + +@each $index, $variable, $value in $spacings { + .m-#{$index} { + margin: var(#{$variable}) !important; + } + .mx-#{$index} { + margin-left: var(#{$variable}) !important; + margin-right: var(#{$variable}) !important; + } + .my-#{$index} { + margin-top: var(#{$variable}) !important; + margin-bottom: var(#{$variable}) !important; + } + .mt-#{$index} { + margin-top: var(#{$variable}) !important; + } + .mb-#{$index} { + margin-bottom: var(#{$variable}) !important; + } + .ml-#{$index} { + margin-left: var(#{$variable}) !important; + } + .mr-#{$index} { + margin-right: var(#{$variable}) !important; + } + .p-#{$index} { + padding: var(#{$variable}) !important; + } + .px-#{$index} { + padding-left: var(#{$variable}) !important; + padding-right: var(#{$variable}) !important; + } + .py-#{$index} { + padding-top: var(#{$variable}) !important; + padding-bottom: var(#{$variable}) !important; + } + .pt-#{$index} { + padding-top: var(#{$variable}) !important; + } + .pb-#{$index} { + padding-bottom: var(#{$variable}) !important; + } + .pl-#{$index} { + padding-left: var(#{$variable}) !important; + } + .pr-#{$index} { + padding-right: var(#{$variable}) !important; + } +} + +.shadow-0 { + box-shadow: none; +} + +.border-radius { + border-radius: var(--prj-border-radius); +} diff --git a/src/assets/style/_variables.scss b/src/assets/style/_variables.scss new file mode 100644 index 0000000..d0281e8 --- /dev/null +++ b/src/assets/style/_variables.scss @@ -0,0 +1,67 @@ +@use 'sass:color'; + +/* Using catppuccin for now, make a theme switcher later */ +@use './themes/catppuccin/catppuccin'; + +@function getColor($color) { + $ctp-theme: map-get(catppuccin.$palette, 'macchiato'); + @return map-get($ctp-theme, $color); +} + +/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */ +$screen-sizes: ( + 'sm': 640px, + 'md': 768px, + 'lg': 1024px, + 'xl': 1280px, + '2xl': 1536px, +); + +$spacings: ( + 0 '--prj-spacing-0' 0, + 1 '--prj-spacing-1' 0.25rem, + 2 '--prj-spacing-2' 0.5rem, + 3 '--prj-spacing-3' 1rem, + 4 '--prj-spacing-4' 2rem, + 5 '--prj-spacing-5' 3rem +); + +$border-radius: 0.5rem; + +// Native CSS Variables to allow overridings and usage in external stylesheets +:root { + /* Variables prefixed with prj to avoid collisions */ + + /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */ + --prj-bg: #{getColor('mantle')}; + --prj-shadow: #{getColor('crust')}; + --prj-text: #{getColor('text')}; + + --prj-surface-1: #{getColor('base')}; + --prj-surface-2: #{darken(getColor('surface0'), 2%)}; + --prj-surface-3: #{getColor('surface1')}; + --prj-surface-text: #{getColor('text')}; + + --prj-link-text: #{getColor('teal')}; + + --prj-accent-bg: #{getColor('teal')}; + --prj-accent-text: #{getColor('base')}; + + --prj-primary: #{getColor('teal')}; + --prj-primary-text: #{getColor('base')}; + + --prj-danger: #{getColor('red')}; + --prj-danger-text: #{getColor('base')}; + + --prj-disabled: #{getColor('red')}; + --prj-disabled-text: rgba(#{getColor('raw')}, 0.5); + + --prj-input: #{getColor('text')}; + --prj-input-text: #{getColor('base')}; + + @each $index, $variable, $value in $spacings { + #{$variable}: #{$value}; + } + + --prj-border-radius: #{$border-radius}; +} diff --git a/src/assets/style/global.css b/src/assets/style/style.scss similarity index 81% rename from src/assets/style/global.css rename to src/assets/style/style.scss index a477fe1..00d105a 100644 --- a/src/assets/style/global.css +++ b/src/assets/style/style.scss @@ -1,5 +1,8 @@ -@import url('./themes.css'); -@import url('./utils.css'); +@use './variables.scss' as *; +@use './utils.scss'; + +// SASS variables are imported without namespace, but try to always use native +// CSS variables when possible so they can be overrwritten by custom styles html { background-color: var(--prj-bg); @@ -20,7 +23,7 @@ section:not(.clean) { padding: var(--prj-spacing-3); background-color: var(--prj-surface-1); box-shadow: 10px 10px 5px 0px var(--prj-shadow); - border-radius: var(--prj-border-radious); + border-radius: var(--prj-border-radius); } section:not(:first-child) { @@ -67,30 +70,11 @@ p:last-child { } /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */ - -@media screen and (min-width: 640px) { - body { - max-width: 640px; - } -} -@media screen and (min-width: 768px) { - body { - max-width: 768px; - } -} -@media screen and (min-width: 1024px) { - body { - max-width: 1024px; - } -} -@media screen and (min-width: 1280px) { - body { - max-width: 1280px; - } -} -@media screen and (min-width: 1536px) { - body { - max-width: 1536px; +@each $name, $size in $screen-sizes { + @media screen and (min-width: $size) { + body { + max-width: $size; + } } } @@ -150,10 +134,6 @@ li:not(:last-child) { } } -.d-none { - display: none; -} - .bg-image { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-image); diff --git a/src/assets/style/themes.css b/src/assets/style/themes.css deleted file mode 100644 index 3232d32..0000000 --- a/src/assets/style/themes.css +++ /dev/null @@ -1,33 +0,0 @@ -/* Reference: https://github.com/catppuccin/palette/blob/main/css/catppuccin.css */ -@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css'); - -/* Variables prefixed with prj to avoid collisions */ -:root { - /* Using catppuccin for now, make a theme switcher later */ - /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */ - --prj-bg: var(--ctp-macchiato-mantle); - --prj-shadow: var(--ctp-macchiato-crust); - --prj-text: var(--ctp-macchiato-text); - - --prj-surface-1: var(--ctp-macchiato-base); - --prj-surface-2: var(--ctp-mocha-surface0); - --prj-surface-3: var(--ctp-mocha-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); - - --prj-danger: var(--ctp-macchiato-red); - --prj-danger-text: var(--ctp-macchiato-base); - - --prj-disabled: var(--ctp-macchiato-red); - --prj-disabled-text: rgba(var(--ctp-macchiato-base-raw), 0.5); - - --prj-input: var(--ctp-macchiato-text); - --prj-input-text: var(--ctp-macchiato-base); -} diff --git a/src/assets/style/themes/catppuccin/_catppuccin.scss b/src/assets/style/themes/catppuccin/_catppuccin.scss new file mode 100644 index 0000000..4b09a04 --- /dev/null +++ b/src/assets/style/themes/catppuccin/_catppuccin.scss @@ -0,0 +1,114 @@ +$palette: ( + 'latte': ( + 'rosewater': #dc8a78, + 'flamingo': #dd7878, + 'pink': #ea76cb, + 'mauve': #8839ef, + 'red': #d20f39, + 'maroon': #e64553, + 'peach': #fe640b, + 'yellow': #df8e1d, + 'green': #40a02b, + 'teal': #179299, + 'sky': #04a5e5, + 'sapphire': #209fb5, + 'blue': #1e66f5, + 'lavender': #7287fd, + 'text': #4c4f69, + 'subtext1': #5c5f77, + 'subtext0': #6c6f85, + 'overlay2': #7c7f93, + 'overlay1': #8c8fa1, + 'overlay0': #9ca0b0, + 'surface2': #acb0be, + 'surface1': #bcc0cc, + 'surface0': #ccd0da, + 'base': #eff1f5, + 'mantle': #e6e9ef, + 'crust': #dce0e8, + ), + 'frappe': ( + 'rosewater': #f2d5cf, + 'flamingo': #eebebe, + 'pink': #f4b8e4, + 'mauve': #ca9ee6, + 'red': #e78284, + 'maroon': #ea999c, + 'peach': #ef9f76, + 'yellow': #e5c890, + 'green': #a6d189, + 'teal': #81c8be, + 'sky': #99d1db, + 'sapphire': #85c1dc, + 'blue': #8caaee, + 'lavender': #babbf1, + 'text': #c6d0f5, + 'subtext1': #b5bfe2, + 'subtext0': #a5adce, + 'overlay2': #949cbb, + 'overlay1': #838ba7, + 'overlay0': #737994, + 'surface2': #626880, + 'surface1': #51576d, + 'surface0': #414559, + 'base': #303446, + 'mantle': #292c3c, + 'crust': #232634, + ), + 'macchiato': ( + 'rosewater': #f4dbd6, + 'flamingo': #f0c6c6, + 'pink': #f5bde6, + 'mauve': #c6a0f6, + 'red': #ed8796, + 'maroon': #ee99a0, + 'peach': #f5a97f, + 'yellow': #eed49f, + 'green': #a6da95, + 'teal': #8bd5ca, + 'sky': #91d7e3, + 'sapphire': #7dc4e4, + 'blue': #8aadf4, + 'lavender': #b7bdf8, + 'text': #cad3f5, + 'subtext1': #b8c0e0, + 'subtext0': #a5adcb, + 'overlay2': #939ab7, + 'overlay1': #8087a2, + 'overlay0': #6e738d, + 'surface2': #5b6078, + 'surface1': #494d64, + 'surface0': #363a4f, + 'base': #24273a, + 'mantle': #1e2030, + 'crust': #181926, + ), + 'mocha': ( + 'rosewater': #f5e0dc, + 'flamingo': #f2cdcd, + 'pink': #f5c2e7, + 'mauve': #cba6f7, + 'red': #f38ba8, + 'maroon': #eba0ac, + 'peach': #fab387, + 'yellow': #f9e2af, + 'green': #a6e3a1, + 'teal': #94e2d5, + 'sky': #89dceb, + 'sapphire': #74c7ec, + 'blue': #89b4fa, + 'lavender': #b4befe, + 'text': #cdd6f4, + 'subtext1': #bac2de, + 'subtext0': #a6adc8, + 'overlay2': #9399b2, + 'overlay1': #7f849c, + 'overlay0': #6c7086, + 'surface2': #585b70, + 'surface1': #45475a, + 'surface0': #313244, + 'base': #1e1e2e, + 'mantle': #181825, + 'crust': #11111b, + ), +); diff --git a/src/assets/style/themes/catppuccin/_frappe.scss b/src/assets/style/themes/catppuccin/_frappe.scss new file mode 100644 index 0000000..49485fc --- /dev/null +++ b/src/assets/style/themes/catppuccin/_frappe.scss @@ -0,0 +1,26 @@ +$rosewater: #f2d5cf; +$flamingo: #eebebe; +$pink: #f4b8e4; +$mauve: #ca9ee6; +$red: #e78284; +$maroon: #ea999c; +$peach: #ef9f76; +$yellow: #e5c890; +$green: #a6d189; +$teal: #81c8be; +$sky: #99d1db; +$sapphire: #85c1dc; +$blue: #8caaee; +$lavender: #babbf1; +$text: #c6d0f5; +$subtext1: #b5bfe2; +$subtext0: #a5adce; +$overlay2: #949cbb; +$overlay1: #838ba7; +$overlay0: #737994; +$surface2: #626880; +$surface1: #51576d; +$surface0: #414559; +$base: #303446; +$mantle: #292c3c; +$crust: #232634; diff --git a/src/assets/style/themes/catppuccin/_latte.scss b/src/assets/style/themes/catppuccin/_latte.scss new file mode 100644 index 0000000..96487a1 --- /dev/null +++ b/src/assets/style/themes/catppuccin/_latte.scss @@ -0,0 +1,26 @@ +$rosewater: #dc8a78; +$flamingo: #dd7878; +$pink: #ea76cb; +$mauve: #8839ef; +$red: #d20f39; +$maroon: #e64553; +$peach: #fe640b; +$yellow: #df8e1d; +$green: #40a02b; +$teal: #179299; +$sky: #04a5e5; +$sapphire: #209fb5; +$blue: #1e66f5; +$lavender: #7287fd; +$text: #4c4f69; +$subtext1: #5c5f77; +$subtext0: #6c6f85; +$overlay2: #7c7f93; +$overlay1: #8c8fa1; +$overlay0: #9ca0b0; +$surface2: #acb0be; +$surface1: #bcc0cc; +$surface0: #ccd0da; +$base: #eff1f5; +$mantle: #e6e9ef; +$crust: #dce0e8; diff --git a/src/assets/style/themes/catppuccin/_macchiato.scss b/src/assets/style/themes/catppuccin/_macchiato.scss new file mode 100644 index 0000000..9355e38 --- /dev/null +++ b/src/assets/style/themes/catppuccin/_macchiato.scss @@ -0,0 +1,26 @@ +$rosewater: #f4dbd6; +$flamingo: #f0c6c6; +$pink: #f5bde6; +$mauve: #c6a0f6; +$red: #ed8796; +$maroon: #ee99a0; +$peach: #f5a97f; +$yellow: #eed49f; +$green: #a6da95; +$teal: #8bd5ca; +$sky: #91d7e3; +$sapphire: #7dc4e4; +$blue: #8aadf4; +$lavender: #b7bdf8; +$text: #cad3f5; +$subtext1: #b8c0e0; +$subtext0: #a5adcb; +$overlay2: #939ab7; +$overlay1: #8087a2; +$overlay0: #6e738d; +$surface2: #5b6078; +$surface1: #494d64; +$surface0: #363a4f; +$base: #24273a; +$mantle: #1e2030; +$crust: #181926; diff --git a/src/assets/style/themes/catppuccin/_mocha.scss b/src/assets/style/themes/catppuccin/_mocha.scss new file mode 100644 index 0000000..728949d --- /dev/null +++ b/src/assets/style/themes/catppuccin/_mocha.scss @@ -0,0 +1,26 @@ +$rosewater: #f5e0dc; +$flamingo: #f2cdcd; +$pink: #f5c2e7; +$mauve: #cba6f7; +$red: #f38ba8; +$maroon: #eba0ac; +$peach: #fab387; +$yellow: #f9e2af; +$green: #a6e3a1; +$teal: #94e2d5; +$sky: #89dceb; +$sapphire: #74c7ec; +$blue: #89b4fa; +$lavender: #b4befe; +$text: #cdd6f4; +$subtext1: #bac2de; +$subtext0: #a6adc8; +$overlay2: #9399b2; +$overlay1: #7f849c; +$overlay0: #6c7086; +$surface2: #585b70; +$surface1: #45475a; +$surface0: #313244; +$base: #1e1e2e; +$mantle: #181825; +$crust: #11111b; diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css deleted file mode 100644 index b3b8b80..0000000 --- a/src/assets/style/utils.css +++ /dev/null @@ -1,622 +0,0 @@ -:root { - --prj-spacing-1: 0.25rem; - --prj-spacing-2: 0.5rem; - --prj-spacing-3: 1rem; - --prj-spacing-4: 2rem; - --prj-spacing-5: 3rem; - - --prj-border-radious: 0.5rem; -} - -.d-flex { - display: flex; -} - -.flex-eq > * { - flex: 100%; -} - -.hstack { - --prj-gap: var(--prj-spacing-3); - display: flex; - gap: var(--prj-gap); - align-items: center; -} - -.hstack-reverse { - --prj-gap: var(--prj-spacing-3); - display: flex; - gap: var(--prj-gap); - align-items: center; - flex-direction: row-reverse; -} - -.vstack { - --prj-gap: var(--prj-spacing-3); - display: flex; - flex-direction: column; -} - -.vstack { - --prj-gap: var(--prj-spacing-3); - display: flex; - flex-direction: column-reverse; - flex-direction: column; -} - -.flex-grow { - flex-grow: 1; -} - -.flex-wrap { - flex-wrap: wrap; -} -.flex-nowrap { - flex-wrap: nowrap; -} - -@media screen and (min-width: 640px) { - .flex-sm-wrap { - flex-wrap: wrap; - } -} -@media screen and (min-width: 768px) { - .flex-md-wrap { - flex-wrap: wrap; - } -} -@media screen and (min-width: 1024px) { - .flex-lg-wrap { - flex-wrap: wrap; - } -} -@media screen and (min-width: 1280px) { - .flex-xl-wrap { - flex-wrap: wrap; - } -} -@media screen and (min-width: 1536px) { - .flex-2xl-wrap { - flex-wrap: wrap; - } -} - -@media screen and (min-width: 640px) { - .flex-sm-nowrap { - flex-wrap: nowrap; - } -} -@media screen and (min-width: 768px) { - .flex-md-nowrap { - flex-wrap: nowrap; - } -} -@media screen and (min-width: 1024px) { - .flex-lg-nowrap { - flex-wrap: nowrap; - } -} -@media screen and (min-width: 1280px) { - .flex-xl-nowrap { - flex-wrap: nowrap; - } -} -@media screen and (min-width: 1536px) { - .flex-2xl-nowrap { - flex-wrap: nowrap; - } -} - -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -.justify-content-center { - justify-content: center !important; -} - -.grid { - --prj-gap: var(--prj-spacing-3); - --prj-columns: repeat(3, 1fr); - --prj-min-col-width: 150px; - display: grid; - grid-template-columns: var(--prj-columns); - gap: var(--prj-gap); -} - -.grid-cols-1 { - --prj-columns: repeat(1, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-2 { - --prj-columns: repeat(2, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-3 { - --prj-columns: repeat(3, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-4 { - --prj-columns: repeat(4, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-5 { - --prj-columns: repeat(5, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-6 { - --prj-columns: repeat(6, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-7 { - --prj-columns: repeat(7, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-8 { - --prj-columns: repeat(8, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-9 { - --prj-columns: repeat(9, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-10 { - --prj-columns: repeat(10, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-11 { - --prj-columns: repeat(11, minmax(var(--prj-min-col-width), 1fr)); -} - -.grid-cols-12 { - --prj-columns: repeat(12, minmax(var(--prj-min-col-width), 1fr)); -} - -.gap-0 { - --prj-gap: 0; -} - -.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; -} - -.text-start { - text-align: start; -} - -.text-center { - text-align: center; -} - -.text-end { - text-align: end; -} - -.align-start { - vertical-align: start; -} - -.align-center { - vertical-align: middle; -} - -.align-end { - vertical-align: end; -} - -.overflow-scroll { - overflow: scroll; -} -.overflow-x-scroll { - overflow-x: scroll; -} -.overflow-y-scroll { - overflow-y: scroll; -} - -/* Start Width */ -.w-auto { - width: auto; -} -.w-10 { - width: 10%; -} -.w-20 { - width: 20%; -} -.w-30 { - width: 30%; -} -.w-40 { - width: 40%; -} -.w-50 { - width: 50%; -} -.w-60 { - width: 60%; -} -.w-70 { - width: 70%; -} -.w-80 { - width: 80%; -} -.w-90 { - width: 90%; -} -.w-100 { - width: 100%; -} -/* End Width */ - -/* Start Height */ -.h-auto { - height: auto; -} -.h-10 { - height: 10%; -} -.h-20 { - height: 20%; -} -.h-30 { - height: 30%; -} -.h-40 { - height: 40%; -} -.h-50 { - height: 50%; -} -.h-60 { - height: 60%; -} -.h-70 { - height: 70%; -} -.h-80 { - height: 80%; -} -.h-90 { - height: 90%; -} -.h-100 { - height: 100%; -} -/* End Width */ - -/* Start Margins */ -.m-0 { - margin: 0 !important; -} -.m-1 { - margin: var(--prj-spacing-1) !important; -} -.m-2 { - margin: var(--prj-spacing-2) !important; -} -.m-3 { - margin: var(--prj-spacing-3) !important; -} -.m-4 { - margin: var(--prj-spacing-4) !important; -} -.m-5 { - margin: var(--prj-spacing-5) !important; -} -.m-auto { - margin: auto !important; -} -.mx-1 { - margin-right: var(--prj-spacing-1) 0 !important; -} -.mx-2 { - margin-right: var(--prj-spacing-2) 0 !important; -} -.mx-3 { - margin-right: var(--prj-spacing-3) 0 !important; -} -.mx-4 { - margin-right: var(--prj-spacing-4) 0 !important; -} -.mx-5 { - margin-right: var(--prj-spacing-5) 0 !important; -} -.mx-auto { - margin-left: auto !important; - margin-right: auto !important; -} -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; -} -.my-1 { - margin-top: var(--prj-spacing-1) !important; - margin-bottom: var(--prj-spacing-1) !important; -} -.my-2 { - margin-top: var(--prj-spacing-2) !important; - margin-bottom: var(--prj-spacing-2) !important; -} -.my-3 { - margin-top: var(--prj-spacing-3) !important; - margin-bottom: var(--prj-spacing-3) !important; -} -.my-4 { - margin-top: var(--prj-spacing-4) !important; - margin-bottom: var(--prj-spacing-4) !important; -} -.my-5 { - margin-top: var(--prj-spacing-5) !important; - margin-bottom: var(--prj-spacing-5) !important; -} -.my-auto { - margin-top: auto !important; - margin-bottom: auto !important; -} -.mt-0 { - margin-top: 0 !important; -} -.mt-1 { - margin-top: var(--prj-spacing-1) !important; -} -.mt-2 { - margin-top: var(--prj-spacing-2) !important; -} -.mt-3 { - margin-top: var(--prj-spacing-3) !important; -} -.mt-4 { - margin-top: var(--prj-spacing-4) !important; -} -.mt-5 { - margin-top: var(--prj-spacing-5) !important; -} -.mt-auto { - margin-top: auto !important; -} -.mb-0 { - margin-bottom: 0 !important; -} -.mb-1 { - margin-bottom: var(--prj-spacing-1) !important; -} -.mb-2 { - margin-bottom: var(--prj-spacing-2) !important; -} -.mb-3 { - margin-bottom: var(--prj-spacing-3) !important; -} -.mb-4 { - margin-bottom: var(--prj-spacing-4) !important; -} -.mb-5 { - margin-bottom: var(--prj-spacing-5) !important; -} -.mb-auto { - margin-bottom: auto !important; -} -.ml-1 { - margin-left: var(--prj-spacing-1) !important; -} -.ml-2 { - margin-left: var(--prj-spacing-2) !important; -} -.ml-3 { - margin-left: var(--prj-spacing-3) !important; -} -.ml-4 { - margin-left: var(--prj-spacing-4) !important; -} -.ml-5 { - margin-left: var(--prj-spacing-5) !important; -} -.ml-auto { - margin-left: auto !important; -} -.mr-1 { - margin-right: var(--prj-spacing-1) !important; -} -.mr-2 { - margin-right: var(--prj-spacing-2) !important; -} -.mr-3 { - margin-right: var(--prj-spacing-3) !important; -} -.mr-4 { - margin-right: var(--prj-spacing-4) !important; -} -.mr-5 { - margin-right: var(--prj-spacing-5) !important; -} -.mr-auto { - margin-right: var(--prj-spacing-5) !important; -} -/* End Margins */ - -/* Start paddings */ -.p-0 { - padding: 0 !important; -} -.p-1 { - padding: var(--prj-spacing-1) !important; -} -.p-2 { - padding: var(--prj-spacing-2) !important; -} -.p-3 { - padding: var(--prj-spacing-3) !important; -} -.p-4 { - padding: var(--prj-spacing-4) !important; -} -.p-5 { - padding: var(--prj-spacing-5) !important; -} -.p-auto { - padding: auto !important; -} -.px-1 { - padding-left: var(--prj-spacing-1) !important; - padding-right: var(--prj-spacing-1) !important; -} -.px-2 { - padding-left: var(--prj-spacing-2) !important; - padding-right: var(--prj-spacing-2) !important; -} -.px-3 { - padding-left: var(--prj-spacing-3) !important; - padding-right: var(--prj-spacing-3) !important; -} -.px-4 { - padding-left: var(--prj-spacing-4) !important; - padding-right: var(--prj-spacing-4) !important; -} -.px-5 { - padding-left: var(--prj-spacing-5) !important; - padding-right: var(--prj-spacing-5) !important; -} -.px-auto { - padding-left: auto !important; - padding-right: auto !important; -} -.py-0 { - padding-top: var(--prj-spacing-1) !important; - padding-bottom: var(--prj-spacing-1) !important; -} -.py-1 { - padding-top: var(--prj-spacing-1) !important; - padding-bottom: var(--prj-spacing-1) !important; -} -.py-2 { - padding-top: var(--prj-spacing-2) !important; - padding-bottom: var(--prj-spacing-2) !important; -} -.py-3 { - padding-top: var(--prj-spacing-3) !important; - padding-bottom: var(--prj-spacing-3) !important; -} -.py-4 { - padding-top: var(--prj-spacing-4) !important; - padding-bottom: var(--prj-spacing-4) !important; -} -.py-5 { - padding-top: var(--prj-spacing-5) !important; - padding-bottom: var(--prj-spacing-5) !important; -} -.py-auto { - padding-top: auto !important; - padding-bottom: auto !important; -} -.pt-1 { - padding-top: var(--prj-spacing-1) !important; -} -.pt-2 { - padding-top: var(--prj-spacing-2) !important; -} -.pt-3 { - padding-top: var(--prj-spacing-3) !important; -} -.pt-4 { - padding-top: var(--prj-spacing-4) !important; -} -.pt-5 { - padding-top: var(--prj-spacing-5) !important; -} -.pt-auto { - padding-top: auto !important; -} -.pb-0 { - padding-bottom: 0 !important; -} -.pb-1 { - padding-bottom: var(--prj-spacing-1) !important; -} -.pb-2 { - padding-bottom: var(--prj-spacing-2) !important; -} -.pb-3 { - padding-bottom: var(--prj-spacing-3) !important; -} -.pb-4 { - padding-bottom: var(--prj-spacing-4) !important; -} -.pb-5 { - padding-bottom: var(--prj-spacing-5) !important; -} -.pb-auto { - padding-bottom: auto !important; -} -.pl-1 { - padding-left: var(--prj-spacing-1) !important; -} -.pl-2 { - padding-left: var(--prj-spacing-2) !important; -} -.pl-3 { - padding-left: var(--prj-spacing-3) !important; -} -.pl-4 { - padding-left: var(--prj-spacing-4) !important; -} -.pl-5 { - padding-left: var(--prj-spacing-5) !important; -} -.pl-auto { - padding-left: auto !important; -} -.pr-1 { - padding-right: var(--prj-spacing-1) !important; -} -.pr-2 { - padding-right: var(--prj-spacing-2) !important; -} -.pr-3 { - padding-right: var(--prj-spacing-3) !important; -} -.pr-4 { - padding-right: var(--prj-spacing-4) !important; -} -.pr-5 { - padding-right: var(--prj-spacing-5) !important; -} -.pr-auto { - padding-right: var(--prj-spacing-5) !important; -} -/* End paddings */ - -.shadow-0 { - box-shadow: none; -} - -.border-radius { - border-radius: var(--prj-border-radious); -} diff --git a/src/components/Card.astro b/src/components/Card.astro index c2e4de4..8542eac 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -23,7 +23,7 @@ export interface Props { background-color: var(--prj-surface-2); color: var(--prj-surface-text); border: 1px solid var(--prj-surface-2); - border-radius: var(--prj-border-radious); + border-radius: var(--prj-border-radius); box-shadow: 5px 5px 5px 5px var(--prj-shadow); padding: var(--prj-spacing-2) var(--prj-spacing-3); diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 63d5062..f8e2aec 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,7 +4,7 @@ export interface Props { title: string; } -import '../assets/style/global.css'; +import '../assets/style/style.scss'; import Navbar from '../components/Navbar.astro'; import Spinner from '../components/Spinner.astro';