Mercury-2
/
revival-archive
mirror of https://github.com/tp-link-extender/revival-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate from sass to stylus for improved formatting and use functions

This commit is contained in:
Lewin Kelly 2023-07-12 23:38:34 +01:00
parent fb9e950073
commit 7dd2140f35
No known key found for this signature in database
GPG Key ID: C103AD9C84014FD7
18 changed files with 283 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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",

71
pnpm-lock.yaml
View File

@ -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:

105
src/global.sass
View File

@ -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

109
src/global.styl Normal file
View File

@ -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

22
src/lib/components/Footer.svelte
View File

@ -8,22 +8,20 @@
</nav>
</footer>
<style lang="sass">
<style lang="stylus">
nav
color: #8c8b8a
@media (prefers-color-scheme: light)
color: #4c4b4a
color #8c8b8a
+lightTheme()
color #4c4b4a
a
text-decoration: none
text-decoration none
color: white
color white
&:hover
color: #aaa
color #aaa
@media (prefers-color-scheme: light)
color: black
+lightTheme()
color black
&:hover
color: #888
color #888
</style>

34
src/lib/components/Navbar.svelte
View File

@ -20,34 +20,34 @@
</nav>
</div>
<style lang="sass">
<style lang="stylus">
nav a
@apply no-underline me-5 rounded-1 transition
margin: 5px 1rem auto 0
margin 5px 1rem auto 0
font-size: 1.3rem
@media screen and (max-width: 1023px)
font-size: 1rem
font-size 1.3rem
+-lg()
font-size 1rem
color: white
@media (prefers-color-scheme: light)
color: black
color white
+lightTheme()
color black
@media screen and (min-width: 1024px)
+lg()
&::before
color: #aaa
transition: 0.25s
content: "→ "
opacity: 0
color #aaa
transition 0.25s
content "→ "
opacity 0
a
&:hover
color: #aaa
color #aaa
&::before
margin-right: 0.5rem
opacity: 1
margin-right 0.5rem
opacity 1
&:active
color: #7f7f7f
color #7f7f7f
</style>

14
src/lib/components/Stars.svelte
View File

@ -8,13 +8,15 @@
style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" />
{/each}
<style lang="sass">
<style lang="stylus">
div
// Fill each star with a gradient based on the rating
background: linear-gradient(to right, #f1c40f var(--rating), #4f4d4c var(--rating))
@media (prefers-color-scheme: light)
background: linear-gradient(to right, #f1c40f var(--rating), #bfbdbc var(--rating))
background linear-gradient(to right,
#f1c40f var(--rating), #4f4d4c var(--rating))
+lightTheme()
background linear-gradient(to right,
#f1c40f var(--rating), #bfbdbc var(--rating))
// APply a mask to hide the gradient outside the star
-webkit-mask: url(/star.svg) no-repeat
// Apply a mask to hide the gradient outside the star
-webkit-mask url(/star.svg) no-repeat
</style>

29
src/nprogress.sass
View File

@ -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)

31
src/nprogress.styl Normal file
View File

@ -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)

28
src/routes/+layout.svelte
View File

@ -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 @@
</div>
</div>
<style lang="sass">
<style lang="stylus">
div div
background-size: 2rem 2rem
background-position: 1rem 1rem
background-image: linear-gradient(90deg, #191716 1px, transparent 1px), linear-gradient(0deg, #191716 1px, transparent 1px)
@media (prefers-color-scheme: light)
background-image: linear-gradient(90deg, #f9f7f6 1px, transparent 1px), linear-gradient(0deg, #f9f7f6 1px, transparent 1px)
background-size 2rem 2rem
background-position 1rem 1rem
@media screen and (min-width: 1024px)
overflow-y: scroll
background-image linear-gradient(90deg, #191716 1px, transparent 1px),
linear-gradient(0deg, #191716 1px, transparent 1px)
+lightTheme()
background-image linear-gradient(90deg, #f9f7f6 1px, transparent 1px),
linear-gradient(0deg, #f9f7f6 1px, transparent 1px)
+lg()
overflow-y scroll
</style>

6
src/routes/+page.svx
View File

@ -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!
</div>
<style lang="sass">
<style lang="stylus">
h1
margin-bottom: 0
margin-bottom 0
h3
margin-top: 0
margin-top 0
</style>

4
src/routes/blog/+page.svelte
View File

@ -25,7 +25,7 @@
</a>
{/each}
<style lang="sass">
<style lang="stylus">
a:hover
transform: translateY(-0.15rem)
transform translateY(-0.15rem)
</style>

4
src/routes/post/[post]/+page.svelte
View File

@ -57,7 +57,7 @@
{/if}
</div>
<style lang="sass">
<style lang="stylus">
section a:hover
transform: translateY(-0.15rem)
transform translateY(-0.15rem)
</style>

4
src/routes/reviews/+page.svelte
View File

@ -37,7 +37,7 @@
</a>
{/each}
<style lang="sass">
<style lang="stylus">
a:hover
transform: translateY(-0.15rem)
transform translateY(-0.15rem)
</style>

4
src/routes/revival/[revival]/+page.svelte
View File

@ -95,7 +95,7 @@
{/if}
</div>
<style lang="sass">
<style lang="stylus">
section a:hover
transform: translateY(-0.15rem)
transform translateY(-0.15rem)
</style>

4
src/routes/revivals/+page.svelte
View File

@ -68,7 +68,7 @@
{/each}
</div>
<style lang="sass">
<style lang="stylus">
.card:hover
transform: translateY(-0.3rem)
transform translateY(-0.3rem)
</style>

22
src/variables.styl Normal file
View File

@ -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}

18
svelte.config.js
View File

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