tholman · mina86 · Dec 2, 2017 · Jan 26, 2018 · Jan 26, 2018
diff --git a/index.html b/index.html
diff --git a/make-index.py b/make-index.py
@@ -0,0 +1,73 @@
+#!/usr/bin/python
+
+from __future__ import division
+from __future__ import absolute_import
+from __future__ import print_function
+
+import re
+
+COLOURS = (
+    ('#fff', '#000'),
+    ('#fff', '#64ceaa'),
+    ('#fff', '#fd6c6c'),
+    ('#fff', '#70B7FD'),
+    ('#000', '#fff'),
+)
+
+
+def load_template():
+    with open('page/template.html') as fd:
+        data = fd.read()
+    with open('page/styles.css') as fd:
+        css = fd.read()
+
+    header, _, data = data.partition('<!-- BEGIN EXAMPLE -->')
+    example, _, footer = data.partition('<!-- END EXAMPLE -->')
+
+    return header, example, footer, css
+
+
+def load_side(side):
+    path_fmt = 'svg/github-corner-{}.{}'
+
+    with open(path_fmt.format(side, 'svg')) as fd:
+        svg = fd.read()
+    svg = svg.replace('#fff', '{fg}').replace('#000', '{bg}')
+    svg = svg.replace(': ', ':').replace('; ', ';')
+    svg = re.sub(r'>\s*<', '><', svg)
+
+    with open(path_fmt.format(side, 'css')) as fd:
+        css = fd.read()
+    css = re.sub(r'\s*([{}():,;@])\s*', r'\1', css).replace(';}', '}')
+    return svg.format, css
+
+
+def print_header(header, css, **sides):
+    for side, side_css in sides.items():
+        side_css = side_css.replace('octocat-wave', 'octocat-wave-' + side)
+        side_css = side_css.replace('.github-corner',
+                                    '.{} .github-corner'.format(side))
+        css += side_css
+    print(header % dict(css=css))
+
+
+def main():
+    header, example, footer, css = load_template()
+    right, right_css = load_side('right')
+    left, left_css = load_side('left')
+
+    print_header(header, css, right=right_css, left=left_css)
+
+    for (side, img, css) in (('right', right, right_css),
+                             ('left', left, left_css)):
+        for (bg, fg) in COLOURS:
+            cls = side
+            if bg == '#000':
+                cls += ' dark'
+            print(example % dict(cls=cls, svg=img(fg=fg, bg=bg), css=css))
+
+    print(footer % dict(svg=right(fg='#000', bg='#fff')))
+
+
+if __name__ == '__main__':
+    main()
diff --git a/css/styles.css → page/styles.css b/css/styles.css → page/styles.css
@@ -72,46 +72,6 @@ p {
     font-size: 10px;
 }
 
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out;
-}
-
-@keyframes octocat-wave {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  20% {
-    transform: rotate(-25deg);
-  }
-
-  40% {
-    transform: rotate(10deg);
-  }
-
-  60% {
-   transform: rotate(-25deg);
-  }
-
-  80% {
-    transform: rotate(10deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-@media (max-width: 500px) {
-    .github-corner:hover .octo-arm {
-        animation: none;
-    }
-
-    .github-corner .octo-arm {
-        animation: octocat-wave 560ms ease-in-out;
-    }
-}
-
 /**
  * Footer
  */

diff --git a/page/template.html b/page/template.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>GitHub Corners</title>
+<meta name="description" content="An alternative to GitHub ribbons.">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>%(css)s</style>
+<div class="wrapper">
+    <header>
+        <h1>GitHub Corners</h1>
+        <p>Phew, GitHub is over seven years old now... and is unquestionably
+           synonomous with open source. After 7 years, those <a
+           href="https://github.com/blog/273-github-ribbons">GitHub ribbons</a>
+           are more than overdue for a cleaner, more modern alternative. This is
+           my take.
+
+        <p>By using SVG, these corners can be clean and sharp. Any color, and
+           size. As well as have a little character... on hover for desktop, and
+           on page load for mobile devices.
+
+        <p>You can build your own with the <a
+           href="https://github.com/tholman/github-corners/tree/master/svg">SVG's</a>,
+           copy some of the pre-defined code below, or just change the
+        <code>fill</code> values on the main
+        <code>&lt;svg&gt;</code> element and first <code>&lt;path&gt;</code>.
+    </header>
+    <section class="examples">
+<!-- BEGIN EXAMPLE -->
+        <div class="version">
+          <div class="demo version-section %(cls)s">
+             <a href="#" class="github-corner">%(svg)s</a>
+          </div>
+          <div class="code version-section">
+            <textarea><a href="https://your-url" class="github-corner" aria-label="View source on GitHub">%(svg)s</a><style>%(css)s</style></textarea>
+          </div>
+        </div>
+<!-- END EXAMPLE -->
+    </section>
+    <footer>
+        <a href="http://tholman.com">By Tim Holman</a> <span>&bull;</span> <a
+        href="http://twitter.com/twholman">@twholman</a> <span>&bull;</span> <a
+        href="https://twitter.com/share" class="twitter-share-button"
+        data-text="GitHub Corners - An svg replacement for those old github
+        ribbons -" data-via="twholman">Tweet</a>
+    </footer>
+    <div class="right"><a href="http://github.com/tholman/github-corners" class="github-corner" aria-label="View source on GitHub">%(svg)s</a></div>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+    <script>
+      var textarea = document.getElementsByTagName('textarea');
+      for(var i = 0, l = textarea.length; i < l; i++){
+        textarea[i].addEventListener("focus", function(){this.select()});
+      }
+    </script>
+</div>
diff --git a/svg/github-corner-left.css b/svg/github-corner-left.css
@@ -0,0 +1,14 @@
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%, 100% { transform: rotate(0deg); }
+  20%, 60% { transform: rotate(25deg); }
+  40%, 80% { transform: rotate(-10deg); }
+}
+
+@media (max-width: 500px) {
+    .github-corner:hover .octo-arm { animation: none; }
+    .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; }
+}
diff --git a/svg/github-corner-left.svg b/svg/github-corner-left.svg
diff --git a/svg/github-corner-right.css b/svg/github-corner-right.css
@@ -0,0 +1,14 @@
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%, 100% { transform: rotate(0deg); }
+  20%, 60% { transform: rotate(-25deg); }
+  40%, 80% { transform: rotate(10deg); }
+}
+
+@media (max-width: 500px) {
+    .github-corner:hover .octo-arm { animation: none; }
+    .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; }
+}
diff --git a/svg/github-corner-right.svg b/svg/github-corner-right.svg
diff --git a/svg/index.html b/svg/index.html