@massimo-cassandro/minimo 1.21.2 → 1.21.4

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

@@ -1,7 +1,5 @@
-@layer components {
-
-  /*! minimo - Unsplash Page */
-  /*
+/*! minimo - Unsplash Page */
+/*
 
 custom propeties:
 
@@ -32,322 +30,319 @@ 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);
-        }
-      }
-      &:active {
-        color: var(--uspg-link-active-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);
+    }
   }
+}
 
-  .canvas {
-    position: absolute;
-    /* z-index: -1; */
-    width: 100%;
-    height: 100%;
-  }
+.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;
+.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; */
+  /* font-size: 1.2rem; */
+  /* color: #999; */
+  /* text-align: center; */
 
-  }
+}
 
-  .unsplashPhoto, .credits {
-    opacity: 0;
-    transition: opacity .3s linear;
+.unsplashPhoto, .credits {
+  opacity: 0;
+  transition: opacity .3s linear;
 
-    .show & {
-      opacity: 1;
-    }
+  .show & {
+    opacity: 1;
   }
+}
 
-  .messageBox {
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 3rem;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    overflow: hidden;
+.messageBox {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
 
 
-  }
+}
+
+.message, .credits {
+  color: var(--uspg-text-color, #fff);
+  background-color: var(--uspg-bg-color, hsl(0deg 0% 0% / .7));
+}
 
-  .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;
+
+  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));
   }
 
-  .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));
-    }
+  p {
+    margin: .5rem 0 0;
+  }
 
-    p {
-      margin: .5rem 0 0;
-    }
+  @media screen and (min-width: 768px) {
+    max-width: 60dvw;
+  }
 
-    @media screen and (min-width: 768px) {
-      max-width: 60dvw;
-    }
+  .backLink {
+    margin-top: 1rem;
+  }
 
-    .backLink {
-      margin-top: 1rem;
-    }
+  .arrowWrapper {
+    --_arrow-size: 2rem;
+    --_arrow-position: calc(var(--_arrow-size) * .25 * -1);
 
-    .arrowWrapper {
-      --_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);
-        }
-      }
+    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;
 
-      svg {
-        display: block;
-        width: 100%;
-        aspect-ratio: 1;
-        background-color: transparent;
-        fill: #000;
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--uspg-icon-hover-box-bg, #fff);
       }
     }
 
-    &.hidden {
-      translate: calc(-1 * (50dvw + 50% - 2rem));
-      .arrowWrapper {
-        right: var(--_arrow-position);
-        left: auto;
-        cursor: e-resize;
-        rotate: .5turn;
-      }
+    svg {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1;
+      background-color: transparent;
+      fill: #000;
     }
+  }
 
+  &.hidden {
+    translate: calc(-1 * (50dvw + 50% - 2rem));
+    .arrowWrapper {
+      right: var(--_arrow-position);
+      left: auto;
+      cursor: e-resize;
+      rotate: .5turn;
+    }
   }
 
-  @keyframes icon-shaking {
-    0% { transform: translateX(0); }
-    40% { transform: translateX(20px); }
-    80% { transform: translateX(-5px); }
-    100% { transform: translateX(0); }
+}
+
+@keyframes icon-shaking {
+  0% { transform: translateX(0); }
+  40% { transform: translateX(20px); }
+  80% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+.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;
   }
+}
 
-  .credits {
+
+/* link a scomparsa alla pagina della foto */
+.unsplashPhotoLink {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  a {
     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);
+    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));
 
-    @media screen and (min-width: 768px) {
-      flex-direction: row;
-      justify-content: space-between;
+      svg {
+        opacity: 1;
+        filter: none;
+      }
     }
   }
+  svg {
+    display: block;
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: transparent;
+    opacity: .6;
+    fill: #fff;
+  }
 
+  @media (hover: hover) {
 
-  /* 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;
-        }
+    .show &:hover {
+      svg {
+        opacity: 1;
       }
     }
-    svg {
-      display: block;
-      width: 100%;
-      aspect-ratio: 1;
-      background-color: transparent;
-      opacity: .6;
-      fill: #fff;
-    }
-
-    @media (hover: hover) {
 
+    &.showOnHover {
+      opacity: 0;
       .show &:hover {
-        svg {
-          opacity: 1;
-        }
-      }
-
-      &.showOnHover {
-        opacity: 0;
-        .show &:hover {
-          opacity: 1;
-        }
+        opacity: 1;
       }
     }
   }
+}
 
 
-  /* 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); } }
-
+/* 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); } }