Add Ribbon

csswizardry · Jun 26, 2023 · e7d97f5 · e7d97f5
1 parent 424f5e8
commit e7d97f5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 1 deletion.
diff --git a/_includes/css/csswizardry.min.css b/_includes/css/csswizardry.min.css
diff --git a/_includes/header--masthead.html b/_includes/header--masthead.html
@@ -12,6 +12,8 @@
 <link rel=preload href=/img/css/masthead-medium.e55920c9.jpg as=image media="(min-width: 45em) and (max-width: 63.9375em)" fetchpriority=high>
 <link rel=preload href=/img/css/masthead-large.3cbc4956.jpg as=image media="(min-width: 64em)" fetchpriority=high>
 
+{% include ribbon.html %}
+
 <header class="page-head  page-head--masthead">
 
     <div class=wrapper>

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,3 +1,5 @@
+{% include ribbon.html %}
+
 <header class=page-head>
 
     <div class=wrapper>

diff --git a/_includes/ribbon.html b/_includes/ribbon.html
@@ -0,0 +1,3 @@
+<section class="c-highlight  c-highlight--small  c-highlight--ribbon">
+  <a href="/sentinel/?ref=ribbon">Sentinel: Your Web-Performance Watchman</a>
+</section>
diff --git a/css/_components.highlights.scss b/css/_components.highlights.scss
@@ -23,3 +23,11 @@
   }
 
 }
+
+.c-highlight--small {
+  padding: $spacing-unit--small;
+}
+
+.c-highlight--ribbon {
+  text-align: center;
+}