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 791e18c..e7e2581 100644 --- a/svg/github-corner-left.svg +++ b/svg/github-corner-left.svg @@ -1,5 +1,5 @@ - - - + + + 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 8aca2bb..df30bda 100644 --- a/svg/github-corner-right.svg +++ b/svg/github-corner-right.svg @@ -1,5 +1,5 @@ - - + + diff --git a/svg/index.html b/svg/index.html new file mode 100644 index 0000000..e69de29