Add photo box shadow ✨

wwang721 · Nov 27, 2023 · 5a470b6 · 5a470b6
1 parent b66a755
commit 5a470b6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/1news.md b/1news.md
@@ -16,7 +16,7 @@ permalink: /news.html
             <li style="border: 0px solid black; overflow: hidden">
             
                 <div style="float: left; width: 325px; height: 185px; border: 0px solid red;">
-                <div style="width:280px; height: 172px; border: 1px solid #E5E4E2; overflow:hidden; display: flex; align-items: center; justify-content: center;">
+                <div style="width:280px; height: 172px; border: 1px solid #E5E4E2; overflow:hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0px rgba(0, 0, 0, 0.19);">
                 <a href="{{ post.url | relative_url }}" title="{{post.title}}">
                     {% assign date_format = "%Y-%m-%d" %}
                     <img src="images/posts/{{post.date|date:date_format}}.jpg" alt="Not available" title="{{post.title}}"
@@ -25,7 +25,7 @@ permalink: /news.html
                 </div>
                 </div>
 
-                <div style="float: left; width:69%; border: 0px solid green;">
+                <div style="float: left; width:66%; border: 0px solid green;">
 
                 {% assign date_format = site.cayman-blog.date_format | default: "%b %-d, %Y" %}
                 <span class="post-meta">{{ post.date | date: date_format }}</span>

diff --git a/3about.md b/3about.md
@@ -5,17 +5,19 @@ tagline:
 permalink: /about.html
 ---
 
-<div class="row" style="border: 0px solid green; overflow: hidden; margin: -100px 0px 0px 30px">
-    
+<div class="row" style="border: 0px solid green; overflow: hidden; margin: -120px 0px 0px 0px">
+<div class="row" style="border: 0px solid red; margin: 20px 0px 0px 30px">
 <div style='float:left; border: 0px solid black;'>
+<div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow: hidden;">
 <img src='./images/2023usgp.png' alt="Photo" title="Forza Ferrari! Tifosi at 2023 F1 USGP!" style='width:200px;   border: 7px solid white'/>
-<p id="text" style="margin:-8px 0px 0px 36px;"><font size="2"> <i>Tifosi</i> at F1 USGP</font></p>
-<p style="margin:-10px 0px 0px 48px"><font size="1.8">Austin, TX (2023)</font></p> 
-<p style="margin: 15px 0px 0px 0px">
+<p id="text" style="margin:-10px 0px 0px 45px;"><font size="2"> <i>Tifosi</i> at F1 USGP</font></p>
+<p style="margin:-10px 0px 7px 59px"><font size="1.8">Austin, TX (2023)</font></p>
+</div>
+<p style="margin: 28px 0px 0px 4px">
 <svg style="float:left; margin:3px 12px 0px 10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20"><path fill="#4285f4" d="M256 411.12L0 202.667 256 0z"/><path fill="#356ac3" d="M256 411.12l256-208.453L256 0z"/><circle fill="#a0c3ff" cx="256" cy="362.667" r="149.333"/><path fill="#76a7fa" d="M121.037 298.667c23.968-50.453 75.392-85.334 134.963-85.334s110.995 34.881 134.963 85.334H121.037z"/></svg>
 <a href="https://scholar.google.com/citations?user=zvd30L4AAAAJ&hl=en" target="_blank"> <font color="gray" size="3"><u>Google Scholar</u></font></a>
 </p>
-<p style="margin: 10px 0px 0px 0px">
+<p style="margin: 10px 0px 0px 4px">
 <svg style="float:left; margin:3px 12px 0px 10px" width="22px" height="22px" viewBox="0 0 72 72" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -37,7 +39,7 @@ permalink: /about.html
 </svg>
 <a href="https://orcid.org/0000-0002-0053-1069" target="_blank"> <font color="gray" size="3"><u>ORCID</u></font></a>
 </p>
-<p style="margin: 10px 0px 36px 0px">
+<p style="margin: 10px 0px 36px 4px">
 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="23px" height="23px" version="1.1" style="float:left; margin:3px 12px 0px 10px; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
 viewBox="0 0 32 32"
  xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -93,6 +95,7 @@ viewBox="0 0 32 32"
 </li>
 </ul>
 
