diff --git a/_layouts/landing.html b/_layouts/landing.html new file mode 100644 index 0000000..819fce6 --- /dev/null +++ b/_layouts/landing.html @@ -0,0 +1,22 @@ +--- +layout: default +--- +
+
+
+ {% if page.kicker %}

{{ page.kicker }}

{% endif %} +

{{ page.title }}

+ {% if page.tagline %}

{{ page.tagline }}

{% endif %} + {% if page.actions %} +
+ {% for action in page.actions %}{{ action.label }}{% endfor %} +
+ {% endif %} +
+ +
+
+ +
+{{ content }} +
diff --git a/_sass/landing.scss b/_sass/landing.scss new file mode 100644 index 0000000..a01116b --- /dev/null +++ b/_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; + } +} diff --git a/_sass/override.scss b/_sass/override.scss index 5bde999..91859f3 100644 --- a/_sass/override.scss +++ b/_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; } diff --git a/assets/css/main.scss b/assets/css/main.scss index e53ba96..7f2c362 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -11,4 +11,5 @@ search: false @import "people"; @import "paper_list"; @import "publications"; +@import "landing"; @import "override"; \ No newline at end of file diff --git a/index.md b/index.md index 2ec2360..3efe98d 100644 --- a/index.md +++ b/index.md @@ -1,21 +1,24 @@ --- 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/ --- +
## 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. +
1,000+labs using Miniscope tools
@@ -23,25 +26,45 @@ We lead the [UCLA Miniscope Project](https://miniscope.org), an open-source mini
200+peer-reviewed papers using our tools
+
## 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. +
+
+### 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. +
+
+### 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. +
+
+
+
+
## 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) +
+ +
diff --git a/manifest.webmanifest b/manifest.webmanifest index b83b122..5f54094 100644 --- a/manifest.webmanifest +++ b/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" } ] } \ No newline at end of file