Add a "fork-me" callout using github-corners

XhmikosR · XhmikosR · commit 0f6a1722ceb6 · 2025-07-31T07:20:58.000+03:00
https://github.com/tholman/github-corners The Sass is added in _gh-corners.scss and after adding any vendor prefixes and changing `560ms` to `.56s`. The SVG is added in _includes/gh-corner.svg after added xmlns and optimizing it with SVGO.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -5,6 +5,7 @@
   "reportInvalidScopeDisables": true,
   "reportNeedlessDisables": true,
   "rules": {
+    "at-rule-no-vendor-prefix": null,
     "no-duplicate-selectors": true,
     "property-no-vendor-prefix": null,
     "value-no-vendor-prefix": null
diff --git a/docs/_includes/gh-corner.svg b/docs/_includes/gh-corner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#151513" aria-hidden="true" color="#fff" style="position:absolute;top:0;border:0;right:0" viewBox="0 0 250 250"><path d="m0 0 115 115h15l12 27 108 108V0z"/><path fill="currentColor" d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9" class="octo-arm" transform-origin="130px 106px"/><path fill="currentColor" d="M115 115c-.1.1 3.7 1.5 4.8.4l13.9-13.8c3.2-2.4 6.2-3.2 8.5-3-8.4-10.6-14.7-24.2 1.6-40.6 4.7-4.6 10.2-6.8 15.9-7 .6-1.6 3.5-7.4 11.7-10.9 0 0 4.7 2.4 7.4 16.1 4.3 2.4 8.4 5.6 12.1 9.2 3.6 3.6 6.8 7.8 9.2 12.2 13.7 2.6 16.2 7.3 16.2 7.3-3.6 8.2-9.4 11.1-10.9 11.7-.3 5.8-2.4 11.2-7.1 15.9-16.4 16.4-30 10-40.6 1.6.2 2.8-1 6.8-5 10.8L141 136.5c-1.2 1.2.6 5.4.8 5.3z" class="octo-body"/></svg>
diff --git a/docs/_includes/page.scss b/docs/_includes/page.scss
@@ -1,3 +1,4 @@
 // Our bundle CSS files are listed here so that we inlcude the dist file in Jekyll
 @use "page";
+@use "gh-corners";
 @use "syntax";
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -18,6 +18,9 @@
   </head>
 
   <body>
+    <a href="https://github.com/mdo/github-buttons" class="github-corner" aria-label="View repository on GitHub">
+      {% include gh-corner.svg %}
+    </a>
     <div class="container">
       <div class="tweet-button">
         <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="mdo">Tweet</a>
diff --git a/docs/_sass/_gh-corners.scss b/docs/_sass/_gh-corners.scss
@@ -0,0 +1,46 @@
+// https://github.com/tholman/github-corners
+.github-corner:hover .octo-arm {
+  -webkit-animation: octocat-wave .56s ease-in-out;
+  animation: octocat-wave .56s ease-in-out;
+}
+
+@-webkit-keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    -webkit-animation: none;
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    -webkit-animation: octocat-wave .56s ease-in-out;
+    animation: octocat-wave .56s ease-in-out;
+  }
+}
