-
-
-
-
+
+
+
-
-
+
+
-
+
+
+
+
+
@@ -54,21 +94,22 @@ const transitionClass = {
flex="1"
/>
-
-
-
+
diff --git a/src/styles/main.css b/src/styles/main.css
index 21d367b..f58f8a5 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,12 +1,20 @@
:root,
:host {
- --color-primary: rgba(253, 253, 31, 1);
- --color-background: rgba(250, 255, 255, 1);
- --color-foreground: rgba(23, 23, 23, 1);
+ --transition-composite: transform, translate, scale, rotate, opacity;
+
+ --color-primary: rgba(255, 115, 185, 1);
+ --color-background: rgba(236, 237, 238, 1);
+ --color-foreground: rgba(18, 18, 18, 1);
--image-graph-paper: url('/assets/patterns/graph-paper.svg');
--image-diagonal-lines: url('/assets/patterns/diagonal-lines.svg');
--image-texture: url('/assets/patterns/texture.svg');
+
+ /* curves */
+ --ease-io-quint: cubic-bezier(0.83, 0, 0.17, 1);
+ --ease-io-circ: cubic-bezier(0.85, 0, 0.15, 1);
+ --ease-o-expo: cubic-bezier(0.16, 1, 0.3, 1);
+ --ease-o-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
:focus-visible {
@@ -16,7 +24,7 @@
}
html.dark {
- --color-primary: rgba(34, 187, 255, 1);
+ --color-primary: rgba(102, 255, 217, 1);
--color-background: rgba(19, 20, 21, 1);
--color-foreground: rgba(237, 237, 237, 1);
@@ -60,7 +68,8 @@ html.dark {
/* named transitions */
.fade-enter-active,
.fade-leave-active {
- transition: opacity 0.5s;
+ transition-property: var(--transition-composite);
+ transition-duration: 0.5s;
}
.fade-enter-from,
@@ -108,7 +117,9 @@ html.dark {
.slide-y-enter-active,
.slide-y-leave-active {
- transition: all 0.1s ease;
+ transition-property: var(--transition-composite);
+ transition-duration: 0.1s;
+ transition-timing-function: ease;
}
.slide-y-enter-from {
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index f44a37a..8dcef89 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -21,5 +21,6 @@ declare module 'vue-router/auto-routes' {
'/': RouteRecordInfo<'/', '/', Record
, Record>,
'/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue }, { all: ParamValue }>,
'/about': RouteRecordInfo<'/about', '/about', Record, Record>,
+ '/work/[slug]': RouteRecordInfo<'/work/[slug]', '/work/:slug', { slug: ParamValue }, { slug: ParamValue }>,
}
}
diff --git a/test/basic.test.ts b/test/basic.test.ts
deleted file mode 100644
index 2abc95f..0000000
--- a/test/basic.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-describe('tests', () => {
- it('should works', () => {
- expect(1 + 1).toEqual(2)
- })
-})
diff --git a/tsconfig.json b/tsconfig.json
index 56ca3e7..558f186 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
},
"resolveJsonModule": true,
"types": [
- "vitest",
+ "node",
"vite/client",
"vite-plugin-vue-layouts/client",
"unplugin-vue-macros/macros-global",
@@ -33,5 +33,5 @@
"@vue-macros/volar/define-slots"
]
},
- "exclude": ["dist", "node_modules", "cypress"]
+ "exclude": ["dist", "node_modules"]
}
diff --git a/uno.config.ts b/uno.config.ts
index 0b0fb55..18046ec 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -18,13 +18,22 @@ export default defineConfig({
['heading-2', 'text-xl lg:text-3xl md:text-2xl'],
['heading-3', 'text-lg lg:text-2xl md:text-xl'],
['heading-4', 'text-base lg:text-xl md:text-lg'],
+ ['section-idx', 'p-4 flex snap-(always center) h-full'],
],
theme: {
colors: {
primary: 'var(--color-primary)',
background: 'var(--color-background)',
foreground: 'var(--color-foreground)',
- subtle: 'var(--color-subtle)',
+ },
+ property: {
+ composite: 'var(--transition-composite)',
+ },
+ ease: {
+ 'in-out-quint': 'var(--ease-io-quint)',
+ 'in-out-circ': 'var(--ease-io-circ)',
+ 'out-expo': 'var(--ease-o-expo)',
+ 'out-back': 'var(--ease-o-back)',
},
},
presets: [
@@ -39,13 +48,13 @@ export default defineConfig({
manrope: [
{
name: 'Manrope',
- weights: ['200', '400', '800'],
+ weights: ['200', '400', '500', '800'],
},
],
jetBMono: [
{
name: 'JetBrains Mono',
- weights: ['800'],
+ weights: ['400', '800'],
},
],
fugazOne: 'Fugaz One',
@@ -61,5 +70,8 @@ export default defineConfig({
transformerDirectives(),
transformerVariantGroup(),
],
- safelist: 'prose prose-sm m-auto text-left'.split(' '),
+ safelist: [
+ ...'prose prose-sm m-auto text-left'.split(' '),
+ ...Array.from({ length: 20 }, (_, i) => `duration-${300 + 100 * i}`),
+ ],
})
diff --git a/vite.config.ts b/vite.config.ts
index 502deb2..b9c0b17 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,6 @@ import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
import Layouts from 'vite-plugin-vue-layouts'
import generateSitemap from 'vite-ssg-sitemap'
-import 'vitest/config'
export default defineConfig({
resolve: {
@@ -86,12 +85,6 @@ export default defineConfig({
VueDevTools(),
],
- // https://github.com/vitest-dev/vitest
- test: {
- include: ['test/**/*.test.ts'],
- environment: 'jsdom',
- },
-
// https://github.com/antfu/vite-ssg
ssgOptions: {
script: 'async',
@@ -100,7 +93,9 @@ export default defineConfig({
reduceInlineStyles: false,
},
onFinished() {
- generateSitemap()
+ generateSitemap({
+ hostname: 'https://sikhlas.com/',
+ })
},
},