├── .gitignore ├── .sass-cache ├── 2273c6cc57c0c5f712c2cf4999a0892f11d32f1e │ ├── _base.scssc │ ├── _debug.scssc │ ├── _queries.scssc │ ├── _styles.scssc │ ├── _type.scssc │ ├── _variables.scssc │ └── mnml.scssc └── 7382c4347770fe8da02603f2bf63c2726e1ae4b8 │ └── _normalize.scssc ├── README.md ├── gulpfile.js ├── package.json └── source ├── CNAME ├── data └── tracks.json ├── favicon.ico ├── index.html ├── scripts └── main.js ├── styles ├── _base.scss ├── _debug.scss ├── _queries.scss ├── _styles.scss ├── _type.scss ├── _variables.scss ├── lib │ ├── _normalize.scss │ └── gh-fork-ribbon.css └── mnml.scss └── templates └── block.hbs /.gitignore: -------------------------------------------------------------------------------- 1 | # Assisted by gitignore.io 2 | 3 | ### SublimeText ### 4 | *.tmlanguage.cache 5 | *.tmPreferences.cache 6 | *.stTheme.cache 7 | *.sublime-workspace 8 | *.sublime-project 9 | 10 | ### Build & Modules ### 11 | node_modules/ 12 | bower_components 13 | *.log 14 | build/ 15 | -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_base.scssc: -------------------------------------------------------------------------------- 1 | 3.4.21 (Selective Steve) 2 | 8a2c483295bfd4a75df96a011e15803af94a2b34 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode: 4 | @rule[I"html, body:ET:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Element : 5 | @nameI" html; T:@namespace0: 6 | @linei:@filename0: @subject0: @sourceso:Set: 7 | @hash{:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i 8 | : 9 | @file0:@importer0;i;0;io; ; [o; ; [o; ;I" body; T;0;i;0;0;o;;{;o; ;o;;i;i ;o;;i;i;0;0;i;0;i;i;0:@selector_source_rangeo; ;o;;i;i;o;;i;i;I"source/styles/_base.scss; T;o: Sass::Importers::Filesystem: 10 | @rootI"&/Users/HAL5/Development/js-tracks; T:@real_rootI"&/Users/HAL5/Development/js-tracks; T:@same_name_warningso;;{: 11 | @tabsi;[o:Sass::Tree::PropNode;[I" height; T: @valueo: Sass::Script::Tree::Literal;'o: Sass::Script::Value::String ;'I" 100%; T: 12 | @type:identifier:"@deprecated_interp_equivalent0: @options{;i;o; ;o;;i;i;o;;i;i;@%;@&;%i:@prop_syntax:new;[;i;o; ;o;;i;i;o;;i;i;@%;@&:@name_source_rangeo; ;@8;o;;i;i;@%;@&:@value_source_rangeo; ;o;;i;i;@9;@%;@&;-@2;i;o; ;@#;o;;i;i;@%;@&:@has_childrenT;-@2:@templateI""html, body { height: 100%; } 13 | ; T;i;o; ;o;;i;i;o;;i;i;@%;@&;2T;-@2 -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_debug.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_debug.scssc -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_queries.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_queries.scssc -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_styles.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_styles.scssc -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_type.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_type.scssc -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/_variables.scssc -------------------------------------------------------------------------------- /.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/mnml.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/2273c6cc57c0c5f712c2cf4999a0892f11d32f1e/mnml.scssc -------------------------------------------------------------------------------- /.sass-cache/7382c4347770fe8da02603f2bf63c2726e1ae4b8/_normalize.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/.sass-cache/7382c4347770fe8da02603f2bf63c2726e1ae4b8/_normalize.scssc -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | js-tracks 2 | ========= 3 | 4 | ![js-tracks](http://i.imgur.com/z52BCNe.png) 5 | 6 | ### Contributing 7 | Found a good javascript learning track? You're welcome to add it to [tracks.json](https://github.com/montecruiseto/js-tracks/blob/master/source/data/tracks.json) and open a PR. 8 | 9 | ### Development 10 | 11 | - Run `npm install` to install the project 12 | - Run `gulp` to build & watch 13 | - Done 14 | 15 | ### License 16 | 17 | js-tracks is licensed under the [MIT license](http://opensource.org/licenses/MIT). 18 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Define our dependencies. 3 | */ 4 | 5 | var gulp = require('gulp'), 6 | browserSync = require('browser-sync'), 7 | del = require('del'), 8 | sass = require('gulp-ruby-sass'), 9 | handlebars = require('gulp-handlebars'), 10 | defineModule = require('gulp-define-module'), 11 | declare = require('gulp-declare'), 12 | deploy = require('gulp-gh-pages'), 13 | runSequence = require('run-sequence'); 14 | 15 | 16 | /* 17 | * Task to delete our 'build' folder before watching or building 18 | */ 19 | 20 | gulp.task('clean', function(cb) { 21 | del(['build'], cb); 22 | }); 23 | 24 | 25 | /* 26 | * Task to compile our handlebars into javascript 27 | */ 28 | 29 | 30 | gulp.task('hbs', function() { 31 | return gulp.src('source/templates/*.hbs') 32 | .pipe(handlebars()) 33 | .pipe(defineModule('plain')) 34 | .pipe(declare({ 35 | namespace: 'template' 36 | })) 37 | .pipe(gulp.dest('build/js')); 38 | }); 39 | 40 | 41 | /* 42 | * Task to compile our Sass files 43 | */ 44 | 45 | gulp.task('sass', function() { 46 | return sass('source/styles/mnml.scss') 47 | .on('error', function(err) { 48 | console.error('Error!', err.message); 49 | }) 50 | .pipe(gulp.dest('build/css')) 51 | .pipe(browserSync.reload({ 52 | stream: true 53 | })); 54 | }); 55 | 56 | /* 57 | * Task to build our Javascript 58 | */ 59 | 60 | gulp.task('js', function() { 61 | gulp.src('source/scripts/*.js') 62 | .pipe(gulp.dest('build/js')); 63 | }); 64 | 65 | /* 66 | * Task to simply copy our static assets to the 'build' folder 67 | */ 68 | //**************** TODO - concatenate github fork css to main stylesheet 69 | 70 | gulp.task('static', function() { 71 | gulp.src(['source/index.html', 'source/CNAME', 'source/*ico' ]) 72 | .pipe(gulp.dest('build')); 73 | gulp.src(['source/styles/lib/*.css']) 74 | .pipe(gulp.dest('build/css')); 75 | gulp.src('source/data/tracks.json') 76 | .pipe(gulp.dest('build/data')); 77 | }); 78 | 79 | 80 | /* 81 | * Task to build our project to the 'build' folder 82 | */ 83 | 84 | gulp.task('build', ['clean'], function(cb) { 85 | runSequence(['sass', 'static', 'hbs', 'js'], cb); 86 | }); 87 | 88 | 89 | /* 90 | * The default task (run 'gulp') 91 | */ 92 | 93 | 94 | gulp.task('default', ['watch'], function() {}); 95 | 96 | /* 97 | * Define our browserSync configuration. 98 | */ 99 | 100 | var config = { 101 | server: { 102 | baseDir: "./build", 103 | }, 104 | browser: "google chrome" 105 | }; 106 | 107 | 108 | /* 109 | * 1 - Task to start the server with our configuration settings 110 | * 2 - Watch all our assets & reload 111 | */ 112 | 113 | gulp.task('watch', ['build'], function() { 114 | browserSync(config); 115 | gulp.watch("source/styles/**/*.scss", ['sass']); 116 | gulp.watch("source/index.html", ['static', 'bs-reload']); 117 | gulp.watch("source/scripts/main.js", ['js', 'bs-reload']); 118 | gulp.watch("source/templates/*", ['hbs', 'bs-reload']); 119 | }); 120 | 121 | 122 | /* 123 | * Task to reload all our browsers 124 | */ 125 | 126 | gulp.task('bs-reload', function() { 127 | browserSync.reload(); 128 | }); 129 | 130 | 131 | /* 132 | * Run a deploy to github pages (run 'gulp deploy') (DEPRECATED for SURGE DEPLOY) 133 | */ 134 | 135 | // gulp.task('deploy', function() { 136 | // return gulp.src(['build/**/*']) 137 | // .pipe(deploy()); 138 | // }); 139 | 140 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-tracks", 3 | "description": "A collection of javascript learning tracks", 4 | "version": "0.0.1", 5 | "author": "montecruiseto", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "browser-sync": "^1.8.1", 9 | "del": "^1.1.1", 10 | "gulp": "^3.8.10", 11 | "gulp-assetpaths": "^0.1.1", 12 | "gulp-declare": "^0.3.0", 13 | "gulp-define-module": "^0.1.1", 14 | "gulp-gh-pages": "^0.5.0", 15 | "gulp-handlebars": "^3.0.1", 16 | "gulp-ruby-sass": "^1.0.0-alpha", 17 | "run-sequence": "^1.0.2" 18 | }, 19 | "keywords": [], 20 | "repository": "https://github.com/montecruiseto/js-tracks", 21 | "licenses": [ 22 | {} 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /source/CNAME: -------------------------------------------------------------------------------- 1 | js-tracks.surge.sh 2 | -------------------------------------------------------------------------------- /source/data/tracks.json: -------------------------------------------------------------------------------- 1 | { 2 | "tracks": [{ 3 | "title": "Bango", 4 | "trackUrl": "http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript", 5 | "author": "Rey Bango", 6 | "authorUrl": "https://twitter.com/reybango" 7 | }, { 8 | "title": "IRC", 9 | "trackUrl": "http://learn-javascript.github.io", 10 | "author": "#learnjavascript@irc", 11 | "authorUrl": "http://webchat.freenode.net/?channels=learnjavascript" 12 | }, { 13 | "title": "Addy", 14 | "trackUrl": "https://plus.google.com/+AddyOsmani/posts/H3onog42Msj", 15 | "author": "Addy Osmani", 16 | "authorUrl": "https://twitter.com/addyosmani" 17 | }, { 18 | "title": "FreeCodeCamp", 19 | "trackUrl": "http://www.freecodecamp.com/map", 20 | "author": "freeCodeCamp", 21 | "authorUrl": "https://twitter.com/freecodecamp" 22 | }, { 23 | "title": "NodeSchool", 24 | "trackUrl": "http://nodeschool.io/index.html#workshopper-list", 25 | "author": "NodeSchool", 26 | "authorUrl": "https://twitter.com/nodeschool" 27 | }, { 28 | "title": "Silfverstrom", 29 | "trackUrl": "http://pointnull.com/learn-javascript", 30 | "author": "Niklas Silfverström", 31 | "authorUrl": "https://twitter.com/silfverstrom" 32 | }, { 33 | "title": "Bento", 34 | "trackUrl": "https://www.bento.io/javascript", 35 | "author": "Jon Chan", 36 | "authorUrl": "https://twitter.com/jonhmchan" 37 | }, { 38 | "title": "tuts+", 39 | "trackUrl": "http://code.tutsplus.com/tutorials/the-best-way-to-learn-javascript--net-21954", 40 | "author": "Andrew Burgess", 41 | "authorUrl": "https://twitter.com/andrew8088" 42 | }, { 43 | "title": "Lindley", 44 | "trackUrl": "https://speakerdeck.com/codylindley/learn-javascript-the-hard-way", 45 | "author": "Cody Lindley", 46 | "authorUrl": "https://twitter.com/codylindley" 47 | }, { 48 | "title": "Sivers", 49 | "trackUrl": "http://sivers.org/learn-js", 50 | "author": "Derek Sivers", 51 | "authorUrl": "https://twitter.com/sivers" 52 | }, { 53 | "title": "Bovell", 54 | "trackUrl": "http://javascriptissexy.com/how-to-learn-javascript-properly/#What_You_will_Learn", 55 | "author": "Richard Bovell", 56 | "authorUrl": "http://javascriptissexy.com/about" 57 | }, { 58 | "title": "Upcase", 59 | "trackUrl": "https://upcase.com/javascript", 60 | "author": "Thoughtbot", 61 | "authorUrl": "https://twitter.com/thoughtbot" 62 | }, { 63 | "title": "Elliott", 64 | "trackUrl": "https://medium.com/javascript-scene/learn-javascript-b631a4af11f2", 65 | "author": "Eric Elliott", 66 | "authorUrl": "https://twitter.com/_ericelliott" 67 | }, { 68 | "title": "Gonçalves", 69 | "trackUrl": "http://jugoncalv.es/blog/javascript/how-to-start-with-javascript/", 70 | "author": "Ju Gonçalves", 71 | "authorUrl": "https://twitter.com/junspector" 72 | }, { 73 | "title": "Bahmutov", 74 | "trackUrl": "http://glebbahmutov.com/blog/javascript-books/", 75 | "author": "Gleb Bahmutov", 76 | "authorUrl": "https://twitter.com/bahmutov", 77 | "tag": "new" 78 | }] 79 | } 80 | -------------------------------------------------------------------------------- /source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/montecruiseto/js-tracks/da456a652ac7472d35242dc401cb5f2d5c420bf9/source/favicon.ico -------------------------------------------------------------------------------- /source/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Javascript Learning Tracks 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | Fork me on GitHub 34 |
35 |
36 | 37 |
38 |
39 | 40 | 41 |
Javascript Learning Tracks
42 |

