Merge pull request #37 from SciCatProject/ui-updates

Small updates/fixes in the UI
SciCatProject · Dec 7, 2023 · a57e5d4 · a57e5d4
2 parents 2af3e00 + bbe789c
commit a57e5d4
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 57 deletions.
diff --git a/_config.yml b/_config.yml
@@ -26,7 +26,7 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "http://scicatproject.github.io" # the base hostname & protocol for your site, e.g. http://example.com
 
-version: 2.0.1
+version: 2.1.0
 last_updated: 2023/10/31
 
 pill_1:

diff --git a/_includes/effort.html b/_includes/effort.html
@@ -1,20 +1,18 @@
 <section id="effort" class="effort text-center bg-light">
  <div class="container">
-  <h1 class="mt-5 mb-3">Efforts</h1>
+  <h1 class="mt-5 mb-5">Efforts</h1>
   <div class="row">
    {% for effort in site.efforts %}
-   <!-- <div class="effort">  -->
      <div class="effort-name col-lg-6 col-sm-12">
       <div class="name">{{ effort.name }}</div>
      </div>
      <div class="effort-info col-lg-6 cols-sm-12">
-      <div class="description">{{ effort.description }}</div>
-      <div class="link"><a href="{{ effort.link }}">{{ effort.link }}</a></div>
+      <div class="text">{{ effort.description }}</div>
+      <div class="text"><a href="{{ effort.link }}" target="_blank">{{ effort.link }}</a></div>
       {% if effort.leader %}
-       <div class="leader-label">Leader</div><div class="leader">{{ effort.leader }}</div>
+       <div class="text">Leader: {{ effort.leader }}</div>
       {% endif %}
      </div>
-     <!-- </div> -->
    {% endfor %}
   </div>
  </div>

diff --git a/_includes/facilities.html b/_includes/facilities.html
@@ -1,10 +1,10 @@
 <section id="facilities" class="facilities text-center bg-light">
  <div class="container mb-3">
-  <h1 class="mt-5 mb-3">Facilities</h1>
+  <h1 class="mt-5 mb-5">Facilities</h1>
   <div class="row">
   {% for facility in site.facilities %}
-  <div class="col-lg-3 col-sm-6 facility mb-5 mb-lg-0">
-   <a href="{{ facility.url }}">
+  <div class="col-lg-4 facility mb-5 mb-lg-0">
+   <a href="{{ facility.url }}" target="_blank">
     <img class="img-fluid rounded-3 mb-3" src="{{ facility.image }}">
     <h5>{{ facility.name }}</h5>
   </a>

diff --git a/_includes/intro.html b/_includes/intro.html
@@ -43,39 +43,47 @@ <h3>{{ site.pill_4.title }}</h3>
  </section>
  <section class="features">
   <div class="container-fluid p-0">
-   <div class="row g-0">
+   <div class="features-row row g-0">
     <div class="col-lg-6 order-lg-1 m-0 features-text features-item features-fair"> 
      <div class="features-image" style="background-image: url('{{ site.feature_1.image }}');"></div>
      <div class="features-content">
-      <h2>{{ site.feature_1.title }}</h2>
-      <p class="lead text-center mb-0">{{ site.feature_1.text }}</p>
+      <div class="features-content-text">
+        <h2>{{ site.feature_1.title }}</h2>
+        <p class="text-center">{{ site.feature_1.text }}</p>
+      </div>    
       <p class="attribution text-xs">{{ site.feature_1.attribution }}</p>
      </div>
     </div>
     <div class="col-lg-6 order-lg-2 m-0 features-text features-item features-integration">
      <div class="features-image" style="background-image: url('{{ site.feature_2.image }}');"></div>
      <div class="features-content">
-      <h2>{{ site.feature_2.title }}</h2>
-      <p class="lead text-center mb-0">{{ site.feature_2.text }}</p>
-       <p class="attribution text-xs">{{ site.feature_2.attribution }}</p>
+      <div class="features-content-text">
+        <h2>{{ site.feature_2.title }}</h2>
+        <p class="text-center">{{ site.feature_2.text }}</p>
+      </div>
+      <p class="attribution text-xs">{{ site.feature_2.attribution }}</p>
      </div>
     </div>
    </div>
