Minor style and content improvements

web-platform-dx · Jul 12, 2024 · 7e4e3fe · 7e4e3fe
1 parent 1416edd
commit 7e4e3fe
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 16 deletions.
diff --git a/site/_includes/layout.njk b/site/_includes/layout.njk
@@ -1,24 +1,27 @@
+---
+siteTitle: Web features explorer
+---
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>{{ title }}</title>
+    <title>{{ siteTitle }} - {{ title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/assets/styles.css">
   </head>
   <body>
 
-    <header><a href="/">web-features explorer</a></header>
+    <header><a href="/">{{ siteTitle }}</a></header>
 
     <nav>
       <ul>
-        <li><a href="/recent">Newly available</a></li>
-        <li><a href="/baseline">Widely available</a></li>
-        <li><a href="/nobaseline">Not yet available</a></li>
-        <li><a href="/missingone">Missing in just one engine</a></li>
-        <li><a href="/all">All features</a></li>
+        <li class="monthly"><a href="/monthly">Release notes</a></li>
+        <li class="recent"><a href="/recent">New</a></li>
+        <li class="baseline"><a href="/baseline">Baseline</a></li>
+        <li class="nobaseline"><a href="/nobaseline">Limited</a></li>
+        <li><a href="/all">All</a></li>
         <li><a href="/groups">Groups</a></li>
-        <li><a href="/monthly">Monthly updates</a></li>
+        <!-- <li><a href="/missingone">Missing in just one engine</a></li> -->
       </ul>
     </nav>
 

diff --git a/site/assets/styles.css b/site/assets/styles.css
@@ -33,11 +33,16 @@ body {
 }
 
 header {
-  font-size: 2rem;
+  font-size: 2.5rem;
   font-weight: bold;
   margin-block-end: var(--margin);
 }
 
+header a {
+  text-decoration: none;
+  color: var(--text);
+}
+
 h1 {
   margin: var(--margin) 0;
 }
@@ -230,6 +235,14 @@ nav li {
   border-block-end-width: 0;
 }
 
+nav li.monthly {
+  background-image: linear-gradient(to top right, var(--baseline-high-label-bg), var(--baseline-low-label-bg), var(--baseline-limited-label-bg));
+}
+
+nav li.recent {background: var(--baseline-low-label-bg);}
+nav li.baseline {background: var(--baseline-high-label-bg);}
+nav li.nobaseline {background: var(--baseline-limited-label-bg);}
+
 .mdn-docs {
   display: flex;
   gap: 0.5rem;

diff --git a/site/baseline.njk b/site/baseline.njk
@@ -1,11 +1,11 @@
 ---
-title: Widely available features
+title: Baseline features
 layout: layout.njk
 ---
 
 <h1>{{ title }}</h1>
 
-<p>These features have been supported across all core browsers for a while.</p>
+<p>These features have been supported across all browsers for at least 30 months, making them <strong>Baseline</strong> features. To learn more, see <a href="https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md">Baseline</a>.</p>
 
 <ul class="features">
   {% for feature in baselineFeatures %}

diff --git a/site/groups.njk b/site/groups.njk
@@ -29,6 +29,8 @@ layout: layout.njk
 
 <h1>{{ title }}</h1>
 
+<p><strong>Work in progress</strong>. This page displays groups of features in a tree structure. Groups have not yet been finalized, expect frequent changes.</p>
+
 <ul class="groups">
   {% for id, group in perGroup %}
     {% if group.parent == null %}

diff --git a/site/index.njk b/site/index.njk
@@ -1,8 +1,10 @@
 ---
-title: Web features explorer
+title: Home
 layout: layout.njk
 ---
 
 <h1>{{ title }}</h1>
 
-<p>This website displays various lists of web features, organized by whether they are available on the web platform or not.</p>
+<p>This website provides information about features of the web platform.</p>
+<p>The data displayed on this site comes from the <a href="https://github.com/web-platform-dx/web-features">web-features</a> repository; a new open-source project that's maintained by the <a href="https://www.w3.org/community/webdx/">W3C WebDX Community Group</a>, and which aims at providing a common list of features and their definitions to improve understanding of what web developers get and want from the web.</p>
+<p>In particular, the web-features open-source project maintains data which powers <a href="https://github.com/web-platform-dx/web-features/blob/main/docs/baseline.md">Baseline</a>.</p>
diff --git a/site/nobaseline.njk b/site/nobaseline.njk
@@ -1,10 +1,11 @@
 ---
-title: Features not yet available
+title: Features with limited availability
 layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
-<p>These web features are not yet supported across all core browsers.</p>
+<p>These features are not yet available across all browsers.</p>
+<p>Consider the browser support data below as well as your users' browser versions before using these features in production. Provide your essential content and functionality to as many users as possible by using <strong><a href="https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement">progressive enhancements</a></strong>.</p>
 
 <ul class="features">
   {% for feature in nonBaselineFeatures %}

diff --git a/site/recent.njk b/site/recent.njk
@@ -4,7 +4,8 @@ layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
-<p>These web features became supported in all core browsers recently.</p>
+<p>These features recently became available in all browsers.</p>
+<p>Consider the browser support data below as well as your users' browser versions before using these features in production. Provide your essential content and functionality to as many users as possible by using <strong><a href="https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement">progressive enhancements</a></strong>.</p>
 
 <ul class="features">
   {% for feature in recentBaselineFeatures %}