people

Author: ErnstRoell

content/people.md

@@ -7,27 +7,22 @@ title: "People"
 All people are listed in chronological order of joining the lab or
 starting a collaboration with us.
 
+<div class="people-card-container">
 {{< person "BR" >}}
-
 {{< person "JvR" >}}
-
 {{< person "JW" >}}
-
 {{< person "KL" >}}
-
 {{< person "ER" >}}
-
 {{< person "SK" >}}
-
 {{< person "DS" >}}
-
 {{< person "RB" >}}
-
 {{< person "ES" >}}
-
 {{< person "RvM" >}}
-
 {{< person "MA" >}}
+</div>
+
+
+
 
 | | |
 |:--------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------:|

layouts/shortcodes/person.html

@@ -1,41 +1,45 @@
-<div class="card">
+<div class="card-person">
   {{ $person := .Get 0 }}
   {{ $person :=  index .Site.Data.people $person }}
-
-  <div class="card-left">
     <figure class="person">
       <img src="{{ $person.image }}" width="180" alt="{{ $person.name }}" />
     </figure>
-  </div>
-
-  <div class="card-right">
     <span class="card-name">{{ $person.name }}</span><br />
     <span class="card-job">{{ $person.job }}</span>
-
-    <dl class="card-profiles">
+    <ul class="card-icons">
       {{ with $person.github }}
-        {{ $link := printf "https://github.com/%s" $person.github }}
-        {{ partial "profile.html" (dict "name" "GitHub" "link" $link "text" $person.github) }}
+        <li>
+        <a href="https://github.com/{{ . }}">
+            <img src="/github-mark.svg" alt="">
+          </a>
+        </li>
       {{end }}
+      
+    {{ with $person.orcid }}
+      <li>
+      <a href="{{ . }}">
+          <img src="/orchid-id.svg" alt="">
+        </a>
+      </li>
+    {{end }}
 
-      {{ with $person.orcid }}
-        {{ $link := printf "https://orcid.org/%s" $person.orcid }}
-        {{ partial "profile.html" (dict "name" "ORCID" "link" $link "text" $person.orcid) }}
-      {{end }}
+    {{ with $person.twitter }}
+      <li>
+      <a href="https://twitter.com/{{ . }}">
+          <img src="/logo-x-black.png" alt="">
+        </a>
+      </li>
+    {{ end }}
+     {{ with $person.web }}
+      <li>
+      <a href="{{ . }}">
+          <img src="/home.png" alt="">
+        </a>
+      </li>
+   {{ end }} 
+
+  </ul>
 
-      {{ with $person.twitter }}
-        {{ $link := printf "https://twitter.com/%s" $person.twitter }}
-        {{ $name := printf "@%s" $person.twitter }}
-        {{ partial "profile.html" (dict "name" "Twitter" "link" $link "text" $name) }}
-      {{ end }}
 
-      {{ with $person.web }}
-        {{ partial "profile.html" (dict "name" "Web" "link" $person.web "text" $person.web) }}
-      {{ end }}
-    </dl>
 
-    <div class="card-bio">
-      {{ $person.bio | markdownify }}
-    </div>
-  </div>
 </div>

themes/brevis/static/css/style.css

@@ -65,7 +65,7 @@ body
 header
 {
   padding:        10px;
-  border-bottom:  1px solid black;
+  /*border-bottom:  1px solid black;*/
 
   position:       fixed;
   top:            0;
@@ -198,29 +198,21 @@ footer
   margin: 1% auto;
 }
 
-.card
+.people-card-container
 {
-  box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  display    : flex;
   max-width  : 100%;
+  /*border: 1px solid red; */
   margin     : auto;
-  display    : flex;
   flex-wrap  : wrap;
-  padding    : 1em;
-  margin-top : 1em;
-}
-
-.card-left
-{
-  flex     :    1;
-  max-width: 180px;
+  row-gap: 1em;
+  column-gap: 1em;
+  align-content: center; 
+  justify-content: center;
+  /*padding    : 1em;*/
+  /*margin-top : 1em;*/
 }
 
-.card-right
-{
-  flex:         2;
-  padding-left: 1em;
-  line-height:  1.2;
-}
 
 .card-name,
 {
@@ -323,3 +315,39 @@ article.news
 {
   margin-bottom: 1em;
 }
+
+ul.card-icons 
+{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.card-icons img 
+{
+  width: 16px; 
+}
+
+ul.card-icons li 
+{
+  display: inline;
+  margin: 0; 
+}
+
+.card-person 
+{
+  width: 200px; 
+  box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  /*border: 1px solid black; */
+  /*padding: em;*/
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+}
+
+
+.card-person a 
+{
+  text-decoration: none;
+}
+