Want to learn Javascript and not quite sure where to begin? Get inspired by these opinionated learning tracks.

43 | 44 |
► by @montecruiseto
45 | 46 |
► pro tip read a book
47 | 48 |
► style: mnml & sublime
49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | 58 | 59 | 68 | 69 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /source/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Fetch our data, 3 | * pass it to our pre-compiled template, 4 | * attach the result to our main container 5 | */ 6 | 7 | $.getJSON('data/tracks.json', function(data) { 8 | // Give it a (weak) random shuffle before printing 9 | data.tracks.sort(function() { 10 | return Math.random() - 0.5; 11 | }); 12 | $("#main").html(template.block(data)); 13 | }); 14 | 15 | 16 | /* 17 | * Generate & inject margin line numbers for every track 18 | */ 19 | 20 | Handlebars.registerHelper('liner', function(options) { 21 | 22 | // Set a variable to hold our list items 23 | var lineList = ""; 24 | // Configure the number of lines per track div 25 | var n = 4; 26 | // Get the index number for the current track 27 | var index = options.data.index; 28 | // Make the list 29 | for (var i = 1; i <= n; i++) { 30 | // Use the index to capture the right line numbers in a list of size n 31 | lineList += "
  • " + (n * index + i) + "
    • "; 32 | } 33 | // Print the list 34 | return lineList; 35 | }); 36 | -------------------------------------------------------------------------------- /source/styles/_base.scss: -------------------------------------------------------------------------------- 1 | html, body { height: 100%; } 2 | -------------------------------------------------------------------------------- /source/styles/_debug.scss: -------------------------------------------------------------------------------- 1 | $layout-debug: false; 2 | 3 | @if $layout-debug == true { 4 | 5 | body { outline: 1px solid #2980B9!important; } 6 | article { outline: 1px solid #3498DB!important; } 7 | nav { outline: 1px solid #0088C3!important; } 8 | aside { outline: 1px solid #33A0CE!important; } 9 | section { outline: 1px solid #66B8DA!important; } 10 | header { outline: 1px solid #99CFE7!important; } 11 | footer { outline: 1px solid #CCE7F3!important; } 12 | h1 { outline: 1px solid #162544!important; } 13 | h2 { outline: 1px solid #314E6E!important; } 14 | h3 { outline: 1px solid #3E5E85!important; } 15 | h4 { outline: 1px solid #449BAF!important; } 16 | h5 { outline: 1px solid #C7D1CB!important; } 17 | h6 { outline: 1px solid #4371D0!important; } 18 | main { outline: 1px solid #2F4F90!important; } 19 | address { outline: 1px solid #1A2C51!important; } 20 | div { outline: 1px solid #036CDB!important; } 21 | 22 | 23 | p { outline: 1px solid #AC050B!important; } 24 | hr { outline: 1px solid #FF063F!important; } 25 | pre { outline: 1px solid #850440!important; } 26 | blockquote { outline: 1px solid #F1B8E7!important; } 27 | ol { outline: 1px solid #FF050C!important; } 28 | ul { outline: 1px solid #D90416!important; } 29 | li { outline: 1px solid #D90416!important; } 30 | dl { outline: 1px solid #FD3427!important; } 31 | dt { outline: 1px solid #FF0043!important; } 32 | dd { outline: 1px solid #E80174!important; } 33 | figure { outline: 1px solid #FF00BB!important; } 34 | figcaption { outline: 1px solid #BF0032!important; } 35 | 36 | 37 | 38 | table { outline: 1px solid #00CC99!important; } 39 | caption { outline: 1px solid #37FFC4!important; } 40 | thead { outline: 1px solid #98DACA!important; } 41 | tbody { outline: 1px solid #64A7A0!important; } 42 | tfoot { outline: 1px solid #22746B!important; } 43 | tr { outline: 1px solid #86C0B2!important; } 44 | th { outline: 1px solid #A1E7D6!important; } 45 | td { outline: 1px solid #3F5A54!important; } 46 | col { outline: 1px solid #6C9A8F!important; } 47 | colgroup { outline: 1px solid #6C9A9D!important; } 48 | 49 | 50 | button { outline: 1px solid #DA8301!important; } 51 | datalist { outline: 1px solid #C06000!important; } 52 | fieldset { outline: 1px solid #D95100!important; } 53 | form { outline: 1px solid #D23600!important; } 54 | input { outline: 1px solid #FCA600!important; } 55 | keygen { outline: 1px solid #B31E00!important; } 56 | label { outline: 1px solid #EE8900!important; } 57 | legend { outline: 1px solid #DE6D00!important; } 58 | meter { outline: 1px solid #E8630C!important; } 59 | optgroup { outline: 1px solid #B33600!important; } 60 | option { outline: 1px solid #FF8A00!important; } 61 | output { outline: 1px solid #FF9619!important; } 62 | progress { outline: 1px solid #E57C00!important; } 63 | select { outline: 1px solid #E26E0F!important; } 64 | textarea { outline: 1px solid #CC5400!important; } 65 | 66 | 67 | 68 | details { outline: 1px solid #33848F!important; } 69 | summary { outline: 1px solid #60A1A6!important; } 70 | command { outline: 1px solid #438DA1!important; } 71 | menu { outline: 1px solid #449DA6!important; } 72 | 73 | 74 | 75 | del { outline: 1px solid #BF0000!important; } 76 | ins { outline: 1px solid #400000!important; } 77 | 78 | 79 | 80 | img { outline: 1px solid #22746B!important; } 81 | iframe { outline: 1px solid #64A7A0!important; } 82 | embed { outline: 1px solid #98DACA!important; } 83 | object { outline: 1px solid #00CC99!important; } 84 | param { outline: 1px solid #37FFC4!important; } 85 | video { outline: 1px solid #6EE866!important; } 86 | audio { outline: 1px solid #027353!important; } 87 | source { outline: 1px solid #012426!important; } 88 | canvas { outline: 1px solid #A2F570!important; } 89 | track { outline: 1px solid #59A600!important; } 90 | map { outline: 1px solid #7BE500!important; } 91 | area { outline: 1px solid #305900!important; } 92 | 93 | 94 | 95 | a { outline: 1px solid #FF62AB!important; } 96 | em { outline: 1px solid #800B41!important; } 97 | strong { outline: 1px solid #FF1583!important; } 98 | i { outline: 1px solid #803156!important; } 99 | b { outline: 1px solid #CC1169!important; } 100 | u { outline: 1px solid #FF0430!important; } 101 | s { outline: 1px solid #F805E3!important; } 102 | small { outline: 1px solid #D107B2!important; } 103 | abbr { outline: 1px solid #4A0263!important; } 104 | q { outline: 1px solid #240018!important; } 105 | cite { outline: 1px solid #64003C!important; } 106 | dfn { outline: 1px solid #B4005A!important; } 107 | sub { outline: 1px solid #DBA0C8!important; } 108 | sup { outline: 1px solid #CC0256!important; } 109 | time { outline: 1px solid #D6606D!important; } 110 | code { outline: 1px solid #E04251!important; } 111 | kbd { outline: 1px solid #5E001F!important; } 112 | samp { outline: 1px solid #9C0033!important; } 113 | var { outline: 1px solid #D90047!important; } 114 | mark { outline: 1px solid #FF0053!important; } 115 | bdi { outline: 1px solid #BF3668!important; } 116 | bdo { outline: 1px solid #6F1400!important; } 117 | ruby { outline: 1px solid #FF7B93!important; } 118 | rt { outline: 1px solid #FF2F54!important; } 119 | rp { outline: 1px solid #803E49!important; } 120 | span { outline: 1px solid #CC2643!important; } 121 | br { outline: 1px solid #DB687D!important; } 122 | wbr { outline: 1px solid #DB175B!important; } 123 | 124 | } 125 | -------------------------------------------------------------------------------- /source/styles/_queries.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | QUERIES 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | Mixin for mobile-first media queries. 8 | Two breakpoints are provided. Extend or modify if needed. 9 | 10 | Use like this: 11 | 12 | @include break(medium) { 13 | .class-name { color: red; } 14 | } 15 | 16 | 17 | */ 18 | 19 | @mixin break($point) { 20 | @if $point == medium-and-large { 21 | @media screen and (min-width:50em) { 22 | @content; 23 | } 24 | } 25 | @else if $point == medium { 26 | @media screen and (min-width: 50em) and (max-width:58em) { 27 | @content; 28 | } 29 | } 30 | @else if $point == large { 31 | @media screen and (min-width: 58em) { 32 | @content; 33 | } 34 | } 35 | @else if $point == phablets { 36 | @media screen and (min-width: 40em) and (max-width:50em) { 37 | @content; 38 | } 39 | } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /source/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Site styles 3 | ========================================================================== */ 4 | 5 | .header { 6 | color: #000000; 7 | background-color: #E6E6E6; 8 | } 9 | .inner { 10 | padding: 90px 35px 35px 25px; 11 | a { 12 | color: $highlight; 13 | text-decoration: none; 14 | } 15 | .ps { 16 | margin-top: 2px; 17 | a { 18 | text-decoration: none; 19 | } 20 | } 21 | .credits { 22 | margin-top: 20px; 23 | } 24 | .arrow { 25 | color: #868686; 26 | } 27 | } 28 | h6.title { 29 | text-transform: uppercase; 30 | color: #828292; 31 | text-shadow: 0px 2px 0px #FAFAFA; 32 | margin: 0 0 5px 0; 33 | } 34 | .canvas { 35 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 36 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 37 | display: -ms-flexbox; /* TWEENER - IE 10 */ 38 | display: -webkit-flex; /* NEW - Chrome */ 39 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 40 | -webkit-flex-direction: row; 41 | flex-direction: row; 42 | background-color: $black; 43 | color: $green; 44 | } 45 | .liner { 46 | margin: 0 0; 47 | min-width: 24px; 48 | padding-left: 0em; 49 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 50 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 51 | display: -ms-flexbox; /* TWEENER - IE 10 */ 52 | display: -webkit-flex; /* NEW - Chrome */ 53 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 54 | -webkit-flex-direction: column; 55 | flex-direction: column; 56 | > li { 57 | -webkit-align-self: flex-end; 58 | align-self: flex-end; 59 | list-style-type: none; 60 | line-height: 18px; 61 | color: $liner; 62 | } 63 | } 64 | .wrapper { 65 | width: 100%; 66 | margin: 0 0 0 0; 67 | padding: 0 0; 68 | } 69 | .track { 70 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 71 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 72 | display: -ms-flexbox; /* TWEENER - IE 10 */ 73 | display: -webkit-flex; /* NEW - Chrome */ 74 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 75 | -webkit-flex-direction: row; 76 | flex-direction: row; 77 | border-bottom: 1px dotted $highlight; 78 | transition: all .12s ease-in; 79 | list-style-type: none; 80 | &:hover { 81 | background: $highlight; 82 | } 83 | } 84 | .content { 85 | padding: 18px 0 18px 25px; 86 | line-height: 18px; 87 | width: 85%; 88 | transition: all .15s ease-in; 89 | &:hover { 90 | padding-left: 38px; 91 | } 92 | } 93 | .keyword { 94 | color: $blue; 95 | display: inline; 96 | } 97 | .bracket { 98 | color: $white; 99 | display: inline; 100 | float: left; 101 | transition: all .12s ease-in; 102 | } 103 | .line2 { 104 | margin-left: 25px; 105 | &:hover>.bracket { 106 | padding-left: 0.04em; 107 | padding-right: 0.04em; 108 | } 109 | &:hover>.author { 110 | color: lighten( $green, 8%); 111 | } 112 | &:hover>.author>.authorlink { 113 | color: lighten( $yellow, 8%); 114 | } 115 | } 116 | .tracktitle { 117 | color: $pink; 118 | transition: all .14s ease-in; 119 | &:hover { 120 | color: lighten( $pink, 8%) 121 | } 122 | } 123 | .new { 124 | color: $comment; 125 | display: inline; 126 | } 127 | .author { 128 | display: inline; 129 | float: left; 130 | margin: 0 1px 0; 131 | } 132 | .authorlink { 133 | color: $yellow; 134 | transition: all .14s ease-in; 135 | } 136 | a { 137 | text-decoration: none; 138 | } 139 | p { 140 | margin: 0 0; 141 | } 142 | 143 | /* Medium and Up - Targets everything larger than mobile & phablets 144 | ========================================================================== */ 145 | 146 | @include break(medium-and-large) { 147 | .content { 148 | padding: 28px 0 28px 25px; 149 | line-height: 28px; 150 | &:hover { 151 | padding-left: 38px; 152 | } 153 | } 154 | .liner { 155 | min-width: 24px; 156 | padding-left: 0.4em; 157 | > li { 158 | line-height: 28px; 159 | } 160 | } 161 | .track { 162 | padding-left: 10px; 163 | } 164 | } 165 | 166 | /* Phablets - only targets 1st breakpoint. Styles 167 | ========================================================================== */ 168 | 169 | @include break(phablets) { 170 | .content { 171 | padding: 26px 0 26px 25px; 172 | line-height: 26px; 173 | &:hover { 174 | padding-left: 38px; 175 | } 176 | } 177 | .liner { 178 | min-width: 24px; 179 | padding-left: 0.3em; 180 | > li { 181 | line-height: 26px; 182 | } 183 | } 184 | .track { 185 | padding-left: 7px; 186 | } 187 | } 188 | 189 | /* Medium - only targets 2nd breakpoint. Styles 190 | ========================================================================== */ 191 | 192 | @include break(medium) {} 193 | 194 | /* Large - only targets 3rd breakpoint. 195 | ========================================================================== */ 196 | 197 | @include break(large) { 198 | .header { 199 | position: fixed; 200 | top: 0; 201 | left: 0; 202 | bottom: 0; 203 | width: 25%; 204 | margin-bottom: 0; 205 | } 206 | .inner { 207 | position: absolute; 208 | bottom: 0; 209 | right: 0; 210 | left: 0; 211 | padding: 40px; 212 | } 213 | .canvas { 214 | width: 75%; 215 | margin-left: 25%; 216 | .block { 217 | padding-left: 30px; 218 | } 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /source/styles/_type.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Type ========================================================================== */ 3 | 4 | header { 5 | font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; 6 | } 7 | .canvas { 8 | font-family: 'Inconsolata'; 9 | } 10 | 11 | /* Scale ========================================================================= */ 12 | .canvas { 13 | font-size: 14px; 14 | } 15 | 16 | h1, .f1 { 17 | font-size: 64px; 18 | } 19 | h2, .f2 { 20 | font-size: 48px; 21 | } 22 | h3, .f3 { 23 | font-size: 32px; 24 | } 25 | h4, .f4 { 26 | font-size: 24px; 27 | } 28 | h5, .f5 { 29 | font-size: 20px; 30 | } 31 | h6, .f6 { 32 | font-size: 16px; 33 | } 34 | small, .small { 35 | font-size: 12px; 36 | } 37 | .header { 38 | p { 39 | font-size: 15px; 40 | } 41 | } 42 | .credits, .ps { 43 | font-size: 12px; 44 | } 45 | 46 | 47 | /* Medium and Up - Targets everything larger than mobile & phablets 48 | ========================================================================== */ 49 | 50 | @include break(medium-and-large) { 51 | .canvas { 52 | font-size: 24px; 53 | } 54 | .title { 55 | font-size: 17px; 56 | } 57 | } 58 | 59 | /* Phablets - only targets 1st breakpoint. Styles 60 | ========================================================================== */ 61 | 62 | @include break(phablets) { 63 | .canvas { 64 | font-size: 22px; 65 | } 66 | } 67 | 68 | /* Medium - only targets 2nd breakpoint. Styles 69 | ========================================================================== */ 70 | 71 | @include break(medium) {} 72 | 73 | /* Large - only targets 3rd breakpoint. 74 | ========================================================================== */ 75 | 76 | -------------------------------------------------------------------------------- /source/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | VARIABLES 3 | ========================================================================== */ 4 | 5 | $white: #F8F8EA; 6 | $black: #272822; 7 | $pink : #F92772; 8 | $blue : #5AD6EF; 9 | $green: #A6E22A; 10 | $yellow: #E6DB6F; 11 | 12 | $highlight: #39382E; 13 | $liner: #8F9084; 14 | $comment: #73715E; 15 | -------------------------------------------------------------------------------- /source/styles/lib/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * Address `[hidden]` styling not present in IE 8/9/10. 51 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 52 | */ 53 | 54 | [hidden], 55 | template { 56 | display: none; 57 | } 58 | 59 | /* Links 60 | ========================================================================== */ 61 | 62 | /** 63 | * Remove the gray background color from active links in IE 10. 64 | */ 65 | 66 | a { 67 | background-color: transparent; 68 | } 69 | 70 | /** 71 | * Improve readability when focused and also mouse hovered in all browsers. 72 | */ 73 | 74 | a:active, 75 | a:hover { 76 | outline: 0; 77 | } 78 | 79 | /* Text-level semantics 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 84 | */ 85 | 86 | abbr[title] { 87 | border-bottom: 1px dotted; 88 | } 89 | 90 | /** 91 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 92 | */ 93 | 94 | b, 95 | strong { 96 | font-weight: bold; 97 | } 98 | 99 | /** 100 | * Address styling not present in Safari and Chrome. 101 | */ 102 | 103 | dfn { 104 | font-style: italic; 105 | } 106 | 107 | /** 108 | * Address variable `h1` font-size and margin within `section` and `article` 109 | * contexts in Firefox 4+, Safari, and Chrome. 110 | */ 111 | 112 | h1 { 113 | font-size: 2em; 114 | margin: 0.67em 0; 115 | } 116 | 117 | /** 118 | * Address styling not present in IE 8/9. 119 | */ 120 | 121 | mark { 122 | background: #ff0; 123 | color: #000; 124 | } 125 | 126 | /** 127 | * Address inconsistent and variable font size in all browsers. 128 | */ 129 | 130 | small { 131 | font-size: 80%; 132 | } 133 | 134 | /** 135 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 136 | */ 137 | 138 | sub, 139 | sup { 140 | font-size: 75%; 141 | line-height: 0; 142 | position: relative; 143 | vertical-align: baseline; 144 | } 145 | 146 | sup { 147 | top: -0.5em; 148 | } 149 | 150 | sub { 151 | bottom: -0.25em; 152 | } 153 | 154 | /* Embedded content 155 | ========================================================================== */ 156 | 157 | /** 158 | * Remove border when inside `a` element in IE 8/9/10. 159 | */ 160 | 161 | img { 162 | border: 0; 163 | } 164 | 165 | /** 166 | * Correct overflow not hidden in IE 9/10/11. 167 | */ 168 | 169 | svg:not(:root) { 170 | overflow: hidden; 171 | } 172 | 173 | -------------------------------------------------------------------------------- /source/styles/lib/gh-fork-ribbon.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License 3 | * https://github.com/simonwhitaker/github-fork-ribbon-css 4 | */ 5 | 6 | /* Left will inherit from right (so we don't need to duplicate code) */ 7 | .github-fork-ribbon { 8 | /* The right and left classes determine the side we attach our banner to */ 9 | position: absolute; 10 | 11 | /* Add a bit of padding to give some substance outside the "stitching" */ 12 | padding: 2px 0; 13 | 14 | /* Set the base colour */ 15 | background-color: #a00; 16 | 17 | /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */ 18 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15))); 19 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 20 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 21 | background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 22 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 23 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 24 | 25 | /* Add a drop shadow */ 26 | -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 27 | -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 28 | box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 29 | 30 | /* Set the font */ 31 | font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif; 32 | 33 | z-index: 9999; 34 | pointer-events: auto; 35 | } 36 | 37 | .github-fork-ribbon a, 38 | .github-fork-ribbon a:hover { 39 | /* Set the text properties */ 40 | color: #fff; 41 | text-decoration: none; 42 | text-shadow: 0 -1px rgba(0, 0, 0, 0.5); 43 | text-align: center; 44 | 45 | /* Set the geometry. If you fiddle with these you'll also need 46 | to tweak the top and right values in .github-fork-ribbon. */ 47 | width: 200px; 48 | line-height: 20px; 49 | 50 | /* Set the layout properties */ 51 | display: inline-block; 52 | padding: 2px 0; 53 | 54 | /* Add "stitching" effect */ 55 | border-width: 1px 0; 56 | border-style: dotted; 57 | border-color: #fff; 58 | border-color: rgba(255, 255, 255, 0.7); 59 | } 60 | 61 | .github-fork-ribbon-wrapper { 62 | width: 150px; 63 | height: 150px; 64 | position: absolute; 65 | overflow: hidden; 66 | top: 0; 67 | z-index: 9999; 68 | pointer-events: none; 69 | } 70 | 71 | .github-fork-ribbon-wrapper.fixed { 72 | position: fixed; 73 | } 74 | 75 | .github-fork-ribbon-wrapper.left { 76 | left: 0; 77 | } 78 | 79 | .github-fork-ribbon-wrapper.right { 80 | right: 0; 81 | } 82 | 83 | .github-fork-ribbon-wrapper.left-bottom { 84 | position: fixed; 85 | top: inherit; 86 | bottom: 0; 87 | left: 0; 88 | } 89 | 90 | .github-fork-ribbon-wrapper.right-bottom { 91 | position: fixed; 92 | top: inherit; 93 | bottom: 0; 94 | right: 0; 95 | } 96 | 97 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 98 | top: 42px; 99 | right: -43px; 100 | 101 | -webkit-transform: rotate(45deg); 102 | -moz-transform: rotate(45deg); 103 | -ms-transform: rotate(45deg); 104 | -o-transform: rotate(45deg); 105 | transform: rotate(45deg); 106 | } 107 | 108 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 109 | top: 42px; 110 | left: -43px; 111 | 112 | -webkit-transform: rotate(-45deg); 113 | -moz-transform: rotate(-45deg); 114 | -ms-transform: rotate(-45deg); 115 | -o-transform: rotate(-45deg); 116 | transform: rotate(-45deg); 117 | } 118 | 119 | 120 | .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon { 121 | top: 80px; 122 | left: -43px; 123 | 124 | -webkit-transform: rotate(45deg); 125 | -moz-transform: rotate(45deg); 126 | -ms-transform: rotate(45deg); 127 | -o-transform: rotate(45deg); 128 | transform: rotate(45deg); 129 | } 130 | 131 | .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon { 132 | top: 80px; 133 | right: -43px; 134 | 135 | -webkit-transform: rotate(-45deg); 136 | -moz-transform: rotate(-45deg); 137 | -ms-transform: rotate(-45deg); 138 | -o-transform: rotate(-45deg); 139 | transform: rotate(-45deg); 140 | } 141 | -------------------------------------------------------------------------------- /source/styles/mnml.scss: -------------------------------------------------------------------------------- 1 | @import "lib/normalize"; 2 | @import "debug"; 3 | 4 | /* 5 | MNML by @mrmrs_ 6 | */ 7 | 8 | @import "variables"; 9 | @import "queries"; 10 | 11 | @import "base"; 12 | @import "type"; 13 | 14 | // Add your custom styles to this file 15 | @import "styles"; 16 | 17 | -------------------------------------------------------------------------------- /source/templates/block.hbs: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | 26 | --------------------------------------------------------------------------------