Update CSS styles and add instructor and staff images

chnm · Dec 12, 2023 · 96f89d6 · 96f89d6
1 parent 809e61c
commit 96f89d6
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 15 deletions.
diff --git a/assets/dist/main.css b/assets/dist/main.css
@@ -1048,6 +1048,10 @@ video {
   border-width: 0;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -1067,6 +1071,10 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1075,6 +1083,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1131,6 +1143,10 @@ video {
   max-width: 1280px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1165,6 +1181,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1173,6 +1193,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -1195,6 +1219,11 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1210,6 +1239,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1218,6 +1252,11 @@ video {
   padding: 1rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1227,6 +1266,10 @@ video {
   padding-bottom: 3rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1235,6 +1278,10 @@ video {
   padding-right: 1rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1244,6 +1291,11 @@ video {
   line-height: 2rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1254,6 +1306,10 @@ video {
   line-height: 1.75rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1268,12 +1324,28 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-ucla-blue {
+  --tw-text-opacity: 1;
+  color: rgb(0 51 160 / var(--tw-text-opacity));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 @font-face {
   font-family: 'Atkinson';
 

diff --git a/content/about.md b/content/about.md
@@ -3,23 +3,123 @@ title: About
 slug: /about/
 ---
 
-Instructors:
+## Instructors
 
-- Jessica Otis
-- Ashley Sanders
-- William Turkel
+<div class="flex justify-center space-x-4">
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/jo.jpg" alt="Jessica Otis">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Jessica Otis</p>
+    </div>
+  </div>
 
-Advisory Board:
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/as.jpg" alt="Ashley Sanders">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Ashley Sanders</p>
+    </div>
+  </div>
 
-- Sharon Block
-- Quinn Dombrowski
-- Matthew Handelman
-- Gizem Karaali
-- Kimberley Martin
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/comingsoon.png" alt="William Turkel">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">William Turkel</p>
+    </div>
+  </div>
+</div>
 
-Institute Staff:
+## Advisory Board
 
-- Bridget Bukovich
-- Jason Heppler
-- Jessica Otis
-- Ashley Sanders  
+<div class="flex justify-center space-x-4">
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/SharonBlockBioPic.JPG" alt="Sharon Block">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Sharon Block</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/comingsoon.png" alt="Quinn Dombrowski">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Quinn Dombrowski</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/handelman.png" alt="Matt Handelman">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Matt Handelman</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/comingsoon.png" alt="Gizem Karaali">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Gizem Karaali</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+  <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/comingsoon.png" alt="Kimberley Martin">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Kimberley Martin</p>
+    </div>
+  </div>
+
+</div>
+
+## Institute Staff
+
+<div class="flex justify-center space-x-4">
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/bb.jpg" alt="Bridget Bukovich">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Bridget Bukovich</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/jh.jpg" alt="Jason Heppler">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Jason Heppler</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/jo.jpg" alt="Jessica Otis">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Jessica Otis</p>
+    </div>
+  </div>
+
+  <div class="flex flex-col items-center">
+    <div class="w-40 h-40">
+      <img class="object-cover rounded-full" src="/images/as.jpg" alt="Ashley Sanders">
+    </div>
+    <div class="mt-6 text-center">
+      <p class="text-lg font-bold">Ashley Sanders</p>
+    </div>
+  </div>
+</div>
diff --git a/static/images/SharonBlockBioPic.JPG b/static/images/SharonBlockBioPic.JPG
diff --git a/static/images/bb.jpg b/static/images/bb.jpg
diff --git a/static/images/comingsoon.png b/static/images/comingsoon.png
diff --git a/static/images/handelman.png b/static/images/handelman.png
diff --git a/static/images/jh.jpg b/static/images/jh.jpg
diff --git a/static/images/jo.jpg b/static/images/jo.jpg