+</div>
 </div>
 </div>
 
@@ -110,7 +113,7 @@ viewBox="0 0 32 32"
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;Ph.D. candidate, Physics</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:68%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:66%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2023-present</b></div>
 </div>
 
@@ -119,7 +122,7 @@ viewBox="0 0 32 32"
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;M.A., Physics</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:80%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:78%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2020-2023</b></div>
 </div>
 
@@ -132,7 +135,7 @@ viewBox="0 0 32 32"
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;B.S., Physics <!--(*summa cum laude*)--> </div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:80%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:79%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2016-2020</b></div>
 </div>
 
@@ -150,13 +153,13 @@ viewBox="0 0 32 32"
 * **Department of Physics & Astronomy, Johns Hopkins University**
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:-5px 0px 10px 50px">
     <div style="float:left; border: 0px solid black;">&cir;&ensp;Graduate research assistant (RA) supported by Brian A. Camley</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:38%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:33%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2021-present</b></div>
 </div>
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 50px">
     <div style="float:left; border: 0px solid black;">&cir;&ensp;Teaching assistant (TA)</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:72%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:69%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;"/></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2020-2021</b></div>
 </div>
 
@@ -170,10 +173,10 @@ viewBox="0 0 32 32"
 <hr style="height:5px;" />
 
 
-<div style='margin: 35px 0px 0px 0px;'>
-<img src='./images/camleyGroup.jpg' alt="Camley Group" title="Camley Group 2023 March Meeting" style='width:350px;'/>
-<p id="text" style="margin:-3px 0px 0px 48px"><font size="3"> Camley Group APS March Meeting</font></p>
-<p style="margin:-7px 0px 0px 108px"><font size="2">Las Vegas, NV (2023)</font></p> 
+<div style='margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 350px; overflow: hidden;'>
+<img src='./images/camleyGroup.jpg' alt="Camley Group" title="Camley Group 2023 March Meeting" style='width:350px;border: 7px solid white'/>
+<p id="text" style="margin:-10px 0px 0px 48px"><font size="3"> Camley Group APS March Meeting</font></p>
+<p style="margin:-7px 0px 4px 110px"><font size="2">Las Vegas, NV (2023)</font></p> 
 </div>
 
 

diff --git a/about.html b/about.html
@@ -206,17 +206,19 @@ <h2 class="project-tagline"></h2>
       <article>
 
   <div>
-    <div class="row" style="border: 0px solid green; overflow: hidden; margin: -100px 0px 0px 30px">
-    
+    <div class="row" style="border: 0px solid green; overflow: hidden; margin: -120px 0px 0px 0px">
+<div class="row" style="border: 0px solid red; margin: 20px 0px 0px 30px">
 <div style="float:left; border: 0px solid black;">
+<div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow: hidden;">
 <img src="./images/2023usgp.png" alt="Photo" title="Forza Ferrari! Tifosi at 2023 F1 USGP!" style="width:200px;   border: 7px solid white" />
-<p id="text" style="margin:-8px 0px 0px 36px;"><font size="2"> <i>Tifosi</i> at F1 USGP</font></p>
-<p style="margin:-10px 0px 0px 48px"><font size="1.8">Austin, TX (2023)</font></p> 
-<p style="margin: 15px 0px 0px 0px">
+<p id="text" style="margin:-10px 0px 0px 45px;"><font size="2"> <i>Tifosi</i> at F1 USGP</font></p>
+<p style="margin:-10px 0px 7px 59px"><font size="1.8">Austin, TX (2023)</font></p>
+</div>
+<p style="margin: 28px 0px 0px 4px">
 <svg style="float:left; margin:3px 12px 0px 10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20"><path fill="#4285f4" d="M256 411.12L0 202.667 256 0z" /><path fill="#356ac3" d="M256 411.12l256-208.453L256 0z" /><circle fill="#a0c3ff" cx="256" cy="362.667" r="149.333" /><path fill="#76a7fa" d="M121.037 298.667c23.968-50.453 75.392-85.334 134.963-85.334s110.995 34.881 134.963 85.334H121.037z" /></svg>
 <a href="https://scholar.google.com/citations?user=zvd30L4AAAAJ&amp;hl=en" target="_blank"> <font color="gray" size="3"><u>Google Scholar</u></font></a>
 </p>
