srcdev-nuxt-components 2.2.4 → 2.2.6

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,15 @@ 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 +407,8 @@ onMounted(() => {
     gap: 20px;
 
     .item {
-      width: 150px;
-      height: 220px;
+      width: var(--_thumbnailWidth);
+      height: var(--_thumbnailHeight);
       flex-shrink: 0;
       position: relative;
 
@@ -416,20 +424,6 @@ onMounted(() => {
         z-index: 2;
       }
 
-      &:first-child {
-        /* Add the animated border effect */
-        &::before {
-          content: '';
-          position: absolute;
-          inset: -3px; /* Border outside the thumbnail */
-          border-radius: 20px;
-          /* background: conic-gradient(transparent 0deg, transparent 360deg); */
-          z-index: 1;
-          animation: none;
-          pointer-events: none;
-        }
-      }
-
       img {
         width: 100%;
         height: 100%;
@@ -501,8 +495,8 @@ onMounted(() => {
       .item {
         &:nth-child(1) {
           img {
-            width: 150px;
-            height: 220px;
+            width: var(--_thumbnailWidth);
+            height: var(--_thumbnailHeight);
             position: absolute;
             bottom: 50px;
             left: 50%;
@@ -523,12 +517,6 @@ onMounted(() => {
       animation: effectNext 0.5s linear 1 forwards;
 
       .item {
-        &:first-child {
-          /* Add the animated border effect */
-          &::before {
-            animation: countdownBorder 7s linear 1 forwards;
-          }
-        }
         &:nth-last-child(1) {
           overflow: hidden;
           animation: showThumbnail 0.5s linear 1 forwards;
@@ -637,7 +625,7 @@ onMounted(() => {
 
 @keyframes effectNext {
   from {
-    transform: translateX(150px);
+    transform: translateX(calc(1 * var(--_thumbnailWidth)));
   }
 }
 
@@ -652,8 +640,8 @@ onMounted(() => {
 
 @keyframes outFrame {
   to {
-    width: 150px;
-    height: 220px;
+    width: var(--_thumbnailWidth);
+    height: var(--_thumbnailHeight);
     bottom: 50px;
     left: 50%;
     border-radius: 20px;
@@ -662,7 +650,7 @@ onMounted(() => {
 
 @keyframes contentOut {
   to {
-    transform: translateY(-150px);
+    transform: translateY(calc(-1 * var(--_thumbnailWidth)));
     filter: blur(20px);
     opacity: 0;
   }
@@ -670,7 +658,7 @@ onMounted(() => {
 
 @keyframes effectPrev {
   from {
-    transform: translateX(-150px);
+    transform: translateX(calc(-1 * var(--_thumbnailWidth)));
   }
   to {
     transform: translateX(0);
@@ -705,14 +693,4 @@ onMounted(() => {
     font-size: 30px;
   }
 }
-
-/* Keyframe for the border animation */
-@keyframes countdownBorder {
-  0% {
-    background: conic-gradient(brightgreen 0deg, transparent 0deg);
-  }
-  100% {
-    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.6",
   "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",