Merge pull request #39551 from kerolloz/master

Use html-based edge badge instead of image

Merge pull request #39551 from kerolloz/master
Use html-based edge badge instead of image
1c5d9a89 · Xavier Noria · GitHub · 4c594301 · 3ca55c59 · 4c594301
3 changed file
--- a/guides/assets/images/edge_badge.png
+++ b/guides/assets/images/edge_badge.png
--- a/guides/assets/stylesheets/main.css
+++ b/guides/assets/stylesheets/main.css
@@ -741,10 +741,18 @@ span.token.sh.important {

 #edge-badge {
  position: fixed;
-  right: 0px;
-  top: 0px;
+  right: 0;
+  top: 0;
  z-index: 100;
-  border: none;
+  color: white;
+  font-size: 30px;
+  transform: rotate(45deg) translate(27.5%, -40%);
+  min-width: 200px;
+  font-weight: bold;
+  font-style: italic;
+  box-shadow: 0px 2px 2px 1px #1209096e;
+  text-shadow: 2px 2px 4px #5400007d;
+  background: radial-gradient(circle, rgb(255, 10, 0) 0%, rgb(200, 0, 0) 90%);
 }

 /* Foundation v2.1.4 http://foundation.zurb.com */

--- a/guides/source/layout.html.erb
+++ b/guides/source/layout.html.erb
@@ -24,7 +24,7 @@
 <body class="guide">
  <% if @edge %>
  <div>
-    <img src="images/edge_badge.png" alt="edge-badge" id="edge-badge" />
+    <div id="edge-badge">edge</div>
  </div>
  <% end %>
  <div id="topNav">