Return to Answer

Commonmark migration

edited Jun 17, 2020 at 9:04

#HTML + CSS, ~~676 636~~ 625 bytes

HTML + CSS, 676 636 625 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

*{left:50%;transform:translate(-50%);position:absolute;border-radius:13px;height:75px}a,b,f{width:145px;background:#404040}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

#HTML + CSS, ~~676 636~~ 625 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

*{left:50%;transform:translate(-50%);position:absolute;border-radius:13px;height:75px}a,b,f{width:145px;background:#404040}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

HTML + CSS, 676 636 625 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

*{left:50%;transform:translate(-50%);position:absolute;border-radius:13px;height:75px}a,b,f{width:145px;background:#404040}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

deleted 8 characters in body

Source Link

edited Dec 18, 2014 at 14:21

Optimizer

26.6k
7
67
144

#HTML + CSS, ~~676 636~~ 636625 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

a,b,c,d,e,f,g*{left:50%;transform:translate(-50%);width;position:145px;positionabsolute;border-radius:absolute;background13px;height:#404040;height75px}a,b,f{width:75px;border-radius145px;background:13px;#404040}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px;50px}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

#HTML + CSS, ~~676~~ 636 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

a,b,c,d,e,f,g{left:50%;transform:translate(-50%);width:145px;position:absolute;background:#404040;height:75px;border-radius:13px;}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px;}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

#HTML + CSS, ~~676 636~~ 625 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

*{left:50%;transform:translate(-50%);position:absolute;border-radius:13px;height:75px}a,b,f{width:145px;background:#404040}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

deleted 4 characters in body

Source Link

edited Dec 17, 2014 at 15:58

Optimizer

26.6k
7
67
144

#HTML + CSS, ~~676~~ 636 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx. But here goes.

a,b,c,d,e,f,g{left:50%;transform:translate(-50%);width:145px;position:absolute;background:#404040;height:75px;border-radius:13px;}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px;}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result looks like:

enter image description here

#HTML + CSS, ~~676~~ 636 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx. But here goes.

a,b,c,d,e,f,g{left:50%;transform:translate(-50%);width:145px;position:absolute;background:#404040;height:75px;border-radius:13px;}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px;}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}

<c><d></d><e></e><f></f><a><b><g>★

Note: This works best/as expected in Firefox on Windows

End result:

enter image description here

#HTML + CSS, ~~676~~ 636 bytes

~~This can be golfed a lot, by getting rid of those left:XXXpx and using some sort of centering~~ Now using transforms to center everything instead of left:XXXpx.

a,b,c,d,e,f,g{left:50%;transform:translate(-50%);width:145px;position:absolute;background:#404040;height:75px;border-radius:13px;}b{width:126px;background:#58585C}c{width:163px;height:61px;top:50px;}d,e{width:68px;height:40px;top:-15px}c,d,e{background:#1F1A1A}d{left:0;transform:skew(0deg,-26deg);border-radius:9px 24px}e{left:96px;transform:skew(0deg,26deg);border-radius:24px 9px}f{height:40px;width:99px;top:-13px;border-radius:150px/60px}g{height:34px;width:34px;background:#FFCA57;border:5px solid #FF1C22;border-radius:40px;top:13px;color:#FF1C22;font-size:1cm;line-height:31px;padding:3px}