Skip to content

Instantly share code, notes, and snippets.

@32bitkid
Last active January 15, 2020 13:53
Show Gist options
  • Save 32bitkid/e890983e929e6335ec65 to your computer and use it in GitHub Desktop.
Save 32bitkid/e890983e929e6335ec65 to your computer and use it in GitHub Desktop.
Choose Your Own... Markdown Extension.
@import '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
*[id^='cyo'],
*[id^='cyo'] ~ * {
display: none;
}
*[id^='cyo']:last-of-type ~ * {
display: block;
}
*[id^='cyo']:target ~ * {
display: block;
}
*[id^='cyo']:target ~ *[id^='cyo'],
*[id^='cyo']:target ~ *[id^='cyo'] ~ * {
display: none;
}
*[id='cyo_debug']:target ~ * {
display: block !important;
}
*[id='cyo_debug']:target ~ hr[id] {
display: none;
}
a[href^='#cyo'] {
font-size: 0.9em;
border-style: solid;
border-width: 1px;
border-bottom-width: 3px;
display: inline-block;
margin-bottom: 3px;
text-align: center;
padding: 0.5em 1em 0.5em 0.35em;
border-radius: 0.4em;
text-decoration: none;
margin-top: 0;
vertical-align: bottom;
-webkit-transition: border-color 0.33s, background-color 0.33s, color 0.133s, border-bottom-width 0.133s, margin-top 0.133s;
transition: border-color 0.33s, background-color 0.33s, color 0.133s, border-bottom-width 0.133s, margin-top 0.133s;
color: #444444;
border-color: transparent;
}
a[href^='#cyo']:hover {
background-image: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.3));
margin-top: -2px;
border-bottom-width: 5px;
}
a[href^='#cyo']:active {
margin-top: 3px;
border-bottom-width: 0;
}
a[href^='#cyo']:hover,
a[href^='#cyo']:focus {
color: #c3c3c3;
border-top-color: #6a6a6a;
border-bottom-color: #111111;
background-color: #444444;
}
a[href^='#cyo'][href$=':ok'],
a[href^='#cyo'][href$='.ok'] {
color: #2a8fbd;
border-color: transparent;
}
a[href^='#cyo'][href$=':ok']:hover,
a[href^='#cyo'][href$='.ok']:hover,
a[href^='#cyo'][href$=':ok']:focus,
a[href^='#cyo'][href$='.ok']:focus {
color: #ebf6fb;
border-top-color: #59b2da;
border-bottom-color: #17506a;
background-color: #2a8fbd;
}
a[href^='#cyo'][href$=':yes'],
a[href^='#cyo'][href$='.yes'] {
color: #7faf1b;
border-color: transparent;
}
a[href^='#cyo'][href$=':yes']:hover,
a[href^='#cyo'][href$='.yes']:hover,
a[href^='#cyo'][href$=':yes']:focus,
a[href^='#cyo'][href$='.yes']:focus {
color: #ebf8d1;
border-top-color: #a9e036;
border-bottom-color: #3f570d;
background-color: #7faf1b;
}
a[href^='#cyo'][href$=':no'],
a[href^='#cyo'][href$='.no'] {
color: #f02311;
border-color: transparent;
}
a[href^='#cyo'][href$=':no']:hover,
a[href^='#cyo'][href$='.no']:hover,
a[href^='#cyo'][href$=':no']:focus,
a[href^='#cyo'][href$='.no']:focus {
color: #ffffff;
border-top-color: #f56659;
border-bottom-color: #921409;
background-color: #f02311;
}
a[href^='#cyo'][href$=':warn'],
a[href^='#cyo'][href$='.warn'] {
color: #fbb829;
border-color: transparent;
}
a[href^='#cyo'][href$=':warn']:hover,
a[href^='#cyo'][href$='.warn']:hover,
a[href^='#cyo'][href$=':warn']:focus,
a[href^='#cyo'][href$='.warn']:focus {
color: #ffffff;
border-top-color: #fcd174;
border-bottom-color: #bb8003;
background-color: #fbb829;
}
a[href^='#cyo'][href$=':info'],
a[href^='#cyo'][href$='.info'] {
color: #6cdfea;
border-color: transparent;
}
a[href^='#cyo'][href$=':info']:hover,
a[href^='#cyo'][href$='.info']:hover,
a[href^='#cyo'][href$=':info']:focus,
a[href^='#cyo'][href$='.info']:focus {
color: #ffffff;
border-top-color: #afeef4;
border-bottom-color: #1ec2d2;
background-color: #6cdfea;
}
a[href^='#cyo'][href$=':q'],
a[href^='#cyo'][href$='.q'] {
color: #2a8fbd;
border-color: transparent;
}
a[href^='#cyo'][href$=':q']:hover,
a[href^='#cyo'][href$='.q']:hover,
a[href^='#cyo'][href$=':q']:focus,
a[href^='#cyo'][href$='.q']:focus {
color: #ebf6fb;
border-top-color: #59b2da;
border-bottom-color: #17506a;
background-color: #2a8fbd;
}
a[href^='#cyo']::before {
font-family: 'FontAwesome';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
width: 24px;
text-align: center;
}
a[href^='#cyo']:hover::before {
font-size: 1.5em;
line-height: 0.75em;
vertical-align: -15%;
}
a[href^='#cyo']::before {
content: "\f054";
}
a[href^='#cyo'][href$=':ok']::before,
a[href^='#cyo'][href$='.ok']::before {
content: "\f054";
}
a[href^='#cyo'][href$=':yes']::before,
a[href^='#cyo'][href$='.yes']::before {
content: "\f00c";
}
a[href^='#cyo'][href$=':no']::before,
a[href^='#cyo'][href$='.no']::before {
content: "\f00d";
}
a[href^='#cyo'][href$=':warn']::before,
a[href^='#cyo'][href$='.warn']::before {
content: "\f0e7";
}
a[href^='#cyo'][href$=':info']::before,
a[href^='#cyo'][href$='.info']::before {
content: '\f12a';
}
a[href^='#cyo'][href$=':q']::before,
a[href^='#cyo'][href$='.q']::before {
content: '\f128';
}
a[href^='#cyo'][href$=':retry']::before,
a[href^='#cyo'][href$='.retry']::before {
content: '\f021';
}
@import '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';[id^=cyo],[id^=cyo]~*{display:none}[id^=cyo]:last-of-type~*,[id^=cyo]:target~*{display:block}[id^=cyo]:target~[id^=cyo],[id^=cyo]:target~[id^=cyo]~*{display:none}[id=cyo_debug]:target~*{display:block!important}[id=cyo_debug]:target~hr[id]{display:none}a[href^='#cyo']{font-size:.9em;border-style:solid;border-width:1px 1px 3px;display:inline-block;margin-bottom:3px;text-align:center;padding:.5em 1em .5em .35em;border-radius:.4em;text-decoration:none;margin-top:0;vertical-align:bottom;-webkit-transition:border-color .33s,background-color .33s,color .133s,border-bottom-width .133s,margin-top .133s;transition:border-color .33s,background-color .33s,color .133s,border-bottom-width .133s,margin-top .133s;color:#444;border-color:transparent}a[href^='#cyo']:hover{background-image:-webkit-linear-gradient(90deg,transparent,rgba(255,255,255,.3));background-image:linear-gradient(0deg,transparent,rgba(255,255,255,.3));margin-top:-2px;border-bottom-width:5px}a[href^='#cyo']:active{margin-top:3px;border-bottom-width:0}a[href^='#cyo']:focus,a[href^='#cyo']:hover{color:#c3c3c3;border-top-color:#6a6a6a;border-bottom-color:#111;background-color:#444}a[href^='#cyo'][href$=':ok'],a[href^='#cyo'][href$='.ok']{color:#2a8fbd;border-color:transparent}a[href^='#cyo'][href$=':ok']:focus,a[href^='#cyo'][href$=':ok']:hover,a[href^='#cyo'][href$='.ok']:focus,a[href^='#cyo'][href$='.ok']:hover{color:#ebf6fb;border-top-color:#59b2da;border-bottom-color:#17506a;background-color:#2a8fbd}a[href^='#cyo'][href$=':yes'],a[href^='#cyo'][href$='.yes']{color:#7faf1b;border-color:transparent}a[href^='#cyo'][href$=':yes']:focus,a[href^='#cyo'][href$=':yes']:hover,a[href^='#cyo'][href$='.yes']:focus,a[href^='#cyo'][href$='.yes']:hover{color:#ebf8d1;border-top-color:#a9e036;border-bottom-color:#3f570d;background-color:#7faf1b}a[href^='#cyo'][href$=':no'],a[href^='#cyo'][href$='.no']{color:#f02311;border-color:transparent}a[href^='#cyo'][href$=':no']:focus,a[href^='#cyo'][href$=':no']:hover,a[href^='#cyo'][href$='.no']:focus,a[href^='#cyo'][href$='.no']:hover{color:#fff;border-top-color:#f56659;border-bottom-color:#921409;background-color:#f02311}a[href^='#cyo'][href$=':warn'],a[href^='#cyo'][href$='.warn']{color:#fbb829;border-color:transparent}a[href^='#cyo'][href$=':warn']:focus,a[href^='#cyo'][href$=':warn']:hover,a[href^='#cyo'][href$='.warn']:focus,a[href^='#cyo'][href$='.warn']:hover{color:#fff;border-top-color:#fcd174;border-bottom-color:#bb8003;background-color:#fbb829}a[href^='#cyo'][href$=':info'],a[href^='#cyo'][href$='.info']{color:#6cdfea;border-color:transparent}a[href^='#cyo'][href$=':info']:focus,a[href^='#cyo'][href$=':info']:hover,a[href^='#cyo'][href$='.info']:focus,a[href^='#cyo'][href$='.info']:hover{color:#fff;border-top-color:#afeef4;border-bottom-color:#1ec2d2;background-color:#6cdfea}a[href^='#cyo'][href$=':q'],a[href^='#cyo'][href$='.q']{color:#2a8fbd;border-color:transparent}a[href^='#cyo'][href$=':q']:focus,a[href^='#cyo'][href$=':q']:hover,a[href^='#cyo'][href$='.q']:focus,a[href^='#cyo'][href$='.q']:hover{color:#ebf6fb;border-top-color:#59b2da;border-bottom-color:#17506a;background-color:#2a8fbd}a[href^='#cyo']::before{display:inline-block;font:normal normal normal 14px/1 FontAwesome;width:24px;text-align:center}a[href^='#cyo']:hover::before{font-size:1.5em;line-height:.75em;vertical-align:-15%}a[href^='#cyo']::before,a[href^='#cyo'][href$=':ok']::before,a[href^='#cyo'][href$='.ok']::before{content:"\f054"}a[href^='#cyo'][href$=':yes']::before,a[href^='#cyo'][href$='.yes']::before{content:"\f00c"}a[href^='#cyo'][href$=':no']::before,a[href^='#cyo'][href$='.no']::before{content:"\f00d"}a[href^='#cyo'][href$=':warn']::before,a[href^='#cyo'][href$='.warn']::before{content:"\f0e7"}a[href^='#cyo'][href$=':info']::before,a[href^='#cyo'][href$='.info']::before{content:'\f12a'}a[href^='#cyo'][href$=':q']::before,a[href^='#cyo'][href$='.q']::before{content:'\f128'}a[href^='#cyo'][href$=':retry']::before,a[href^='#cyo'][href$='.retry']::before{content:'\f021'}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment