epfl-elements 4.3.0 → 4.4.0

package/assets/config/variables.scss

@@ -34,6 +34,15 @@ $opacities: map.merge((
   "100": 1,
 ), $opacities);
 
+// Font-size
+
+$small-font-size: 0.875rem;
+
+$btn-font-size-sm: 0.875rem;
+$btn-padding-y-sm: 0.375rem;
+$btn-padding-x-sm: 0.75rem;
+$btn-line-height-sm: 1.5;
+
 // Legacy font-size
 $legacy-font-size-xl:   1.25rem;
 $legacy-font-size-lg:   1.125rem;

package/dist/components/atoms/nav-lang/nav-lang.twig

@@ -1,8 +1,8 @@
 <nav class="nav-lang ml-auto dropdown" aria-label="Change language">
-  <a href="#" class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
+  <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
     {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
     <span>FR</span>
-  </a>
+  </button>
   <ul class="dropdown-menu">
     <li>
       <a aria-label="Français (Current language)" class="active dropdown-item" >

package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig

@@ -1,8 +1,8 @@
-<div class="btn btn-secondary nav-toggle-mobile d-xl-none">
+<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
   <span class="label">Menu</span>
   <div class="hamburger">
     <span></span>
     <span></span>
     <span></span>
   </div>
-</div>
+</button>

package/dist/components/content-types/graph-search/graph-search.twig

@@ -0,0 +1,37 @@
+<div class="list-group">
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Concepts</strong></p>
+    <h3 class="h5 my-1"><a href="#">Biology</a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <p><i>Biology</i> is the scientific study of life. It is a natural science with a broad scope but has several unifying themes that tie it together as a single, coherent …</p>
+  </div>
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Courses</strong></p>
+    <h3 class="h5 my-1"><a href="#">CH-313 - Chemical biology </a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <p>Closely interfacing with bioengineering and medicine, this course provides foundational concepts in applying small-molecule chemical toolsets to probe the functions …</p>
+  </div>
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Publications</strong></p>
+    <h3 class="h5 my-1"><a href="#">Chemical and Biological Gradients along the Damma Glacier Soil Chronosequence, Switzerland</a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <p class="text-sm mt-2 mb-1 d-flex align-items-center">
+      <svg class="icon feather align-middle mr-1" aria-hidden="true">
+        <use xlink:href="#calendar"></use>
+      </svg>
+      <span class="align-middle">Published in 2011</span>
+    </p>
+    <p class="text-sm mb-2 d-flex align-items-center">
+      <svg class="icon feather align-middle mr-1" aria-hidden="true">
+        <use xlink:href="#users"></use>
+      </svg>
+      <span class="sr-only">Authors: </span>
+      <span class="align-middle"><a href="#"><strong>Camille Sigi</strong></a>, <a href="#"><strong>Lou Pereira</strong></a>, <a href="#"><strong>Charlie Müller</strong></a></span>
+    </p>
+    <p>PhD at the Biocenter, University of Basel 1989-1992. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lacus vulputate, congue ligula id …</p>
+  </div>
+  
+</div>

package/dist/components/content-types/graph-search/graph-search.yml

@@ -0,0 +1,2 @@
+title: Graph Search
+name: graph-search

package/dist/components/pages/people-detail/people-detail.twig

@@ -33,7 +33,7 @@
     <div class="d-flex flex-wrap justify-content-between align-items-baseline">
       <h1 class="mr-3">Prenom Nom</h1>
       <div>
-        {% include '@atoms/icon/icon.twig' %}
+        {% include '@atoms/icon/icon.twig' with {'icon': 'edit', icon_classes: 'feather'} %}
         <a href="#">
           Edit profile <span class="sr-only">of Prenom Nom</span>
         </a>

package/dist/css/elements.css

@@ -444,7 +444,7 @@ hr {
 
 small,
 .small {
-  font-size: 0.83rem;
+  font-size: 0.875rem;
   font-weight: 400;
 }
 
@@ -483,7 +483,7 @@ mark,
 
 .blockquote-footer {
   display: block;
-  font-size: 0.83rem;
+  font-size: 0.875rem;
   color: #707070;
 }
 .blockquote-footer::before {
@@ -2256,7 +2256,7 @@ textarea.form-control, .selectize-control textarea.selectize-input {
   display: none;
   width: 100%;
   margin-top: 0.55rem;
-  font-size: 0.83rem;
+  font-size: 0.875rem;
   color: #7ed321;
 }
 
@@ -2356,7 +2356,7 @@ textarea.form-control, .selectize-control textarea.selectize-input {
   display: none;
   width: 100%;
   margin-top: 0.55rem;
-  font-size: 0.83rem;
+  font-size: 0.875rem;
   color: #ff0000;
 }
 
@@ -3087,9 +3087,9 @@ fieldset:disabled a.btn {
 }
 
 .btn-sm {
-  padding: 0.35rem 0.7rem;
-  font-size: 0.83rem;
-  line-height: 1.575;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
   border-radius: 2px;
 }
 
@@ -10786,21 +10786,12 @@ h3 {
   }
 }
 body {
-  font-size: 1.125rem;
+  font-size: 1rem;
+  font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
 }
-@media (max-width: 767.98px) {
-  body {
-    font-size: 1rem;
-  }
-}
-@media (max-width: 575.98px) {
-  body {
-    font-size: 0.875rem;
-  }
-}
 
 .h1,
 .h2,
@@ -10858,17 +10849,8 @@ h6,
 }
 
 .lead {
-  font-size: 1.375rem;
-}
-@media (max-width: 991.98px) {
-  .lead {
-    font-size: 1.25rem;
-  }
-}
-@media (max-width: 575.98px) {
-  .lead {
-    font-size: 1rem;
-  }
+  font-size: 1.125rem;
+  font-size: clamp(1rem, 0.8125rem + 0.75vw, 1.375rem);
 }
 
 small {
@@ -14086,7 +14068,7 @@ figcaption {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 0.35rem 0.7rem;
+  padding: 0.375rem 0.75rem;
   border: 0;
 }
 .user-dropdown .btn .user-avatar {
@@ -14165,7 +14147,7 @@ figcaption {
     padding-left: 0 !important;
   }
   .header .nav-user .btn {
-    padding: 0.35rem;
+    padding: 0.375rem;
   }
   .header .nav-user:not(.show) .btn {
     border-radius: 50%;