From 5443c96a079fbac1dacfbe0244e822587830d7ac Mon Sep 17 00:00:00 2001 From: Kerollos Magdy Date: Fri, 5 Jun 2020 23:06:13 +0200 Subject: [PATCH 1/2] Use html-based edge badge instead of image I used a simple HTML-and-CSS-based approach to achieve the look of the edge badge. * Delete edge_badge.png * Update layout.html.erb * Update main.css --- guides/assets/images/edge_badge.png | Bin 5695 -> 0 bytes guides/assets/stylesheets/main.css | 12 +++++++++--- guides/source/layout.html.erb | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) delete mode 100644 guides/assets/images/edge_badge.png diff --git a/guides/assets/images/edge_badge.png b/guides/assets/images/edge_badge.png deleted file mode 100644 index a3c1843d1d1cfdf3b6cdb6eb40ed133914b64e75..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5695 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 diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index bfaa78888f..4f77c61b71 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -733,10 +733,16 @@ div.important p, div.caution p, div.warning p, div.note p, div.info p { #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; + background: #222; + border: red 2px solid; } /* Foundation v2.1.4 http://foundation.zurb.com */ diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb index 995c28a819..d79c6b1e39 100644 --- a/guides/source/layout.html.erb +++ b/guides/source/layout.html.erb @@ -24,7 +24,7 @@ <% if @edge %>
- edge-badge +
edge
<% end %>
From 3ca55c591b3cebdedb45fc62a363d2bbc135d68d Mon Sep 17 00:00:00 2001 From: Kerollos Magdy Date: Fri, 12 Jun 2020 14:57:53 +0200 Subject: [PATCH 2/2] make edge-badge look more like the original --- guides/assets/stylesheets/main.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index 4f77c61b71..fab6eecd08 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -741,8 +741,10 @@ div.important p, div.caution p, div.warning p, div.note p, div.info p { transform: rotate(45deg) translate(27.5%, -40%); min-width: 200px; font-weight: bold; - background: #222; - border: red 2px solid; + 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 */