Adding an environment banner to the page

To prevent testing local changes in production
2018-02-11 09:12:48 -05:00
parent 84df219d7f
commit bbdacca1da
4 changed files with 23 additions and 2 deletions
@@ -18,7 +18,7 @@ const PageTemplate = ({ title, children }) => (
      <title>Regexper{ title && (' - ' + title) }</title>
    </head>
    <body>
-      <header id="main">
+      <header id="main" data-banner={ process.env.BANNER }>
        <h1>
          <a href="/">Regexper</a>
        </h1>
@@ -24,6 +24,7 @@ exports[`PageTemplate rendering 1`] = `
  </head>
  <body>
    <header
+      data-banner={undefined}
      id="main"
    >
      <h1>
@@ -102,6 +103,7 @@ exports[`PageTemplate rendering with title 1`] = `
  </head>
  <body>
    <header
+      data-banner={undefined}
      id="main"
    >
      <h1>
@@ -33,6 +33,22 @@ body {
  position: relative;
 }

+#main:after {
+  content: attr(data-banner);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  text-transform: uppercase;
+  text-align: center;
+  font-size: calc(var(--header-height) * 0.7);
+  font-weight: bold;
+  opacity: 0.2;
+}
+
 #main h1 {
  font-family: 'Bangers', 'cursive';
  font-size: 4rem;