Consistent photos for each person on about page, photo desc update, m…

…obile friendliness improvement
nathan-contino · Nov 10, 2024 · 1efcc45 · 1efcc45
1 parent 78f66c5
commit 1efcc45
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/_stylesheets/lite.css b/_stylesheets/lite.css
@@ -149,28 +149,31 @@ li {
 }
 
 .hero-photo {
-  transform: skewX(-30deg) translateX(30px);
+  transform: skewX(-30deg) translateX(-25px);
   border: 0;
   border-radius: 0px 0px 0px 0px;
-  width: 300px;
-  height: 300px;
+  height: 200px;
+  width: 200px;
+  background: url(https://raw.githubusercontent.com/nathan-contino/images/main/images/nathan_art-1.webp);
+  background-size: cover;
+  background-position: center;
 }
 
 .other-hero-photo-container {
+  margin-left: 10%;
   transform: skewX(-30deg);
   border: solid 0.15em var(--mainalternative);
-  overflow: hidden;
-  height: 160px;
 }
 
 .other-hero-photo {
-  transform: skewX(30deg) translateX(-20px) translateY(-50px);
+  transform: skewX(30deg) translateX(15px);
   border: 0;
   border-radius: 0px 0px 0px 0px;
-  width: 260px;
-  height: 250px;
-  background: url(https://raw.githubusercontent.com/nathan-contino/images/main/images/mugz.webp);
+  height: 120px;
+  width: 100px;
+  background: url(https://raw.githubusercontent.com/nathan-contino/images/main/images/meg.webp);
   background-size: cover;
+  background-position: center; 
 }
 
 img {
@@ -590,6 +593,21 @@ nav {
   body {
     -webkit-text-size-adjust:none;
   }
+  .hero-photo {
+    transform: skewX(-30deg) translateX(-50px);
+  }
+  .hero-photo-container {
+    max-width: 20%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .other-hero-photo-container {
+    max-width: 20%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 /* blog post nav buttons */

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 
 <section class="two-column">
   <div style="flex:1;" class="hero-photo-container"> 
-    <img class="hero-photo" alt="Nathan Contino, this website's glorious architect." src="https://raw.githubusercontent.com/nathan-contino/images/main/images/nathan_art-1.webp"/>
+    <div class="hero-photo" alt="Nathan Contino, fabled founder of this website."></div>
   </div>
   <div style="flex:1; width: 100%;">
     <span>