-   <div class="row g-0">
+   <div class="features-row row g-0">
     <div class="col-lg-6 order-lg-1 m-0 features-text features-item features-stack"> 
      <div class="features-image" style="background-image: url('{{ site.feature_3.image }}');"></div>
      <div class="features-content">
-      <h2>{{ site.feature_3.title }}</h2>
-      <p class="lead text-center mb-0">{{ site.feature_3.text }}</p>
-       <p class="attribution text-xs">{{ site.feature_3.attribution }}</p>
+      <div class="features-content-text">
+        <h2>{{ site.feature_3.title }}</h2>
+        <p class="text-center">{{ site.feature_3.text }}</p>
+      </div>
+      <p class="attribution text-xs">{{ site.feature_3.attribution }}</p>
      </div>
     </div>
     <div class="col-lg-6 order-lg-2 m-0 features-text features-item features-open">
      <div class="features-image" style="background-image: url('{{ site.feature_4.image }}');"></div>
      <div class="features-content">
-      <h2>{{ site.feature_4.title }}</h2>
-      <p class="lead text-center mb-0">{{ site.feature_4.text }}</p>
-       <p class="attribution text-xs">{{ site.feature_4.attribution }}</p>
+      <div class="features-content-text">
+        <h2>{{ site.feature_4.title }}</h2>
+        <p class="text-center">{{ site.feature_4.text }}</p>
+      </div>
+      <p class="attribution text-xs">{{ site.feature_4.attribution }}</p>
      </div>
     </div>
    </div>

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,3 +1,13 @@
+<script>
+  onClick = (event) => {
+    let navLinks = document.querySelectorAll(".nav-link");
+    for (let i = 0; i < navLinks.length; i++) {
+      navLinks[i].classList.remove("active");
+    }
+    event.target.classList.add("active");
+  }
+</script>
+
 <nav class="navbar fixed-top affix-top navbar-expand-lg navbar-light bg-light navbar-fixed-top">
  <div class="container-fluid">
   <div class="navbar-header">
@@ -9,23 +19,22 @@
   <div class="navbar-menu collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
    <ul class="nav navbar-nav nav-pills mb-2 mb-lg-0">
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link active" aria-current="page" href="#">Home</a>
+     <a class="page-scroll nav-link active" aria-current="page" href="#" onclick="onClick(event);">Home</a>
     </li>
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link" href="#intro">Intro</a>
+     <a class="page-scroll nav-link" href="#intro" onclick="onClick(event);">Intro</a>
     </li>
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link" href="#facilities">Facilities</a>
+     <a class="page-scroll nav-link" href="#facilities" onclick="onClick(event);">Facilities</a>
     </li>
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link" href="#team">Team</a>
+     <a class="page-scroll nav-link" href="#team" onclick="onClick(event);">Team</a>
     </li>
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link" href="#effort">Effort</a>
+     <a class="page-scroll nav-link" href="#effort" onclick="onClick(event);">Effort</a>
     </li>
     <li class="nav-item mx-lg-3">
-     <a class="page-scroll nav-link" href="#resources">Resources</a>
+     <a class="page-scroll nav-link" href="#resources" onclick="onClick(event);">Resources</a>
     </li>
   </div>
 </nav>
-
diff --git a/_includes/resources.html b/_includes/resources.html
@@ -1,10 +1,10 @@
 <section id="resources" class="effort text-center bg-light">
  <div class="container">
-  <h1 class="mt-5 mb-3">Resources</h1>
+  <h1 class="mt-5 mb-5">Resources</h1>
   <div class="row">
    {% for resource in site.resources %}
-     <div class="resource col-lg-6 col-sm-12">
-      <a href="{{ resource.url }}">{{ resource.name }}</a>
+     <div class="resource">
+      <a href="{{ resource.url }}" target="_blank">{{ resource.name }}</a>
      </div>
    {% endfor %}
   </div>

diff --git a/_includes/team.html b/_includes/team.html
@@ -1,20 +1,20 @@
 <section id="team" class="team text-center bg-light">
  <div class="container mb-3">
