Skip to content

Instantly share code, notes, and snippets.

@rayantony
Last active May 26, 2017 11:39
Show Gist options
  • Save rayantony/54792c93f875951b981fb48272b7842a to your computer and use it in GitHub Desktop.
Save rayantony/54792c93f875951b981fb48272b7842a to your computer and use it in GitHub Desktop.
comparison of css github then xtras

Xtras comparison

===

From README.md function at bottom:

(function(){var style=document.createElement('style'),styleContent=document.createTextNode('p,footer,header,a:link,article,soundmanager,video,input,post,h1,hr,h3{animation-delay:1.5s;animation:fly-in-from-right 0.93s 1s ease both;transform-origin:top right;}top-panels,h2,h4,h5,img,.bottom-panels,list-item,list,li,.list-group-item,ol,shop,dd,shop-button,shop-item,cart,ad,figure{animation-delay:1.8s;animation:fly-in-from-left 2.93s 1.2s ease both;-webkit-animation-delay:1.8s;-webkit-animation:fly-in-from-left 2.93s 1.5s ease both;transform-origin:top left;}@keyframes fly-in-from-top{from{transform:translateX(12rem) rotate(90deg);opacity:0;}}@keyframes fly-in-from-left{from{transform:translateY(12rem) rotate(180deg);opacity:0;}}@keyframes fly-in-from-right{from{transform:translateY(12rem) rotate(-360deg);opacity:0;}}frame,iframe,section{animation-delay:2s;animation:fly-in-from-left 2s 2s ease both;transform-origin:top left;}body{font-size:1.3em;line-height:1.5;font-weight:400;font-family:"Raleway","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}*{box-sizing:border-box;}script{display:none;}html{font-family:"Raleway","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:23px;line-height:33.813px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;overflow-x:hidden;overflow-y:scroll;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;-moz-box-sizing:border-box;color:rgba(0,0,0,0.88);}body{background-color:rgba(255,255,255,0.8);font-family:"Raleway","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:23px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:33.813px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-rendering:optimizelegibility;-moz-box-sizing:border-box;-moz-font-feature-settings:"liga";}.wrap{backface-visibility:hidden;font-family:"Raleway","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:0px;position:relative;text-rendering:optimizelegibility;transition-delay:0s;transition-duration:0.3s;transition-property:transform;transition-timing-function:cubic-bezier(0.42,0,0.58,1);-moz-box-sizing:border-box;-moz-font-feature-settings:"liga";}font-family:"PT Sans",Helvetica,Arial,sans-serif;font-weight:400;margin-bottom:10px;margin-top:30px;text-rendering:optimizelegibility;-moz-box-sizing:border-box;}font-family:"PT Sans",Helvetica,Arial,sans-serif;font-weight:400;text-rendering:optimizelegibility;-moz-box-sizing:border-box;font-style:normal;letter-spacing:0px;}btn{opacity:0;-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;-webkit-transform:translateZ();}#prs,#prs a:active,.kl:active,.link,.q:active,.tbotu,.w,a,a.gb1,a.gb2,a.gb3,div a:link,a:before,a:link{background-color:transparent;cursor:pointer;white-space:nowrap;-moz-text-decoration-line:none;-moz-text-decoration-style:solid;text-decoration:none;list-style:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-style:normal;font-weight:400;letter-spacing:0;text-rendering:optimizelegibility;-moz-font-feature-settings:"liga";}a:hover{text-decoration:underline;}ol,ul,dt{font-family:"PT Sans",Helvetica,Arial,sans-serif;font-weight:400;text-rendering:optimizelegibility;}input,button{whitespace:nowrap;}');style.appendChild(styleContent);var mexMeHead=document.getElementsByTagName('head');mexMeHead[0].appendChild(style);})();```


A before and after of the same above referenced code but this time how that line renders in Github and again after applied, as it looked not as good after. Choppy somehow. versioning is not what it should be withtwo branches 3 ways to apply, readme's, notes, production uses cases that predate it and differ. Overall it speaks to the challenge of finding the tolerance point of pushing changes generically to any target page and desiring everything will always be the same or better. A setup for disappointment the more you add the more it conflicts and so the closer to your dream page the further from cross compatibility there is a happy medium that is not static. Rather its a range of possibilities that differ some are better some are not, and again depending on their use, all share a common baseline of to do and not to do the quest for that very realistic indeed, and so perpetual tuning like winding a pendulum clock, both the tuning and the end result variances is a feature. Finding what absolutely doesn't work and removing from improves it and daring tests that sometimes don't are the temporary penalty cost of the other times when a change contributes great value. it's perspective. The journey is fulfilling like the clock depicted well in an old Twilight Zone in fact, the old man could not be talked out of tinkering with his favorite clock. A dutiful and loyal caretaker he would never let it run down, but preferred the regular maintenance and found join in it where he would have less to do but also less joy with a digital more modern and more accurate replacement. Also, if it ran down he believed he would die, so there's that to. This simple style injection project is tested to be certifiably non-lethal in all versions.
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 1 column, instead of 3. in line 1.
background-color:
rgb(246, 248, 250)
;
border-bottom-left-radius:
3px
;
border-bottom-right-radius:
3px
;
border-top-left-radius:
3px
;
border-top-right-radius:
3px
;
box-sizing:
border-box
;
color:
rgb(36, 41, 46)
;
display:
block
;
font-family:
SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace
;
font-size:
13.6px
;
font-stretch:
normal
;
font-style:
normal
;
font-variant-caps:
normal
;
font-variant-ligatures:
normal
;
font-variant-numeric:
normal
;
font-weight:
normal
;
height:
51px
;
letter-spacing:
normal
;
line-height:
19.72px
;
margin-bottom:
0px
;
margin-left:
0px
;
margin-right:
0px
;
margin-top:
0px
;
overflow-x:
auto
;
overflow-y:
auto
;
padding-bottom:
16px
;
padding-left:
16px
;
padding-right:
16px
;
padding-top:
16px
;
text-rendering:
optimizeLegibility
;
text-size-adjust:
100%
;
white-space:
pre
;
width:
888px
;
word-break:
normal
;
word-wrap:
normal
;
background-color:
rgb(246, 248, 250)
;
border-bottom-left-radius:
3px
;
border-bottom-right-radius:
3px
;
border-top-left-radius:
3px
;
border-top-right-radius:
3px
;
box-sizing:
border-box
;
color:
rgb(36, 41, 46)
;
display:
block
;
font-family:
SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace
;
font-size:
13.6px
;
font-stretch:
normal
;
font-style:
normal
;
font-variant-caps:
normal
;
font-variant-ligatures:
normal
;
font-variant-numeric:
normal
;
font-weight:
normal
;
height:
51px
;
line-height:
19.72px
;
margin-bottom:
0px
;
margin-left:
0px
;
margin-right:
0px
;
margin-top:
0px
;
overflow-x:
auto
;
overflow-y:
auto
;
padding-bottom:
16px
;
padding-left:
16px
;
padding-right:
16px
;
padding-top:
16px
;
text-size-adjust:
100%
;
white-space:
pre
;
width:
888px
;
word-break:
normal
;
word-wrap:
normal
;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment