Merge pull request #311 from UW-Macrostrat/style-improvements

Style improvements for homepage

Author: davenquinn

pages/+Page.module.sass

@@ -1,12 +1,41 @@
 .nohighlight
   color: white
 
-.site-header.hero
-  margin-top: -3em
-  padding-top: 5em
-  padding-bottom: 5em
-  height: 500px
+.site-header
+  z-index: 1000
+  position: relative
+
+.main-title
+  --macrostrat-logo-size: 100px
+  --macrostrat-wordmark-size: 3.5rem
+  justify-content: center
+
+  .subtitle
+    font-size: 1.2rem
+    margin-top: 0.25rem
+    color: var(--secondary-color)
+    margin-bottom: 0.5rem
+
+  gap: 1rem !important
+
+.site-navbar
+  :global(.navbar-title)
+    transition: opacity 0.3s ease-in-out
 
+  &:global(.transition-enter)
+    :global(.navbar-title)
+      opacity: 1
+
+  &:global(.transition-leave)
+    :global(.navbar-title)
+      opacity: 0
+
+
+.subtitle
+  text-align: center
+  font-weight: 500
+
+//
 .hero
   height: 300px
   border-radius: 1em
@@ -15,8 +44,11 @@
   justify-content: center
   align-items: center
   color: white
+  padding-top: 5em
+  padding-bottom: 5em
+  height: 500px
 
-  --macrostrat-logo-size: 100px
+  font-size: 1.5em
 
   text-shadow: var(--dark-background) 0px 2px 8px
 
@@ -32,25 +64,22 @@
     z-index: -1
     object-fit: cover
     overflow: hidden
+    background-position: 50% 50%
+    background-size: cover
+    background-image: url("https://storage.macrostrat.org/assets/web/main-page/cover_large.jpg")
 
   .hero-content
     text-align: center
     display: flex
     flex-direction: column
     gap: 1em
 
-
 .cover-image
   object-fit: cover
   width: 100vw
   overflow: hidden
 
 
-.subtitle
-  text-align: center
-  font-weight: 500
-
-
 .sea-image
   position: absolute
   z-index: 6
@@ -71,9 +100,13 @@
   a
     color: white !important
 
+
+.stats
+  font-size: 1.5em
+
 .top-stat
-  font-size: 35px
-  font-family: Helvetica, sans-serif
+  font-weight: 600
+
 
 .stats
   display: flex
@@ -123,13 +156,6 @@
   padding: 0 10vh
   margin: 0
 
-.title
-  margin: 0
-  font-size: 72px
-  font-family: "Maven Pro", sans-serif
-  padding: 20vh 0
-  text-align: center
-
 #about
   height: 100vh
   background-color: white
@@ -394,4 +420,4 @@
 .rock-info
   display: flex
   align-items: center
-  gap: .5em
+  gap: .5em

pages/+Page.ts

