From d1df5aa7b57018bf1ffd9c36f7805e9a8290172c Mon Sep 17 00:00:00 2001 From: Michal Nazarewicz Date: Sat, 2 Dec 2017 20:27:55 +0100 Subject: [PATCH 1/3] Optimise triangle path --- svg/github-corner-left.svg | 2 +- svg/github-corner-right.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/svg/github-corner-left.svg b/svg/github-corner-left.svg index 791e18c..3ffb62e 100644 --- a/svg/github-corner-left.svg +++ b/svg/github-corner-left.svg @@ -1,5 +1,5 @@ - + diff --git a/svg/github-corner-right.svg b/svg/github-corner-right.svg index 8aca2bb..a5d56d3 100644 --- a/svg/github-corner-right.svg +++ b/svg/github-corner-right.svg @@ -1,5 +1,5 @@ - + From ba459c3c7f2ef0bc3d62887179d4c797acfaeb89 Mon Sep 17 00:00:00 2001 From: Michal Nazarewicz Date: Fri, 26 Jan 2018 10:59:06 +0100 Subject: [PATCH 2/3] =?UTF-8?q?Fix=20left=E2=80=99s=20transform-origin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Right’s corner transform-origin is (130, 106) which corresponds to (120, 106) when flipped horizontally. For some reason, however, left’s transform-origin is (130, 144). Fix it. --- svg/github-corner-left.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/svg/github-corner-left.svg b/svg/github-corner-left.svg index 3ffb62e..6a4581d 100644 --- a/svg/github-corner-left.svg +++ b/svg/github-corner-left.svg @@ -1,5 +1,5 @@ - + From 537aaa21119a144ee5dd9a3a3cf9b5592c36bcfe Mon Sep 17 00:00:00 2001 From: Michal Nazarewicz Date: Fri, 26 Jan 2018 09:43:48 +0100 Subject: [PATCH 3/3] Generate index.html from SVG files. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As the SVG files get updated, index.html file gets left behind. Add a script for generating the index.html file from the SVG files so that it’s easy to keep both in sync. With that script, sync index.html to use code from SVG files. --- index.html | 485 ++++++++++++++++++++++-------------- make-index.py | 73 ++++++ {css => page}/styles.css | 40 --- page/template.html | 52 ++++ svg/github-corner-left.css | 14 ++ svg/github-corner-left.svg | 2 +- svg/github-corner-right.css | 14 ++ svg/github-corner-right.svg | 2 +- svg/index.html | 0 9 files changed, 450 insertions(+), 232 deletions(-) create mode 100644 make-index.py rename {css => page}/styles.css (75%) create mode 100644 page/template.html create mode 100644 svg/github-corner-left.css create mode 100644 svg/github-corner-right.css create mode 100644 svg/index.html diff --git a/index.html b/index.html index 51dd305..c4255b0 100644 --- a/index.html +++ b/index.html @@ -1,191 +1,296 @@ - - - - - - GitHub Corners - - - - - - - - -
-
-

- GitHub Corners -

-

- Phew, GitHub is over seven years old now... and is unquestionably synonomous with open source. After 7 years, those GitHub ribbons are more than overdue for a cleaner, more modern alternative. This is my take. -

-

- 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. -

-

- You can build your own with the SVG's, copy some of the pre-defined code below, or just change the fill and color values on the main <svg> element. -

-
-
- - -
-
- -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
- - -
-
- - - - - -
-
- -
-
-
- - - - - - + +GitHub Corners + + + +
+
+

GitHub Corners

+

Phew, GitHub is over seven years old now... and is unquestionably + synonomous with open source. After 7 years, those GitHub ribbons + are more than overdue for a cleaner, more modern alternative. This is + my take. + +

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. + +

You can build your own with the SVG's, + copy some of the pre-defined code below, or just change the + fill values on the main + <svg> element and first <path>. +

+
+ + +
+
+ + +
+
+ +
- - + + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+ +
+
+ + +
+ diff --git a/make-index.py b/make-index.py new file mode 100644 index 0000000..b8a8325 --- /dev/null +++ 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('') + example, _, footer = data.partition('') + + 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 b/page/styles.css similarity index 75% rename from css/styles.css rename to page/styles.css index 6058e8f..675876f 100644 --- a/css/styles.css +++ b/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 new file mode 100644 index 0000000..4aa609c --- /dev/null +++ b/page/template.html @@ -0,0 +1,52 @@ + +GitHub Corners + + + +
+
+

GitHub Corners

+

Phew, GitHub is over seven years old now... and is unquestionably + synonomous with open source. After 7 years, those GitHub ribbons + are more than overdue for a cleaner, more modern alternative. This is + my take. + +

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. + +

You can build your own with the SVG's, + copy some of the pre-defined code below, or just change the + fill values on the main + <svg> element and first <path>. +

+
+ +
+
+ %(svg)s +
+
+ +
+
+ +
+ +
%(svg)s
+ + +
diff --git a/svg/github-corner-left.css b/svg/github-corner-left.css new file mode 100644 index 0000000..34591c0 --- /dev/null +++ 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 index 6a4581d..e7e2581 100644 --- a/svg/github-corner-left.svg +++ b/svg/github-corner-left.svg @@ -1,4 +1,4 @@ - + diff --git a/svg/github-corner-right.css b/svg/github-corner-right.css new file mode 100644 index 0000000..a2f15e4 --- /dev/null +++ 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 index a5d56d3..df30bda 100644 --- a/svg/github-corner-right.svg +++ b/svg/github-corner-right.svg @@ -1,4 +1,4 @@ - + diff --git a/svg/index.html b/svg/index.html new file mode 100644 index 0000000..e69de29