-  <h1 class="mt-5 mb-3">Team</h1>
-  <div class="row">
+  <h1 class="mt-5 mb-5">Team</h1>
+  <div class="row justify-content-center">
    {% for leader in site.team.leaders %}
-    <div class="leader col-lg-4 col-sm-6 card">
+    <div class="leader col-lg-4 card">
      <div class="leadership">{{ leader.role }}</div>
      <div class="person">{{ leader.name }}</div>
      {% if leader.company %}<div class="company">{{ leader.company }}</div> {% endif %}
      {% if leader.email %}<div class="email">{{ leader.email }}</div> {% endif %}
    </div>
    {% endfor %}
   </div>
-  <h2 class="my-3">Collaborators</h2>
+  <h2 class="mt-5 mb-5">Collaborators</h2>
   <div class="row">
    {% for collaborator in site.team.collaborators %}
-   <div class="collaborator col-lg-3 col-sm-6 card">
+   <div class="collaborator col-lg-4 card">
     <div class="person">{{ collaborator.name }}</div>
     {% if collaborator.company %}<div class="company">{{ collaborator.company }}</div> {% endif %}
     {% if collaborator.email %}<div class="email">{{ collaborator.email }}</div> {% endif %}

diff --git a/_sass/base.scss b/_sass/base.scss
@@ -58,6 +58,7 @@ header.masthead {
   background-size: cover;
   padding-top: 2rem;
   padding-bottom: 2rem;
+  height: 62vh;
 
   .overlay {
     position: absolute;
@@ -70,9 +71,16 @@ header.masthead {
   }
 
   .container {
-    position: relative;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+
     img {
-      width: 70%;
+      width: 55%;
     }
     h1 {
       margin-bottom: 0.5rem !important;
@@ -104,6 +112,14 @@ header.masthead {
 }
 
 .features {
+  .features-row {
+    height: 20vh !important;
+
+    @media (max-width: 985px) {
+      height: 30vh !important;
+    }
+  }
+
   .features-item {
     overflow: hidden;
     position: relative;
@@ -123,28 +139,52 @@ header.masthead {
     .features-content {
       position: relative;
       padding: 1rem;
+      height: 100%;
+
+      .features-content-text {
+        width: 95%;
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+
+        p {
+          font-size: 1.25rem;
+        }
+      }
 
       .attribution {
-	position: absolute;
-	right: 1rem;
-	bottom: -0.9rem;
-	font-size: 0.7rem;
+        position: absolute;
+        right: 1rem;
+        bottom: -0.9rem;
+        font-size: 0.7rem;
       }
     }
   }
 }
 
+.facility {
+  margin-bottom: 30px !important;
+}
+
 .facilities {
   a {
-    text-decoration: none;
-    color: var(--bs-body-color); 
+    color: var(--bs-body-color);
   }
 }
 
 .team {
   .leader {
+    height: 150px;
+
     .leadership {
       font-size: 1.2rem;
+      padding: 25px 0 0 0;
+
+      @media (max-width: 1000px) {
+        padding: 5px 0 20px 0;
+      }
     }
     .person {
       font-size: 1.5rem;
@@ -158,9 +198,17 @@ header.masthead {
       font-size: 0.8rem;
     }
   }
+
   .collaborator {
+    height: 150px;
+
     .person {
       font-size: 1.3rem;
+      margin-top: 12%;
+
+      @media (max-width: 992px) {
+        margin-top: 5%;
+      }
     }
     .company {
       font-size: 0.9rem;
@@ -194,16 +242,15 @@ aside.section-breaker {
     border-bottom: 1px lightgray solid;
     margin-bottom: 1rem;
 
-
-    .description {
-      text-align: left;
-    }
-    .link {
+    .text {
       text-align: left;
+
+      @media (max-width: 1000px) {
+        text-align: center;
+      }
+
       a {
-        text-decoration: none;
-	color: black;
-	font-style: italic;
+        color: var(--bs-body-color) !important;
       }
     }
   }
@@ -225,10 +272,10 @@ aside.section-breaker {
 
 section#resources {
   .resource {
+    margin-bottom: 10px;
+
     a {
-      text-decoration: none;
-      color: black;
-      font-style: italic;
+      color: var(--bs-body-color) !important;
     }
   }
 }