@@ -1,25 +1,33 @@
-import { Image, Navbar, Footer, SiteTitle, SearchBar } from "~/components/general";
+import {
+  Image,
+  Navbar,
+  Footer,
+  SiteTitle,
+  SearchBar,
+} from "~/components/general";
 import h from "./+Page.module.sass";
 import { LinkCard } from "~/components/cards";
 import { useData } from "vike-react/useData";
 import { isDev } from "@macrostrat-web/settings";
 
 export function Page() {
   return h("div.page-main", [
-    h("div.hero.site-header", [
-      h("div.hero-backdrop", [
-        h(Image, { className: "cover-image", src: "cover_large.jpg" }),
+    h("header.site-header", [
+      h(SiteTitle, { className: "main-title" }, [
+        h("h2.subtitle", "The data system for the crust"),
       ]),
+    ]),
+    h(Navbar, { className: "site-navbar" }),
+    h("div.hero", [
+      h("div.hero-backdrop"),
       h("div.hero-content", [
-        h(SiteTitle),
-        h(
-          "h2.subtitle",
-          "A platform for geological data exploration, integration, and analysis"
-        ),
+        h("p.hero-text", [
+          "Macrostrat integrates geologic maps and stratigraphic columns " +
+            "into a  model of the Earth's crustal framework through time.",
+        ]),
         h(MacrostratStats),
       ]),
     ]),
-    h(Navbar, { className: "site-header" }),
     h("div.buttons", [
       h("h2", "Geologic maps"),
       h(LinkCard, { title: "Map interface", href: "/map/#3/40.78/-94.13" }, [
@@ -137,19 +145,19 @@ function MacrostratStats() {
   return h("div.stats", {}, [
     h("div.stat", {}, [
       h("span.top-stat#n_columns", {}, formatNumber(columns)),
-      h("span.top-stat-label", {}, "Regional Rock Columns"),
+      h("span.top-stat-label", {}, "columns"),
     ]),
     h("div.stat", {}, [
       h("span.top-stat#n_units", {}, formatNumber(units)),
-      h("span.top-stat-label", {}, "Rock Units"),
+      h("span.top-stat-label", {}, "rock units"),
     ]),
     h("div.stat", {}, [
       h("span.top-stat#n_polys", {}, formatNumber(polygons)),
-      h("span.top-stat-label", {}, "Geologic Map Polygons"),
+      h("span.top-stat-label", {}, "map polygons"),
     ]),
     h("div.stat", {}, [
       h("span.top-stat#n_names", {}, formatNumber(projects)),
-      h("span.top-stat-label", {}, "Projects"),
+      h("span.top-stat-label", {}, "projects"),
     ]),
   ]);
-}
+}

pages/dev/lexicon/+Page.mdx

@@ -1,5 +1,3 @@
-import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/components";
 import "./main.styl";
 import { Image } from "./index";
 import { MacrostratIcon } from "~/components";

pages/map/map-interface/components/navbar/index.ts

@@ -13,7 +13,9 @@ import { PanelSubhead } from "@macrostrat/map-interface";
 import classNames from "classnames";
 import { navigate } from "vike/client/router";
 import { MacrostratIcon } from "~/components/macrostrat-icon";
-import { useAdmoinshments } from "#/map/map-interface/components/filter-panel/admonishments";
+import { useAdmoinshments } from "../filter-panel/admonishments";
+import { MacrostatLogoLink } from "~/components/general";
+import { useInDarkMode } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -146,22 +148,26 @@ function Searchbar({ className }) {
     filterPanelElement = h(FilterPanel, { filters, admonishments });
   }
 
-  return h(FloatingNavbar, { statusElement: filterPanelElement }, [
-    h(MacrostratIcon, {
-      size: 36,
-      onClick() {
-        navigate("/");
-      },
-    }),
-    h(InputGroup, {
-      large: true,
-      onChange: handleSearchInput,
-      onClick: gainInputFocus,
-      rightElement: h(MenuButton),
-      placeholder: "Search Macrostrat...",
-      value: term,
-    }),
-  ]);
+  return h(
+    FloatingNavbar,
+    { statusElement: filterPanelElement, className: "map-navbar" },
+    [
+      h("div.navbar-link-container", [
+        h(MacrostatLogoLink, {
+          logoStyle: "frameless-simple",
+          className: "navbar-logo",
+        }),
+      ]),
+      h(InputGroup, {
+        large: true,
+        onChange: handleSearchInput,
+        onClick: gainInputFocus,
+        rightElement: h(MenuButton),
+        placeholder: "Search Macrostrat...",
+        value: term,
+      }),
+    ]
+  );
 }
 
 function SearchGuidance() {

pages/map/map-interface/components/navbar/navbar.module.sass

@@ -45,3 +45,15 @@
         content: '–'
         position: absolute
         left: -1em
+
+.map-navbar :global(.bp5-navbar)
+  overflow: hidden
+
+.navbar-logo
+  //margin: -8px -15px -8px -15px
+  //margin-right: -10px
+  border: 1px solid var(--panel-rule-color)
+  --macrostrat-logo-size: 50px
+
+.navbar-link-container
+  margin-left: -10px

src/components/general/index.ts

@@ -2,6 +2,7 @@ import h from "./layout.module.sass";
 import { MacrostratIcon, StickyHeader } from "~/components";
 import { Spinner, Icon, Card } from "@blueprintjs/core";
 import { useDarkMode } from "@macrostrat/ui-components";
+import classNames from "classnames";
 
 export function Image({ src, className, width, height }) {
   const srcWithAddedPrefix =
@@ -16,24 +17,44 @@ export function NavListItem({ href, children }) {
   );
 }
 
-export function SiteTitle() {
-  return h("a.site-title", { href: "/" }, [
+export function MacrostatLogoLink({
+  href = "/",
+  className,
+  logoStyle,
+  children,
+}) {
+  const logoFile =
+    logoStyle != null
+      ? `macrostrat-icon-${logoStyle}.svg`
+      : "macrostrat-icon.svg";
+  return h("a.macrostrat-logo-link", { href, className }, [
     h("img.macrostrat-logo", {
-      src: "https://storage.macrostrat.org/assets/web/macrostrat-icons/macrostrat-icon.svg",
+      src: `https://storage.macrostrat.org/assets/web/macrostrat-icons/${logoFile}`,
     }),
-    h("h1", "Macrostrat"),
+    children,
   ]);
 }
 
+export function SiteTitle({ logoStyle, className, children }) {
+  return h(
+    MacrostatLogoLink,
+    { logoStyle, className: classNames("site-title", className) },
+    h("div.site-title-content", [h("h1", "Macrostrat"), children])
+  );
+}
+
 export function Navbar({ className, children, showSiteTitle = true }) {
-  return h(StickyHeader, [
-    h("nav.navbar", { className }, [
-      h.if(showSiteTitle)(SiteTitle),
+  return h(StickyHeader, { className }, [
+    h("nav.navbar", [
+      h.if(showSiteTitle)(SiteTitle, {
+        logoStyle: "simple",
+        className: "navbar-title",
+      }),
       children,
       h("ul.nav-list", [
         h(NavListItem, { href: "/about" }, "About"),
-        h(NavListItem, { href: "/publications" }, "Publications"),
         h(NavListItem, { href: "/people" }, "People"),
+        h(NavListItem, { href: "/publications" }, "Publications"),
         h(NavListItem, { href: "/donate" }, "Donate"),
         h(NavListItem, { href: "https://rockd.org/" }, "Rockd"),
       ]),

src/components/general/layout.module.sass

@@ -166,16 +166,15 @@
 :root
   --macrostrat-logo-size: 30px
 
-a.site-title
+a.macrostrat-logo-link
   --macrostrat-wordmark-size-internal: var(--macrostrat-wordmark-size, calc(var(--macrostrat-logo-size) * 0.8))
   font-size: var(--macrostrat-wordmark-size-internal)
   display: flex
   flex-direction: row
   gap: 0.3em
   align-items: center
-  justify-content: center
 
-  color: inherit !important
+  color: inherit
 
   &:hover
     text-decoration: none
@@ -184,9 +183,12 @@ a.site-title
     height: var(--macrostrat-logo-size)
     aspect-ratio: 1
 
-  h1, h2
+  h1
     font-size: 1em
     font-weight: 400
     font-family: "Maven Pro", sans-serif
     margin: 0
 
+  *
+    font-family: "Publico Text", serif
+

src/components/navigation/sticky-header.module.sass

@@ -1,7 +1,28 @@
 .sticky-header
   position: sticky
-  top: 0
+  top: -1em
+  // Provide some overlap for intersection observer
   z-index: 100
-  margin: -1em -100rem 0
-  padding: 1em 100rem 1em
-  background: linear-gradient(var(--background-color) 90%, rgba(255, 255, 255, 0))
+  margin: 0 0 0
+  padding: 1em 0 0em
+
+
+  &:global(.is-stuck)
+    .backdrop
+      border-bottom: 1px solid var(--panel-rule-color)
+
+  &.fade-bottom
+    .backdrop
+      background: linear-gradient(var(--background-color) 90%, rgba(255, 255, 255, 0))
+      border-bottom: none
+
+  .backdrop
+    position: absolute
+    top: 0
+    left: 50%
+    width: 100vw
+    height: 100%
+    background: var(--background-color)
+    margin: 0 -50vw 0
+    z-index: -1
+