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

Style improvements

Author: davenquinn

pages/+Layout.ts

@@ -1,54 +1,27 @@
-import { DarkModeProvider, DevToolsConsole } from "@macrostrat/ui-components";
+import { DarkModeProvider } from "@macrostrat/ui-components";
 import { ReactNode } from "react";
 
 import { AuthProvider } from "~/_providers/auth";
 import { usePageContext } from "vike-react/usePageContext";
+import { pageLayouts } from "~/layouts";
 
 import "@blueprintjs/core/lib/css/blueprint.css";
 import "~/styles/core.sass";
 import "~/styles/padding.css";
 //
 import h from "@macrostrat/hyper";
 
-import { ClientOnly } from "vike-react/ClientOnly";
-
 export default function Layout({ children }: { children: ReactNode }) {
   const pageContext = usePageContext();
   const { exports = {}, config, user } = pageContext;
   const pageStyle = exports?.pageStyle ?? "fullscreen";
   // const devTools = exports.devTools ?? [];
 
+  const layout = pageLayouts[pageStyle] ?? `div.${pageStyle}-page`;
+
   return h(
     AuthProvider,
     { user }, // Prefer detailed user if available
-    h(
-      DarkModeProvider,
-      { followSystem: true },
-      h("div.app-shell", { className: pageStyle + "-page" }, [
-        children,
-        // h(DevToolsConsole, {
-        //   className: "page-admin-container",
-        //   tools: [...devTools, DevToolsData],
-        // }),
-      ])
-    )
+    h(DarkModeProvider, { followSystem: true }, h(layout, children))
   );
 }
-
-function DevToolsData() {
-  return h(
-    ClientOnly,
-    {
-      load() {
-        return import("~/components/developer").then((mod) => mod.DevToolsData);
-      },
-    },
-    (DevToolsData) => h(DevToolsData)
-  );
-}
-
-DevToolsData.title = "Vike page context";
-
-function NoOpDarkModeProvider(props) {
-  return props.children;
-}

pages/+Page.module.sass

@@ -1,62 +1,52 @@
 .nohighlight
   color: white
 
-.start
-  width: 100%
+.site-header.hero
+  margin-top: -3em
+  padding-top: 5em
+  padding-bottom: 5em
+  height: 500px
+
+.hero
+  height: 300px
+  border-radius: 1em
+  position: relative
   display: flex
   justify-content: center
   align-items: center
-  height: 50vh
   color: white
-  position: relative
-  margin-bottom: calc(1em + 1px)
-  border-bottom: 2px solid var(--text-emphasized-color)
 
+  --macrostrat-logo-size: 100px
 
-  li
-    float: left
-    list-style-type: none
-    width: 33%
+  text-shadow: var(--dark-background) 0px 2px 8px
 
-  ul
-    display: inline-block
-    width: 100%
 
-.banner
-  z-index: 30
+  .hero-backdrop
+    position: absolute
+    top: 0
+    left: 50%
+    bottom: 0
+    margin-left: -50vw
+    width: 100vw
+    height: 100%
+    z-index: -1
+    object-fit: cover
+    overflow: hidden
 
-  h1, h2
-    text-shadow: var(--dark-background) 1px 0 10px
+  .hero-content
+    text-align: center
 
-.header
-  text-shadow: black 1px 0 10px
-  text-align: center
-  display: flex
-  justify-content: center
-  gap: 10px
 
-  .main-title
-    font-size: 60px
-    padding: 0
+.cover-image
+  object-fit: cover
+  width: 100vw
+  overflow: hidden
 
-  .version
-    font-size: 40px
-    padding: 0
-    margin: 0
 
 .subtitle
   text-align: center
   font-weight: 500
 
-.cover-image
-  position: absolute
-  left: 0px
-  top: 0px
-  height: 50vh
-  width: 100%
-  object-fit: cover
-  border-bottom: 2px solid var(--text-emphasized-color)
-
 
 .sea-image
   position: absolute
@@ -69,11 +59,6 @@
   display: inline-flex
   width: 100%
 
-.main-title
-  font-size: 72px
-  font-weight: 400
-  font-family: "Maven Pro", sans-serif
-  text-align: center
 
 .top-stat, .top-stat-label
   display: grid
@@ -104,13 +89,8 @@
     color: white
 
 .buttons
-  font-size: 20px
-  padding: 0px
   display: flex
   flex-direction: column
-  width: 100%
-  padding: 0 20%
-  border-bottom: 2px solid var(--text-emphasized-color)
 
 .country_container
   height: 100vh
@@ -136,12 +116,6 @@
   margin: 0
   padding: 0
 
-.geologic-maps
-  height: 100vh
-  background-color: white
-  color: black
-  margin: 0
-
 .map-info
   padding: 0 10vh
   margin: 0
@@ -417,4 +391,4 @@
 .rock-info
   display: flex
   align-items: center
-  gap: .5em
+  gap: .5em

pages/+Page.ts

