Fixed mobile view

TraXIcoN · Apr 18, 2024 · 789c486 · 789c486
1 parent e897d7f
commit 789c486
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -4,6 +4,26 @@ body {
 .intro {
   white-space: nowrap;
 }
+.p-text {
+  text-shadow: 0 0 10px white;
+  position: relative;
+  &::after,
+  &::before {
+    content: attr(data-text);
+    position: absolute;
+    left: 3px;
+    text-shadow: none;
+    background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F3DPAzwJxrwCre%2Fgiphy.gif&f=1&nofb=1&ipt=dc4dd2260b9ccecc06fc391c3c781a47f6dd210b6e9d1d80c61beb36b618cdc9&ipo=images);
+    background-clip: text;
+    color: transparent;
+    mix-blend-mode: lighten;
+    pointer-events: none;
+  }
+  &::before {
+    left: -3px;
+    mix-blend-mode: lighten;
+  }
+}
 .vertical-rectangle {
   position: absolute;
   rotate: 45deg;
@@ -109,7 +129,7 @@ body {
 .c {
   position: relative;
   width: 90vmin;
-  height: calc(90vmin * 9 / 16);
+  /* height: calc(90vmin * 9 / 16); */
   margin: auto;
   overflow: hidden;
   /* box-shadow: 0 1.25em 1em -0.5em #0005; */

diff --git a/index.html b/index.html
@@ -426,7 +426,7 @@ <h2 class="mb-5">About Me</h2>
                       <div class="s2"></div>
                       <div class="s3"></div>
                     </div>
-                    <p class="mb-5">
+                    <p class="mb-5 p-text">
                         I find solace in strumming my guitar, losing myself in the melodies I create. Reading is another love of mine; there's nothing quite like getting lost in the pages of a gripping novel.
                     </p>
                     <div class="photo-grid__item photo c">
@@ -443,7 +443,7 @@ <h2 class="mb-5">About Me</h2>
                       <div class="s2"></div>
                       <div class="s3"></div>
                     </div>
-                    <p class="mb-5">
+                    <p class="mb-5 p-text">
                         When it comes to entertainment, I'm drawn to thriller movies with intricate plots that keep me guessing until the end. I'm also an avid Formula 1 enthusiast, eagerly following the twists and turns of each race.
                     </p>
                     <div class="photo-grid__item photo c" style="height: auto;">
@@ -504,7 +504,7 @@ <h2 class="mb-5">About Me</h2>
                       <div class="s2"></div>
                       <div class="s3"></div>
                     </div>
-                    <p>
+                    <p class="mb-5 p-text">
                         As a developer, I thrive on creating elegant solutions to complex problems. Beyond coding, I'm deeply passionate about various pursuits that enrich my life.
                     </p>
                     <div class="photo-grid__item photo c" style="height: auto;">
@@ -523,7 +523,7 @@ <h2 class="mb-5">About Me</h2>
                       <br>
                       <br>
                     </div>
-                    <p class="mb-5">
+                    <p class="mb-5 p-text">
                         On the field, I enjoy playing cricket, relishing the camaraderie and competition it offers. And of course, I'm always ready to share my heart with furry friends, finding joy in the simple companionship they provide, especially dogs.
                     </p>
                   </div>