Redesign landing page and center interior content

_layouts/landing.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+<section class="landing-hero">
+  <div class="landing-hero__inner">
+    <div class="landing-hero__text">
+      {% if page.kicker %}<p class="landing-hero__kicker">{{ page.kicker }}</p>{% endif %}
+      <h1 class="landing-hero__title">{{ page.title }}</h1>
+      {% if page.tagline %}<p class="landing-hero__tagline">{{ page.tagline }}</p>{% endif %}
+      {% if page.actions %}
+      <div class="landing-hero__actions">
+        {% for action in page.actions %}<a class="landing-btn{% if forloop.first %} landing-btn--primary{% endif %}" href="{{ action.url | relative_url }}">{{ action.label }}</a>{% endfor %}
+      </div>
+      {% endif %}
+    </div>
+    <div class="landing-hero__image" role="img" aria-label="{{ page.hero_alt }}" style="background-image: url('{{ page.hero_image | relative_url }}');"></div>
+  </div>
+</section>
+
+<div class="landing page__content">
+{{ content }}
+</div>

_sass/landing.scss

@@ -0,0 +1,188 @@
+/* Home page (layout: landing). Written as plain CSS so it can be previewed without a Sass build. */
+
+.landing-hero {
+	background: #0d0b14;
+	color: #fff;
+}
+
+.landing-hero__inner {
+	display: grid;
+	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+	min-height: 440px;
+}
+
+.landing-hero__text {
+	align-self: center;
+	padding: 3.5em 2em 3.5em 1em;
+	padding-left: max(1em, calc((100vw - 58rem) / 2 + 1em));
+}
+
+.landing-hero__kicker {
+	margin: 0 0 1.25em;
+	font-size: 0.75em;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	color: #b9a8ff;
+}
+
+.landing-hero__title {
+	margin: 0 0 0.4em;
+	font-size: 3em;
+	line-height: 1.05;
+	color: #fff;
+}
+
+.landing-hero__tagline {
+	max-width: 24em;
+	margin: 0 0 1.75em;
+	font-size: 1.2em;
+	line-height: 1.5;
+	color: #d9d6e6;
+}
+
+.landing-hero__image {
+	position: relative;
+	min-height: 260px;
+	background-size: cover;
+	background-position: center;
+}
+
+.landing-hero__image::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background:
+		linear-gradient(90deg, #0d0b14 0%, rgba(13, 11, 20, 0) 40%),
+		linear-gradient(180deg, rgba(13, 11, 20, 0.25), rgba(13, 11, 20, 0.25));
+}
+
+.landing-btn {
+	display: inline-block;
+	margin: 0 0.6em 0.6em 0;
+	padding: 0.6em 1.3em;
+	border: 2px solid rgba(255, 255, 255, 0.7);
+	border-radius: 4px;
+	color: #fff;
+	font-weight: bold;
+	text-decoration: none;
+	transition: background 0.15s, border-color 0.15s;
+}
+
+.landing-btn:hover,
+.landing-btn:focus {
+	color: #fff;
+	text-decoration: none;
+	background: rgba(255, 255, 255, 0.12);
+	border-color: #fff;
+}
+
+.landing-btn--primary {
+	background: #4300ff;
+	border-color: #4300ff;
+}
+
+.landing-btn--primary:hover,
+.landing-btn--primary:focus {
+	background: #3600cc;
+	border-color: #3600cc;
+}
+
+.landing {
+	max-width: 58rem;
+	margin: 0 auto;
+	padding: 1em 1em 2em;
+}
+
+.landing-section {
+	margin: 2.5em 0;
+}
+
+.landing-section--intro p {
+	max-width: 44rem;
+}
+
+.landing-section h2 {
+	margin-top: 0;
+	font-size: 1.5em;
+}
+
+.landing .stats-row {
+	margin: 0 0 3em;
+}
+
+.build-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 1.25em;
+}
+
+.build-card {
+	padding: 1.1em 1.25em 1.1em 1.4em;
+	border-left: 3px solid #4300ff;
+	border-radius: 0 6px 6px 0;
+	background: #f6f4ff;
+}
+
+.build-card h3 {
+	margin: 0 0 0.4em;
+	font-size: 1.1em;
+}
+
+.build-card p {
+	margin: 0;
+	font-size: 0.95em;
+}
+
+.landing-two-col {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+	gap: 3em;
+	margin: 0 0 3em;
+}
+
+.landing-two-col .landing-section {
+	margin: 0;
+}
+
+.landing-aside ul {
+	padding-left: 1.1em;
+	font-size: 0.95em;
+}
+
+.landing-aside li {
+	margin-bottom: 0.5em;
+}
+
+@media (max-width: 64em) {
+	.landing-hero__inner {
+		grid-template-columns: 1fr;
+		min-height: 0;
+	}
+
+	.landing-hero__text {
+		padding: 2.5em 1em 2em;
+	}
+
+	.landing-hero__image {
+		min-height: 220px;
+	}
+
+	.landing-hero__image::after {
+		background: linear-gradient(180deg, #0d0b14 0%, rgba(13, 11, 20, 0) 45%);
+	}
+
+	.landing-two-col {
+		grid-template-columns: 1fr;
+		gap: 1.5em;
+	}
+}
+
+@media (max-width: 48em) {
+	.landing-hero__title {
+		font-size: 2.2em;
+	}
+
+	.build-grid {
+		grid-template-columns: 1fr;
+	}
+}

_sass/override.scss

@@ -1,6 +1,16 @@
+// Interior pages have no sidebar, so center the content column instead of
+// letting the theme reserve sidebar space and float the page.
 @media (min-width: 64em) {
     .page {
-        float: unset !important;
+        float: none;
+        width: 100%;
+        padding-right: 0;
+    }
+
+    .page__inner-wrap {
+        max-width: 46rem;
+        margin-left: auto;
+        margin-right: auto;
     }
 }
 
@@ -10,7 +20,6 @@
     opacity: 0.8;
 }
 
