Merge pull request #58 from mp2234-cloud/main

issue #57, long bios overlap
508-dev · Jan 26, 2024 · be71d57 · be71d57
2 parents 1521922 + bfb678a
commit be71d57
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -427,7 +427,6 @@ table td {
 .bio-area .single-bio {
   margin: 0px 13px 30px 13px;
   width: 250px;
-  height: 506px;
   box-sizing: border-box;
 }
 
@@ -546,3 +545,43 @@ table td {
 .service .members .thumb {
     width: 150px;
 }
+
+/* Read more toggle modified from: https://codepen.io/Idered/pen/ExYROd */
+
+.read-more-state {
+  display: none;
+}
+
+.read-more-target {
+  opacity: 0;
+  max-height: 0;
+  font-size: 0;
+  transition: .25s ease;
+}
+
+.read-more-state:checked ~ .read-more-wrap .read-more-target {
+  opacity: 1;
+  font-size: inherit;
+  max-height: 999em;
+}
+
+.read-more-state ~ .read-more-trigger:before {
+  content: 'Show more';
+}
+
+.read-more-state:checked ~ .read-more-trigger:before {
+  content: 'Show less';
+}
+
+.read-more-trigger {
+  display: inline-block;
+  padding: 0 .5em;
+  color: #666;
+  background-color: silver;
+  font-size: .9em;
+  line-height: 2;
+  border: 1px solid #ddd;
+  border-radius: .25em;
+  width: 100%;
+  text-align: center;
+}
diff --git a/src/engineering.html b/src/engineering.html
@@ -376,16 +376,18 @@ <h3>
                   Dr. Kuan-Ru Chiou
                 </a>
               </h3>
-              <p>
+              <input type="checkbox" class="read-more-state" id="post-kuanruchiou" />
+              <p class="read-more-wrap">
                 Dr. Chiou has been academically involved in AI and Quantum Computing for over 15 years.
                 He holds degrees in Computation Physics, Physics, and a doctorate from National
-                Taiwan University in Physics Engineering. He also several years of industry experience,
+                Taiwan University in Physics Engineering. <span class="read-more-target">He also several years of industry experience,
                 working as a Machine Learning Data Scientist, Deep Learning and Machine Learning
                 Engineer, and AI trading quantitative researcher and developer. He has experience in
                 NLP, CV, and generative AI models, quantum computing, business intelligence
                 analysis, as well as AWS, C++, Computer Vision, Matlab, Numpy, Pandas, Python,
-                and Pytorch.
+                and Pytorch.</span>
               </p>
+              <label for="post-kuanruchiou" class="read-more-trigger"/>
             </div>
           </div>