improve design and polish

Project.toml

@@ -6,6 +6,7 @@ version = "1.0.0"
 [deps]
 Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 BonitoSites = "8b3cd1a5-63d9-421b-9fde-46b64b830918"
+Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 GitHub = "bc5e4493-9b4d-5f90-b8aa-2b2bcaad7a26"
 Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a"
 

src/Website.jl

@@ -1,7 +1,6 @@
 module Website
 
 using Bonito, Markdown
-import Bonito.TailwindDashboard as D
 import GitHub
 
 function asset_path(files...)

src/blog.jl

@@ -30,6 +30,31 @@ function add_blogposts!(routes)
     return routes
 end
 
+# Own card rendering for SiteEntry: BonitoSites' jsrender shows a
+# date-time ("... 12:0:0") and ships inline styles that fight blog_entry CSS.
+function blog_entry_card(entry)
+    human_date = Dates.format(entry.date, "e, d u Y")
+    link = replace(entry.link, "./" => "/")
+    img = if isempty(entry.image)
+        nothing
+    elseif endswith(entry.image, ".mp4")
+        DOM.video(src=Asset(entry.image); autoplay=true, loop=true, muted=true)
+    else
+        DOM.img(src=Asset(entry.image))
+    end
+    return DOM.a(
+        DOM.div(
+            DOM.h3(entry.title),
+            DOM.h4(entry.description),
+            img,
+            DOM.div(human_date; class="date");
+            class="blog_entry"
+        );
+        href=Bonito.Link(link),
+        class="card w-full blog_card"
+    )
+end
+
 function blog()
     rss_link = DOM.link(
         rel="alternate",
@@ -38,17 +63,13 @@ function blog()
         href="./rss.xml"
     )
     entries = all_posts()
-    site_entries = map(entries) do (_, entry)
-        style = """
-        div.blog_entry h3 {
-            font-weight:700;
-            font-size:1.125rem;
-            line-height:1.75rem;
-        }
-        """
-        DOM.div(entry, class="$CARD_STYLE blog_entry max-w-prose", style=style)
-    end
-    body = DOM.div(rss_link, Bonito.Col(site_entries...))
+    cards = [blog_entry_card(entry) for (_, entry) in entries]
+    body = DOM.div(
+        H1("Blog"),
+        rss_link,
+        DOM.div(cards...; class="flex flex-col gap-6 w-full");
+        class="max-w-3xl mx-auto w-full flex flex-col gap-4"
+    )
     return page(Section(body), "Blog")
 end
 

src/contact.jl

@@ -1,23 +1,37 @@
 function contact()
     # Add elements to form
     slack = link("julia slack Makie channel", "https://julialang.org/slack")
-    row(name, img, link) = D.FlexGrid(H3(name), SmallLogo(image=img, link=link); class="justify-center items-center -m-2 md:-m-4 lg:-m-8 p-10")
+    simon_gh = link("Simon", "https://github.com/SimonDanisch")
+    julius_gh = link("Julius", "https://github.com/jkrumbiegel")
+    frederic_gh = link("Frederic", "https://github.com/ffreyer")
 
