Verified Commit 2bb82fd6 authored by Bryce Dorn's avatar Bryce Dorn 🐘

fix textareas & add favicon

parent 6dba645d
Pipeline #48978356 passed with stage
in 1 minute and 15 seconds
......@@ -178,6 +178,7 @@ footer a, p a {
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
.container {
......
......@@ -3,8 +3,32 @@
<head>
<title>GitLab Corners</title>
<meta name="description" content="A fun way to link to a project's repository on GitLab.">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=”canonical” href="https://gitlab-corners.bryce.io/" />
<link rel="icon" type="image/png" href="preview.png" />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="GitLab Corners">
<meta itemprop="description" content="A fun way to link to a project's repository on GitLab.">
<meta itemprop="image" content="preview.png">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="GitLab Corners">
<meta name="twitter:description" content="A fun way to link to a project's repository on GitLab.">
<meta name="twitter:creator" content="@combatfetus">
<meta name="twitter:image:src" content="preview.png">
<!-- Open Graph data -->
<meta property="og:title" content="GitLab Corners" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gitlab-corners.bryce.io/" />
<meta property="og:image" content="preview.png/">
<meta property="og:description" content="A fun way to link to a project's repository on GitLab." />
<meta property="og:site_name" content="GitLab Corners" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
</head>
<body>
......@@ -20,7 +44,7 @@
<div class="demo original">
<!-- <span class="name">Original.</span> -->
<div class="copy-area">
<textarea id="orig" onclick="this.focus();this.select()" readonly="readonly" class="code"><style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#548;border:40px solid #548;border-bottom:none;border-top:#548 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-1{fill:#fc6d26}.cls-2{fill:#e24329}.cls-3{fill:#fca326}.gitlab-corner:hover .cls-1{animation:cycle .6s}.gitlab-corner:hover .cls-2{animation:cycleMid .6s}.gitlab-corner:hover .cls-3{animation:cycleEnd .6s}@keyframes cycle{100%,15%,60%{fill:#fc6d26}30%,75%{fill:#e24329}45%,90%{fill:#fca326}}@keyframes cycleMid{100%,15%,60%{fill:#e24329}30%,75%{fill:#fca326}45%,90%{fill:#fc6d26}}@keyframes cycleEnd{100%,15%,60%{fill:#fca326}30%,75%{fill:#fc6d26}45%,90%{fill:#e24329}}@media (max-width:500px){.gitlab-corner:hover .cls-1,.gitlab-corner:hover .cls-2,.gitlab-corner:hover .cls-3{animation:none}.gitlab-corner .cls-1{animation:cycle .6s}.gitlab-corner .cls-2{animation:cycleMid .6s}.gitlab-corner .cls-3{animation:cycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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></div></textarea>
<textarea id="orig" onclick="this.focus();this.select()" readonly="readonly" class="code"></textarea>
<div class="copy">
<button data-clipboard-target="#orig">Copy to clipboard</button>
</div>
......@@ -32,7 +56,7 @@
<div class="demo black">
<!-- <span class="name">Original with dark background.</span> -->
<div class="copy-area">
<textarea id="blk" onclick="this.focus();this.select()" readonly="readonly" class="code"><style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#333;border:40px solid #333;border-bottom:none;border-top:#333 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-1{fill:#fc6d26}.cls-2{fill:#e24329}.cls-3{fill:#fca326}.gitlab-corner:hover .cls-1{animation:cycle .6s}.gitlab-corner:hover .cls-2{animation:cycleMid .6s}.gitlab-corner:hover .cls-3{animation:cycleEnd .6s}@keyframes cycle{100%,15%,60%{fill:#fc6d26}30%,75%{fill:#e24329}45%,90%{fill:#fca326}}@keyframes cycleMid{100%,15%,60%{fill:#e24329}30%,75%{fill:#fca326}45%,90%{fill:#fc6d26}}@keyframes cycleEnd{100%,15%,60%{fill:#fca326}30%,75%{fill:#fc6d26}45%,90%{fill:#e24329}}@media (max-width:500px){.gitlab-corner:hover .cls-1,.gitlab-corner:hover .cls-2,.gitlab-corner:hover .cls-3{animation:none}.gitlab-corner .cls-1{animation:cycle .6s}.gitlab-corner .cls-2{animation:cycleMid .6s}.gitlab-corner .cls-3{animation:cycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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></div></textarea>
<textarea id="blk" onclick="this.focus();this.select()" readonly="readonly" class="code"></textarea>
<div class="copy">
<button data-clipboard-target="#blk">Copy to clipboard</button>
</div>
......@@ -44,7 +68,7 @@
<div class="demo">
<!-- <span class="name">Greyscale.</span> -->
<div class="copy-area">
<textarea id="greypp" onclick="this.focus();this.select()" readonly="readonly" class="code"><style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#548;border:40px solid #548;border-bottom:none;border-top:#548 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div></textarea>
<textarea id="greypp" onclick="this.focus();this.select()" readonly="readonly" class="code"></textarea>
<div class="copy">
<button data-clipboard-target="#greypp">Copy to clipboard</button>
</div>
......@@ -56,7 +80,7 @@
<div class="demo grey-orange">
<!-- <span class="name">Greyscale with orange background.</span> -->
<div class="copy-area">
<textarea id="greyoj" onclick="this.focus();this.select()" readonly="readonly" class="code"><style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#fc6d26;border:40px solid #fc6d26;border-bottom:none;border-top:#fc6d26 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div></textarea>
<textarea id="greyoj" onclick="this.focus();this.select()" readonly="readonly" class="code"></textarea>
<div class="copy">
<button data-clipboard-target="#greyoj">Copy to clipboard</button>
</div>
......@@ -68,7 +92,7 @@
<div class="demo black">
<!-- <span class="name">Greyscale with dark background.</span> -->
<div class="copy-area">
<textarea id="greyblk" onclick="this.focus();this.select()" readonly="readonly" class="code"><style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#333;border:40px solid #333;border-bottom:none;border-top:#333 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div></textarea>
<textarea id="greyblk" onclick="this.focus();this.select()" readonly="readonly" class="code"></textarea>
<div class="copy">
<button data-clipboard-target="#greyblk">Copy to clipboard</button>
</div>
......
......@@ -2,4 +2,22 @@ import clipboard from 'clipboard';
import styles from './css/styles.css';
const orig = `<style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#548;border:40px solid #548;border-bottom:none;border-top:#548 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-1{fill:#fc6d26}.cls-2{fill:#e24329}.cls-3{fill:#fca326}.gitlab-corner:hover .cls-1{animation:cycle .6s}.gitlab-corner:hover .cls-2{animation:cycleMid .6s}.gitlab-corner:hover .cls-3{animation:cycleEnd .6s}@keyframes cycle{100%,15%,60%{fill:#fc6d26}30%,75%{fill:#e24329}45%,90%{fill:#fca326}}@keyframes cycleMid{100%,15%,60%{fill:#e24329}30%,75%{fill:#fca326}45%,90%{fill:#fc6d26}}@keyframes cycleEnd{100%,15%,60%{fill:#fca326}30%,75%{fill:#fc6d26}45%,90%{fill:#e24329}}@media (max-width:500px){.gitlab-corner:hover .cls-1,.gitlab-corner:hover .cls-2,.gitlab-corner:hover .cls-3{animation:none}.gitlab-corner .cls-1{animation:cycle .6s}.gitlab-corner .cls-2{animation:cycleMid .6s}.gitlab-corner .cls-3{animation:cycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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></div>`;
const blk = `<style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#333;border:40px solid #333;border-bottom:none;border-top:#333 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-1{fill:#fc6d26}.cls-2{fill:#e24329}.cls-3{fill:#fca326}.gitlab-corner:hover .cls-1{animation:cycle .6s}.gitlab-corner:hover .cls-2{animation:cycleMid .6s}.gitlab-corner:hover .cls-3{animation:cycleEnd .6s}@keyframes cycle{100%,15%,60%{fill:#fc6d26}30%,75%{fill:#e24329}45%,90%{fill:#fca326}}@keyframes cycleMid{100%,15%,60%{fill:#e24329}30%,75%{fill:#fca326}45%,90%{fill:#fc6d26}}@keyframes cycleEnd{100%,15%,60%{fill:#fca326}30%,75%{fill:#fc6d26}45%,90%{fill:#e24329}}@media (max-width:500px){.gitlab-corner:hover .cls-1,.gitlab-corner:hover .cls-2,.gitlab-corner:hover .cls-3{animation:none}.gitlab-corner .cls-1{animation:cycle .6s}.gitlab-corner .cls-2{animation:cycleMid .6s}.gitlab-corner .cls-3{animation:cycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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></div>`;
const greypp = `<style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#548;border:40px solid #548;border-bottom:none;border-top:#548 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div>`;
const greyoj = `<style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#fc6d26;border:40px solid #fc6d26;border-bottom:none;border-top:#fc6d26 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div>`;
const greyblk = `<style>.gitlab-corner-wrapper{overflow:hidden;width:100px;height:100px;position:absolute;top:0;right:0}.gitlab-corner{position:absolute;top:-11px;right:-46px;transform:rotate(45deg);background:#333;border:40px solid #333;border-bottom:none;border-top:#333 solid 14px}.gitlab-corner svg{width:60px;height:60px;margin-bottom:-4px}.cls-g-1{fill:#aaa}.cls-g-2{fill:#888}.cls-g-3{fill:#eee}.gitlab-corner:hover .cls-g-1{animation:greyCycle .6s}.gitlab-corner:hover .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner:hover .cls-g-3{animation:greyCycleEnd .6s}@keyframes greyCycle{100%,15%,60%{fill:#eee}30%,75%{fill:#888}45%,90%{fill:#aaa}}@keyframes greyCycleMid{100%,15%,60%{fill:#888}30%,75%{fill:#aaa}45%,90%{fill:#eee}}@keyframes greyCycleEnd{100%,15%,60%{fill:#aaa}30%,75%{fill:#eee}45%,90%{fill:#888}}@media (max-width:500px){.gitlab-corner:hover .cls-g-1,.gitlab-corner:hover .cls-g-2,.gitlab-corner:hover .cls-g-3{animation:none}.gitlab-corner .cls-g-1{animation:greyCycle .6s}.gitlab-corner .cls-g-2{animation:greyCycleMid .6s}.gitlab-corner .cls-g-3{animation:greyCycleEnd .6s}}</style><div class="gitlab-corner-wrapper"><a href="https://gitlab.com/brycedorn/gitlab-corners" class="gitlab-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-g-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-g-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"/></g><g id="g56"><path id="path58" class="cls-g-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"/></g><g id="g64"><path id="path66" class="cls-g-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-g-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-g-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"/></g><g id="g80"><path id="path82" class="cls-g-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-g-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></div>`;
const demos = {
orig,
blk,
greypp,
greyoj,
greyblk
};
Object.keys(demos).forEach(id => {
document.getElementById(id).innerHTML = demos[id];
});
new clipboard('.copy button');
\ No newline at end of file
preview.png

9.01 KB

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