Refresh the CAT Lab site-wide visual design (#18)

* Refresh CAT Lab visual design

* Update Leo Lim participation period

* Avoid duplicate publication years

* Normalize all publication venue labels

* Use the cat logo throughout the site

* Simplify the homepage introduction

* Refine the site palette and people profiles

Author: Jokeren

assets/scss/template.scss

@@ -40,7 +40,7 @@ header:
     show_language: false
     show_day_night: true
     show_search: true
-    highlight_active_link: false
+    highlight_active_link: true
 
 # Site footer
 
@@ -73,7 +73,7 @@ features:
   privacy_pack:
     enable: false
   repository:
-    url: 'https://github.com/<username>/<repository>'
+    url: 'https://github.com/Deep-Learning-Profiling-Tools/CAT-Lab'
     content_dir: content
     branch: main
   avatar:
@@ -121,4 +121,4 @@ publications:
 # Icons
 
 icon:
-  favicon: "coder.jpg"
+  favicon: "coder.jpg"

config/_default/params.yaml

@@ -11,18 +11,23 @@ sections:
       image:
         filename: welcome.jpg
       text: |
-        **CAT Lab** is dedicated to advancing the **Compiler, Architecture, and Toolkit (CAT)** foundations that power the next generation of intelligent systems.
-
-        Our research spans the full computing stack — from hardware architecture to compiler design, from performance profiling tools to AI-driven optimization frameworks. 
-
-        We aim to build an efficient and user-friendly infrastructure that helps enhance computational performance across diverse computing platforms.
-
+        CAT Lab at George Mason University develops compilers, architectures, and tools that make AI systems easier to understand, faster to run, and more reliable at scale.
+      cta:
+        label: Explore Software
+        url: software/
+        icon_pack: fas
+        icon: code
+      cta_alt:
+        label: View Publications
+        url: publication/
+      cta_note:
+        label: Compiler · Architecture · Toolkit
 
   - block: collection
     content:
       title: Latest News
-      subtitle:
-      text:
+      subtitle: What we are publishing, presenting, and building.
+      text: ''
       count: 3
       filters:
         author: ''
@@ -34,7 +39,7 @@ sections:
       order: desc
       page_type: news
     design:
-      view: card
+      view: compact
       columns: '1'
 
   # - block: markdown
@@ -60,8 +65,9 @@ sections:
   - block: collection
     content:
       title: Featured Publications
-      text: ""
-      count: 7
+      subtitle: Recent research from across the computing stack.
+      text: ''
+      count: 4
       filters:
         folders:
           - publication
@@ -75,7 +81,7 @@ sections:
       title:
       subtitle:
       text: |
-        {{% cta cta_link="./people/" cta_text="Meet the team →" %}}
+        {{% cta cta_link="./people/" cta_text="Meet the team" %}}
     design:
       columns: '1'
 ---

content/_index.md

@@ -7,7 +7,7 @@ authors:
   - Leo Lim
 
 superuser: false
-role: 2024 Fall -
+role: '2025 Fall -'
 
 organizations:
   - name: Thomas Jefferson High School for Science and Technology

content/members/Jihyeong Lee/avatar.jpg

@@ -1,5 +1,6 @@
 ---
 title: News
+subtitle: Talks, papers, tools, and moments from CAT Lab.
 
 # Listing view
 view: compact

content/members/Leo Lim/_index.md

@@ -22,7 +22,7 @@ sections:
       sort_by: Params.last_name
       sort_ascending: true
     design:
-      show_interests: false
+      show_interests: true
       show_role: true
       show_social: true
 ---

content/news/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Publications
+subtitle: Research at the intersection of compilers, architecture, and intelligent systems.
 
 # Listing view
 view: citation

content/people/index.md

@@ -11,16 +11,16 @@
 {{ $show_role := $block.design.show_role | default true }}
 {{ $default_avatar := resources.Get "media/icon.png" }}
 
-<div class="row justify-content-center people-widget">
+<div class="people-widget">
   {{ with $block.content.title }}
-    <div class="section-heading col-12 mb-3 text-center">
-      <h1 class="mb-0">{{ . | markdownify | emojify }}</h1>
-      {{ with $block.content.subtitle }}<p class="mt-1">{{ . | markdownify | emojify }}</p>{{ end }}
+    <div class="section-heading people-heading">
+      <h1>{{ . | markdownify | emojify }}</h1>
+      {{ with $block.content.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
     </div>
   {{ end }}
 
   {{ with $block.content.text }}
-    <div class="col-md-12">
+    <div class="people-intro">
       {{ . | emojify | $page.RenderString }}
     </div>
   {{ end }}
@@ -35,43 +35,53 @@ <h1 class="mb-0">{{ . | markdownify | emojify }}</h1>
     {{ $sort_order := cond $sort_ascending "asc" "desc" }}
     {{ $query = sort $query $sort_by $sort_order }}
 
-    {{if $query | and (gt (len $block.content.user_groups) 1) }}
-      <div class="col-md-12">
-        <h2 class="mb-4">{{ . | markdownify }}</h2>
-      </div>
-    {{end}}
+    {{ if $query }}
+      <section class="people-group">
+        <div class="people-group-heading">
+          <h2>{{ . | markdownify }}</h2>
+          <span>{{ len $query }}</span>
+        </div>
 
-    {{ range $query }}
-      {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
-      {{/* Get link to user's profile page. */}}
-      {{ $link := "" }}
-      {{ with site.GetPage (printf "/authors/%s" (path.Base .File.Dir)) }}
-        {{ $link = .RelPermalink }}
-      {{ end }}
-      <div class="col-12 col-sm-auto people-person">
-        {{ $src := "" }}
-        {{ if site.Params.features.avatar.gravatar }}
-          {{ $src = printf "https://s.gravatar.com/avatar/%s?s=150" (md5 .Params.email) }}
-        {{ else if $avatar }}
-          {{ $avatar_image := $avatar.Fill "270x270 Center" }}
-          {{ $src = $avatar_image.RelPermalink }}
-        {{ else if $default_avatar }}
-          {{ $avatar_image := $default_avatar.Fill "270x270 Center" }}
-          {{ $src = $avatar_image.RelPermalink }}
-        {{ end }}
-        {{ if $src }}
-          {{ $avatar_shape := site.Params.features.avatar.shape | default "circle" }}
-          {{with $link}}<a href="{{.}}">{{end}}<img width="270" height="270" loading="lazy" class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $src }}" alt="{{ .Title }} avatar">{{if $link}}</a>{{end}}
-        {{ end }}
+        <div class="people-grid{{ if eq (len $query) 1 }} people-grid-single{{ end }}">
+          {{ range $query }}
+            {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
+            {{/* Get link to user's profile page. */}}
+            {{ $link := "" }}
+            {{ with site.GetPage (printf "/authors/%s" (path.Base .File.Dir)) }}
+              {{ $link = .RelPermalink }}
+            {{ end }}
+            <article class="people-person people-card">
+              {{ $src := "" }}
+              {{ if site.Params.features.avatar.gravatar }}
+                {{ $src = printf "https://s.gravatar.com/avatar/%s?s=360" (md5 .Params.email) }}
+              {{ else if $avatar }}
+                {{ $avatar_image := $avatar.Fill "360x360 Center" }}
+                {{ $src = $avatar_image.RelPermalink }}
+              {{ else if $default_avatar }}
+                {{ $avatar_image := $default_avatar.Fill "360x360 Center" }}
+                {{ $src = $avatar_image.RelPermalink }}
+              {{ end }}
+              {{ if $src }}
+                <div class="people-card-media">
+                  {{with $link}}<a href="{{.}}">{{end}}<img width="360" height="360" loading="lazy" class="people-avatar" src="{{ $src }}" alt="{{ .Title }} portrait">{{if $link}}</a>{{end}}
+                </div>
+              {{ end }}
 
-        <div class="portrait-title">
-          <h2>{{with $link}}<a href="{{.}}">{{end}}{{ .Title }}{{if $link}}</a>{{end}}</h2>
-          {{ if and $show_organizations .Params.organizations }}{{ range .Params.organizations }}<h3>{{ .name }}</h3>{{ end }}{{ end }}
-          {{ if and $show_role .Params.role }}<h3>{{ .Params.role | markdownify | emojify }}</h3>{{ end }}
-          {{ if $show_social }}{{ partial "social_links" . }}{{ end }}
-          {{ if and $show_interests .Params.interests }}<p class="people-interests">{{ delimit .Params.interests ", " | markdownify | emojify }}</p>{{ end }}
+              <div class="portrait-title people-card-body">
+                <h3>{{with $link}}<a href="{{.}}">{{end}}{{ .Title }}{{if $link}}</a>{{end}}</h3>
+                {{ if and $show_role .Params.role }}<p class="people-role">{{ .Params.role | markdownify | emojify }}</p>{{ end }}
+                {{ if and $show_organizations .Params.organizations }}{{ range .Params.organizations }}<p class="people-organization">{{ .name }}</p>{{ end }}{{ end }}
+                {{ if and $show_interests .Params.interests }}
+                  <ul class="people-interests" aria-label="Research interests">
+                    {{ range first 3 .Params.interests }}<li>{{ . | markdownify | emojify }}</li>{{ end }}
+                  </ul>
+                {{ end }}
+                {{ if $show_social }}<div class="people-social">{{ partial "social_links" . }}</div>{{ end }}
+              </div>
+            </article>
+          {{ end }}
         </div>
-      </div>
+      </section>
     {{ end }}
   {{ end }}
 </div>

content/publication/_index.md

@@ -0,0 +1,3 @@
+{{ with resources.Get "media/icon.png" }}
+  <style>:root { --cat-logo-image: url("{{ .RelPermalink }}"); }</style>
+{{ end }}