projects section updated with image

bhardwaj-lab · Jan 27, 2024 · f8e725c · f8e725c
1 parent f54a04e
commit f8e725c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2017,6 +2017,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-neutral-100\/20 {
   --tw-shadow-color: rgb(194 197 204 / 0.2);
   --tw-shadow: var(--tw-shadow-colored);
@@ -2405,6 +2411,12 @@ EmojiSymbols;
   text-decoration-line: underline;
 }
 
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -3061,6 +3073,11 @@ EmojiSymbols;
     padding-bottom: 5rem;
   }
 
+  .lg\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .lg\:pb-16 {
     padding-bottom: 4rem;
   }

diff --git a/assets/images/pages/vblab_projects.png b/assets/images/pages/vblab_projects.png
diff --git a/hugo.yaml b/hugo.yaml
@@ -84,6 +84,7 @@ params:
     links:
       - text: Learn more about our projects
         url: "#"
+    image: "images/pages/vblab_projects.png"
     logos:
       - identifier: a
         image: "images/global/sample-logo.svg"

diff --git a/layouts/index.html b/layouts/index.html
@@ -81,7 +81,7 @@ <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl
                     </svg>
                 </div>
                 <div class="relative w-full h-auto px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:px-0 lg:py-20">
-                    <div class="overflow-hidden shadow-xl rounded-2xl">
+                    <div class="overflow-hidden shadow-xl rounded-2xl hover:shadow-lg">
                         {{ $p1image := resources.Get .Site.Params.P1.Image }}
                         {{ with $p1image }}
                         {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
@@ -160,7 +160,7 @@ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white
                     {{ $p2image := resources.Get .Site.Params.P2.Image }}
                     {{ with $p2image }}
                     {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
-                    <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="p2" class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" loading="lazy" />
+                    <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="p2" class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none hover:shadow-lg" loading="lazy" />
                     {{ end }}
                     {{ end }}
 
@@ -170,9 +170,10 @@ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white
     </div>
 
 
-    <!-- Sponsors section -->
+    <!-- p3: Projects section -->
     <div class="max-w-md px-4 mx-auto md:pt-24 md:pb-16 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
         <div class="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
+    <!-- grid layout with logo:
             <div class="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
                 {{ range .Site.Params.P3.Logos }}
                 <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
@@ -185,6 +186,17 @@ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white
                     {{ end }}
                 </div>
                 {{ end }}
+            </div> -->
+    <!-- image -->
+            <div class="relative w-full h-auto px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:px-0 lg:py-20">
+                <div class="overflow-hidden shadow-2xl rounded-2xl hover:shadow-lg">
+                    {{ $p3image := resources.Get .Site.Params.P3.Image }}
+                    {{ with $p3image }}
+                    {{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
+                    <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" class="w-full h-auto" alt="P3" loading="lazy" />
+                    {{ end }}
+                    {{ end }}
+                </div>
             </div>
             <div>
                 <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
@@ -203,6 +215,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:
                 </div>
                 {{ end }}
             </div>
+
         </div>
     </div>