From c7ff623594f8331ab7a4daf4692bd432764bd012 Mon Sep 17 00:00:00 2001
From: Theodore <tedzh17@gmail.com>
Date: Tue, 21 May 2024 19:21:12 -0700
Subject: [PATCH] Update style-no-dark-mode.css

---
 assets/css/style-no-dark-mode.css | 1109 +++++++++++++++--------------
 1 file changed, 559 insertions(+), 550 deletions(-)

diff --git a/assets/css/style-no-dark-mode.css b/assets/css/style-no-dark-mode.css
index 7a891a7..5091b0b 100644
--- a/assets/css/style-no-dark-mode.css
+++ b/assets/css/style-no-dark-mode.css
@@ -1,552 +1,561 @@
 /* Specific styles for the FUN section */
 #fun {
-    font-style: normal; /* Ensure the default font style is normal */
-  }
-  
-  #fun .h4 {
-    font-style: normal; /* Ensure the heading is not italic */
-    font-weight: 500;
-  }
-
-  #fun .p{
-    font-style: normal; /* Ensure the paragraphs are not italic */
-  }
-  
-  #fun ul {
-    list-style-type: none; /* Remove bullets from the list */
-    padding: 0;
-  }
-  
-  #fun .music-item {
-    margin-bottom: 5px;
-    display: flex;
-    align-items: center;
-    font-style: normal; /* Ensure the music items are not italic */
-  }
-  
-  #fun .audio-btn {
-    background: none;
-    border: none;
-    color: #39c;
-    font-size: 0.8em;
-    margin-left: 4px;
-    cursor: pointer;
-    font-style: normal; /* Ensure the buttons are not italic */
-  }
-  
-  #fun .audio-btn:focus {
-    outline: none;
-  }
-  
-  #fun .music-item p {
-    margin: 0;
-    flex-grow: 1;
-    font-style: normal; /* Ensure the paragraphs are not italic */
-  }
-  
-  /* Additional styles to align links with periodical info */
-  .periodical {
-    display: flex;
-    align-items: center; /* Vertically center the content */
-  }
-  
-  .links {
-    margin-left: 10px;
-    display: flex;
-    gap: 5px;
-  }
-  
-  .links .btn {
-    padding: 2px 6px;
-    font-size: 0.875em;
-  }
-  
-  /* General styles */
-  @import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
-  
-  body {
-    background-color: #fff;
-    color: #595959;
-    font: 16px/1.5 'Crimson Pro', serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-  }
-  
-  h1, h2, h3, h4, h5, h6 {
-    color: #000;
-    font-weight: 600;
-    line-height: 1.1;
-    margin: 0 0 20px;
-  }
-  
-  h1 {
-    font-size: 28px;
-    font-weight: 500;
-  }
-  
-  h2 {
-    font-size: 157%;
-    font-style: normal;
-    font-weight: 500;
-    margin: 2px 0 15px;
-  }
-
-  h3 {
-    font-size: 115%;
-    font-weight: 500;
-    margin: 2px 0 15px;
-  }
-  
-  p, ul, ol, table, pre, dl {
-    margin: 0 0 20px;
-  }
-  
-  a {
-    color: #39c;
-    text-decoration: none;
-  }
-  
-  a:hover {
-    color: #069;
-  }
-  
-  .wrapper {
-    margin: 0 auto;
-    width: 1080px; /* Increase the width */
-  }
-  
-  header {
-    -webkit-font-smoothing: subpixel-antialiased;
-    float: left;
-    padding-top: 4em;
-    position: fixed;
-    text-align: center;
-    width: 250px; /* Slightly increase the width of header */
-  }
-  
-  section {
-    margin-left: 280px; /* */
-    padding-bottom: 50px;
-    padding-top: 4em;
-    width: 800px; /*  */
-  }
-  
-  .footer  {
-    -webkit-font-smoothing: subpixel-antialiased;
-    bottom: 5px;
-    float: right;
-    position: fixed;
-    text-align: center;
-    width: 250px; /* Adjust the width to match header */
-  }
-  
-  .image {
-    border: 0;
-    border-radius: 0.35em;
-    display: inline-block;
-    position: relative;
-  }
-  
-  .image:before {
-    -moz-transition: opacity 0.2s ease-in-out;
-    -webkit-transition: opacity 0.2s ease-in-out;
-    -ms-transition: opacity 0.2s ease-in-out;
-    border-radius: 0.35em;
-    content: '';
-    display: block;
-    height: 100%;
-    left: 0;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    transition: opacity 0.2s ease-in-out;
-    width: 100%;
-  }
-  
-  .image.avatar {
-    border-radius: 15px;
-    display: inline-block;
-    height: 230px;
-    object-fit: cover;
-    padding: 20px;
-    position: relative;
-    width: 180px;
-  }
-  
-  .image.avatar:before {
-    display: none;
-  }
-  
-  .image.avatar img {
-    border-radius: 10px;
-    height: 100%;
-    object-fit: cover;
-    padding: 0;
-    width: 100%;
-  }
-  
-  #header .image.avatar {
-    height: 150px;
-    margin: 0 0 1em 0;
-    width: 200px;
-  }
-  
-  .icon-button {
-    background-color: white;
-    border-radius: 3.6rem;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 2rem;
-    height: 1.5rem;
-    line-height: 1.5rem;
-    margin: 0 5px;
-    position: relative;
-    text-align: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    width: 1.5rem;
-  }
-  
-  .icon-button span {
-    border-radius: 0;
-    display: block;
-    height: 0;
-    left: 50%;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    -webkit-transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    transition: all 0.3s;
-    width: 0;
-  }
-  
-  .icon-button:hover span {
-    border-radius: 2rem;
-    height: 2rem;
-    margin: -1.8rem;
-    width: 2rem;
-  }
-  
-  .icon-button i {
-    background: none;
-    color: white;
-    height: 2rem;
-    left: 0;
-    line-height: 2rem;
-    position: absolute;
-    top: 0;
-    -webkit-transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    -o-transition: all 0.3s;
-    transition: all 0.3s;
-    width: 3.6rem;
-    z-index: 10;
-  }
-  
-  .twitter span {
-    background-color: #4099ff;
-  }
-  
-  .facebook span {
-    background-color: #4286f4;
-  }
-  
-  .linkedin span {
-    background-color: #0077B5;
-  }
-  
-  .github span {
-    background-color: #000;
-  }
-  
-  .icon-button .icon-twitter {
-    color: #4099ff;
-  }
-  
-  .icon-button .icon-facebook {
-    color: #4286f4;
-  }
-  
-  .icon-button .icon-github {
-    color: #000;
-  }
-  
-  .icon-button .icon-linkedin {
-    color: #0077B5;
-  }
-  
-  .icon-button:hover .icon-twitter,
-  .icon-button:hover .icon-facebook,
-  .icon-button:hover .icon-github,
-  .icon-button:hover .icon-linkedin {
-    color: white;
-  }
-  
-  .social-icons {
-    display: flex;
-    flex-direction: column; /* Change to vertical layout */
-    align-items: flex-start; /* Center align items horizontally */
-    gap: 3px; /* Reduce the gap between items */
-    margin-top: 20px;
-  }
-  
-  .social-icons a {
-    color: #043361 !important;
-    display: flex; /* Use flex to align icon and text */
-    align-items: center; /* Vertically center align the icon and text */
-    font-size: 0.9rem; /* Reduce the font size for icons and text */
-    text-align: left;
-    margin-bottom: 6px; /* Reduce margin-bottom for spacing between icons */
-    padding: 0 40px; /* Add padding to the left and right */
-  }
-  
-  .social-icons a:hover {
-    background-color: white;
-    color: black;
-    transform: scale(1.1); /* Reduce the scale effect on hover */
-  }
-  
-  .social-icons i {
-    margin-right: 6px; /* Reduce margin to the right of the icon */
-    font-size: 1rem; /* Reduce the font size of the icons */
-  }
-  
-  .social-icons span {
-    font-size: 0.9rem; /* Set the font size for the text */
-  }
-  
-  .autocolor {
-    color: #595959;
-  }
-  
-  .lightonly {
-    visibility: visible;
-  }
-  
-  .darkonly {
-    visibility: hidden;
-  }
-  
-  .education {
-    font-size: 115%;
-    font-weight: 500;
-  }
-  
-  .papertitle {
-    font-size: 100%;
-    font-weight: 600;
-  }
-  
-  .email {
-    font-family: "Ubuntu Mono";
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  
-  @media print, screen and (max-width: 960px) {
-    .pub-row {
-      align-items: center;
-      display: flex;
-    }
-  
-    .wrapper {
-      margin: 0;
-      width: auto;
-    }
-  
-    header, section, footer {
-      float: none;
-      position: static;
-      width: auto;
-    }
-  
-    header {
-      padding-right: 320px;
-    }
-  
-    section {
-      border: 1px solid #e5e5e5;
-      border-width: 1px 0;
-      margin: 0 0 20px;
-      padding: 20px 0;
-    }
-  
-    header a small {
-      display: inline;
-    }
-  
-    header ul {
-      position: absolute;
-      right: 50px;
-      top: 52px;
-    }
-  
-    .image.avatar img {
-      border-radius: 100%;
-      padding: 20px;
-      width: 117px;
-    }
-  
-    #head1o2, #head2o2 {
-      visibility: hidden;
-    }
-  }
-  
-  @media print, screen and (max-width: 960px) {
-    body {
-      padding: 15px;
-      word-wrap: break-word;
-    }
-  
-    .pub-row {
-      align-items: center;
-      display: flex;
-    }
-  
-    header {
-      padding: 0;
-    }
-  
-    pre, code {
-      word-wrap: normal;
-    }
-  }
-  
-  @media print, screen and (max-width: 480px) {
-    .pub-row {
-      align-items: center;
-      display: block;
-    }
-  
-    body {
-      padding: 15px;
-    }
-  
-    header ul {
-      width: 99%;
-    }
-  
-    header li, header ul li + li + li {
-      width: 33%;
-    }
-  
-    .image.avatar img {
-      border-radius: 100%;
-      padding: 20px;
-      width: 95px;
-    }
-  
-    #head1o2, #head2o2 {
-      visibility: hidden;
-    }
-  }
-  
-  @media print {
-    body {
-      color: #444;
-      font-size: 12pt;
-      padding: 0.4in;
-    }
-  }
-  
-  .biblink {
-    display: inline;
-    margin-right: 0;
-    text-decoration: none;
-  }
-  
-  .fakelink {
-    cursor: pointer;
-    text-decoration: none;
-  }
-  
-  .bibref {
-    display: none;
-    font-family: monospace;
-    font-size: 70%;
-    margin-left: 0;
-    margin-top: 10px;
-  }
-  
-  /* Publication Styles */
-  .pub-row {
-    display: flex;
-    align-items: center; /* Center align items vertically */
-    margin-bottom: 40px; /* Increase the margin to add more space between publications */
-  }
-  
-  .pub-row .col-sm-3 {
-    flex: 0 0 25%;
-    display: flex;
-    align-items: center; /* Center align items vertically within this column */
-  }
-  
-  .pub-row .col-sm-9 {
-    flex: 1;
-    padding-left: 20px; /* Add padding to separate the text from the image */
-  }
-  
-  .teaser {
-    width: 120%; /* Ensure the image takes the full width of the column */
-    height: auto;
-    max-width: 180px; /* Adjust this value to control the maximum width of the image */
-    max-height: 200px; /* Adjust this value to control the maximum height of the image */
-    object-fit: cover; /* Ensure the image covers the area without distortion */
-    margin-right: 20px; /* Add margin to the right to space out from the text */
-  }
-  
-  .pub-description mt-2 {
-    margin-top: 2px; /* Adjust the margin to space out the description */
-    font-size: 8pt;
-  }
-  
-  /* Additional General Styles */
-  .music-list {
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  .music-item {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-  }
-  
-  .audio-btn {
-    background: none;
-    border: none;
-    color: #39c;
-    font-size: 1em;
-    margin-left: 5px;
-    cursor: pointer;
-    font-style: normal; /* Ensure the buttons are not italic */
-  }
-  
-  .audio-btn:focus {
-    outline: none;
-  }
-  
-  .music-item p {
-    margin: 0;
-    flex-grow: 1;
-    font-style: normal; /* Ensure the paragraphs are not italic */
-  }
-  
-
-
-  .bibliography {
-    list-style-type: none;
-    padding-left: 0;
-  }
-  
-  .bibliography li {
-    counter-increment: none;
-    padding-left: 0;
-  }
-  
+font-style: normal; /* Ensure the default font style is normal */
+}
+
+#fun .h4 {
+font-style: normal; /* Ensure the heading is not italic */
+font-weight: 500;
+}
+
+#fun .p{
+font-style: normal; /* Ensure the paragraphs are not italic */
+}
+
+#fun ul {
+list-style-type: none; /* Remove bullets from the list */
+padding: 0;
+}
+
+#fun .music-item {
+margin-bottom: 5px;
+display: flex;
+align-items: center;
+font-style: normal; /* Ensure the music items are not italic */
+}
+
+#fun .audio-btn {
+background: none;
+border: none;
+color: #39c;
+font-size: 0.8em;
+margin-left: 4px;
+cursor: pointer;
+font-style: normal; /* Ensure the buttons are not italic */
+}
+
+#fun .audio-btn:focus {
+outline: none;
+}
+
+#fun .music-item p {
+margin: 0;
+flex-grow: 1;
+font-style: normal; /* Ensure the paragraphs are not italic */
+}
+
+/* Additional styles to align links with periodical info */
+.periodical {
+display: flex;
+align-items: center; /* Vertically center the content */
+}
+
+.links {
+margin-left: 10px;
+display: flex;
+gap: 5px;
+}
+
+.links .btn {
+padding: 2px 6px;
+font-size: 0.875em;
+}
+
+/* General styles */
+@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
+
+body {
+background-color: #fff;
+color: #595959;
+font: 16px/1.5 'Crimson Pro', serif;
+font-weight: 400;
+margin: 0;
+padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+color: #000;
+font-weight: 600;
+line-height: 1.1;
+margin: 0 0 20px;
+}
+
+h1 {
+font-size: 28px;
+font-weight: 500;
+}
+
+h2 {
+font-size: 157%;
+font-style: normal;
+font-weight: 500;
+margin: 2px 0 15px;
+}
+
+h3 {
+font-size: 115%;
+font-weight: 500;
+margin: 2px 0 15px;
+}
+
+p, ul, ol, table, pre, dl {
+margin: 0 0 20px;
+}
+
+a {
+color: #39c;
+text-decoration: none;
+}
+
+a:hover {
+color: #069;
+}
+
+.wrapper {
+margin: 0 auto;
+width: 1080px; /* Increase the width */
+}
+
+header {
+-webkit-font-smoothing: subpixel-antialiased;
+float: left;
+padding-top: 4em;
+position: fixed;
+text-align: center;
+width: 200px; /* Slightly increase the width of header */
+}
+
+section {
+margin-left: 255px; /* Adjust the left margin to make the section wider */
+padding-bottom: 50px;
+padding-top: 4em;
+width: 860px; /* Adjust the width */
+}
+
+.footer  {
+-webkit-font-smoothing: subpixel-antialiased;
+bottom: 5px;
+float: right;
+position: fixed;
+text-align: center;
+width: 280px; /* Adjust the width to match header */
+}
+
+.image {
+border: 0;
+border-radius: 0.35em;
+display: inline-block;
+position: relative;
+}
+
+.image:before {
+-moz-transition: opacity 0.2s ease-in-out;
+-webkit-transition: opacity 0.2s ease-in-out;
+-ms-transition: opacity 0.2s ease-in-out;
+border-radius: 0.35em;
+content: '';
+display: block;
+height: 100%;
+left: 0;
+opacity: 0.5;
+position: absolute;
+top: 0;
+transition: opacity 0.2s ease-in-out;
+width: 100%;
+}
+
+.image.avatar {
+border-radius: 15px;
+display: inline-block;
+height: 230px;
+object-fit: cover;
+padding: 20px;
+position: relative;
+width: 180px;
+}
+
+.image.avatar:before {
+display: none;
+}
+
+.image.avatar img {
+border-radius: 10px;
+height: 100%;
+object-fit: cover;
+padding: 0;
+width: 100%;
+}
+
+#header .image.avatar {
+height: 150px;
+margin: 0 0 1em 0;
+width: 200px;
+}
+
+.icon-button {
+background-color: white;
+border-radius: 3.6rem;
+cursor: pointer;
+display: inline-block;
+font-size: 2rem;
+height: 1.5rem;
+line-height: 1.5rem;
+margin: 0 5px;
+position: relative;
+text-align: center;
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+width: 1.5rem;
+}
+
+.icon-button span {
+border-radius: 0;
+display: block;
+height: 0;
+left: 50%;
+margin: 0;
+position: absolute;
+top: 50%;
+-webkit-transition: all 0.3s;
+-moz-transition: all 0.3s;
+-o-transition: all 0.3s;
+transition: all 0.3s;
+width: 0;
+}
+
+.icon-button:hover span {
+border-radius: 2rem;
+height: 2rem;
+margin: -1.8rem;
+width: 2rem;
+}
+
+.icon-button i {
+background: none;
+color: white;
+height: 2rem;
+left: 0;
+line-height: 2rem;
+position: absolute;
+top: 0;
+-webkit-transition: all 0.3s;
+-moz-transition: all 0.3s;
+-o-transition: all 0.3s;
+transition: all 0.3s;
+width: 3.6rem;
+z-index: 10;
+}
+
+.twitter span {
+background-color: #4099ff;
+}
+
+.facebook span {
+background-color: #4286f4;
+}
+
+.linkedin span {
+background-color: #0077B5;
+}
+
+.github span {
+background-color: #000;
+}
+
+.icon-button .icon-twitter {
+color: #4099ff;
+}
+
+.icon-button .icon-facebook {
+color: #4286f4;
+}
+
+.icon-button .icon-github {
+color: #000;
+}
+
+.icon-button .icon-linkedin {
+color: #0077B5;
+}
+
+.icon-button:hover .icon-twitter,
+.icon-button:hover .icon-facebook,
+.icon-button:hover .icon-github,
+.icon-button:hover .icon-linkedin {
+color: white;
+}
+
+.social-icons {
+display: flex;
+flex-direction: column; /* Change to vertical layout */
+align-items: flex-start; /* Center align items horizontally */
+gap: 3px; /* Reduce the gap between items */
+margin-top: 20px;
+}
+
+.social-icons a {
+color: #043361 !important;
+display: flex; /* Use flex to align icon and text */
+align-items: center; /* Vertically center align the icon and text */
+font-size: 0.9rem; /* Reduce the font size for icons and text */
+text-align: left;
+margin-bottom: 6px; /* Reduce margin-bottom for spacing between icons */
+padding: 0 40px; /* Add padding to the left and right */
+}
+
+.social-icons a:hover {
+background-color: white;
+color: black;
+transform: scale(1.1); /* Reduce the scale effect on hover */
+}
+
+.social-icons i {
+margin-right: 6px; /* Reduce margin to the right of the icon */
+font-size: 1rem; /* Reduce the font size of the icons */
+}
+
+.social-icons span {
+font-size: 0.9rem; /* Set the font size for the text */
+}
+
+.autocolor {
+color: #595959;
+}
+
+.lightonly {
+visibility: visible;
+}
+
+.darkonly {
+visibility: hidden;
+}
+
+.education {
+font-size: 115%;
+font-weight: 500;
+}
+
+.papertitle {
+font-size: 100%;
+font-weight: 600;
+}
+
+.email {
+font-family: "Ubuntu Mono";
+font-size: 14px;
+margin-bottom: 20px;
+}
+
+@media print, screen and (max-width: 960px) {
+.pub-row {
+align-items: center;
+display: flex;
+}
+
+```
+.wrapper {
+  margin: 0;
+  width: auto;
+}
+
+header, section, footer {
+  float: none;
+  position: static;
+  width: auto;
+}
+
+header {
+  padding-right: 320px;
+}
+
+section {
+  border: 1px solid #e5e5e5;
+  border-width: 1px 0;
+  margin: 0 0 20px;
+  padding: 20px 0;
+}
+
+header a small {
+  display: inline;
+}
+
+header ul {
+  position: absolute;
+  right: 50px;
+  top: 52px;
+}
+
+.image.avatar img {
+  border-radius: 100%;
+  padding: 20px;
+  width: 117px;
+}
+
+#head1o2, #head2o2 {
+  visibility: hidden;
+}
+
+```
+
+}
+
+@media print, screen and (max-width: 960px) {
+body {
+padding: 15px;
+word-wrap: break-word;
+}
+
+```
+.pub-row {
+  align-items: center;
+  display: flex;
+}
+
+header {
+  padding: 0;
+}
+
+pre, code {
+  word-wrap: normal;
+}
+
+```
+
+}
+
+@media print, screen and (max-width: 480px) {
+.pub-row {
+align-items: center;
+display: block;
+}
+
+```
+body {
+  padding: 15px;
+}
+
+header ul {
+  width: 99%;
+}
+
+header li, header ul li + li + li {
+  width: 33%;
+}
+
+.image.avatar img {
+  border-radius: 100%;
+  padding: 20px;
+  width: 95px;
+}
+
+#head1o2, #head2o2 {
+  visibility: hidden;
+}
+
+```
+
+}
+
+@media print {
+body {
+color: #444;
+font-size: 12pt;
+padding: 0.4in;
+}
+}
+
+.biblink {
+display: inline;
+margin-right: 0;
+text-decoration: none;
+}
+
+.fakelink {
+cursor: pointer;
+text-decoration: none;
+}
+
+.bibref {
+display: none;
+font-family: monospace;
+font-size: 70%;
+margin-left: 0;
+margin-top: 10px;
+}
+
+/* Publication Styles */
+.pub-row {
+display: flex;
+align-items: center; /* Center align items vertically */
+margin-bottom: 40px; /* Increase the margin to add more space between publications */
+}
+
+.pub-row .col-sm-3 {
+flex: 0 0 25%;
+display: flex;
+align-items: center; /* Center align items vertically within this column */
+}
+
+.pub-row .col-sm-9 {
+flex: 1;
+padding-left: 20px; /* Add padding to separate the text from the image */
+}
+
+.teaser {
+width: 120%; /* Ensure the image takes the full width of the column */
+height: auto;
+max-width: 180px; /* Adjust this value to control the maximum width of the image */
+max-height: 200px; /* Adjust this value to control the maximum height of the image */
+object-fit: cover; /* Ensure the image covers the area without distortion */
+margin-right: 20px; /* Add margin to the right to space out from the text */
+}
+
+.pub-description mt-2 {
+margin-top: 2px; /* Adjust the margin to space out the description */
+font-size: 8pt;
+}
+
+/* Additional General Styles */
+.music-list {
+list-style-type: none;
+padding: 0;
+}
+
+.music-item {
+margin-bottom: 20px;
+display: flex;
+align-items: center;
+}
+
+.audio-btn {
+background: none;
+border: none;
+color: #39c;
+font-size: 1em;
+margin-left: 5px;
+cursor: pointer;
+font-style: normal; /* Ensure the buttons are not italic */
+}
+
+.audio-btn:focus {
+outline: none;
+}
+
+.music-item p {
+margin: 0;
+flex-grow: 1;
+font-style: normal; /* Ensure the paragraphs are not italic */
+}
+
+.bibliography {
+list-style-type: none;
+padding-left: 0;
+}
+
+.bibliography li {
+counter-increment: none;
+padding-left: 0;
+}