-    logos = D.FlexGrid(
-        row("Discord: ", "logos/discord-mark-blue.svg", "https://discord.gg/2FBjYAT3cY"),
-        row("Linkedin:", "logos/linkedin.png", "https://www.linkedin.com/company/makieorg"),
-        row("Github:", "logos/GitHub-Mark-64px.png", "https://github.com/MakieOrg"),
-        row("Mastodon:", "logos/mastodon.svg", "https://julialang.social/@makie"),
-        class="justify-center items-center -m-2 md:-m-4 lg:-m-8 p-8",
+    function social(name, img, url)
+        chip = SmallLogo(image=img, link=url)
+        return DOM.div(chip, DOM.span(name; class="text-sm text-gray-600"); class="flex items-center gap-2 m-2")
+    end
+
+    logos = FlexGrid(
+        social("Discord", "logos/discord-mark-blue.svg", "https://discord.gg/2FBjYAT3cY"),
+        social("LinkedIn", "logos/linkedin.png", "https://www.linkedin.com/company/makieorg"),
+        social("GitHub", "logos/GitHub-Mark-64px.png", "https://github.com/MakieOrg"),
+        social("Mastodon", "logos/mastodon.svg", "https://julialang.social/@makie");
+        class="justify-center items-center",
     )
     body = DOM.div(
-        TextBlock(dom"
-        We're happy to hear from you! $(DOM.br())
+        H1("Contact"),
+        DOM.div(
+            TextBlock(dom"""
+            We're happy to hear from you!
 
-        Write us an email to info@makie.org, join the $(slack), $(DOM.br())
+            Write us an email to info@makie.org, join the $(slack),
+            or reach the maintainers directly on GitHub: $(simon_gh), $(julius_gh) or $(frederic_gh).
 
-        or write us on any of our social media channels: $(DOM.br())"),
-        logos; class=CARD_STYLE
+            You can also find us on social media:
+            """; width="w-full"),
+            logos;
+            class="card p-6 sm:p-8 w-full flex flex-col gap-4"
+        );
+        class="max-w-2xl mx-auto w-full flex flex-col gap-6"
     )
     return page(Section(body), "Contact")
 end

src/html-classes.jl

@@ -1,3 +1,4 @@
+using Dates
 
 function md2html(s, file)
     source = read(file, String)
@@ -13,27 +14,33 @@ camelcase_break_suggest(s::String) = DOM.span_unesc(
 
 Bonito.jsrender(s::Session, card::Vector) = Bonito.jsrender(s, DOM.div(card...; class="flex flex-wrap"))
 
-const CARD_STYLE = "rounded-md p-2 px-3 shadow bg-white"
+const CARD_STYLE = "card p-4"
 
-H1(x) = DOM.h1(x; class="text-xl font-black text-left my-4")
-H2(x) = DOM.h2(x; class="text-lg font-bold text-left my-3")
-H2Focus(x) = DOM.h2(x; class="text-lg font-bold text-left")
+# Type scale: real hierarchy instead of everything at 18px
+H1(x) = DOM.h1(x; class="text-3xl font-bold text-left tracking-tight text-black my-4")
+H2(x) = DOM.h2(x; class="text-2xl font-bold text-left tracking-tight text-black my-3")
+H2Focus(x) = DOM.h2(x; class="text-2xl font-bold text-left tracking-tight text-black")
 H3(x) = DOM.h3(x; class="text-sm font-semibold text-left")
-link(name, href; class="visited:text-purple-600 text-blue-600", style="") = DOM.a(name; href=href, target="_blank", class=class, style=style)
+link(name, href; class="text-blue-600 hover:underline", style="") = DOM.a(name; href=href, target="_blank", class=class, style=style)
 
 FlexGrid(elems...; class="", kwargs...) = DOM.div(elems...; class=join(["flex flex-wrap", class], " "), kwargs...)
 Grid(elems...; class="", kwargs...) = DOM.div(elems...; class=join(["grid ", class], " "), kwargs...)
-TextBlock(text; width="max-w-prose") = DOM.div(text; class="text-base $width")
-Block(elems...) = DOM.div(elems...; class="p-4 max-w-5xl")
+TextBlock(text; width="max-w-prose") = DOM.div(text; class="text-base text-left $width")
+Block(elems...) = DOM.div(elems...; class="px-4 py-6 max-w-6xl w-full mx-auto")
 FullWidthBlock(elems...) = DOM.div(elems...; class="p-4 w-full")
 Section(content...; bg="") = DOM.div(
     Block(content...),
     class="$bg flex flex-col items-center w-full"
 )
-FullWidthText(text; class="") = DOM.div(text, class="w-full text-justify $class")
+FullWidthText(text; class="") = DOM.div(text, class="w-full text-left text-lg $class")
+
 function Showcase(; title, image, href=nothing)
-    img = render_media(img_asset(image))
-    content = DOM.div(H3(title), img; class="flex flex-col gap-2")
+    img = render_media(img_asset(image); class="w-full rounded-xl border shadow-sm")
+    content = DOM.div(
+        img,
+        DOM.div(title; class="text-sm font-semibold text-gray-600 mt-2 text-center");
+        class="flex flex-col"
+    )
     if isnothing(href)
         return content
     else
@@ -42,22 +49,22 @@ function Showcase(; title, image, href=nothing)
 end
 
 function FocusBlock(description; image="", link="", height="400px", rev=false)
-    img = image isa String ? render_media(img_asset(image); class=CARD_STYLE) : image
+    img = image isa String ? render_media(img_asset(image); class="w-full rounded-xl border shadow-sm") : image
     block = [
-        TextBlock(description; width="w-full text-justify md:basis-3/5"),
+        TextBlock(description; width="w-full md:basis-3/5"),
         DOM.div(Website.link(img, link); class="w-full md:basis-2/5")
     ]
-    return DOM.div(block...; class="flex gap-6 items-center flex-col $(rev ? "sm:flex-row-reverse" : "sm:flex-row")")
+    return DOM.div(block...; class="flex gap-8 items-center flex-col $(rev ? "sm:flex-row-reverse" : "sm:flex-row")")
 end
 Spacer(size) = DOM.div(class = "w-full my-$size")
 
 Base.@kwdef struct Logo
     image::String=""
     link::String=""
-    class::String = "w-1/2 sm:w-1/3 lg:w-1/5 lg:p-8 p-6 flex justify-center"
+    class::String = "w-1/2 sm:w-1/3 lg:w-1/5 p-4 flex justify-center items-center"
 end
 
-SmallLogo(; kw...) = Logo(; class="rounded-md p-2 m-2 shadow bg-white w-8", kw...)
+SmallLogo(; kw...) = Logo(; class="rounded-full border p-2 m-2 shadow-sm bg-white w-10 flex justify-center", kw...)
 
 function render_media(asset::Asset; class="", style="")
     if asset.media_type == :mp4
@@ -68,7 +75,7 @@ function render_media(asset::Asset; class="", style="")
 end
 
 function Bonito.jsrender(s::Session, logo::Logo)
-    img = DOM.img(src=img_asset(logo.image), class="w-full")
+    img = DOM.img(src=img_asset(logo.image), class="w-full logo-img")
     return Bonito.jsrender(s, DOM.div(
         link(img, logo.link; class="w-full"),
         class=logo.class)
@@ -84,19 +91,19 @@ Base.@kwdef struct DetailedCard
 end
 
 function Bonito.jsrender(s::Session, card::DetailedCard)
-    img = render_media(img_asset(card.image); class="image w-full")
+    img = render_media(img_asset(card.image); class="image w-full rounded-xl")
     details = if card.details isa Markdown.MD
         Bonito.md_html(card.details.content[1])
     else
         card.details
     end
     content = DOM.div(
-        class="flex flex-col mt-1 p-2 md:p-4 gap-1",
-        DOM.div(camelcase_break_suggest(card.title), class="text-xs lg:text-sm font-semibold text-center"),
-        DOM.div(img, DOM.div(details, class="overlay text-xs lg:text-base"), class="container"),
+        class="flex flex-col gap-1",
+        DOM.div(img, DOM.div(details, class="overlay text-sm"), class="container"),
+        DOM.div(camelcase_break_suggest(card.title), class="text-sm font-semibold text-center py-2"),
     )
     card_div = DOM.div(
-        class="rounded-md shadow bg-white flex justify-center $(card.imclass)",
+        class="card flex justify-center p-3 $(card.imclass)",
         link(content, card.link; class="")
     )
 
@@ -105,10 +112,10 @@ end
 
 function QuoteBlock(author, authorlink, quote_text, quote_link)
     return DOM.div(
-        class="text-justify text-gray-600 w-full bg-gray-200 px-5 py-4 rounded-md hover:bg-gray-300",
+        class="text-left w-full bg-gray-50 border px-5 py-4 rounded-xl quote-card",
         DOM.span(
-            DOM.a(DOM.span("„" * strip(quote_text) * "“", class="text-left italic"); href=quote_link, target="_blank"),
-            link("(" * author * ")", authorlink),
+            DOM.a(DOM.span("„" * strip(quote_text) * "“", class="text-left italic text-gray-600"); href=quote_link, target="_blank"),
+            link("(" * author * ")", authorlink; class="text-gray-500 hover:underline"),
             class="text-sm lg:text-base",
         ),
     )
@@ -117,22 +124,40 @@ end
 function Navigation(highlighted="")
     function item(name, href; target="")
         highlight = highlighted == name ? " navbar-highlight" : ""
-        class = "text-white cursor-pointer py-1 px-2 hover:opacity-50 $highlight"
-        return DOM.a(DOM.div(name, class=class); href=Bonito.Link(href), target=target)
+        class = "cursor-pointer py-1 px-3$highlight"
+        return DOM.a(name; href=Bonito.Link(href), target=target, class=class)
     end
-    github = img_asset("logos/GitHub-Mark-Light-64px.png")
-    img_style = "height: 1.2rem; display: inline-block; vertical-align: text-bottom;"
+    icon = img_asset("icon_transparent.png")
+    brand = DOM.a(
+        DOM.div(
+            DOM.img(src=icon; style="height: 1.75rem; width: auto; display: inline-block;"),
+            DOM.span("Makie"; class="font-bold text-lg text-black tracking-tight");
+            class="flex items-center gap-2"
+        );
+        href=Bonito.Link("/")
+    )
+    entries = [
+        ("Home", "/", ""),
+        ("Maintainers", "/team", ""),
+        ("Support", "/support", ""),
+        ("Contact", "/contact", ""),
+        ("Blog", "/blog", ""),
+        ("Docs", "http://docs.makie.org", "_blank"),
+        ("GitHub", "https://github.com/MakieOrg/Makie.jl", "_blank"),
+    ]
+    navitems = [item(n, h; target=t) for (n, h, t) in entries]
     return DOM.div(
-        class="flex navbar justify-center",
+        class="navbar flex justify-center",
         DOM.div(
-            class="flex max-w-5xl w-full md:px-4 flex-wrap",
-            item("Home", "/"),
-            item("Team", "/team"),
-            item("Support", "/support"),
-            item("Contact", "/contact"),
-            item("Blog", "/blog"),
-            item("Docs", "http://docs.makie.org"; target="_blank"),
-            item(DOM.img(src=github, style=img_style), "https://github.com/MakieOrg/Makie.jl"; target="_blank")
+            class="flex max-w-6xl w-full px-4 py-2 items-center",
+            brand,
+            DOM.div(class="grow"),
+            DOM.div(navitems...; class="nav-desktop items-center gap-1"),
+            DOM.details(
+                DOM.summary("☰"),
+                DOM.div(navitems...; class="nav-menu");
+                class="nav-mobile"
+            )
         )
     )
 end
@@ -144,22 +169,36 @@ function tracking()
     )
 end
 
+function footer()
+    year = Dates.year(Dates.today())
+    flink(name, href; kw...) = DOM.a(name; href=href, class="text-gray-500 hover:underline", kw...)
+    return DOM.div(
+        class="w-full flex justify-center mt-14",
+        style="border-top: 1px solid var(--border)",
+        DOM.div(
+            class="max-w-6xl w-full px-4 py-8 flex flex-wrap gap-4 items-center text-sm",
+            DOM.span("© $year MakieOrg"; class="text-gray-500"),
+            DOM.div(class="grow"),
+            flink("GitHub", "https://github.com/MakieOrg/Makie.jl"; target="_blank"),
+            flink("Docs", "https://docs.makie.org"; target="_blank"),
+            flink("Blog", Bonito.Link("/blog")),
+        )
+    )
+end
+
 function page(body, highlighted)
-    header = DOM.img(src=img_asset("bannermesh_gradient.png"); style="width: 100%")
     return DOM.html(
         DOM.head(
             DOM.meta(name="viewport", content="width=device-width, initial-scale=1.0"),
             DOM.meta(charset="utf-8"),
+            DOM.link(href=img_asset("icon_transparent.png"), rel="icon", type="image/png"),
             website_styles(),
         ),
         DOM.body(
-            DOM.div(
-                DOM.link(href=img_asset("icon_transparent.png"), rel="icon", type="image/png"),
-                header,
-                Navigation(highlighted),
-                body,
-                tracking()
-            )
+            Navigation(highlighted),
+            body,
+            footer(),
+            tracking()
         )
     )
 end