@@ -1,60 +1,75 @@
-import { Image, Navbar, Footer } from "~/components/general";
+import { Image, Navbar, Footer, SiteTitle } 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.start", [
-      h(Image, { className: "back-img cover-image", src: "cover_large.jpg" }),
-      h("div.banner", [
-        h("div.header", h("h1.main-title", "Macrostrat")),
+    h("div.hero.site-header", [
+      h("div.hero-backdrop", [
+        h(Image, { className: "cover-image", src: "cover_large.jpg" }),
+      ]),
+      h("div.hero-content", [
+        h(SiteTitle),
         h(
           "h2.subtitle",
           "A platform for geological data exploration, integration, and analysis"
         ),
         h(MacrostratStats),
       ]),
     ]),
-    h(Navbar, { className: "main-navbar" }),
+    h(Navbar, { className: "site-header" }),
     h("div.buttons", [
-      h(LinkCard, { title: "Geologic Map", href: "/map/#3/40.78/-94.13" }, [
-        h("p", { className: "long" }, [
-          h("div.temp", {}, [
-            "With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into ",
-            h("a", { href: "https://xdd.wisc.edu", target: "_blank" }, "xDD"),
-            " (formly GeoDeepDive).",
-          ]),
-          h("div.temp", {}, [
-            "Are you affiliated with a state or national geologic survey? ",
-            h(
-              "a",
-              {
-                href: "mailto:[email protected]?Subject=Geologic%20Map%20Collaboration",
-              },
-              "Get in touch"
-            ),
-            " with us - we'd love to collaborate and help publicize your maps!",
-          ]),
-          h("div.temp", {}, [
-            "Get started by ",
-            h("a", { href: "/map" }, "exploring the map"),
-            " or ",
-            h("a", { href: "/map/sources" }, "taking a look at"),
-            " which maps are currently a part of Macrostrat.",
-          ]),
-        ]),
+      h("h2", "Geologic maps"),
+      h(LinkCard, { title: "Map interface", href: "/map/#3/40.78/-94.13" }, [
+        "An integrated geological map of the world",
       ]),
-      h(LinkCard, { title: "Maps", href: "/maps" }, [
-        h("p", "The spatial footprint of rocks on the Earth's surface"),
+      h(
+        LinkCard,
+        { title: "Map index", href: "/maps" },
+        "Maps from different data providers that have been integrated into Macrostrat"
+      ),
+      h("div.details", [
+        h("p", {}, [
+          "With over 225 maps from data providers around the world at every scale, Macrostrat is the world's largest homogenized geologic map database. ",
+          "Our data processing pipeline links geologic map polygons to stratigraphic columns, external stratigraphic name lexicons, and geochronological intervals. ",
+          "This enhancement of map data allows for direct links to the literature via ",
+          h("a", { href: "https://xdd.wisc.edu", target: "_blank" }, "xDD"),
+          " (formly GeoDeepDive).",
+        ]),
+        h("p", [
+          "Are you affiliated with a state or national geologic survey? ",
+          h(
+            "a",
+            {
+              href: "mailto:[email protected]?Subject=Geologic%20Map%20Collaboration",
+            },
+            "Get in touch"
+          ),
+          " with us - we'd love to collaborate and help publicize your maps!",
+        ]),
+        h("p", {}, [
+          "Get started by ",
+          h("a", { href: "/map" }, "exploring the map"),
+          " or ",
+          h("a", { href: "/map/sources" }, "taking a look at"),
+          " which maps are currently a part of Macrostrat.",
+        ]),
       ]),
+      h("h2", "Stratigraphic columns"),
       h(LinkCard, { title: "Columns", href: "/columns" }, [
-        h(
-          "p",
-          "Stratigraphic and geological columns showing the organization of rocks in time"
-        ),
+        "Regional and local descriptions of the evolution of the Earth's crust through time",
       ]),
+      h(
+        "p",
+        "Macrostrat's stratigraphic columns account for the organization of rocks in the crust and their evolution over Earth history."
+      ),
+      h(
+        "p",
+        "Macrostrat stores both regional columns that represent a unified chronostratigraphic framework and measured sections and drill core logs that provide detailed information about specific locations."
+      ),
+
       h(LinkCard, { title: "Geologic Lexicon", href: "/lex" }, [
         h("p", "Geologic units and data dictionaries"),
       ]),
@@ -69,7 +84,7 @@ export function Page() {
             width: "22px",
             height: "22px",
           }),
-          h("span", " Go Mobile!"),
+          " Go mobile!",
         ]),
       ]),
       h(

pages/map/map-interface/index.ts

@@ -3,7 +3,6 @@ import h from "@macrostrat/hyper";
 import { Route, Routes } from "react-router-dom";
 import { useEffect } from "react";
 
-import "~/styles/global.styl";
 import "./searchbar.styl";
 
 import { createRouterMiddleware } from "@lagunovsky/redux-react-router";

pages/map/sources/+Page.ts

@@ -5,7 +5,6 @@ import App from "./components/app";
 import h from "@macrostrat/hyper";
 
 // We should probably make this a little less global
-import "~/styles/global.styl";
 // import "./searchbar.styl";
 // import "./ui-components.styl";
 

pages/maps/@id/+Page.ts

@@ -34,7 +34,6 @@ import {
 import boundingBox from "@turf/bbox";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { useEffect, useMemo, useState } from "react";
-import "~/styles/global.styl";
 import h from "./main.module.sass";
 import { PageBreadcrumbs, MapReference, DevLink } from "~/components";
 import { MapNavbar } from "~/components/map-navbar";

pages/maps/ingestion/@id/components/map-interface.ts

@@ -20,7 +20,6 @@ import boundingBox from "@turf/bbox";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { MapNavbar } from "~/components/map-navbar";
-import "~/styles/global.styl";
 import styles from "./main.module.sass";
 import { asChromaColor, toRGBAString } from "@macrostrat/color-utils";
 import { boundingGeometryMapStyle } from "~/map-styles";