From 5bb1e0b7aad77a8b63734892756b4891103a6fd5 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 10 Jul 2026 09:04:31 +0000 Subject: [PATCH 1/2] Add image-driven styling to the homepage Give the homepage a more dynamic, performance-led look built from the lab's own stage photography: - Full-bleed hero banner using a NIME 2026 performance photo, with a warm/dark scrim, overlaid mission headline, and call-to-action buttons to the performances and join pages. - Rounded, shadowed research/teaching section images with a subtle hover lift (new .feature-img class) plus descriptive alt text. - A full-bleed "On stage" strip: a horizontally scrolling row of curated performance photos linking through to the performances page. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01PUgUwdX2TPAh7yQzV96xTR --- assets/style.css | 207 +++++++++++++++++++++++++++++++++++++++++++++++ index.md | 42 ++++++++-- 2 files changed, 242 insertions(+), 7 deletions(-) diff --git a/assets/style.css b/assets/style.css index b3740bc..f519312 100644 --- a/assets/style.css +++ b/assets/style.css @@ -90,6 +90,213 @@ a:focus { .entry-venue.is-top { color: #ffa94d; } } +/* ---- Homepage: image-driven styling ---- */ + +/* prevent full-bleed sections from creating a horizontal scrollbar */ +body { overflow-x: hidden; } + +/* full-bleed hero banner built from a performance photo */ +.home-hero { + position: relative; + left: 50%; + right: 50%; + width: 100vw; + margin-left: -50vw; + margin-right: -50vw; + margin-top: calc(var(--spacer) * -1); + margin-bottom: var(--spacer-2); + min-height: clamp(340px, 62vh, 580px); + display: flex; + align-items: flex-end; + background-color: #1a1024; + background-size: cover; + background-position: center 35%; + overflow: hidden; +} + +/* dark + warm scrim keeps the overlaid text legible over any photo */ +.home-hero::before { + content: ""; + position: absolute; + inset: 0; + background: + linear-gradient(180deg, rgba(12,7,22,0.15) 0%, rgba(12,7,22,0.55) 55%, rgba(12,7,22,0.9) 100%), + linear-gradient(90deg, rgba(255,80,80,0.28) 0%, rgba(255,80,80,0) 55%); +} + +/* thin warm accent bar echoing the site's link gradient */ +.home-hero::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 5px; + background: linear-gradient(90deg, rgba(255,188,48,0.95) 0%, rgba(255,80,80,0.95) 100%); +} + +.home-hero-inner { + position: relative; + z-index: 1; + width: 100%; + max-width: 48rem; + margin: 0 auto; + padding: var(--spacer-2) var(--spacer); + color: #fff; +} + +.home-hero-kicker { + margin: 0 0 0.4em; + font-size: 0.8em; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #ffd9a3; +} + +/* scoped under .home-hero to outrank the theme's `.page h2 { color }` rule */ +.home-hero .home-hero-title { + margin: 0 0 0.35em; + font-size: clamp(1.6em, 4.5vw, 2.5em); + line-height: 1.15; + color: #fff; + text-shadow: 0 2px 18px rgba(0,0,0,0.55); +} + +.home-hero-lead { + margin: 0 0 1.1em; + max-width: 34em; + font-size: 1.05em; + line-height: 1.5; + color: rgba(255,255,255,0.92); + text-shadow: 0 1px 12px rgba(0,0,0,0.5); +} + +.home-hero-actions { + margin: 0; + display: flex; + flex-wrap: wrap; + gap: 0.6em; +} + +.hero-btn { + display: inline-block; + padding: 0.55em 1.15em; + border-radius: 999px; + border: 1.5px solid rgba(255,255,255,0.7); + font-weight: 600; + color: #fff; + transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; +} + +.hero-btn:hover, +.hero-btn:focus { + transform: translateY(-2px); + background: rgba(255,255,255,0.14); + -webkit-text-fill-color: #fff; /* override the global gradient-text link hover */ + color: #fff; + text-decoration: none; +} + +.hero-btn-primary { + border-color: transparent; + color: #2a0f0f; + background: linear-gradient(180deg, rgba(255,188,48,1) 0%, rgba(255,120,80,1) 100%); +} + +.hero-btn-primary:hover, +.hero-btn-primary:focus { + color: #2a0f0f; + -webkit-text-fill-color: #2a0f0f; + filter: brightness(1.05); +} + +/* dynamic treatment for the research / teaching section images */ +.feature-img { + display: block; + width: 100%; + margin: 0.5em 0 1.4em; + border-radius: 10px; + box-shadow: 0 8px 26px rgba(0,0,0,0.16); + transition: transform 0.4s ease, box-shadow 0.4s ease; +} + +.feature-img:hover { + transform: translateY(-4px) scale(1.008); + box-shadow: 0 16px 38px rgba(0,0,0,0.26); +} + +/* full-bleed "on stage" performance strip */ +.home-perf { + position: relative; + left: 50%; + right: 50%; + width: 100vw; + margin-left: -50vw; + margin-right: -50vw; + margin-top: var(--spacer-3); + margin-bottom: var(--spacer-2); + padding: var(--spacer-2) 0; + background: var(--code-bg-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +.home-perf-inner { + max-width: 64rem; + margin: 0 auto; + padding: 0 var(--spacer); +} + +.home-perf-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 1em; + margin-bottom: 0.9em; +} + +.home-perf-head h2 { + margin: 0; + font-size: 1.3em; +} + +.home-perf-head a { + font-size: 0.85em; + font-weight: 600; +} + +.home-perf-scroll { + display: grid; + grid-auto-flow: column; + grid-auto-columns: minmax(230px, 1fr); + gap: 10px; + overflow-x: auto; + padding-bottom: 0.6em; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; +} + +.home-perf-scroll a { + display: block; + scroll-snap-align: start; + border-radius: 8px; + overflow: hidden; +} + +.home-perf-scroll img { + display: block; + width: 100%; + height: 180px; + object-fit: cover; + transition: transform 0.4s ease; +} + +.home-perf-scroll a:hover img, +.home-perf-scroll a:focus img { + transform: scale(1.05); +} + /* performance hero gallery */ .perf-gallery { display: grid; diff --git a/index.md b/index.md index ca72e00..330e05d 100644 --- a/index.md +++ b/index.md @@ -3,9 +3,19 @@ layout: page title: SMCClab --- -Welcome to the Sound, Music, and Creative Computing Lab at the Australian National University [School of Computing](https://comp.anu.edu.au). +
+
+

Sound, Music & Creative Computing · ANU

+

New musical instruments that sense, understand, and perform.

+

We build intelligent instruments and creative computing systems — then take them on stage as both a research method and a creative output.

+

+ See our performances + Join the lab +

+
+
-![]({% link assets/smcclab-title-slide.jpg %}) +Welcome to the Sound, Music, and Creative Computing Lab at the Australian National University [School of Computing](https://comp.anu.edu.au). Our lab aims to develop **new musical instruments** that sense and understand music, actively **assisting musicians** during performances. We apply **computational intelligence**, **AR/VR**, and **sonic interaction design** in creative contexts. We explore how creative computing can inform studies of collaboration, spatial interaction, and decision making. @@ -37,31 +47,49 @@ SMCClab explores research in the broad area of sound, music and creative computi ### Collaborative Interfaces -![]({% link assets/collaboration.jpg %}) +![Musicians playing networked touchscreen musical instruments together]({% link assets/collaboration.jpg %}){:.feature-img} This research aims to create new ways for groups to make music together. We created **touchscreen musical instruments** that communicate interactions over a network. These instruments engage music performers in new kinds of **ensemble interaction**. ### Spatial Interaction -![]({% link assets/spatial.jpg %}) +![Performer using freehand gestures with a spatial AR/VR musical instrument]({% link assets/spatial.jpg %}){:.feature-img} We create **authentic spatial musical apps** that support interaction in AR/VR computers. We experimented with new **freehand gestures** in AR and have deployed a spiral-shaped keyboard in collaborative music experiments as well as artistic performances. ### Generative Sound -![]({% link assets/spectrogram.jpg %}) +![Spectrogram of AI-generated sound]({% link assets/spectrogram.jpg %}){:.feature-img} AI-generated sound could change the way we make sounds and create music. We have developed a new approach to **singing-voice synthesis** focussed on more **accurate duration predictions**, enabling end-to-end training. We are now looking at novel **text-to-sound** generation models. ### Intelligent Interfaces -![]({% link assets/intelligent.jpg %}) +![EMPI, a portable musical robot with a one-dimensional interface, responding to a performer]({% link assets/intelligent.jpg %}){:.feature-img} Intelligent instruments predict human musical interactions to help them create music. We model **embodied musical interactions**, or the movements of human performers. Our prototypes include **EMPI**, a portable musical robot that responds to performances with a 1-dimensional musical interface. +
+
+
+

On stage

+ All performances → +
+
+ Intelligent instrument performance at NIME 2026, London + Charles Martin performing with intelligent instruments at SoundOut Festival 2026 + Spatial AR/VR musical performance at SMCClab Live + Dream Tent installation with Martyn Jolly at the ANU Drill Hall Gallery + 破境 // beyond realms by Yichen Wang and Sandy Ma at ACMC 2023 + Ensemble Metatone touchscreen performance + Sandy Ma, Haunted Treasures at Platform, Canberra Contemporary +
+
+
+ ## Teaching -![]({% link assets/laptop-ensemble-promo.jpg %}) +![ANU Laptop Ensemble performing together]({% link assets/laptop-ensemble-promo.jpg %}){:.feature-img} [Charles](https://charlesmartin.au) and other SMCClab members are involved in teaching several courses at the ANU, including: From 99ae7fc4a91d9a4a0fc6a46f4bc7dd97020d9190 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 10 Jul 2026 09:09:02 +0000 Subject: [PATCH 2/2] Layer the lab logo over a rotating hero image MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add the white SMCClab wordmark on top of the hero, and rotate the hero background across a curated pool of dark, dramatic performance photos — a different one is chosen on each visit (with a stable server-rendered default for no-JS visitors). - Overlay assets/lab-logo/smcclab-white.png in the hero, with a drop shadow and a slightly stronger scrim so it stays legible on any photo. - Rotate the background client-side from five performance images. - Visually hide the theme's redundant page-title on the homepage while keeping it in the accessibility tree / for SEO as the page h1. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01PUgUwdX2TPAh7yQzV96xTR --- assets/style.css | 34 +++++++++++++++++++++++++--------- index.md | 20 ++++++++++++++++++-- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/assets/style.css b/assets/style.css index f519312..13d444e 100644 --- a/assets/style.css +++ b/assets/style.css @@ -114,13 +114,13 @@ body { overflow-x: hidden; } overflow: hidden; } -/* dark + warm scrim keeps the overlaid text legible over any photo */ +/* dark + warm scrim keeps the overlaid text and logo legible over any photo */ .home-hero::before { content: ""; position: absolute; inset: 0; background: - linear-gradient(180deg, rgba(12,7,22,0.15) 0%, rgba(12,7,22,0.55) 55%, rgba(12,7,22,0.9) 100%), + linear-gradient(180deg, rgba(12,7,22,0.4) 0%, rgba(12,7,22,0.55) 55%, rgba(12,7,22,0.9) 100%), linear-gradient(90deg, rgba(255,80,80,0.28) 0%, rgba(255,80,80,0) 55%); } @@ -145,13 +145,29 @@ body { overflow-x: hidden; } color: #fff; } -.home-hero-kicker { - margin: 0 0 0.4em; - font-size: 0.8em; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: #ffd9a3; +/* lab wordmark layered over the rotating performance photo */ +.home-hero-logo { + display: block; + width: auto; + max-width: min(280px, 66%); + height: auto; + margin: 0 0 1em; + filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55)); +} + +/* the theme prints an

SMCClab

above the content; + on the homepage the hero wordmark replaces it visually, but keep it in the + accessibility tree / for SEO as the page's h1 */ +.page:has(.home-hero) .page-title { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } /* scoped under .home-hero to outrank the theme's `.page h2 { color }` rule */ diff --git a/index.md b/index.md index 330e05d..464a203 100644 --- a/index.md +++ b/index.md @@ -3,9 +3,11 @@ layout: page title: SMCClab --- -
+
-

Sound, Music & Creative Computing · ANU

+

New musical instruments that sense, understand, and perform.

We build intelligent instruments and creative computing systems — then take them on stage as both a research method and a creative output.

@@ -15,6 +17,20 @@ title: SMCClab

+ + Welcome to the Sound, Music, and Creative Computing Lab at the Australian National University [School of Computing](https://comp.anu.edu.au). Our lab aims to develop **new musical instruments** that sense and understand music, actively **assisting musicians** during performances. We apply **computational intelligence**, **AR/VR**, and **sonic interaction design** in creative contexts. We explore how creative computing can inform studies of collaboration, spatial interaction, and decision making.