From 7dd2140f35e7908037a2817950a2f8f1c4d61581 Mon Sep 17 00:00:00 2001 From: Lewin Kelly Date: Wed, 12 Jul 2023 23:38:34 +0100 Subject: [PATCH] Migrate from sass to stylus for improved formatting and use functions --- package.json | 3 +- pnpm-lock.yaml | 71 ++++++++------ src/global.sass | 105 --------------------- src/global.styl | 109 ++++++++++++++++++++++ src/lib/components/Footer.svelte | 22 ++--- src/lib/components/Navbar.svelte | 34 +++---- src/lib/components/Stars.svelte | 14 +-- src/nprogress.sass | 29 ------ src/nprogress.styl | 31 ++++++ src/routes/+layout.svelte | 28 +++--- src/routes/+page.svx | 6 +- src/routes/blog/+page.svelte | 4 +- src/routes/post/[post]/+page.svelte | 4 +- src/routes/reviews/+page.svelte | 4 +- src/routes/revival/[revival]/+page.svelte | 4 +- src/routes/revivals/+page.svelte | 4 +- src/variables.styl | 22 +++++ svelte.config.js | 18 ++-- 18 files changed, 283 insertions(+), 229 deletions(-) delete mode 100644 src/global.sass create mode 100644 src/global.styl delete mode 100644 src/nprogress.sass create mode 100644 src/nprogress.styl create mode 100644 src/variables.styl diff --git a/package.json b/package.json index 35f3dd8..35e156b 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,10 @@ "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", "prettier-plugin-tailwindcss": "^0.3.0", - "sass": "^1.63.6", + "stylus": "^0.59.0", "svelte": "^4.0.5", "svelte-check": "^3.4.5", + "svelte-preprocess": "^5.0.4", "sveltekit-autoimport": "^1.7.0", "tslib": "^2.6.0", "typescript": "^5.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eed409a..261c7d9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,15 +43,18 @@ devDependencies: prettier-plugin-tailwindcss: specifier: ^0.3.0 version: 0.3.0(prettier-plugin-svelte@2.10.1)(prettier@2.8.8) - sass: - specifier: ^1.63.6 - version: 1.63.6 + stylus: + specifier: ^0.59.0 + version: 0.59.0 svelte: specifier: ^4.0.5 version: 4.0.5 svelte-check: specifier: ^3.4.5 - version: 3.4.5(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5) + version: 3.4.5(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5) + svelte-preprocess: + specifier: ^5.0.4 + version: 5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6) sveltekit-autoimport: specifier: ^1.7.0 version: 1.7.0 @@ -66,10 +69,14 @@ devDependencies: version: 0.53.5(postcss@8.4.25)(vite@4.4.2) vite: specifier: ^4.4.2 - version: 4.4.2(sass@1.63.6) + version: 4.4.2(stylus@0.59.0) packages: + /@adobe/css-tools@4.2.0: + resolution: {integrity: sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==} + dev: true + /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} engines: {node: '>=6.0.0'} @@ -415,7 +422,7 @@ packages: sirv: 2.0.3 svelte: 4.0.5 undici: 5.22.1 - vite: 4.4.2(sass@1.63.6) + vite: 4.4.2(stylus@0.59.0) transitivePeerDependencies: - supports-color dev: true @@ -431,7 +438,7 @@ packages: '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.0.5)(vite@4.4.2) debug: 4.3.4 svelte: 4.0.5 - vite: 4.4.2(sass@1.63.6) + vite: 4.4.2(stylus@0.59.0) transitivePeerDependencies: - supports-color dev: true @@ -450,7 +457,7 @@ packages: magic-string: 0.30.1 svelte: 4.0.5 svelte-hmr: 0.15.2(svelte@4.0.5) - vite: 4.4.2(sass@1.63.6) + vite: 4.4.2(stylus@0.59.0) vitefu: 0.2.4(vite@4.4.2) transitivePeerDependencies: - supports-color @@ -668,7 +675,7 @@ packages: chokidar: 3.5.3 fast-glob: 3.3.0 magic-string: 0.30.1 - vite: 4.4.2(sass@1.63.6) + vite: 4.4.2(stylus@0.59.0) transitivePeerDependencies: - rollup dev: true @@ -992,10 +999,6 @@ packages: engines: {node: '>=10.17.0'} dev: true - /immutable@4.3.0: - resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==} - dev: true - /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -1447,14 +1450,8 @@ packages: rimraf: 2.7.1 dev: true - /sass@1.63.6: - resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==} - engines: {node: '>=14.0.0'} - hasBin: true - dependencies: - chokidar: 3.5.3 - immutable: 4.3.0 - source-map-js: 1.0.2 + /sax@1.2.4: + resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} dev: true /set-cookie-parser@2.6.0: @@ -1501,6 +1498,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /source-map@0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: true + /sourcemap-codec@1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} deprecated: Please use @jridgewell/sourcemap-codec instead @@ -1523,7 +1525,20 @@ packages: min-indent: 1.0.1 dev: true - /svelte-check@3.4.5(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5): + /stylus@0.59.0: + resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==} + hasBin: true + dependencies: + '@adobe/css-tools': 4.2.0 + debug: 4.3.4 + glob: 7.2.3 + sax: 1.2.4 + source-map: 0.7.4 + transitivePeerDependencies: + - supports-color + dev: true + + /svelte-check@3.4.5(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5): resolution: {integrity: sha512-FsD/CUVdEI0F9sfylh1Fe15kDjvvbyBxzDpACPsdq0EASgaZukBXaMXofpxlgmWsgVET3OynMQlbtUQoWCz9Rw==} hasBin: true peerDependencies: @@ -1536,7 +1551,7 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 4.0.5 - svelte-preprocess: 5.0.4(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5)(typescript@5.1.6) + svelte-preprocess: 5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6) typescript: 5.1.6 transitivePeerDependencies: - '@babel/core' @@ -1559,7 +1574,7 @@ packages: svelte: 4.0.5 dev: true - /svelte-preprocess@5.0.4(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5)(typescript@5.1.6): + /svelte-preprocess@5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6): resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} engines: {node: '>= 14.10.0'} requiresBuild: true @@ -1601,9 +1616,9 @@ packages: detect-indent: 6.1.0 magic-string: 0.27.0 postcss: 8.4.25 - sass: 1.63.6 sorcery: 0.11.0 strip-indent: 3.0.0 + stylus: 0.59.0 svelte: 4.0.5 typescript: 5.1.6 dev: true @@ -1731,7 +1746,7 @@ packages: unist-util-stringify-position: 2.0.3 dev: true - /vite@4.4.2(sass@1.63.6): + /vite@4.4.2(stylus@0.59.0): resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -1762,7 +1777,7 @@ packages: esbuild: 0.18.11 postcss: 8.4.25 rollup: 3.26.2 - sass: 1.63.6 + stylus: 0.59.0 optionalDependencies: fsevents: 2.3.2 dev: true @@ -1775,7 +1790,7 @@ packages: vite: optional: true dependencies: - vite: 4.4.2(sass@1.63.6) + vite: 4.4.2(stylus@0.59.0) dev: true /which@2.0.2: diff --git a/src/global.sass b/src/global.sass deleted file mode 100644 index b47f506..0000000 --- a/src/global.sass +++ /dev/null @@ -1,105 +0,0 @@ -@font-face - font-family: "Inter" - src: url("/Inter.woff2") format("woff2"), url("/Inter.ttf") format("ttf") - font-display: swap - -@font-face - font-family: "Inter" - src: url("/InterItalic.woff2") format("woff2"), url("/InterItalic.ttf") format("ttf") - font-style: italic - font-display: swap - -:root, body - padding: 0 - margin: 0 - background: #100f0e - color: white - @media (prefers-color-scheme: light) - background: #e6e4e3 - color: black - - font-family: "Inter", sans-serif - -a - @apply transition-colors - text-decoration: none - &:not(.txt) - @apply text-orange-500 - &:hover - @apply text-orange-300 - @media (prefers-color-scheme: light) - @apply text-orange-700 - &:active - @apply text-orange-600 - @media (prefers-color-scheme: light) - @apply text-orange-400 - .txt - @apply text-white - &:hover - @apply text-#aaa - &:active - @apply text-#888 - -hr - border: none - border-top: 1px solid #464443 - @media (prefers-color-scheme: light) - border-top: 1px solid #a6a4a3 - -::-webkit-scrollbar - position: fixed - width: 1rem - height: 0.5rem - &-track, &-corner - background: #282625 - @media (prefers-color-scheme: light) - background: white - - &-thumb - background: #181615 - border: 0.2rem solid #282625 - border-radius: 1rem - width: 0.5rem - - &:hover - background: #464443 - &:active - background: #3f3d3c - - @media (prefers-color-scheme: light) - background: #d6d4d3 - border: 0.2rem solid white - &:hover - background: #a6a4a3 - &:active - background: #bfbdbc - -// Utility classes - -.bg-a - background: #1f1c1d - @media (prefers-color-scheme: light) - background: white - -.bg-bg - background: #100f0e - -.content - @apply bg-a p-4 rounded-lg shadow-lg - - background: #1f1c1d - @media (prefers-color-scheme: light) - background: white - -.logo - filter: drop-shadow(0 0 5px #fffa) invert(0) - @media (prefers-color-scheme: light) - filter: drop-shadow(0 0 5px #000a) - -li ul - list-style-type: circle - margin: 0.3rem 0 0.3rem -1rem - -main - > h1, > h2, > h3, > h4, > h5, > h6 - margin-left: 1rem diff --git a/src/global.styl b/src/global.styl new file mode 100644 index 0000000..4e3ebce --- /dev/null +++ b/src/global.styl @@ -0,0 +1,109 @@ +@import "./variables.styl" + +@font-face + font-family "Inter" + src url("/Inter.woff2") format("woff2"), + url("/Inter.ttf") format("ttf") + font-display swap + +@font-face + font-family "Inter" + src url("/InterItalic.woff2") format("woff2"), + url("/InterItalic.ttf") format("ttf") + font-style italic + font-display swap + +:root, body + padding 0 + margin 0 + background #100f0e + color white + +lightTheme() + background #e6e4e3 + color black + + font-family "Inter", sans-serif + +a + @apply transition-colors + text-decoration none + &:not(.txt) + @apply text-orange-500 + &:hover + @apply text-orange-300 + +lightTheme() + @apply text-orange-700 + &:active + @apply text-orange-600 + +lightTheme() + @apply text-orange-400 + .txt + @apply text-white + &:hover + @apply text-#aaa + &:active + @apply text-#888 + +hr + border none + border-top 1px solid #464443 + +lightTheme() + border-top 1px solid #a6a4a3 + +::-webkit-scrollbar + position fixed + width 1rem + height 0.5rem + &-track, &-corner + background #282625 + +lightTheme() + background white + + &-thumb + background #181615 + border 0.2rem solid #282625 + border-radius 1rem + width 0.5rem + + &:hover + background #464443 + &:active + background #3f3d3c + + +lightTheme() + background #d6d4d3 + border 0.2rem solid white + &:hover + background #a6a4a3 + &:active + background #bfbdbc + +// Utility classes + +.bg-a + background #1f1c1d + +lightTheme() + background white + +.bg-bg + background #100f0e + +.content + @apply bg-a p-4 rounded-lg shadow-lg + + background #1f1c1d + +lightTheme() + background white + +.logo + filter drop-shadow(0 0 5px #fffa) invert(0) + +lightTheme() + filter drop-shadow(0 0 5px #000a) + +li ul + list-style-type circle + margin 0.3rem 0 0.3rem -1rem + +main + > h1, > h2, > h3, > h4, > h5, > h6 + margin-left 1rem diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 9972539..a466d77 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -8,22 +8,20 @@ - diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 112bb9c..b2f6422 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -20,34 +20,34 @@ - diff --git a/src/lib/components/Stars.svelte b/src/lib/components/Stars.svelte index 2dcf727..21a0451 100644 --- a/src/lib/components/Stars.svelte +++ b/src/lib/components/Stars.svelte @@ -8,13 +8,15 @@ style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" /> {/each} - diff --git a/src/nprogress.sass b/src/nprogress.sass deleted file mode 100644 index 74832a4..0000000 --- a/src/nprogress.sass +++ /dev/null @@ -1,29 +0,0 @@ -// Modified nprogress.css file - -#nprogress - // Make clicks pass-through - pointer-events: none - .bar - background: rgb(249 115 22) // bg-orange-500 - - position: fixed - z-index: 1031 - top: 0 - left: 0 - - width: 100% - height: 2px - - // Fancy blur effect - .peg - display: block - position: absolute - right: 0px - width: 100px - height: 100% - box-shadow: 0 0 10px rgb(249 115 22), 0 0 5px rgb(249 115 22) - opacity: 1.0 - - -webkit-transform: rotate(3deg) translate(0px, -4px) - -ms-transform: rotate(3deg) translate(0px, -4px) - transform: rotate(3deg) translate(0px, -4px) diff --git a/src/nprogress.styl b/src/nprogress.styl new file mode 100644 index 0000000..c56b794 --- /dev/null +++ b/src/nprogress.styl @@ -0,0 +1,31 @@ +// Modified nprogress.css file + +#nprogress + // Make clicks pass-through + pointer-events none + position relative + z-index 99 + + .bar + background rgb(249 115 22) // bg-orange-500 + + position fixed + top 0 + left 0 + + width 100% + height 2px + + // Fancy blur effect + .peg + display block + position absolute + right 0px + width 100px + height 100% + box-shadow 0 0 10px rgb(249 115 22), 0 0 5px rgb(249 115 22) + opacity 1 + + -webkit-transform rotate(3deg) translate(0px, -4px) + -ms-transform rotate(3deg) translate(0px, -4px) + transform rotate(3deg) translate(0px, -4px) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6c501db..5eeb072 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,20 +2,20 @@ import { navigating } from "$app/stores" import nprogress from "nprogress" - import "/src/nprogress.sass" - import "/src/global.sass" + import "/src/nprogress.styl" + import "/src/global.styl" import "uno.css" // Settings for nprogress, the loading bar shown // at the top of the page when navigating nprogress.configure({ showSpinner: false }) - let timeout: any + let timeout: number | undefined // 100ms is the minimum time the loading bar will be shown $: if ($navigating && !timeout) timeout = setTimeout(nprogress.start, 100) else { clearTimeout(timeout) - timeout = null + timeout = undefined nprogress.done() } @@ -35,14 +35,18 @@ - diff --git a/src/routes/+page.svx b/src/routes/+page.svx index 8ebbb00..fa11625 100644 --- a/src/routes/+page.svx +++ b/src/routes/+page.svx @@ -28,9 +28,9 @@ You can easily find a revival perfect for you on the Revival Archive! You can go ahead and join our [Discord](https://discord.gg/zfC3VH2WBa) server - there you can request for your/somebody else's revival to be added to the archive! - diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index ca64c4b..e2cdd7e 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -25,7 +25,7 @@ {/each} - diff --git a/src/routes/post/[post]/+page.svelte b/src/routes/post/[post]/+page.svelte index 0e5ab98..bfaea4b 100644 --- a/src/routes/post/[post]/+page.svelte +++ b/src/routes/post/[post]/+page.svelte @@ -57,7 +57,7 @@ {/if} - diff --git a/src/routes/reviews/+page.svelte b/src/routes/reviews/+page.svelte index 394432c..d59b715 100644 --- a/src/routes/reviews/+page.svelte +++ b/src/routes/reviews/+page.svelte @@ -37,7 +37,7 @@ {/each} - diff --git a/src/routes/revival/[revival]/+page.svelte b/src/routes/revival/[revival]/+page.svelte index 2d56469..992936f 100644 --- a/src/routes/revival/[revival]/+page.svelte +++ b/src/routes/revival/[revival]/+page.svelte @@ -95,7 +95,7 @@ {/if} - diff --git a/src/routes/revivals/+page.svelte b/src/routes/revivals/+page.svelte index 9e465d2..41dabe0 100644 --- a/src/routes/revivals/+page.svelte +++ b/src/routes/revivals/+page.svelte @@ -68,7 +68,7 @@ {/each} - diff --git a/src/variables.styl b/src/variables.styl new file mode 100644 index 0000000..70fae60 --- /dev/null +++ b/src/variables.styl @@ -0,0 +1,22 @@ +sm() + @media (min-width 640px) {block} +md() + @media (min-width 768px) {block} +lg() + @media (min-width 1024px) {block} +xl() + @media (min-width 1280px) {block} +xl2() + @media (min-width 1536px) {block} +-sm() + @media (max-width 639px) {block} +-md() + @media (max-width 767px) {block} +-lg() + @media (max-width 1023px) {block} +-xl() + @media (max-width 1279px) {block} +-xl2() + @media (max-width 1535px) {block} +lightTheme() + @media (prefers-color-scheme light) {block} diff --git a/svelte.config.js b/svelte.config.js index 8302529..06aac9b 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,16 +1,19 @@ import adapter from "@sveltejs/adapter-static" -import { vitePreprocess } from "@sveltejs/kit/vite" +import preprocess from "svelte-preprocess" import autoImport from "sveltekit-autoimport" import { mdsvex } from "mdsvex" -/** @type {import('@sveltejs/kit').Config} */ export default { extensions: [".svelte", ".svelte.md", ".md", ".svx"], // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: [ - vitePreprocess(), + preprocess({ + stylus: { + prependData: '@import "src/variables.styl"', + }, + }), autoImport({ components: ["./src/lib/components"], flat: true, @@ -28,9 +31,12 @@ export default { ], kit: { - // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. - // If your environment is not supported or you settled on a specific environment, switch out the adapter. - // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter(), }, + + vitePlugin: { + inspector: { + toggleKeyCombo: "control-i", + }, + }, }