Verified Commit c7dea161 authored by Bryce Dorn's avatar Bryce Dorn 🐘

colored logo 🎨

parent 878a6eb5
/**
* GitHub Corners, page css
* Author: Tim Holman
* GitLab Corners, page css
* Author: Bryce Dorn
*/
* {
......@@ -15,34 +15,71 @@ html, body {
.github-corner {
position: absolute;
top: 0;
right: 0;
top: -20px;
right: -80px;
transform: rotate(45deg);
background: black;
box-shadow: 0 -3.4rem 0 3.4rem black;
background: #548;
border: #548 solid 72px;
border-bottom: none;
border-top: #548 solid 20px;
}
.github-corner svg {
animation: none;
width: 70px;
height: 70px;
width: 80px;
height: 80px;
}
.github-corner:hover svg {
animation: bounce 300ms ease-in;
.cls-1{ fill:#fc6d26; }
.cls-2{ fill:#e24329; }
.cls-3{ fill:#fca326; }
.github-corner:hover .cls-1 {
animation: cycle 1000ms;
}
.github-corner:hover .cls-2 {
animation: cycleMid 1000ms;
}
.github-corner:hover .cls-3 {
animation: cycleEnd 1000ms;
}
@keyframes cycle {
10% { fill:#fc6d26; }
20% { fill:#e24329; }
30% { fill:#fca326; }
40% { fill:#fc6d26; }
50% { fill:#e24329; }
60% { fill:#fca326; }
70% { fill:#fc6d26; }
80% { fill:#e24329; }
90% { fill:#fca326; }
100% { fill:#fc6d26; }
}
@keyframes bounce {
40% {
transform: scale(1.15);
}
50% {
transform: scale(1.25);
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
@keyframes cycleMid {
10% { fill:#e24329; }
20% { fill:#fca326; }
30% { fill:#fc6d26; }
40% { fill:#e24329; }
50% { fill:#fca326; }
60% { fill:#fc6d26; }
70% { fill:#e24329; }
80% { fill:#fca326; }
90% { fill:#fc6d26; }
100% { fill:#e24329; }
}
@keyframes cycleEnd {
10% { fill:#fca326; }
20% { fill:#fc6d26; }
30% { fill:#e24329; }
40% { fill:#fca326; }
50% { fill:#fc6d26; }
60% { fill:#e24329; }
70% { fill:#fca326; }
80% { fill:#fc6d26; }
90% { fill:#e24329; }
100% { fill:#fca326; }
}
\ No newline at end of file
......@@ -10,8 +10,8 @@
<link href="./css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="https://github.com/tholman/github-corners" class="github-corner" aria-label="View source on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 586 559"><path d="m461.48 298.35l-17.78-54.63a7.72 7.72 0 0 0 -.43 -1.47l-35.67-109.8a14.18 14.18 0 0 0 -13.54 -9.67 13.94 13.94 0 0 0 -13.38 9.75l-34 104.63h-107.31l-34.05-104.63a13.94 13.94 0 0 0 -13.32 -9.75h-.08a14.22 14.22 0 0 0 -13.5 9.76l-35.7 109.93c0 .1-.08.18-.11.28l-18.1 55.61a20.29 20.29 0 0 0 7.37 22.71l156.38 113.63a8 8 0 0 0 9.45 -.05l156.41-113.58a20.28 20.28 0 0 0 7.36 -22.72m-233.75-45.13l43.59 134.16-104.64-134.16m148.05 134.19l41.8-128.62 1.8-5.57h61.1l-94.67 121.28m69.44-231.67l30.63 94.33h-61.31m-22.03 16l-30.37 93.46-18.12 55.66-48.42-149.12m-52.73-110.33l30.69 94.33h-61.27m-19.98 70.97a4.31 4.31 0 0 1 -1.56 -4.83l13.44-41.3 98.57 126.37m192.98-80.24l-110.46 80.21.37-.48 98.2-125.86 13.44 41.28a4.31 4.31 0 0 1 -1.55 4.84"/></svg>
<a href="https://github.com/tholman/github-corners" class="github-corner" aria-label="View source on GitLab">
<svg id="logo_art" data-name="logo art" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586 559"><g id="g44"><path id="path46" class="cls-1" d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39"/></g><g id="g48"><path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-3" d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z"/></g><g id="g72"><path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z"/></g><g id="g76"><path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-3" d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z"/></g><g id="g84"><path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z"/></g></svg>
</a>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment