├── README ├── classhole.png ├── css ├── lib.less ├── normalize.css ├── style.css └── style.less ├── favicon.ico ├── index.html ├── js ├── lib │ ├── fuckit.js │ ├── jquery.js │ ├── jquery.lightbox_me.js │ ├── less.js │ └── less_setup.js ├── script-ck.js └── script.js ├── otherguy.png ├── tests.js ├── waiting.png └── xkcd.png /README: -------------------------------------------------------------------------------- 1 | An implementation of the alt text from http://xkcd.com/1185/. 2 | 3 | Try it out: http://gkoberger.github.io/stacksort/ 4 | -------------------------------------------------------------------------------- /classhole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkoberger/stacksort/78799845340fb4c4de1a900516a865a1e9ddc7f5/classhole.png -------------------------------------------------------------------------------- /css/lib.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | @light-gray: #ccc; 3 | @note-gray: #999; 4 | @medium-gray: #666; 5 | @dark-gray: #333; 6 | 7 | 8 | // Font Stacks 9 | @sans-stack: "Helvetica Neue", Arial, sans-serif; 10 | @serif-stack: Georgia, serif; 11 | @mono-stack: "andale mono", monospace; 12 | 13 | 14 | // Mixins 15 | .border-radius(@radius) { 16 | -webkit-border-radius: @radius; 17 | -moz-border-radius: @radius; 18 | border-radius: @radius; 19 | } 20 | 21 | .transform(@tform) { 22 | -webkit-transform: @tform; 23 | -moz-transform: @tform; 24 | -ms-transform: @tform; 25 | -o-transform: @tform; 26 | transform: @tform; 27 | } 28 | 29 | .transform-origin(@origin) { 30 | -webkit-transform-origin: @origin; 31 | -moz-transform-origin: @origin; 32 | -ms-transform-origin: @origin; 33 | -o-transform-origin: @origin; 34 | transform-origin: @origin; 35 | } 36 | 37 | .transition(@property) { 38 | -moz-transition: @property; 39 | -webkit-transition: @property; 40 | transition: @property; 41 | } 42 | 43 | .transition-property(@property) { 44 | -moz-transition-property: @property; 45 | -webkit-transition-property: @property; 46 | transition-property: @property; 47 | } 48 | 49 | .transition-duration(@duration:2s) { 50 | -moz-transition-duration: @duration; 51 | -webkit-transition-duration: @duration; 52 | transition-duration: @duration; 53 | } 54 | 55 | .background-size(@size) { 56 | -moz-background-size: @size; 57 | -wekbkit-background-size: @size; 58 | background-size: @size; 59 | } 60 | .background-size(@size, @size2) { 61 | -moz-background-size: @size, @size2; 62 | -wekbkit-background-size: @size, @size2; 63 | background-size: @size, @size2; 64 | } 65 | 66 | .box-shadow(@shadow) { 67 | box-shadow: @shadow; 68 | -moz-box-shadow: @shadow; 69 | -webkit-box-shadow: @shadow; 70 | } 71 | .box-shadow(@shadow, @shadow2) { 72 | box-shadow: @shadow, @shadow2; 73 | -moz-box-shadow: @shadow, @shadow2; 74 | -webkit-box-shadow: @shadow, @shadow2; 75 | } 76 | .box-shadow(@shadow, @shadow2, @shadow3) { 77 | box-shadow: @shadow, @shadow2, @shadow3; 78 | -moz-box-shadow: @shadow, @shadow2, @shadow3; 79 | -webkit-box-shadow: @shadow, @shadow2, @shadow3; 80 | } 81 | 82 | .columns(@count, @gap: 1em) { 83 | column-count: @count; 84 | -moz-column-count: @count; 85 | -webkit-column-count: @count; 86 | column-gap: @gap; 87 | -moz-column-gap: @gap; 88 | -webkit-column-gap: @gap; 89 | } 90 | 91 | .height-calc(@calc, @fallback) { 92 | height: @fallback; 93 | height: -moz-calc(@calc); 94 | height: -webkit-calc(@calc); 95 | height: -o-calc(@calc); 96 | height: calc(@calc); 97 | } 98 | 99 | .width-calc(@calc, @fallback) { 100 | width: @fallback; 101 | width: -moz-calc(@calc); 102 | width: -webkit-calc(@calc); 103 | width: -o-calc(@calc); 104 | width: calc(@calc); 105 | } 106 | 107 | .border-box() { 108 | -webkit-box-sizing: border-box; 109 | -moz-box-sizing: border-box; 110 | box-sizing: border-box; 111 | } 112 | 113 | .animation(@animation) { 114 | -webkit-animation: @animation; 115 | -moz-animation: @animation; 116 | -ms-animation: @animation; 117 | animation: @animation; 118 | } 119 | 120 | .ellipsis() { 121 | overflow: hidden; 122 | text-overflow: ellipsis; 123 | white-space: nowrap; 124 | } 125 | 126 | .gradient-two-color(@color1, @color2) { 127 | background-image: -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2)); 128 | background-image: linear-gradient(@color1, @color2); 129 | background-image: -moz-linear-gradient(@color1, @color2); 130 | background-image: -webkit-linear-gradient(@color1, @color2); 131 | } 132 | 133 | .gradient-two-color(@color1, @color2, @fallback) { 134 | background: @fallback; 135 | .gradient-two-color(@color1, @color2); 136 | } 137 | 138 | .fake3D() { 139 | .transform(translate3d(0, 0, 0)); 140 | } 141 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ 2 | 3 | /* ============================================================================= 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects block display not defined in IE6/7/8/9 & FF3 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section { 21 | display: block; 22 | } 23 | 24 | /* 25 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 26 | */ 27 | 28 | audio, 29 | canvas, 30 | video { 31 | display: inline-block; 32 | *display: inline; 33 | *zoom: 1; 34 | } 35 | 36 | /* 37 | * Prevents modern browsers from displaying 'audio' without controls 38 | */ 39 | 40 | audio:not([controls]) { 41 | display: none; 42 | } 43 | 44 | /* 45 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 46 | * Known issue: no IE6 support 47 | */ 48 | 49 | [hidden] { 50 | display: none; 51 | } 52 | 53 | 54 | /* ============================================================================= 55 | Base 56 | ========================================================================== */ 57 | 58 | /* 59 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units 60 | * http://clagnut.com/blog/348/#c790 61 | * 2. Keeps page centred in all browsers regardless of content height 62 | * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom 63 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 64 | */ 65 | 66 | html { 67 | font-size: 100%; /* 1 */ 68 | overflow-y: scroll; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 3 */ 70 | -ms-text-size-adjust: 100%; /* 3 */ 71 | } 72 | 73 | /* 74 | * Addresses margins handled incorrectly in IE6/7 75 | */ 76 | 77 | body { 78 | margin: 0; 79 | } 80 | 81 | /* 82 | * Addresses font-family inconsistency between 'textarea' and other form elements. 83 | */ 84 | 85 | body, 86 | button, 87 | input, 88 | select, 89 | textarea { 90 | font-family: sans-serif; 91 | } 92 | 93 | 94 | /* ============================================================================= 95 | Links 96 | ========================================================================== */ 97 | 98 | a { 99 | color: #00e; 100 | } 101 | 102 | a:visited { 103 | color: #551a8b; 104 | } 105 | 106 | /* 107 | * Addresses outline displayed oddly in Chrome 108 | */ 109 | 110 | a:focus { 111 | outline: thin dotted; 112 | } 113 | 114 | /* 115 | * Improves readability when focused and also mouse hovered in all browsers 116 | * people.opera.com/patrickl/experiments/keyboard/test 117 | */ 118 | 119 | a:hover, 120 | a:active { 121 | outline: 0; 122 | } 123 | 124 | 125 | /* ============================================================================= 126 | Typography 127 | ========================================================================== */ 128 | 129 | /* 130 | * Addresses styling not present in IE7/8/9, S5, Chrome 131 | */ 132 | 133 | abbr[title] { 134 | border-bottom: 1px dotted; 135 | } 136 | 137 | /* 138 | * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome 139 | */ 140 | 141 | b, 142 | strong { 143 | font-weight: bold; 144 | } 145 | 146 | blockquote { 147 | margin: 1em 40px; 148 | } 149 | 150 | /* 151 | * Addresses styling not present in S5, Chrome 152 | */ 153 | 154 | dfn { 155 | font-style: italic; 156 | } 157 | 158 | /* 159 | * Addresses styling not present in IE6/7/8/9 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /* 168 | * Corrects font family set oddly in IE6, S4/5, Chrome 169 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 170 | */ 171 | 172 | pre, 173 | code, 174 | kbd, 175 | samp { 176 | font-family: monospace, serif; 177 | _font-family: 'courier new', monospace; 178 | font-size: 1em; 179 | } 180 | 181 | /* 182 | * Improves readability of pre-formatted text in all browsers 183 | */ 184 | 185 | pre { 186 | white-space: pre; 187 | white-space: pre-wrap; 188 | word-wrap: break-word; 189 | } 190 | 191 | /* 192 | * 1. Addresses CSS quotes not supported in IE6/7 193 | * 2. Addresses quote property not supported in S4 194 | */ 195 | 196 | /* 1 */ 197 | 198 | q { 199 | quotes: none; 200 | } 201 | 202 | /* 2 */ 203 | 204 | q:before, 205 | q:after { 206 | content: ''; 207 | content: none; 208 | } 209 | 210 | small { 211 | font-size: 75%; 212 | } 213 | 214 | /* 215 | * Prevents sub and sup affecting line-height in all browsers 216 | * gist.github.com/413930 217 | */ 218 | 219 | sub, 220 | sup { 221 | font-size: 75%; 222 | line-height: 0; 223 | position: relative; 224 | vertical-align: baseline; 225 | } 226 | 227 | sup { 228 | top: -0.5em; 229 | } 230 | 231 | sub { 232 | bottom: -0.25em; 233 | } 234 | 235 | 236 | /* ============================================================================= 237 | Lists 238 | ========================================================================== */ 239 | 240 | ul, 241 | ol { 242 | margin: 1em 0; 243 | padding: 0 0 0 40px; 244 | } 245 | 246 | dd { 247 | margin: 0 0 0 40px; 248 | } 249 | 250 | nav ul, 251 | nav ol { 252 | list-style: none; 253 | list-style-image: none; 254 | } 255 | 256 | 257 | /* ============================================================================= 258 | Embedded content 259 | ========================================================================== */ 260 | 261 | /* 262 | * 1. Removes border when inside 'a' element in IE6/7/8/9, F3 263 | * 2. Improves image quality when scaled in IE7 264 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 265 | */ 266 | 267 | img { 268 | border: 0; /* 1 */ 269 | -ms-interpolation-mode: bicubic; /* 2 */ 270 | } 271 | 272 | /* 273 | * Corrects overflow displayed oddly in IE9 274 | */ 275 | 276 | svg:not(:root) { 277 | overflow: hidden; 278 | } 279 | 280 | 281 | /* ============================================================================= 282 | Figures 283 | ========================================================================== */ 284 | 285 | /* 286 | * Addresses margin not present in IE6/7/8/9, S5, O11 287 | */ 288 | 289 | figure { 290 | margin: 0; 291 | } 292 | 293 | 294 | /* ============================================================================= 295 | Forms 296 | ========================================================================== */ 297 | 298 | /* 299 | * Corrects margin displayed oddly in IE6/7 300 | */ 301 | 302 | form { 303 | margin: 0; 304 | } 305 | 306 | /* 307 | * Define consistent margin and padding 308 | */ 309 | 310 | fieldset { 311 | margin: 0 2px; 312 | padding: 0.35em 0.625em 0.75em; 313 | } 314 | 315 | /* 316 | * 1. Corrects color not being inherited in IE6/7/8/9 317 | * 2. Corrects alignment displayed oddly in IE6/7 318 | */ 319 | 320 | legend { 321 | border: 0; /* 1 */ 322 | *margin-left: -7px; /* 2 */ 323 | } 324 | 325 | /* 326 | * 1. Corrects font size not being inherited in all browsers 327 | * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome 328 | * 3. Improves appearance and consistency in all browsers 329 | */ 330 | 331 | button, 332 | input, 333 | select, 334 | textarea { 335 | font-size: 100%; /* 1 */ 336 | margin: 0; /* 2 */ 337 | vertical-align: baseline; /* 3 */ 338 | *vertical-align: middle; /* 3 */ 339 | } 340 | 341 | /* 342 | * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet 343 | * 2. Corrects inner spacing displayed oddly in IE6/7 344 | */ 345 | 346 | button, 347 | input { 348 | line-height: normal; /* 1 */ 349 | *overflow: visible; /* 2 */ 350 | } 351 | 352 | /* 353 | * Corrects overlap and whitespace issue for buttons and inputs in IE6/7 354 | * Known issue: reintroduces inner spacing 355 | */ 356 | 357 | table button, 358 | table input { 359 | *overflow: auto; 360 | } 361 | 362 | /* 363 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others 364 | * 2. Corrects inability to style clickable 'input' types in iOS 365 | */ 366 | 367 | button, 368 | html input[type="button"], 369 | input[type="reset"], 370 | input[type="submit"] { 371 | cursor: pointer; /* 1 */ 372 | -webkit-appearance: button; /* 2 */ 373 | } 374 | 375 | /* 376 | * 1. Addresses box sizing set to content-box in IE8/9 377 | * 2. Addresses excess padding in IE8/9 378 | */ 379 | 380 | input[type="checkbox"], 381 | input[type="radio"] { 382 | box-sizing: border-box; /* 1 */ 383 | padding: 0; /* 2 */ 384 | } 385 | 386 | /* 387 | * 1. Addresses appearance set to searchfield in S5, Chrome 388 | * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) 389 | */ 390 | 391 | input[type="search"] { 392 | -webkit-appearance: textfield; /* 1 */ 393 | -moz-box-sizing: content-box; 394 | -webkit-box-sizing: content-box; /* 2 */ 395 | box-sizing: content-box; 396 | } 397 | 398 | /* 399 | * Corrects inner padding displayed oddly in S5, Chrome on OSX 400 | */ 401 | 402 | input[type="search"]::-webkit-search-decoration { 403 | -webkit-appearance: none; 404 | } 405 | 406 | /* 407 | * Corrects inner padding and border displayed oddly in FF3/4 408 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 409 | */ 410 | 411 | button::-moz-focus-inner, 412 | input::-moz-focus-inner { 413 | border: 0; 414 | padding: 0; 415 | } 416 | 417 | /* 418 | * 1. Removes default vertical scrollbar in IE6/7/8/9 419 | * 2. Improves readability and alignment in all browsers 420 | */ 421 | 422 | textarea { 423 | overflow: auto; /* 1 */ 424 | vertical-align: top; /* 2 */ 425 | } 426 | 427 | 428 | /* ============================================================================= 429 | Tables 430 | ========================================================================== */ 431 | 432 | /* 433 | * Remove most spacing between table cells 434 | */ 435 | 436 | table { 437 | border-collapse: collapse; 438 | border-spacing: 0; 439 | } 440 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .hn { 2 | clear: both; 3 | display: block; 4 | width: 600px; 5 | margin: auto; 6 | margin-top: 40px; 7 | color: #000 !important; 8 | background-color: #f27800; 9 | padding: 10px; 10 | border-radius: 5px; 11 | text-align: center; 12 | font-size: 13px; 13 | } 14 | a, 15 | a:visited { 16 | color: #5f7ea9; 17 | text-decoration: none; 18 | } 19 | a:hover, 20 | a:visited:hover { 21 | color: #5f7ea9; 22 | text-decoration: underline; 23 | } 24 | body { 25 | background-color: #eee; 26 | } 27 | body section { 28 | clear: both; 29 | margin: auto; 30 | overflow: hidden; 31 | padding-top: 50px; 32 | width: 920px; 33 | } 34 | body section h2 { 35 | border-bottom: 1px dotted #CCCCCC; 36 | padding-bottom: 20px; 37 | text-align: center; 38 | } 39 | body #left { 40 | width: 520px; 41 | float: left; 42 | } 43 | body header { 44 | background-color: #fff; 45 | border-bottom: 1px solid #ddd; 46 | padding: 20px 0 20px; 47 | } 48 | body header #top { 49 | width: 760px; 50 | margin: auto; 51 | } 52 | body header #top img { 53 | float: left; 54 | margin-right: 40px; 55 | } 56 | body header #top h1 { 57 | color: #000; 58 | font-weight: normal; 59 | text-align: left; 60 | font-size: 45px; 61 | margin: 0; 62 | } 63 | body header #top p { 64 | font-size: 13px; 65 | color: #666; 66 | text-align: left; 67 | margin: 10px auto 0; 68 | } 69 | body .label { 70 | text-align: right; 71 | width: 200px; 72 | font-size: 12px; 73 | float: left; 74 | -webkit-box-sizing: border-box; 75 | -moz-box-sizing: border-box; 76 | box-sizing: border-box; 77 | padding: 10px; 78 | color: #555; 79 | clear: both; 80 | } 81 | body .label strong { 82 | padding-bottom: 5px; 83 | display: block; 84 | font-size: 14px; 85 | color: #000; 86 | } 87 | body .after { 88 | text-align: left; 89 | width: 20px; 90 | float: left; 91 | -webkit-box-sizing: border-box; 92 | -moz-box-sizing: border-box; 93 | box-sizing: border-box; 94 | padding: 10px; 95 | color: #555; 96 | } 97 | body .after strong { 98 | display: block; 99 | font-size: 14px; 100 | color: #000; 101 | } 102 | body .input { 103 | -webkit-box-sizing: border-box; 104 | -moz-box-sizing: border-box; 105 | box-sizing: border-box; 106 | float: left; 107 | width: 300px; 108 | } 109 | body .sorter { 110 | -webkit-box-sizing: border-box; 111 | -moz-box-sizing: border-box; 112 | box-sizing: border-box; 113 | clear: both; 114 | padding: 20px; 115 | text-align: center; 116 | } 117 | body .sorter #sort, 118 | body .sorter #no { 119 | border: 1px solid #4a658b; 120 | box-shadow: 0 1px rgba(255, 255, 255, 0.3) inset; 121 | -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.3) inset; 122 | -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.3) inset; 123 | -webkit-border-radius: 7px; 124 | -moz-border-radius: 7px; 125 | border-radius: 7px; 126 | background-image: -webkit-gradient(linear, left bottom, left top, from(#8099bb), to(#5f7ea9)); 127 | background-image: linear-gradient(#8099bb, #5f7ea9); 128 | background-image: -moz-linear-gradient(#8099bb, #5f7ea9); 129 | background-image: -webkit-linear-gradient(#8099bb, #5f7ea9); 130 | background-color: #5f7ea9; 131 | color: #FFFFFF; 132 | font-size: 23px; 133 | margin-left: 170px; 134 | padding: 10px 40px; 135 | text-shadow: 0 1px 1px #000000; 136 | } 137 | body .sorter #sort:hover, 138 | body .sorter #no:hover { 139 | background-image: -webkit-gradient(linear, left bottom, left top, from(#5f7ea9), to(#4a658b)); 140 | background-image: linear-gradient(#5f7ea9, #4a658b); 141 | background-image: -moz-linear-gradient(#5f7ea9, #4a658b); 142 | background-image: -webkit-linear-gradient(#5f7ea9, #4a658b); 143 | } 144 | body .sorter #sort:disabled, 145 | body .sorter #no:disabled { 146 | background-color: #888; 147 | border: 1px solid #919191; 148 | background-image: -webkit-gradient(linear, left bottom, left top, from(#c3c3c3), to(#aaa)); 149 | background-image: linear-gradient(#c3c3c3, #aaa); 150 | background-image: -moz-linear-gradient(#c3c3c3, #aaa); 151 | background-image: -webkit-linear-gradient(#c3c3c3, #aaa); 152 | } 153 | body .waiting-sadly { 154 | -webkit-box-sizing: border-box; 155 | -moz-box-sizing: border-box; 156 | box-sizing: border-box; 157 | clear: both; 158 | margin-left: 170px; 159 | padding-top: 10px; 160 | } 161 | body .waiting-sadly .sad-waiter { 162 | position: relative; 163 | width: 128px; 164 | height: 137px; 165 | margin: 0 auto; 166 | background-image: url(../waiting.png); 167 | height: 0; 168 | } 169 | body .waiting-sadly .sad-waiter .hour { 170 | display: none; 171 | position: absolute; 172 | bottom: 113px; 173 | right: 22px; 174 | width: 0; 175 | height: 0; 176 | border-left: 1px solid transparent; 177 | border-right: 1px solid transparent; 178 | border-bottom: 15px solid black; 179 | -webkit-animation: clockHand 18s linear infinite; 180 | -moz-animation: clockHand 18s linear infinite; 181 | -ms-animation: clockHand 18s linear infinite; 182 | animation: clockHand 18s linear infinite; 183 | } 184 | body .waiting-sadly .sad-waiter .minute { 185 | display: none; 186 | position: absolute; 187 | bottom: 113px; 188 | right: 22px; 189 | width: 0; 190 | height: 0; 191 | border-left: 1px solid transparent; 192 | border-right: 1px solid transparent; 193 | border-bottom: 17px solid black; 194 | -webkit-animation: clockHand 1.5s linear infinite; 195 | -moz-animation: clockHand 1.5s linear infinite; 196 | -ms-animation: clockHand 1.5s linear infinite; 197 | animation: clockHand 1.5s linear infinite; 198 | } 199 | body .textarea { 200 | width: 100%; 201 | -webkit-box-sizing: border-box; 202 | -moz-box-sizing: border-box; 203 | box-sizing: border-box; 204 | border: 1px solid #ddd; 205 | -webkit-border-radius: 7px; 206 | -moz-border-radius: 7px; 207 | border-radius: 7px; 208 | background-color: #fff; 209 | padding: 10px; 210 | } 211 | body .textarea textarea { 212 | border: 0 none; 213 | -webkit-box-sizing: border-box; 214 | -moz-box-sizing: border-box; 215 | box-sizing: border-box; 216 | padding: 0; 217 | width: 100%; 218 | height: 60px; 219 | resize: none; 220 | } 221 | body textarea.textarea { 222 | height: 80px; 223 | resize: none; 224 | } 225 | body textarea.textarea:disabled { 226 | background: #f3f3f3; 227 | color: #888; 228 | } 229 | body #answer-used { 230 | text-align: right; 231 | border-top: 1px dotted #ddd; 232 | font-size: 12px; 233 | padding-top: 10px; 234 | color: #999; 235 | } 236 | #right { 237 | padding-left: 100px; 238 | -webkit-box-sizing: border-box; 239 | -moz-box-sizing: border-box; 240 | box-sizing: border-box; 241 | width: 400px; 242 | float: left; 243 | } 244 | #right strong { 245 | display: block; 246 | font-size: 14px; 247 | color: #000; 248 | } 249 | #right #logger { 250 | font-size: 12px; 251 | -webkit-box-sizing: border-box; 252 | -moz-box-sizing: border-box; 253 | box-sizing: border-box; 254 | background-color: #FFFFFF; 255 | border: 1px solid #DDDDDD; 256 | -webkit-border-radius: 5px; 257 | -moz-border-radius: 5px; 258 | border-radius: 5px; 259 | width: 100%; 260 | height: 430px; 261 | overflow: scroll; 262 | -webkit-overflow-scrolling: touch; 263 | padding: 10px 15px 15px; 264 | } 265 | #right #logger .log-error { 266 | border-bottom: 1px dotted #ccc; 267 | padding-bottom: 5px; 268 | padding-top: 2px; 269 | padding-left: 0px; 270 | font-size: 11px; 271 | color: #a71010; 272 | } 273 | #right #logger .log-out { 274 | font-size: 11px; 275 | color: #a71010; 276 | border: 1px solid #ccc; 277 | margin-top: 10px; 278 | padding: 5px; 279 | text-align: center; 280 | background-color: #eee; 281 | padding: 10px; 282 | } 283 | #right #logger .log-success { 284 | font-size: 11px; 285 | color: green; 286 | border-bottom: 1px dotted #ccc; 287 | padding-bottom: 5px; 288 | padding-top: 2px; 289 | padding-left: 0px; 290 | } 291 | #right #logger .log-trying { 292 | font-weight: bold; 293 | padding-top: 5px; 294 | } 295 | #right #logger .oc { 296 | color: #777777; 297 | padding: 170px 0; 298 | text-align: center; 299 | } 300 | #stopper { 301 | padding: 5px; 302 | font-size: 11px; 303 | text-align: center; 304 | } 305 | #stopper.hide { 306 | visibility: hidden; 307 | } 308 | .done { 309 | display: none; 310 | } 311 | .done #no { 312 | background-color: #f4e26a; 313 | border: 1px solid #e7cb11; 314 | -webkit-border-radius: 5px; 315 | -moz-border-radius: 5px; 316 | border-radius: 5px; 317 | padding: 10px; 318 | display: block; 319 | font-size: 12px; 320 | margin-top: 10px; 321 | text-align: center; 322 | color: #333; 323 | text-decoration: none; 324 | } 325 | .done #no:hover { 326 | background-color: #f0d93b; 327 | border: 1px solid #b7a10e; 328 | } 329 | .done #no strong { 330 | font-weight: bold; 331 | color: #000; 332 | } 333 | .done .desc { 334 | border-right: 1px dotted #ccc; 335 | padding-right: 20px; 336 | margin-right: 20px; 337 | } 338 | .done .tweet, 339 | .done .desc { 340 | margin-top: 20px; 341 | font-size: 12px; 342 | float: left; 343 | width: 129px; 344 | } 345 | .done .tweet a, 346 | .done .desc a { 347 | display: block; 348 | padding: 3px 0 3px 10px; 349 | } 350 | .done .tweet strong, 351 | .done .desc strong { 352 | display: block; 353 | } 354 | #questions { 355 | border-top: 1px dotted #ccc; 356 | margin-top: 60px; 357 | margin-bottom: 60px; 358 | } 359 | #questions .question { 360 | width: 300px; 361 | background-repeat: no-repeat; 362 | font-size: 12px; 363 | min-height: 131px; 364 | float: left; 365 | } 366 | #questions .question.q1 { 367 | background-image: url("../classhole.png"); 368 | padding-left: 120px; 369 | } 370 | #questions .question.q2 { 371 | background-image: url("../otherguy.png"); 372 | background-position: right top; 373 | border-left: 1px dotted #CCCCCC; 374 | margin-left: 39px; 375 | padding-left: 39px; 376 | padding-right: 120px; 377 | } 378 | #about { 379 | font-size: 12px; 380 | text-align: center; 381 | color: #555; 382 | margin-bottom: 60px; 383 | } 384 | #about div { 385 | color: #888; 386 | font-size: 11px; 387 | padding-top: 11px; 388 | } 389 | @keyframes clockHand { 390 | from { 391 | -webkit-transform-origin: 50% 100%; 392 | -moz-transform-origin: 50% 100%; 393 | -ms-transform-origin: 50% 100%; 394 | -o-transform-origin: 50% 100%; 395 | transform-origin: 50% 100%; 396 | -webkit-transform: rotate(0deg); 397 | -moz-transform: rotate(0deg); 398 | -ms-transform: rotate(0deg); 399 | -o-transform: rotate(0deg); 400 | transform: rotate(0deg); 401 | } 402 | to { 403 | -webkit-transform-origin: 50% 100%; 404 | -moz-transform-origin: 50% 100%; 405 | -ms-transform-origin: 50% 100%; 406 | -o-transform-origin: 50% 100%; 407 | transform-origin: 50% 100%; 408 | -webkit-transform: rotate(360deg); 409 | -moz-transform: rotate(360deg); 410 | -ms-transform: rotate(360deg); 411 | -o-transform: rotate(360deg); 412 | transform: rotate(360deg); 413 | } 414 | } 415 | @-moz-keyframes clockHand { 416 | from { 417 | -webkit-transform-origin: 50% 100%; 418 | -moz-transform-origin: 50% 100%; 419 | -ms-transform-origin: 50% 100%; 420 | -o-transform-origin: 50% 100%; 421 | transform-origin: 50% 100%; 422 | -webkit-transform: rotate(0deg); 423 | -moz-transform: rotate(0deg); 424 | -ms-transform: rotate(0deg); 425 | -o-transform: rotate(0deg); 426 | transform: rotate(0deg); 427 | } 428 | to { 429 | -webkit-transform-origin: 50% 100%; 430 | -moz-transform-origin: 50% 100%; 431 | -ms-transform-origin: 50% 100%; 432 | -o-transform-origin: 50% 100%; 433 | transform-origin: 50% 100%; 434 | -webkit-transform: rotate(360deg); 435 | -moz-transform: rotate(360deg); 436 | -ms-transform: rotate(360deg); 437 | -o-transform: rotate(360deg); 438 | transform: rotate(360deg); 439 | } 440 | } 441 | @-webkit-keyframes clockHand { 442 | from { 443 | -webkit-transform-origin: 50% 100%; 444 | -moz-transform-origin: 50% 100%; 445 | -ms-transform-origin: 50% 100%; 446 | -o-transform-origin: 50% 100%; 447 | transform-origin: 50% 100%; 448 | -webkit-transform: rotate(0deg); 449 | -moz-transform: rotate(0deg); 450 | -ms-transform: rotate(0deg); 451 | -o-transform: rotate(0deg); 452 | transform: rotate(0deg); 453 | } 454 | to { 455 | -webkit-transform-origin: 50% 100%; 456 | -moz-transform-origin: 50% 100%; 457 | -ms-transform-origin: 50% 100%; 458 | -o-transform-origin: 50% 100%; 459 | transform-origin: 50% 100%; 460 | -webkit-transform: rotate(360deg); 461 | -moz-transform: rotate(360deg); 462 | -ms-transform: rotate(360deg); 463 | -o-transform: rotate(360deg); 464 | transform: rotate(360deg); 465 | } 466 | } 467 | #next { 468 | margin-left: 170px; 469 | margin-top: 8px; 470 | font-size: 14px; 471 | height: 14px; 472 | } 473 | -------------------------------------------------------------------------------- /css/style.less: -------------------------------------------------------------------------------- 1 | @import 'lib'; 2 | 3 | .hn { 4 | clear: both; 5 | display: block; 6 | width: 600px; 7 | margin: auto; 8 | margin-top: 40px; 9 | color: #000 !important; 10 | background-color: #f27800; 11 | padding: 10px; 12 | border-radius: 5px; 13 | text-align: center; 14 | font-size: 13px; 15 | } 16 | 17 | @blue: #5f7ea9; 18 | a, a:visited { 19 | color: @blue; 20 | text-decoration: none; 21 | &:hover { 22 | color: @blue; 23 | text-decoration: underline; 24 | } 25 | } 26 | 27 | body { 28 | background-color: #eee; 29 | section { 30 | clear: both; 31 | margin: auto; 32 | overflow: hidden; 33 | padding-top: 50px; 34 | width: 920px; 35 | h2 { 36 | border-bottom: 1px dotted #CCCCCC; 37 | padding-bottom: 20px; 38 | text-align: center; 39 | } 40 | } 41 | #left { 42 | width: 520px; 43 | float: left; 44 | } 45 | header { 46 | background-color: #fff; 47 | border-bottom: 1px solid #ddd; 48 | padding: 20px 0 20px; 49 | #top { 50 | width: 760px; 51 | margin: auto; 52 | img { 53 | float: left; 54 | margin-right: 40px; 55 | } 56 | h1 { 57 | color: #000; 58 | font-weight: normal; 59 | text-align: left; 60 | font-size: 45px; 61 | margin: 0; 62 | } 63 | p { 64 | font-size: 13px; 65 | color: #666; 66 | text-align: left; 67 | margin: 10px auto 0; 68 | } 69 | } 70 | } 71 | 72 | .label { 73 | text-align: right; 74 | width: 200px; 75 | font-size: 12px; 76 | float: left; 77 | .border-box; 78 | padding: 10px; 79 | color: #555; 80 | clear: both; 81 | strong { 82 | padding-bottom: 5px; 83 | display: block; 84 | font-size: 14px; 85 | color: #000; 86 | } 87 | } 88 | .after { 89 | text-align: left; 90 | width: 20px; 91 | float: left; 92 | .border-box; 93 | padding: 10px; 94 | color: #555; 95 | strong { 96 | display: block; 97 | font-size: 14px; 98 | color: #000; 99 | } 100 | } 101 | .input { 102 | .border-box; 103 | float: left; 104 | width: 300px; 105 | } 106 | .sorter { 107 | .border-box; 108 | clear: both; 109 | padding: 20px; 110 | text-align: center; 111 | #sort, #no { 112 | border: 1px solid darken(@blue, 10%); 113 | .box-shadow(0 1px rgba(255,255,255,0.3) inset); 114 | .border-radius(7px); 115 | .gradient-two-color(lighten(@blue, 10%), @blue); 116 | background-color: @blue; 117 | color: #FFFFFF; 118 | font-size: 23px; 119 | margin-left: 170px; 120 | padding: 10px 40px; 121 | text-shadow: 0 1px 1px #000000; 122 | &:hover { 123 | .gradient-two-color(@blue, darken(@blue, 10%)); 124 | } 125 | &:disabled { 126 | background-color: #888; 127 | border: 1px solid darken(#aaa, 10%); 128 | .gradient-two-color(lighten(#AAA, 10%), #aaa); 129 | } 130 | } 131 | } 132 | .waiting-sadly { 133 | .border-box; 134 | clear: both; 135 | margin-left: 170px; 136 | padding-top: 10px; 137 | .sad-waiter { 138 | position: relative; 139 | width: 128px; 140 | height: 137px; 141 | margin: 0 auto; 142 | background-image: url(../waiting.png); 143 | height: 0; 144 | // -webkit-transition: 0.2s height; 145 | .hour { 146 | display: none; 147 | position: absolute; 148 | bottom: 113px; 149 | right: 22px; 150 | width: 0; 151 | height: 0; 152 | border-left: 1px solid transparent; 153 | border-right: 1px solid transparent; 154 | border-bottom: 15px solid black; 155 | .animation(clockHand 18s linear infinite); 156 | } 157 | .minute { 158 | display: none; 159 | position: absolute; 160 | bottom: 113px; 161 | right: 22px; 162 | width: 0; 163 | height: 0; 164 | border-left: 1px solid transparent; 165 | border-right: 1px solid transparent; 166 | border-bottom: 17px solid black; 167 | .animation(clockHand 1.5s linear infinite); 168 | } 169 | } 170 | } 171 | .textarea { 172 | width: 100%; 173 | .border-box; 174 | border: 1px solid #ddd; 175 | .border-radius(7px); 176 | background-color: #fff; 177 | padding: 10px; 178 | textarea { 179 | border: 0 none; 180 | .border-box; 181 | padding: 0; 182 | width: 100%; 183 | height: 60px; 184 | resize: none; 185 | } 186 | } 187 | textarea.textarea { 188 | height: 80px; 189 | resize: none; 190 | &:disabled { 191 | 192 | background: #f3f3f3; 193 | color: #888; 194 | } 195 | } 196 | 197 | #answer-used { 198 | text-align: right; 199 | border-top: 1px dotted #ddd; 200 | font-size: 12px; 201 | padding-top: 10px; 202 | color: #999; 203 | } 204 | } 205 | 206 | #right { 207 | padding-left: 100px; 208 | .border-box; 209 | width: 400px; 210 | float: left; 211 | strong { 212 | display: block; 213 | font-size: 14px; 214 | color: #000; 215 | } 216 | #logger { 217 | font-size: 12px; 218 | .border-box; 219 | background-color: #FFFFFF; 220 | border: 1px solid #DDDDDD; 221 | .border-radius(5px); 222 | width: 100%; 223 | height: 430px; 224 | overflow: scroll; 225 | -webkit-overflow-scrolling: touch; 226 | padding: 10px 15px 15px; 227 | .log-error { 228 | border-bottom: 1px dotted #ccc; 229 | padding-bottom: 5px; 230 | padding-top: 2px; 231 | padding-left: 0px; 232 | font-size: 11px; 233 | color: #a71010; 234 | } 235 | .log-out { 236 | font-size: 11px; 237 | color: #a71010; 238 | border: 1px solid #ccc; 239 | margin-top: 10px; 240 | padding: 5px; 241 | text-align: center; 242 | background-color: #eee; 243 | padding: 10px; 244 | } 245 | .log-success { 246 | font-size: 11px; 247 | color: green; 248 | border-bottom: 1px dotted #ccc; 249 | padding-bottom: 5px; 250 | padding-top: 2px; 251 | padding-left: 0px; 252 | } 253 | .log-trying { 254 | font-weight: bold; 255 | padding-top: 5px; 256 | } 257 | .oc { 258 | color: #777777; 259 | padding: 170px 0; 260 | text-align: center; 261 | } 262 | } 263 | 264 | } 265 | 266 | #stopper { 267 | padding: 5px; 268 | font-size: 11px; 269 | text-align: center; 270 | &.hide { 271 | visibility: hidden; 272 | } 273 | } 274 | 275 | .done { 276 | display: none; 277 | #no { 278 | @yellow: #f4e26a; 279 | background-color: @yellow; 280 | border: 1px solid darken(@yellow, 20%); 281 | .border-radius(5px); 282 | padding: 10px; 283 | display: block; 284 | font-size: 12px; 285 | margin-top: 10px; 286 | text-align: center; 287 | color: #333; 288 | text-decoration: none; 289 | &:hover { 290 | background-color: darken(@yellow, 10%); 291 | border: 1px solid darken(@yellow, 30%); 292 | } 293 | strong { 294 | font-weight: bold; 295 | color: #000; 296 | } 297 | } 298 | .desc { 299 | border-right: 1px dotted #ccc; 300 | padding-right: 20px; 301 | margin-right: 20px; 302 | } 303 | .tweet, .desc { 304 | margin-top: 20px; 305 | font-size: 12px; 306 | float: left; 307 | width: 129px; 308 | a { 309 | display: block; 310 | padding: 3px 0 3px 10px; 311 | } 312 | strong { 313 | display: block; 314 | } 315 | } 316 | } 317 | 318 | #questions { 319 | border-top: 1px dotted #ccc; 320 | margin-top: 60px; 321 | margin-bottom: 60px; 322 | .question { 323 | width: 300px; 324 | background-repeat: no-repeat; 325 | font-size: 12px; 326 | min-height: 131px; 327 | float: left; 328 | 329 | &.q1 { 330 | background-image: url("../classhole.png"); 331 | padding-left: 120px; 332 | } 333 | &.q2 { 334 | background-image: url("../otherguy.png"); 335 | background-position: right top; 336 | border-left: 1px dotted #CCCCCC; 337 | margin-left: 39px; 338 | padding-left: 39px; 339 | padding-right: 120px; 340 | } 341 | } 342 | } 343 | 344 | #about { 345 | font-size: 12px; 346 | text-align: center; 347 | color: #555; 348 | margin-bottom: 60px; 349 | div { 350 | color: #888; 351 | font-size: 11px; 352 | padding-top: 11px; 353 | } 354 | } 355 | 356 | @keyframes clockHand { 357 | from { 358 | .transform-origin(50% 100%); 359 | .transform(rotate(0deg)); 360 | } 361 | 362 | to { 363 | .transform-origin(50% 100%); 364 | .transform(rotate(360deg)); 365 | } 366 | } 367 | @-moz-keyframes clockHand { 368 | from { 369 | .transform-origin(50% 100%); 370 | .transform(rotate(0deg)); 371 | } 372 | 373 | to { 374 | .transform-origin(50% 100%); 375 | .transform(rotate(360deg)); 376 | } 377 | } 378 | @-webkit-keyframes clockHand { 379 | from { 380 | .transform-origin(50% 100%); 381 | .transform(rotate(0deg)); 382 | } 383 | 384 | to { 385 | .transform-origin(50% 100%); 386 | .transform(rotate(360deg)); 387 | } 388 | } 389 | 390 | #next { 391 | margin-left: 170px; 392 | margin-top: 8px; 393 | font-size: 14px; 394 | height: 14px; 395 | } 396 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkoberger/stacksort/78799845340fb4c4de1a900516a865a1e9ddc7f5/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |21 | In a recent xkcd's alt text, Randall Munroe suggested stacksort, a sort that searches StackOverflow 22 | for sorting functions and runs them until it returns the correct answer. So, I made it. If you like running arbitrary code in your browser, try it out. 23 |
24 |As outlined by xkcd's recent alt text, this site downloads the top answers from StackOverflow for the tags 100 | "javascript" and "sort". It grabs the last code block in the answer (in theory, the "final" example), and tries to determine which function should be 101 | called. It proceeds to eval the code from StackOverflow, with the inputted data as the first parameter for the function. 102 |
103 |If it returns a wrongly-sorted list (or you just want to keep playing), a link to "Try the next answer" will appear under the result.
104 |You can view the code on GitHub. If you see any bugs (or just want to berate me), please file an issue.
105 |Uh… it evals both user input and random code, unchecked, from an external site. This is what security-minded folks would refer to as Very Bad. 109 |
110 |111 | That being said, for 112 | what it is, it should be relatively harmless. The site will only fetch accepted answers, and it only uses answers that were posted before the xkcd was 113 | released (meaning that if someone posted malicious code now, it wouldn't matter). It also searches for potentially-malicious code (like the word 114 | "cookie"), and skips those. It's definitely not the safest thing, however at most it would probably just crash your browser. 115 |
116 |t |