-// Give interior page titles a little more presence now that they no longer sit on a hero image
 .page__title {
     margin-top: 0.5em;
 }

assets/css/main.scss

@@ -11,4 +11,5 @@ search: false
 @import "people";
 @import "paper_list";
 @import "publications";
+@import "landing";
 @import "override";

index.md

@@ -1,47 +1,70 @@
 ---
 title: "Aharoni Lab"
-excerpt: "Open-source tools for recording and manipulating neural activity in freely behaving animals."
-header:
-  overlay_image: /assets/images/CMOS_Render3.png
-  overlay_filter: 0.3
-  actions:
-    - label: "Our research"
-      url: "/Research/"
-    - label: "Join the lab"
-      url: "/Join/"
+layout: landing
+kicker: "Department of Neurology · UCLA"
+tagline: "Open-source tools for recording and manipulating neural activity in freely behaving animals."
+hero_image: /assets/images/CMOS_Render3.png
+hero_alt: "Rendering of a Miniscope printed circuit board"
+actions:
+  - label: "Our research"
+    url: /Research/
+  - label: "Join the lab"
+    url: /Join/
 ---
 
+<section class="landing-section landing-section--intro" markdown="1">
 ## Research-driven tool design
 
-The Aharoni Lab works at the intersection of engineering, neuroscience, and physics in the Department of Neurology at UCLA. We build open platforms for imaging and manipulating neural activity in freely behaving animals: the optics, electronics, and firmware of head-mounted microscopes, the acquisition software and analysis pipelines that go with them, and the documentation and training that let other labs actually use them.
+The Aharoni Lab works at the intersection of engineering, neuroscience, and physics. We build open platforms for imaging and manipulating neural activity in freely behaving animals: the optics, electronics, and firmware of head-mounted microscopes, the acquisition software and analysis pipelines that go with them, and the documentation and training that let other labs actually use them.
 
 We lead the [UCLA Miniscope Project](https://miniscope.org), an open-source miniaturized microscopy ecosystem that has become one of the most widely adopted neurotechnology platforms in the field. Our work is motivated by two goals: democratizing access to transformative tools in neuroscience, and closing the gap between specialized tool design and the questions neuroscientists actually need to answer.
+</section>
 
 <div class="stats-row">
   <div class="stat"><span class="stat-number">1,000+</span><span class="stat-label">labs using Miniscope tools</span></div>
   <div class="stat"><span class="stat-number">18+</span><span class="stat-label">countries</span></div>
   <div class="stat"><span class="stat-number">200+</span><span class="stat-label">peer-reviewed papers using our tools</span></div>
 </div>
 
+<section class="landing-section" markdown="1">
 ## What we build
 
-**Miniature microscopes.** Wire-free and fully wireless Miniscopes, large field-of-view and multi-region imaging, dual-color imaging, miniature two-photon systems, and platforms that combine imaging with patterned optogenetic stimulation. [Read more →](/Research/)
-
-**Software and analysis.** Cross-platform acquisition, streaming and real-time analysis, and browser-based tools for calcium imaging, including [Minian](https://github.com/miniscope/minian) and [CaLab](https://github.com/miniscope/CaLab).
-
-**Community infrastructure.** Through an NIH BRAIN Initiative U24 resource we maintain [miniscope.org](https://miniscope.org) (guides, forums, hardware and software projects) and run hands-on workshops and drop-in office hours for the community.
-
-**Neuroscience.** We use these tools, in the lab and with collaborators, to study how hippocampal and cortical circuits encode memory, space, and social behavior across long timescales.
+<div class="build-grid" markdown="1">
+<div class="build-card" markdown="1">
+### Miniature microscopes
+Wire-free and fully wireless Miniscopes, large field-of-view and multi-region imaging, dual-color imaging, miniature two-photon systems, and platforms that combine imaging with patterned optogenetic stimulation. [Read more →](/Research/)
+</div>
+<div class="build-card" markdown="1">
+### Software and analysis
+Cross-platform acquisition, streaming and real-time analysis, and browser-based tools for calcium imaging, including [Minian](https://github.com/miniscope/minian) and [CaLab](https://github.com/miniscope/CaLab).
+</div>
+<div class="build-card" markdown="1">
+### Community infrastructure
+Through an NIH BRAIN Initiative U24 resource we maintain [miniscope.org](https://miniscope.org) (guides, forums, hardware and software projects) and run hands-on workshops and drop-in office hours.
+</div>
+<div class="build-card" markdown="1">
+### Neuroscience
+We use these tools, in the lab and with collaborators, to study how hippocampal and cortical circuits encode memory, space, and social behavior across long timescales.
+</div>
+</div>
+</section>
 
+<div class="landing-two-col">
+<section class="landing-section" markdown="1">
 ## Recent news
 
-{% include news_list.html limit=5 %}
+{% include news_list.html limit=4 %}
 
 [All news →](/News/) · [Miniscope community news →](https://miniscope.org/wiki/News)
+</section>
 
+<aside class="landing-section landing-aside" markdown="1">
 ## Find us
 
 * [miniscope.org](https://miniscope.org): documentation, guides, events, and community forum
 * [Drop-in office hours](https://miniscope.org/wiki/Events), every other Friday on Zoom
 * GitHub: [Aharoni-Lab](https://github.com/Aharoni-Lab) · [miniscope](https://github.com/miniscope)
 * [Daniel on Mastodon](https://neuromatch.social/@Daharoni) · [X](https://twitter.com/DanielBAharoni)
+* [daharoni@mednet.ucla.edu](mailto:daharoni@mednet.ucla.edu)
+</aside>
+</div>

manifest.webmanifest

@@ -2,6 +2,6 @@
   "icons": [
     { "src": "/assets/images/favicon-128x128.png", "type": "image/png", "sizes": "192x192" },
     { "src": "/assets/images/favicon-32x32.png", "type": "image/png", "sizes": "32x32" },
-    { "src": "/assets/images/favicon-16x16.png", "type": "image/png", "sizes": "16x16" },
+    { "src": "/assets/images/favicon-16x16.png", "type": "image/png", "sizes": "16x16" }
   ]
 }