@massimo-cassandro/minimo 1.20.15 → 1.21.0

package/src/components/unsplash-page/unsplash-page.module.css

@@ -1,5 +1,7 @@
-/*! minimo - Unsplash Page */
-/*
+@layer components {
+
+  /*! minimo - Unsplash Page */
+  /*
 
 custom propeties:
 
@@ -30,320 +32,322 @@ custom propeties:
 */
 
 
-/* stylelint-disable declaration-no-important */
+  /* stylelint-disable declaration-no-important */
 
-html, body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
+  html, body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
 
-}
+  }
 
-*, *::before, *::after {
-  box-sizing: border-box !important;
-}
+  *, *::before, *::after {
+    box-sizing: border-box !important;
+  }
 
 
-.bodyNoScroll {
-  padding: 0 !important;
-  margin: 0 !important;
-  overflow: hidden !important;
+  .bodyNoScroll {
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
 
 
-}
-/* stylelint-enable declaration-no-important */
+  }
+  /* stylelint-enable declaration-no-important */
 
-.container {
+  .container {
 
-  position: relative;
-  width: 100dvw;
-  height: 100dvh;
+    position: relative;
+    width: 100dvw;
+    height: 100dvh;
 
 
-  font-family: var(--uspg-font-family, sans-serif);
-  font-size: var(--uspg-font-size, 1rem);
-  font-variation-settings: var(--uspg-font-variation-settings, unset);
-  font-weight: var(--uspg-font-weight, 400);
-  line-height: var(--uspg-line-height, 1.4);
+    font-family: var(--uspg-font-family, sans-serif);
+    font-size: var(--uspg-font-size, 1rem);
+    font-variation-settings: var(--uspg-font-variation-settings, unset);
+    font-weight: var(--uspg-font-weight, 400);
+    line-height: var(--uspg-line-height, 1.4);
 
-  background-color: #333;
+    background-color: #333;
 
-  a {
-    &:is(:link, :visited) {
-      text-decoration: var(--uspg-link-decoration);
-    }
-    &:link {
-      color: var(--uspg-link-color);
-    }
-    &:visited {
-      color: var(--uspg-link-visited-color);
-    }
-    &:focus {
-      outline: none;
-    }
-    &:focus-visible {
-      outline: var(--uspg-link-focus-outline-width) var(--uspg-link-focus-outline-style) var(--uspg-link-focus-outline-color);
-      outline-offset: var(--uspg-link-focus-outline-offset);
-    }
-    @media (hover: hover) {
-      &:hover {
-        color: var(--uspg-link-hover-color);
-        text-decoration: var(--uspg-link-hover-decoration);
-        background-color: var(--uspg-link-hover-background-color);
+    a {
+      &:is(:link, :visited) {
+        text-decoration: var(--uspg-link-decoration);
+      }
+      &:link {
+        color: var(--uspg-link-color);
+      }
+      &:visited {
+        color: var(--uspg-link-visited-color);
+      }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        outline: var(--uspg-link-focus-outline-width) var(--uspg-link-focus-outline-style) var(--uspg-link-focus-outline-color);
+        outline-offset: var(--uspg-link-focus-outline-offset);
+      }
+      @media (hover: hover) {
+        &:hover {
+          color: var(--uspg-link-hover-color);
+          text-decoration: var(--uspg-link-hover-decoration);
+          background-color: var(--uspg-link-hover-background-color);
+        }
+      }
+      &:active {
+        color: var(--uspg-link-active-color);
       }
-    }
-    &:active {
-      color: var(--uspg-link-active-color);
     }
   }
-}
-
-.canvas {
-  position: absolute;
-  /* z-index: -1; */
-  width: 100%;
-  height: 100%;
-}
-
-.unsplashPhoto { /* img */
-  position: relative;
-  z-index: 0;
-  display: block;
-  width: 100dvw;
-  height: 100dvh;
-  object-fit: cover;
-  object-position: center;
-
-  /* font-size: 1.2rem; */
-  /* color: #999; */
-  /* text-align: center; */
-
-}
-
-.unsplashPhoto, .credits {
-  opacity: 0;
-  transition: opacity .3s linear;
 
-  .show & {
-    opacity: 1;
+  .canvas {
+    position: absolute;
+    /* z-index: -1; */
+    width: 100%;
+    height: 100%;
   }
-}
-
-.messageBox {
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 3rem;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  overflow: hidden;
 
+  .unsplashPhoto { /* img */
+    position: relative;
+    z-index: 0;
+    display: block;
+    width: 100dvw;
+    height: 100dvh;
+    object-fit: cover;
+    object-position: center;
 
-}
+    /* font-size: 1.2rem; */
+    /* color: #999; */
+    /* text-align: center; */
 
-.message, .credits {
-  color: var(--uspg-text-color, #fff);
-  background-color: var(--uspg-bg-color, hsl(0deg 0% 0% / .7));
-}
+  }
 
-.message {
-  position: relative;
-  width: max-content;
-  max-width: 90dvw;
-  padding: 1rem 2rem;
-  text-align: center;
-  transition: translate .3s ease-in-out;
+  .unsplashPhoto, .credits {
+    opacity: 0;
+    transition: opacity .3s linear;
 
-  h1 {
-    margin: 0;
-    font-size: var(--uspg-h1-font-size, 2rem);
-    font-variation-settings: var(--uspg-h1-font-variation-settings, unset);
-    font-weight: var(--uspg-h1-font-weight, 700);
-    line-height: var(--uspg-h1-line-height, 1.25);
-    color: var(--uspg-h1-color, var(--uspg-text-color, #fff));
+    .show & {
+      opacity: 1;
+    }
   }
 
-  p {
-    margin: .5rem 0 0;
-  }
+  .messageBox {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 3rem;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    overflow: hidden;
+
 
-  @media screen and (min-width: 768px) {
-    max-width: 60dvw;
   }
 
-  .backLink {
-    margin-top: 1rem;
+  .message, .credits {
+    color: var(--uspg-text-color, #fff);
+    background-color: var(--uspg-bg-color, hsl(0deg 0% 0% / .7));
   }
 
-  .arrowWrapper {
-    --_arrow-size: 2rem;
-    --_arrow-position: calc(var(--_arrow-size) * .25 * -1);
+  .message {
+    position: relative;
+    width: max-content;
+    max-width: 90dvw;
+    padding: 1rem 2rem;
+    text-align: center;
+    transition: translate .3s ease-in-out;
+
+    h1 {
+      margin: 0;
+      font-size: var(--uspg-h1-font-size, 2rem);
+      font-variation-settings: var(--uspg-h1-font-variation-settings, unset);
+      font-weight: var(--uspg-h1-font-weight, 700);
+      line-height: var(--uspg-h1-line-height, 1.25);
+      color: var(--uspg-h1-color, var(--uspg-text-color, #fff));
+    }
 
-    position: absolute;
-    bottom: var(--_arrow-position);
-    left: var(--_arrow-position);
-    width: var(--_arrow-size);
-    height: var(--_arrow-size);
-    color: var(--uspg-icon-fill-color, #333);
-    cursor: w-resize;
-    background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
-    border-radius: 50%;
-    /* transition: all .2s ease-in-out; */
-    /* duration | easing-function | delay | iteration-count | direction | name */
-    animation: .2s ease-in 2s 2 reverse icon-shaking;
+    p {
+      margin: .5rem 0 0;
+    }
 
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--uspg-icon-hover-box-bg, #fff);
-      }
+    @media screen and (min-width: 768px) {
+      max-width: 60dvw;
     }
 
-    svg {
-      display: block;
-      width: 100%;
-      aspect-ratio: 1;
-      background-color: transparent;
-      fill: #000;
+    .backLink {
+      margin-top: 1rem;
     }
-  }
 
-  &.hidden {
-    translate: calc(-1 * (50dvw + 50% - 2rem));
     .arrowWrapper {
-      right: var(--_arrow-position);
-      left: auto;
-      cursor: e-resize;
-      rotate: .5turn;
-    }
-  }
+      --_arrow-size: 2rem;
+      --_arrow-position: calc(var(--_arrow-size) * .25 * -1);
+
+      position: absolute;
+      bottom: var(--_arrow-position);
+      left: var(--_arrow-position);
+      width: var(--_arrow-size);
+      height: var(--_arrow-size);
+      color: var(--uspg-icon-fill-color, #333);
+      cursor: w-resize;
+      background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
+      border-radius: 50%;
+      /* transition: all .2s ease-in-out; */
+      /* duration | easing-function | delay | iteration-count | direction | name */
+      animation: .2s ease-in 2s 2 reverse icon-shaking;
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--uspg-icon-hover-box-bg, #fff);
+        }
+      }
 
-}
+      svg {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+        background-color: transparent;
+        fill: #000;
+      }
+    }
 
-@keyframes icon-shaking {
-  0% { transform: translateX(0); }
-  40% { transform: translateX(20px); }
-  80% { transform: translateX(-5px); }
-  100% { transform: translateX(0); }
-}
+    &.hidden {
+      translate: calc(-1 * (50dvw + 50% - 2rem));
+      .arrowWrapper {
+        right: var(--_arrow-position);
+        left: auto;
+        cursor: e-resize;
+        rotate: .5turn;
+      }
+    }
 
-.credits {
-  display: flex;
-  flex-flow: column wrap;
-  gap: .5rem;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: .2rem 1rem;
-  font-size: var(--uspg-credits-font-size, .8em);
-  font-weight: var(--uspg-credits-font-weight, 400);
-  line-height: var(--uspg-credits-line-height, 1.3);
-
-
-  @media screen and (min-width: 768px) {
-    flex-direction: row;
-    justify-content: space-between;
   }
-}
-
 
-/* link a scomparsa alla pagina della foto */
-.unsplashPhotoLink {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  @keyframes icon-shaking {
+    0% { transform: translateX(0); }
+    40% { transform: translateX(20px); }
+    80% { transform: translateX(-5px); }
+    100% { transform: translateX(0); }
+  }
 
-  a {
+  .credits {
     display: flex;
+    flex-flow: column wrap;
+    gap: .5rem;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    aspect-ratio: 1;
-    padding: 4px;
-    color: #fff;
-    background-color: rgb(0 0 0 / .5);
-    border-radius: 50%;
+    width: 100%;
+    padding: .2rem 1rem;
+    font-size: var(--uspg-credits-font-size, .8em);
+    font-weight: var(--uspg-credits-font-weight, 400);
+    line-height: var(--uspg-credits-line-height, 1.3);
 
-    &:active {
-      color: var(--uspg-icon-fill-color, #333);
-      background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
 
-      svg {
-        opacity: 1;
-        filter: none;
-      }
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      justify-content: space-between;
     }
   }
-  svg {
-    display: block;
-    width: 100%;
-    aspect-ratio: 1;
-    background-color: transparent;
-    opacity: .6;
-    fill: #fff;
-  }
 
-  @media (hover: hover) {
 
-    .show &:hover {
-      svg {
-        opacity: 1;
+  /* link a scomparsa alla pagina della foto */
+  .unsplashPhotoLink {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      aspect-ratio: 1;
+      padding: 4px;
+      color: #fff;
+      background-color: rgb(0 0 0 / .5);
+      border-radius: 50%;
+
+      &:active {
+        color: var(--uspg-icon-fill-color, #333);
+        background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
+
+        svg {
+          opacity: 1;
+          filter: none;
+        }
       }
     }
+    svg {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1;
+      background-color: transparent;
+      opacity: .6;
+      fill: #fff;
+    }
+
+    @media (hover: hover) {
 
-    &.showOnHover {
-      opacity: 0;
       .show &:hover {
-        opacity: 1;
+        svg {
+          opacity: 1;
+        }
+      }
+
+      &.showOnHover {
+        opacity: 0;
+        .show &:hover {
+          opacity: 1;
+        }
       }
     }
   }
-}
 
 
-/* https://wweb.dev/resources/loader-generator/ */
-.loaderWrapper {
+  /* https://wweb.dev/resources/loader-generator/ */
+  .loaderWrapper {
+
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    /* z-index: -1; */
+    transform: translate(-50%, -50%);
+  }
+  .loader {
+    width: 80px;
+    aspect-ratio: 1;
+    background: conic-gradient(#000, var(--uspg-loader-color, hsl(0deg 0% 100% / .6))) content-box;
+    border-radius: 50%;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-mask:
+      repeating-conic-gradient(
+        #0000 0deg,
+        #000 1deg calc(360deg / 10 - 10deg - 1deg),
+        #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
+      ),
+      radial-gradient(
+        farthest-side,
+        #0000 calc(98% - 10px),
+        #000 calc(100% - 10px)
+      );
+    mask:
+      repeating-conic-gradient(
+        #0000 0deg,
+        #000 1deg calc(360deg / 10 - 10deg - 1deg),
+        #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
+      ),
+      radial-gradient(
+        farthest-side,
+        #0000 calc(98% - 10px),
+        #000 calc(100% - 10px)
+      );
+
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-mask-composite: destination-in;
+    mask-composite: intersect;
+    animation: spin 1000ms infinite steps(10);
+  }
+  @keyframes spin { to { transform: rotate(1turn); } }
 
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  /* z-index: -1; */
-  transform: translate(-50%, -50%);
-}
-.loader {
-  width: 80px;
-  aspect-ratio: 1;
-  background: conic-gradient(#000, var(--uspg-loader-color, hsl(0deg 0% 100% / .6))) content-box;
-  border-radius: 50%;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-mask:
-    repeating-conic-gradient(
-      #0000 0deg,
-      #000 1deg calc(360deg / 10 - 10deg - 1deg),
-      #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
-    ),
-    radial-gradient(
-      farthest-side,
-      #0000 calc(98% - 10px),
-      #000 calc(100% - 10px)
-    );
-  mask:
-    repeating-conic-gradient(
-      #0000 0deg,
-      #000 1deg calc(360deg / 10 - 10deg - 1deg),
-      #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
-    ),
-    radial-gradient(
-      farthest-side,
-      #0000 calc(98% - 10px),
-      #000 calc(100% - 10px)
-    );
-
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-mask-composite: destination-in;
-  mask-composite: intersect;
-  animation: spin 1000ms infinite steps(10);
-}
-@keyframes spin { to { transform: rotate(1turn); } }
 
+}