[styling] Updated people page

HIRO-group · Sep 6, 2019 · 037b1bb · 037b1bb
1 parent 6925325
commit 037b1bb
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 19 deletions.
diff --git a/_includes/css/main.css b/_includes/css/main.css
@@ -722,8 +722,13 @@ section.success p {
     border: none;
 }
 
+#article .card-text a {
+    font-weight: 400;
+}
+
 #article .card-body h2,
-#article .card-body h3 {
+#article .card-body h3,
+#article h3.card-title {
     border: none;
     padding-left: 0;
     margin-bottom: 16px;
@@ -738,14 +743,22 @@ section.success p {
 }
 
 #article .card-columns {
-    column-count: 2;
+    column-count: 3;
 }
 
-
 #article .card-columns.big {
     column-count: 1;
 }
 
+#article .card-columns.alumni {
+    column-count: 2;
+}
+
+#article .card-img-overlay * {
+    color: #{{ site.color.primary }};
+    opacity: 0;
+}
+
 #markdown-toc {
     margin-bottom: 28px;
 }
@@ -758,7 +771,17 @@ section.success p {
     margin-top: 4px;
 }
 
-@media(max-width: 992px) {
+@media(max-width: 768px) {
+    #article .card-columns {
+        column-count: 2;
+    }
+
+    #article .card-columns.alumni {
+        column-count: 1;
+    }
+}
+
+@media(max-width: 450px) {
     #article .card-columns {
         column-count: 1;
     }
@@ -820,7 +843,8 @@ section.success p {
     width: 100%;
 }
 
-.img-container .img-caption {
+.img-container .img-caption,
+#article .card-img-overlay {
     display: table-caption;
     caption-side: bottom;
 }
@@ -1124,7 +1148,8 @@ span.label:hover e.ok {
 }
 
 #portfolio .portfolio-item *,
-#portfolio .portfolio-item:hover * {
+#portfolio .portfolio-item:hover *,
+#article .card:hover * {
     transition: all ease .8s;
 }
 
@@ -1145,11 +1170,13 @@ span.label:hover e.ok {
     z-index: 4;
 }
 
-#portfolio .portfolio-item .portfolio-link:hover .caption {
+#portfolio .portfolio-item .portfolio-link:hover .caption,
+#article .card:hover .card-img-overlay * {
     opacity: 1;
 }
 
-#portfolio .portfolio-item .portfolio-link:hover .img-fluid {
+#portfolio .portfolio-item .portfolio-link:hover .img-fluid,
+#article .card:hover .card-img {
     -webkit-filter: brightness(56%) grayscale(84%); /* blur(1px); /* Safari 6.0 - 9.0 */ */
             filter: brightness(56%) grayscale(84%); /* blur(1px); */
 }

diff --git a/_includes/ppl.html b/_includes/ppl.html
@@ -1,5 +1,5 @@
 
-        <div class="card-columns {% if include.size == "big" %}big{% endif %}">
+        <div class="card-columns {% if include.size == "big" %}big{% elsif include.role == "alumni" %}alumni{% endif %}">
         {% for person in site.data.people %}
 
             {% if include.role == "all" %} {% assign role =  person.role %}
@@ -9,23 +9,34 @@
             {% if role == person.role %}
             {% if role == "alumni" %}
             <li>{% if person.url %}<a href="{{ person.url }}" target="_blank">{{ person.name }}</a>{% else %}{{ person.name }}{% endif %}{% if person.graduated %}, graduated in {{ person.graduated }}{% endif %}{% if person.nowat %}, now at {{ person.nowat }}{% endif %}.</li>
-            {% else %}
+            {% elsif include.size == "big" %}
             <div class="card mb-3">
               <div class="row no-gutters">
-                <div class="{% if include.size == "big" %}col-sm-4 ml-auto{% else %}col-sm-4{% endif %}">
-                    <img src="{% if person.pic %}/img/people/{{ person.pic }}{% else %}{{ site.logopng }}{% endif %}" class="img-fluid" style="width: 100%; max-width: 280px;" align="middle">
+                <div class="col-sm-4 ml-auto">
+                    <img src="{% if person.pic %}/img/people/{{ person.pic }}{% else %}{{ site.logopng }}{% endif %}" class="img-fluid" style="width: 100%;" align="middle">
                 </div>
-                <div class="{% if include.size == "big" %}col-sm-8{% else %}col-sm-8{% endif %}">
+                <div class="col-sm-8">
                   <div class="card-body">
-                    {% if include.size == "big" %}<h2 class="card-title">{{ person.name }}</h2>{% else %}<h3 class="card-title">{{ person.name }}</h3>{% endif %}
+                    <h2 class="card-title">{{ person.name }}</h2>
                     {% if person.office %}<p class="card-text"><i class="fa fa-fw fa-briefcase"></i> {{ person.office }}</p>{% endif %}
-                    {% if person.phone %}<p class="card-text"><i class="fa fa-fw fa-phone"></i>{{ person.phone }}</p>{% endif %}
-                    {% if person.email %}<a href="mailto:{{ person.email }}" class="card-link"><i class="fa fa-fw fa-envelope"></i>{{ person.email }}</a>{% endif %}
-                    {% if person.url %}<a href="{{ person.url }}" target="_blank" class="card-link"><i class="fa fa-fw fa-home"></i>{{ person.url }}</a>{% endif %}
+                    {% if person.phone  %}<p class="card-text"><i class="fa fa-fw fa-phone"    ></i> {{ person.phone  }}</p>{% endif %}
+                    {% if person.email  %}<p class="card-text"><a href="mailto:{{ person.email }}"        class="card-link"><i class="fa fa-fw fa-envelope"></i> {{ person.email }}</a></p>{% endif %}
+                    {% if person.url    %}<p class="card-text"><a href="{{ person.url }}" target="_blank" class="card-link"><i class="fa fa-fw fa-home"    ></i> {{ person.url   }}</a></p>{% endif %}
                   </div>
                 </div>
               </div>
             </div>
+            {% else %}
+            <div class="card mb-3 mx-1">
+              <img class="card-img" src="{% if person.pic %}/img/people/{{ person.pic }}{% else %}{{ site.logopng }}{% endif %}" class="img-fluid" style="width: 100%;" align="middle" alt="{{ person.pic }}">
+              <div class="card-img-overlay d-flex flex-column justify-content-end">
+                <h3 class="card-title">{{ person.name }}</h3>
+                {% if person.office %}<p class="card-text"><i class="fa fa-fw fa-briefcase"></i> {{ person.office }}</p>{% endif %}
+                {% if person.phone  %}<p class="card-text"><i class="fa fa-fw fa-phone"    ></i> {{ person.phone  }}</p>{% endif %}
+                {% if person.email  %}<p class="card-text"><a href="mailto:{{ person.email }}"        class="card-link" style="word-break: break-all;"><i class="fa fa-fw fa-envelope"></i> {{ person.email }}</a></p>{% endif %}
+                {% if person.url    %}<p class="card-text"><a href="{{ person.url }}" target="_blank" class="card-link" style="word-break: break-all;"><i class="fa fa-fw fa-home"     ></i> {{ person.url  }}</a></p>{% endif %}
+              </div>
+            </div>
             {% endif %}
             {% endif %}
         {% endfor %}

diff --git a/people.html b/people.html
@@ -39,9 +39,7 @@ <h1>Undergraduate Research Assistants</h1>
         {% if collaborator != blank %}
         <h1>External Collaborators</h1>
 
-        <ul>
         {% include ppl.html role="collaborator" %}
-        </ul>
         {% endif %}
 
         {% assign alumni = site.data.people | where:"role","alumni" %}