copped a showmore/less from codepen and applied it to Dr. Kuan-Ru Chi…

…ou only
508-dev · Jan 25, 2024 · bfb678a · bfb678a
1 parent 6e25a8b
commit bfb678a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -545,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>