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",
+ },
+ },
}