diff --git a/assets/less/components/nav.less b/assets/less/components/nav.less new file mode 100644 index 00000000..bec44a0b --- /dev/null +++ b/assets/less/components/nav.less @@ -0,0 +1,19 @@ +.nav-item { + .black-70; + .dib; + .f6; + .link; + .ml3; + .pv3; + + &:first-child { + .ml0; + } +} + +.nav-item--active { + .b--blue; + .bb; + .black; + .bw1; +} diff --git a/assets/less/components/post.less b/assets/less/components/post.less new file mode 100644 index 00000000..3430e2c7 --- /dev/null +++ b/assets/less/components/post.less @@ -0,0 +1,35 @@ +pre { + .db; + .overflow-auto; + word-break: normal; + word-wrap: no-wrap; +} + +pre[class*="language-"] { + .bn; + .br0; +} + +pre code { + .pre; + word-break: normal; +} + +pre code .number { + .h-auto; + .mr0; + .pa0; + background-color: inherit; + font-size: inherit; + min-width: auto; +} + +code.hljs { + .pa0; + background-color: inherit; +} + +code[data-gist-id] { + .pa0; + background: transparent; +} diff --git a/assets/less/components/talk.less b/assets/less/components/talk.less new file mode 100644 index 00000000..84d9a708 --- /dev/null +++ b/assets/less/components/talk.less @@ -0,0 +1,25 @@ +.video { + padding-top: 56.25%; +} + +.video iframe, +.video embed { + .absolute; + .h-100; + .left-0; + .top-0; + .w-100; +} + +.slides { + background-image: url('../images/loading.gif'); + min-height: 275px; + + @media @breakpoint-medium { + min-height: 460px; + } + + @media @breakpoint-large { + min-height: 540px; + } +} diff --git a/assets/less/main.less b/assets/less/main.less new file mode 100644 index 00000000..46efc8de --- /dev/null +++ b/assets/less/main.less @@ -0,0 +1,17 @@ +@import "node_modules/tachyons-less/less/_colors"; + +@blue: #0678be; + +@import "node_modules/tachyons-less/tachyons"; + +p, +li, +td { + a { + color: @blue; + } +} + +@import "components/nav"; +@import "components/post"; +@import "components/talk"; diff --git a/assets/sass/main.sass b/assets/sass/main.sass deleted file mode 100644 index 57c4cfc5..00000000 --- a/assets/sass/main.sass +++ /dev/null @@ -1,11 +0,0 @@ -@import "node_modules/tachyons-sass/scss/colors"; - -$blue: #0678be - -@import "node_modules/tachyons-sass/tachyons"; - -p, -li, -td - a - color: $blue diff --git a/assets/sass/post.sass b/assets/sass/post.sass deleted file mode 100644 index 3125a43f..00000000 --- a/assets/sass/post.sass +++ /dev/null @@ -1,29 +0,0 @@ -#pre - display: block - overflow: auto - word-break: normal - word-wrap: no-wrap - -pre[class*="language-"] - border: 0 - border-radius: 0 - -pre code - white-space: pre - word-break: normal - -pre code .number - background-color: inherit - font-size: inherit - height: auto - margin-right: 0 - min-width: auto - padding: 0 - -code.hljs - background-color: inherit - padding: 0 - -code[data-gist-id] - background: transparent - padding: 0 diff --git a/assets/sass/talk.sass b/assets/sass/talk.sass deleted file mode 100644 index 0bd2eab6..00000000 --- a/assets/sass/talk.sass +++ /dev/null @@ -1,22 +0,0 @@ -@import "./node_modules/tachyons-sass/scss/media-queries" - -.slides - background-image: url('../images/loading.gif') - min-height: 275px - - @media #{$breakpoint-medium} - min-height: 460px - - @media #{$breakpoint-large} - min-height: 540px - -.video - padding-top: 56.25% - -.video iframe, -.video embed - height: 100% - left: 0 - position: absolute - top: 0 - width: 100% diff --git a/gulpfile.config.js b/gulpfile.config.js index c9fb4643..6847c634 100644 --- a/gulpfile.config.js +++ b/gulpfile.config.js @@ -1,12 +1,12 @@ module.exports = function (plugins) { return { - sass: { + less: { autoprefixer: { browsers: ["last 2 versions", "> 5%"], cascade: false }, - sourceDir: "assets/sass", - pattern: "/**/*.sass", + sourceDir: "assets/less", + pattern: "/**/*.less", purifyCss: [ 'source/**/*.html', 'source/**/*.md', diff --git a/gulpfile.js b/gulpfile.js index c897e34b..66376d2b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,19 +12,19 @@ app.copy = function (sourceFiles, destination) { .pipe(gulp.dest(destination)); }; -app.sass = function (sourceFiles, outputFile) { +app.css = function (sourceFiles, outputFile) { return gulp.src(sourceFiles) .pipe(plugins.plumber()) .pipe(plugins.if(!config.production, plugins.sourcemaps.init())) .pipe(plugins.sassGlob()) - .pipe(plugins.sass()) - .pipe(plugins.autoprefixer(config.sass.autoprefixer)) + .pipe(plugins.less()) + .pipe(plugins.autoprefixer(config.less.autoprefixer)) .pipe(plugins.concat(outputFile)) - .pipe(plugins.if(config.production, plugins.purifycss(config.sass.purifyCss))) + .pipe(plugins.if(config.production, plugins.purifycss(config.less.purifyCss))) .pipe(plugins.if(config.production, plugins.cleanCss())) .pipe(plugins.if(!config.production, plugins.sourcemaps.write('.'))) .pipe(plugins.if(!config.production, plugins.refresh())) - .pipe(gulp.dest(config.sass.outputDir)); + .pipe(gulp.dest(config.less.outputDir)); }; app.js = function (sourceFiles, outputFile) { @@ -49,35 +49,25 @@ gulp.task('fonts', function () { }); gulp.task('styles', function () { - app.sass([ + app.css([ 'node_modules/font-awesome/css/font-awesome.css', - config.sass.sourceDir + '/main.sass' - ], 'main.css'); - - app.sass([ 'node_modules/prismjs/themes/prism-twilight.css', - config.sass.sourceDir + '/post.sass' - ], 'post.css') - - app.sass(config.sass.sourceDir + '/talk.sass', 'talk.css'); + config.less.sourceDir + '/main.less' + ], 'site.css'); }); gulp.task('scripts', function () { - app.js([ - 'node_modules/jquery/dist/jquery.js', - config.js.sourceDir + '/**/*.js' - ], 'main.js') - app.js([ 'node_modules/jquery/dist/jquery.js', 'node_modules/prismjs/prism.js', 'node_modules/prismjs/components/prism-{apacheconf,bsash,css,diff,ini,json,nginx,php,sass,scss,sql,less,twig,xml,yaml}.js', - ], 'post.js') + config.js.sourceDir + '/**/*.js' + ], 'site.js') }); gulp.task('watch', ['default'], function () { plugins.refresh.listen(); - gulp.watch(config.sass.sourceDir + config.sass.pattern, ['styles']); + gulp.watch(config.less.sourceDir + config.less.pattern, ['styles']); gulp.watch(config.js.sourceDir + config.js.pattern, ['scripts']); }); diff --git a/package.json b/package.json index 493f2000..960eff72 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "gulp-clean-css": "^3.7.0", "gulp-concat": "^2.6.1", "gulp-if": "^2.0.2", + "gulp-less": "^3.3.2", "gulp-load-plugins": "^1.5.0", "gulp-plumber": "^1.1.0", "gulp-purifycss": "^0.2.0", @@ -18,6 +19,7 @@ "gulp-util": "^3.0.8", "jquery.2": "^1.0.0", "prismjs": "^1.6.0", + "tachyons-less": "^1.0.4", "tachyons-sass": "^4.7.4" } } diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig index 1a359ac7..b31af586 100644 --- a/source/_includes/nav.html.twig +++ b/source/_includes/nav.html.twig @@ -17,12 +17,7 @@