Added fancylist to custom css

Author: pakitochus

people/Javier_Ramirez/index.qmd

@@ -33,33 +33,20 @@ He has participated in 17 national and regional research projects, being the PI
 
 He has carried out research stays in prestigious centres such as the High-Speed Digital Architecture Laboratory (HSDAL) at the University of Florida (Gainesville, USA), the FAMU/FSU College of Engineering at Florida State University (Tallahassee, USA) or the Computational Intelligence and Machine Learning Group at the University of Regensburg (Germany) in collaboration with Professors Dr. Fred J. Taylor, Dr. Uwe Meyer-Baese, and Dr. Elmar W. Lang, respectively.
 
-:::
+### {{< fa briefcase >}} Positions {.fancylist}
 
-## Trajectory 
+- **_Full Professor_**, **2014**  
+  *University of Granada, Spain*
 
-```{=html}
-<div class="grid">
-  <div class="g-col-4">
-    <div id="list-example" class="list-group">
-      <a class="list-group-item list-group-item-action" href="#list-item-1">Electronics Engineer</a>
-      <a class="list-group-item list-group-item-action" href="#list-item-2">PhD in Electronics</a>
-      <a class="list-group-item list-group-item-action" href="#list-item-3">Associate Professor</a>
-      <a class="list-group-item list-group-item-action" href="#list-item-4">Full Professor</a>
-    </div>
-  </div>
-  <div class="g-col-8">
-    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" style="height: 250px; overflow-y: auto;" tabindex="0">
-      <h4 id="list-item-1">Electronics Engineer</h4>
-      <p>1999</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. Aadfadsfñlk asdlkfj añsldkjf añlksjdf añlkjsdf ñlakjsdf </p>
-      <h4 id="list-item-2">PhD in Electronics</h4>
-      <p>2001</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. Aadfadsfñlk asdlkfj añsldkjf añlksjdf añlkjsdf ñlakjsdf </p>
-      <h4 id="list-item-3">Associate Professor</h4>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. Aadfadsfñlk asdlkfj añsldkjf añlksjdf añlkjsdf ñlakjsdf </p>
-      <h4 id="list-item-4">Full Professor</h4>
-      <p><strong>2014</strong><br>University of Granada</p>
-    </div>
-  </div>
-</div>
-```
+- **_Associate Professor_**, **2006**  
+  *University of Granada, Spain*
+
+### {{< fa graduation-cap >}} Education {.fancylist}
+
+- **_Ph.D._ in Electronics**, **2001**  
+  *University of Granada, Spain*
+
+- **_Electronics Engineer_**, **1999**  
+  *University of Granada, Spain*
+
+:::

styles.css

@@ -24,4 +24,68 @@
 
 .quarto-title-banner{
   background-blend-mode: multiply;
-}
+}
+
+
+
+.fancylist ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0
+}
+
+.fancylist ul li{
+  position: relative;
+  padding: .75rem 0 .75rem 2rem;
+  margin-bottom: .75rem;
+  transition: all .3s ease
+}
+
+.fancylist ul li::before{
+  content: "▸";
+  position: absolute;
+  left: .5rem;
+  color: rgba(51,51,51,.5);
+  font-size: 1rem;
+  transition: all .3s ease
+}
+
+.fancylist ul li:hover{
+  padding-left: 2.25rem;
+  color: #333
+}
+
+.fancylist ul li:hover::before {
+  color: #333;
+  left: .25rem
+}
+
+.fancylist ul li p{
+  margin: 0
+}
+
+.fancylist ul li p strong {
+  color: #333;
+  font-weight: 600
+}
+
+.fancylist section.level2 ul li p em{
+  color: rgba(51,51,51,.7)
+}
+
+.fancylist ul li{
+  background-color: rgba(51,51,51,.02);
+  border-left: 2px solid rgba(51,51,51,.15);
+  border-radius: 0 6px 6px 0;
+  padding: 1rem 1rem 1rem 2rem
+}
+
+.fancylist ul li:hover {
+  background-color: rgba(51,51,51,.05);
+  border-left-color: rgba(51,51,51,.3)
+}
+
+.fancylist ul li strong:last-of-type {
+  color: rgba(51,51,51,.7);
+  font-size: .95em
+}