srcdev-nuxt-components 2.2.4 → 2.2.5

package/assets/styles/utils/_page.css

@@ -8,6 +8,7 @@ html {
   background-color: var(--page-bg);
 
   font-size: 62.5%;
+  scrollbar-gutter: stable;
 }
 body {
   color: var(--grayscale-text-body);

package/components/image-galleries/SliderGallery.vue

@@ -243,7 +243,16 @@ onMounted(() => {
 .slider-gallery {
   --_animationDuration: v-bind(animationDuration + 'ms');
 
-  --_thembnailAspectRatio: 150 /220;
+  --_thumbnailAspectRatio: 150 /220;
+
+  --_thumbnailWidth: 100px;
+  --_thumbnailHeight: 165px;
+
+
+  @media screen and (min-width: 1024px) {
+    --_thumbnailWidth: 150px;
+    --_thumbnailHeight: 220px;
+  }
 
   height: 100svh;
   width: 100vw;
@@ -399,8 +408,8 @@ onMounted(() => {
     gap: 20px;
 
     .item {
-      width: 150px;
-      height: 220px;
+      width: var(--_thumbnailWidth);
+      height: var(--_thumbnailHeight);
       flex-shrink: 0;
       position: relative;
 
@@ -501,8 +510,8 @@ onMounted(() => {
       .item {
         &:nth-child(1) {
           img {
-            width: 150px;
-            height: 220px;
+            width: var(--_thumbnailWidth);
+            height: var(--_thumbnailHeight);
             position: absolute;
             bottom: 50px;
             left: 50%;
@@ -637,7 +646,7 @@ onMounted(() => {
 
 @keyframes effectNext {
   from {
-    transform: translateX(150px);
+    transform: translateX(calc(1 * var(--_thumbnailWidth)));
   }
 }
 
@@ -652,8 +661,8 @@ onMounted(() => {
 
 @keyframes outFrame {
   to {
-    width: 150px;
-    height: 220px;
+    width: var(--_thumbnailWidth);
+    height: var(--_thumbnailHeight);
     bottom: 50px;
     left: 50%;
     border-radius: 20px;
@@ -662,7 +671,7 @@ onMounted(() => {
 
 @keyframes contentOut {
   to {
-    transform: translateY(-150px);
+    transform: translateY(calc(-1 * var(--_thumbnailWidth)));
     filter: blur(20px);
     opacity: 0;
   }
@@ -670,7 +679,7 @@ onMounted(() => {
 
 @keyframes effectPrev {
   from {
-    transform: translateX(-150px);
+    transform: translateX(calc(-1 * var(--_thumbnailWidth)));
   }
   to {
     transform: translateX(0);
@@ -715,4 +724,5 @@ onMounted(() => {
     background: conic-gradient(brightgreen 0deg, brightgreen 360deg);
   }
 }
+
 </style>

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxt/image'],
+  modules: ['@nuxt/icon', '@nuxt/image', '@nuxt/eslint'],
   app: {
     head: {
       htmlAttrs: {
@@ -34,4 +34,8 @@ export default defineNuxtConfig({
   typescript: {
     includeWorkspace: true,
   },
+  eslint: {
+    // Add any custom options here
+
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -27,10 +27,10 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.2",
     "@iconify-json/bitcoin-icons": "1.2.2",
+    "@nuxt/eslint": "^1.3.0",
     "@nuxt/eslint-config": "1.2.0",
     "@nuxt/icon": "1.11.0",
     "@nuxt/image": "1.10.0",
-    "eslint": "9.22.0",
     "happy-dom": "16.8.1",
     "nuxt": "3.16.0",
     "release-it": "18.1.2",