Photo: Fix number positioning and parallax effect

2020-03-25 12:28:47 +01:00
parent 8f73e3d56e
commit 7d8285ac6d
4 changed files with 75 additions and 32 deletions
--- a/src/style/molecules/_photo.scss
+++ b/src/style/molecules/_photo.scss
@@ -140,15 +140,31 @@
        pointer-events: none;
        user-select: none;

+        span {
+            display: block;
+        }
+
        @include breakpoint (sm) {
-            font-size: pxVW(300);
-            left: 92%;
-            top: 50%;
            z-index: 1;
-            transform: translate(-50%, -50%);
+            top: 0;
+            right: 8%;
+            transform: translate(0, -25%);
+            font-size: pxVW(300);
+        }
+        @include breakpoint (md) {
+            top: 50%;
+            right: 0;
+            bottom: auto;
+            transform: translate(26.5vw, -50%);
+            width: 50%;
+            text-align: center;
+        }
+        @include breakpoint (lg) {
+            transform: translate(28vw, -50%);
        }
        @include breakpoint (xxl) {
            font-size: rem(300px);
+            transform: translate(70%, -50%);
        }
    }
 }