Git Product home page Git Product logo

github-corners's Introduction

GitHub Corners

Phew, GitHub is over ten years old now... and is unquestionably synonymous with open source. After 10 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 and interactivity!

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

Screenshot

You can see the page here... but I really recommend visiting the page to see the small animations that really make them come to life.

Here's the page

License/Acknowledgements

Naturally, these aren't built by GitHub, or endorsed by them.

Copyright (c) 2016 Tim Holman - http://tholman.com

The MIT License

github-corners's People

Contributors

ahuglajbclajep avatar cassidoo avatar desandro avatar elrumordelaluz avatar felicianotech avatar hugovk avatar ian-patel avatar ionicabizau avatar kaneshin avatar kiliankoe avatar nick-gabe avatar stuyam avatar tholman avatar woneob avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

github-corners's Issues

Add examples

It would be cool to link to or list the sites that use this, either in a document or at the bottom of the README. Get some community action going and show people that others use it too.

If so, you can add my site.

Nice job, btw.

Customizer/Make your own corner

This is a rough sketch, but functional:

You could implement some dynamic stuff so that the user could select the options to generate the code.

You could still have all the color combos present as like clickable buttons for presets that would auto-set the code to match them.

Not on top of everything

Hi,

I think that the "ribbon should be on top of everything, but it's looks like its not.

Here is my code :

<div class="github-corner"><a href="https://github.com" title="Fork me on GitHub"><svg viewbox="0 0 100 100" fill="currentColor"><title>Fork me on GitHub</title><path d="M0 0v100h100V0H0zm60 70.2h.2c1 2.7.3 4.7 0 5.2 1.4 1.4 2 3 2 5.2 0 7.4-4.4 9-8.7 9.5.7.7 1.3 2 1.3 3.7V99c0 .5 1.4 1 1.4 1H44s1.2-.5 1.2-1v-3.8c-3.5 1.4-5.2-.8-5.2-.8-1.5-2-3-2-3-2-2-.5-.2-1-.2-1 2-.7 3.5.8 3.5.8 2 1.7 4 1 5 .3.2-1.2.7-2 1.2-2.4-4.3-.4-8.8-2-8.8-9.4 0-2 .7-4 2-5.2-.2-.5-1-2.5.2-5 0 0 1.5-.6 5.2 1.8 1.5-.4 3.2-.6 4.8-.6 1.6 0 3.3.2 4.8.7 2.8-2 4.4-2 5-2z"></path></svg></a></div><style> .github-corner{position:absolute;right:0;top:0;width:120px;height:120px;overflow:hidden;}.github-corner a{position:absolute;right:0;top:0;left:0;bottom:0;transform:translate(50%, -50%) rotate(45deg);color:#fd6c6c;}</style>

And the website is here : http://ppo.felixinx.me/

Thanks

svg element needs focusable="false" to fix keyboard navigation for IE users

Internet Explorer makes SVGs inside focusable content also focusable themselves – meaning IE users will have to hit tab twice to get past the corner, and it’s unclear where the focus is during this time. The solution is to simply add focusable="false" to the svg element:

<svg
      width="80"
      height="80"
      viewBox="0 0 250 250"
      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
      aria-hidden="true"
      focusable="false"
    >

Here is a screen recording showing the issue for reference – you can see I have to press Tab three times to move from one textarea to the next, instead of the expected two.

ie11-focusable-false

Possible accessibility improvements

Right now, screen-readers would present the corner as something like this:

The accessibility API tree in Internet Explorer, showing each graphical element inside of an SVG announced as its own image.

Source

Drawing from that source, this would probably work best:

<svg role="presentation">
  <a xlink:href="YOUR-URL-HERE" aria-labelledby="gh-corner-title">
    <title id="gh-corner-title">Fork me on GitHub</title>

    <path role="presentation" d="..."/>
    <path class="octo-arm" role="presentation" d="..."/>
    <path class="octo-body" role="presentation" d="..."/>
  </a>
</svg>

This also has a tooltip for mouse users and people long-pressing on mobile.

I'm not sure about it, if only because moving the link into the SVG itself might be too drastic a change for your purposes. But I think making it more "self-contained" would be fine. (Which could also mean an inline <style scoped> for the hover animation, but that's another issue entirely.)

Error message

Hi,

Thanks for this, really excited to incorporate it! I'm just starting with R and this is a nice addition to my markdown.

However, I keep getting an error. I have a header.html saved in the folder of my .rmd file, which I try to link to my rmd file.
My code in the header file is below:

---
title: "Header"
author: "Gabriella"
date: "03/08/2020"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
# Add a github link in the corner of your document {#github-link}

  <a href="https://github.com/GabriellaS-K" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@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{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

Error:
Error: unexpected '<' in " <"

My code in the rmd file:

(/Users/filepath/Header.Rmd)

Error: Error: unexpected '/' in "(/"

Thanks for any help!!

modifications

currently it's a little tricky to modify the svg due to it being somewhat long and full of inline style, wonder what we could do to make it easier to customize,

if the style on the svg was pulled out into the style tags and then broke it into 2 lines it would make it much easier to edit

<a href="https://your.link" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<style>.github-corner svg{fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@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{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

does that sound like something that would make sense ?

meeting the license condition

I want to use one of your github corners in a web server whose code will be publicly available...do you have any ideas about how can I meet the condition required by the MIT license of this repo?

BTW, great job!

SVG animation isn't working in Safari

I'll be honest, I don't know a lot about SVG compatibility, so this might be a known thing, but the animation is not working in Safari for me, but works fine in Chrome. I'm on Safari 8.0.6.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.