From 89bae37af139180bc3889ab1a9089b61b1e5c1db Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Thu, 21 Nov 2024 22:34:15 +0100
Subject: [PATCH] Add edit link

---
 site/_includes/feature_full.njk |  2 +
 site/assets/styles.css          | 93 +++++++++++++++++++--------------
 2 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/site/_includes/feature_full.njk b/site/_includes/feature_full.njk
index 15f4623c08..af93172eda 100644
--- a/site/_includes/feature_full.njk
+++ b/site/_includes/feature_full.njk
@@ -23,4 +23,6 @@
   {%- endif %}
 
   {% include "specs.njk" %}
+
+  <a class="edit-link" href="https://github.com/web-platform-dx/web-features/edit/main/features/{{ feature.id }}.yml">Edit this feature</a>
 </div>
\ No newline at end of file
diff --git a/site/assets/styles.css b/site/assets/styles.css
index 463bf60216..808eeaf7d9 100644
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -39,13 +39,13 @@ header {
 }
 
 header a {
-	text-decoration: none;
-	color: var(--text);
-	padding-inline-start: 3rem;
-	background-image: url(logo.png);
-	background-repeat: no-repeat;
-	background-size: 2rem;
-	background-position: 0 center;
+  text-decoration: none;
+  color: var(--text);
+  padding-inline-start: 3rem;
+  background-image: url(logo.png);
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  background-position: 0 center;
 }
 
 h1 {
@@ -187,18 +187,18 @@ h3 .subtext {
 }
 
 .compat .browser {
-	--bg: var(--browser-unsupported-bg);
-	padding: 1.25rem 0.55rem 0.25rem 0.5rem;
-	border-radius: 0.25rem;
-	border: 2px solid color-mix(in srgb, var(--bg) 90%, black);
-	background-color: var(--bg);
-	background-position: center .25rem;
-	background-repeat: no-repeat;
-	background-size: 1rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	min-width: 4rem;
+  --bg: var(--browser-unsupported-bg);
+  padding: 1.25rem 0.55rem 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 2px solid color-mix(in srgb, var(--bg) 90%, black);
+  background-color: var(--bg);
+  background-position: center 0.25rem;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 4rem;
 }
 
 .compat .browser.supported {
@@ -265,12 +265,23 @@ nav li {
 }
 
 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));
+  background-image: linear-gradient(
+    to top right,
+    var(--baseline-high-label-bg),
+    var(--baseline-low-label-bg),
+    var(--baseline-limited-label-bg)
+  );
 }
 
-nav li.baseline-low {background: var(--baseline-low-label-bg);}
-nav li.baseline-high {background: var(--baseline-high-label-bg);}
-nav li.nobaseline {background: var(--baseline-limited-label-bg);}
+nav li.baseline-low {
+  background: var(--baseline-low-label-bg);
+}
+nav li.baseline-high {
+  background: var(--baseline-high-label-bg);
+}
+nav li.nobaseline {
+  background: var(--baseline-limited-label-bg);
+}
 
 main {
   padding: 0 var(--margin);
@@ -315,7 +326,7 @@ main {
 
 .month-update h2 {
   display: flex;
-  gap: .5rem;
+  gap: 0.5rem;
   justify-content: space-between;
 }
 
@@ -324,7 +335,7 @@ main {
 }
 
 .groups li {
-  padding: .25rem;
+  padding: 0.25rem;
 }
 
 .groups li li {
@@ -337,7 +348,7 @@ main {
 
 .groups details[open] {
   background-image: linear-gradient(to right, black 1px, transparent 0);
-  background-position: .3rem 1rem;
+  background-position: 0.3rem 1rem;
   background-size: 100% calc(100% - 1rem);
   background-repeat: no-repeat;
 }
@@ -350,24 +361,24 @@ footer {
   padding: 0 var(--margin);
 }
 
-#timeline { 
+#timeline {
   overflow-x: auto;
   overflow-y: auto;
   height: calc(100vh - 16rem);
   display: grid;
   grid-auto-columns: 7rem;
-  font-size: .6rem;
+  font-size: 0.6rem;
   gap: 1px;
   background: var(--text);
 }
 
 #timeline .timeline-year {
-	grid-row: 1;
-	display: grid;
-	grid-auto-rows: 1rem;
-	width: 6.5rem;
-	background: var(--background);
-	padding: 0 .25rem;
+  grid-row: 1;
+  display: grid;
+  grid-auto-rows: 1rem;
+  width: 6.5rem;
+  background: var(--background);
+  padding: 0 0.25rem;
 }
 #timeline .timeline-year h2 {
   font-size: inherit;
@@ -385,12 +396,18 @@ footer {
 }
 
 .feature-browser .features li {
-	list-style-type: circle;
-	padding: .5rem 0;
+  list-style-type: circle;
+  padding: 0.5rem 0;
 }
 
 .feature-browser .name {
-  padding: .25rem;
+  padding: 0.25rem;
   background: #eee;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
+}
+
+.edit-link {
+  margin-block-start: var(--margin);
+  display: block;
+  font-size: 0.8rem;
 }