-<p style="margin: 10px 0px 0px 0px">
+<p style="margin: 10px 0px 0px 4px">
 <svg style="float:left; margin:3px 12px 0px 10px" width="22px" height="22px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Orcid logo</title>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -236,7 +238,7 @@ <h2 class="project-tagline"></h2>
 </svg>
 <a href="https://orcid.org/0000-0002-0053-1069" target="_blank"> <font color="gray" size="3"><u>ORCID</u></font></a>
 </p>
-<p style="margin: 10px 0px 36px 0px">
+<p style="margin: 10px 0px 36px 4px">
 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="23px" height="23px" version="1.1" style="float:left; margin:3px 12px 0px 10px; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
  <defs>
   <style type="text/css">
@@ -289,6 +291,7 @@ <h1> <font color="#71797E"><b>Wei Wang<font face="KaiTi" size="6">（汪巍）</
 </li>
 </ul>
 
+</div>
 </div>
 </div>
 
@@ -304,15 +307,15 @@ <h2 id="education"><strong>EDUCATION</strong></h2>
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;Ph.D. candidate, Physics</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:68%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:66%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2023-present</b></div>
 </div>
 
 <p style="margin: 15px 0px 20px 65px">&cir;&ensp;Advisor: &ensp;Brian A. Camley</p>
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;M.A., Physics</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:80%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:78%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2020-2023</b></div>
 </div>
 
@@ -324,7 +327,7 @@ <h2 id="education"><strong>EDUCATION</strong></h2>
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 40px">
     <div style="float:left; border: 0px solid black;">&#x25cf;&ensp;B.S., Physics <!--(*summa cum laude*)--> </div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:80%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:79%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2016-2020</b></div>
 </div>
 
@@ -343,13 +346,13 @@ <h2 id="appointments"><strong>APPOINTMENTS</strong></h2>
 </ul>
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:-5px 0px 10px 50px">
     <div style="float:left; border: 0px solid black;">&cir;&ensp;Graduate research assistant (RA) supported by Brian A. Camley</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:38%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:33%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2021-present</b></div>
 </div>
 
 <div class="row" style="border: 0px solid green; overflow:hidden; margin:0px 0px 0px 50px">
     <div style="float:left; border: 0px solid black;">&cir;&ensp;Teaching assistant (TA)</div>
-    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:72%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
+    <div class="column" style="float:left; border: 0px solid black; overflow:hidden; width:69%"><hr style="margin:12px 15px 0px 20px;border-top: dotted 3px; background-color: transparent;" /></div>
     <div class="column" style="float:right; border:0px solid black;"><b>2020-2021</b></div>
 </div>
 
@@ -361,10 +364,10 @@ <h2 id="gallery"><strong>GALLERY</strong></h2>
 
 <hr style="height:5px;" />
 
-<div style="margin: 35px 0px 0px 0px;">
-<img src="./images/camleyGroup.jpg" alt="Camley Group" title="Camley Group 2023 March Meeting" style="width:350px;" />
-<p id="text" style="margin:-3px 0px 0px 48px"><font size="3"> Camley Group APS March Meeting</font></p>
-<p style="margin:-7px 0px 0px 108px"><font size="2">Las Vegas, NV (2023)</font></p> 
+<div style="margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 350px; overflow: hidden;">
+<img src="./images/camleyGroup.jpg" alt="Camley Group" title="Camley Group 2023 March Meeting" style="width:350px;border: 7px solid white" />
+<p id="text" style="margin:-10px 0px 0px 48px"><font size="3"> Camley Group APS March Meeting</font></p>
+<p style="margin:-7px 0px 4px 110px"><font size="2">Las Vegas, NV (2023)</font></p> 
 </div>
 
 <p> </p>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -3,7 +3,7 @@
 
 // to change width of the all pages @ WW 11/24/2023
 
-$navbar-width: 1280px;
+$navbar-width: 1200px;
 
 @import "jekyll-theme-cayman-blog";