Adds photo effect

djangocon · Apr 26, 2024 · 3d19f0a · 3d19f0a
1 parent b1758e5
commit 3d19f0a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/src/about/covid.html b/src/about/covid.html
@@ -39,7 +39,7 @@ <h3 id="check-in-procedure">Check-in Procedure</h3>
         another test. Here is an example of a negative test with the date:
       </p>
 
-      <figure class="media">
+      <figure>
         <img
           alt="A negative COVID-19 test with a phone showing the current date."
           src="/assets/img/misc/covid19-test-example.webp"

diff --git a/src/about/index.html b/src/about/index.html
@@ -136,11 +136,12 @@ <h3 class="text-lg font-bold lg:text-2xl font-heading" id="opportunity-grants">C
         {% comment %}
           TODO: Use Image component
         {% endcomment %}
-        <img
-          class="media"
-          src="/assets/img/crowd-1.jpg"
-          loading="lazy"
-          alt="DjangoCon US attendees smiling for a picture.">
+        <span class="photo-effect">
+          <img
+            src="/assets/img/crowd-1.jpg"
+            loading="lazy"
+            alt="DjangoCon US attendees smiling for a picture.">
+        </span>
       </figure>
 
       <section>

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -75,6 +75,19 @@
   .lead {
     @apply text-lg lg:text-xl;
   }
+
+  .photo-effect {
+    @apply relative;
+  }
+
+  .photo-effect::before {
+    @apply absolute z-10;
+    @apply block w-full h-full;
+    content: '';
+
+    opacity: 0.4;
+    background: linear-gradient(126deg, theme('colors.mosaic-blue') 11.2%, theme('colors.lucky-orange') 69.95%, theme('colors.brick-red') 90.34%);
+  }
 }
 
 @layer components {

diff --git a/src/assets/img/squiggle.svg b/src/assets/img/squiggle.svg
diff --git a/src/index.html b/src/index.html
@@ -118,11 +118,12 @@ <h3 class="text-lg font-bold lg:text-2xl font-heading">Accessiblity</h3>
         {% comment %}
           TODO: Use Image component
         {% endcomment %}
-        <img
-          class="media"
-          src="/assets/img/crowd-2.jpg"
-          loading="lazy"
-          alt="DjangoCon US attendees smiling for a picture.">
+        <span class="photo-effect">
+          <img
+            src="/assets/img/crowd-2.jpg"
+            loading="lazy"
+            alt="DjangoCon US attendees smiling for a picture.">
+        </span>
       </figure>
       <section>
         <h2 class="mb-8 text-2xl font-bold font-heading lg:text-5xl">Latest News</h2>