Use Less
This commit is contained in:
parent
7d1591d400
commit
2b6f80bf16
19
assets/less/components/nav.less
Normal file
19
assets/less/components/nav.less
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
.nav-item {
|
||||||
|
.black-70;
|
||||||
|
.dib;
|
||||||
|
.f6;
|
||||||
|
.link;
|
||||||
|
.ml3;
|
||||||
|
.pv3;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.ml0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item--active {
|
||||||
|
.b--blue;
|
||||||
|
.bb;
|
||||||
|
.black;
|
||||||
|
.bw1;
|
||||||
|
}
|
35
assets/less/components/post.less
Normal file
35
assets/less/components/post.less
Normal file
|
@ -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;
|
||||||
|
}
|
25
assets/less/components/talk.less
Normal file
25
assets/less/components/talk.less
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -12,17 +12,6 @@ td {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
@import "components/nav";
|
||||||
.black-70;
|
@import "components/post";
|
||||||
.dib;
|
@import "components/talk";
|
||||||
.f6;
|
|
||||||
.link;
|
|
||||||
.pv3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item--active {
|
|
||||||
.b--blue;
|
|
||||||
.bb;
|
|
||||||
.black;
|
|
||||||
.bw1;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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
|
|
|
@ -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
|
|
|
@ -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%
|
|
|
@ -1,6 +1,6 @@
|
||||||
module.exports = function (plugins) {
|
module.exports = function (plugins) {
|
||||||
return {
|
return {
|
||||||
sass: {
|
less: {
|
||||||
autoprefixer: {
|
autoprefixer: {
|
||||||
browsers: ["last 2 versions", "> 5%"],
|
browsers: ["last 2 versions", "> 5%"],
|
||||||
cascade: false
|
cascade: false
|
||||||
|
|
32
gulpfile.js
32
gulpfile.js
|
@ -12,19 +12,19 @@ app.copy = function (sourceFiles, destination) {
|
||||||
.pipe(gulp.dest(destination));
|
.pipe(gulp.dest(destination));
|
||||||
};
|
};
|
||||||
|
|
||||||
app.sass = function (sourceFiles, outputFile) {
|
app.css = function (sourceFiles, outputFile) {
|
||||||
return gulp.src(sourceFiles)
|
return gulp.src(sourceFiles)
|
||||||
.pipe(plugins.plumber())
|
.pipe(plugins.plumber())
|
||||||
.pipe(plugins.if(!config.production, plugins.sourcemaps.init()))
|
.pipe(plugins.if(!config.production, plugins.sourcemaps.init()))
|
||||||
.pipe(plugins.sassGlob())
|
.pipe(plugins.sassGlob())
|
||||||
.pipe(plugins.less())
|
.pipe(plugins.less())
|
||||||
.pipe(plugins.autoprefixer(config.sass.autoprefixer))
|
.pipe(plugins.autoprefixer(config.less.autoprefixer))
|
||||||
.pipe(plugins.concat(outputFile))
|
.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.cleanCss()))
|
||||||
.pipe(plugins.if(!config.production, plugins.sourcemaps.write('.')))
|
.pipe(plugins.if(!config.production, plugins.sourcemaps.write('.')))
|
||||||
.pipe(plugins.if(!config.production, plugins.refresh()))
|
.pipe(plugins.if(!config.production, plugins.refresh()))
|
||||||
.pipe(gulp.dest(config.sass.outputDir));
|
.pipe(gulp.dest(config.less.outputDir));
|
||||||
};
|
};
|
||||||
|
|
||||||
app.js = function (sourceFiles, outputFile) {
|
app.js = function (sourceFiles, outputFile) {
|
||||||
|
@ -49,35 +49,25 @@ gulp.task('fonts', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('styles', function () {
|
gulp.task('styles', function () {
|
||||||
app.sass([
|
app.css([
|
||||||
'node_modules/font-awesome/css/font-awesome.css',
|
'node_modules/font-awesome/css/font-awesome.css',
|
||||||
config.sass.sourceDir + '/main.less'
|
'node_modules/prismjs/themes/prism-twilight.css',
|
||||||
], 'main.css');
|
config.less.sourceDir + '/main.less'
|
||||||
|
], 'site.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');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('scripts', function () {
|
gulp.task('scripts', function () {
|
||||||
app.js([
|
|
||||||
'node_modules/jquery/dist/jquery.js',
|
|
||||||
config.js.sourceDir + '/**/*.js'
|
|
||||||
], 'main.js')
|
|
||||||
|
|
||||||
app.js([
|
app.js([
|
||||||
'node_modules/jquery/dist/jquery.js',
|
'node_modules/jquery/dist/jquery.js',
|
||||||
'node_modules/prismjs/prism.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',
|
'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 () {
|
gulp.task('watch', ['default'], function () {
|
||||||
plugins.refresh.listen();
|
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']);
|
gulp.watch(config.js.sourceDir + config.js.pattern, ['scripts']);
|
||||||
});
|
});
|
||||||
|
|
|
@ -17,12 +17,9 @@
|
||||||
|
|
||||||
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
|
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
|
||||||
{% for link in links %}
|
{% for link in links %}
|
||||||
{% set classes = [
|
<a
|
||||||
'nav-item',
|
href="{{ link.href }}"
|
||||||
not loop.first ? 'ml3',
|
class="nav-item {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active' }}">
|
||||||
page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active',
|
|
||||||
] %}
|
|
||||||
<a href="{{ link.href }}" class="{{ classes|join(' ') }}">
|
|
||||||
{{- link.title -}}
|
{{- link.title -}}
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="overflow-auto">
|
<div class="overflow-auto">
|
||||||
<table class="w-100 ba b--moon-gray">
|
<table class="w-100 ba b--black-20">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="striped--near-white">
|
<tr class="striped--near-white">
|
||||||
<th class="w-20-l pa2 tl bg-white">Date</th>
|
<th class="w-20-l pa2 tl bg-white">Date</th>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
{% include 'og' with { og: page.meta.og } %}
|
{% include 'og' with { og: page.meta.og } %}
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
|
<link rel="stylesheet" href="{{ site.url }}/assets/css/site.css">
|
||||||
{% block stylesheets '' %}
|
{% block stylesheets '' %}
|
||||||
|
|
||||||
{% for size in site.apple_touch_icon_sizes %}
|
{% for size in site.apple_touch_icon_sizes %}
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mw9 center mt4 bt b--moon-gray">
|
<footer class="mw9 center mt4 bt b--black-20">
|
||||||
<p class="f6">
|
<p class="f6">
|
||||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
|
© 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||||||
</p>
|
</p>
|
||||||
|
@ -57,7 +57,7 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="{{ site.url }}/assets/js/main.js"></script>
|
<script src="{{ site.url }}/assets/js/site.js"></script>
|
||||||
|
|
||||||
{% if site.google_analytics_tracking_id %}
|
{% if site.google_analytics_tracking_id %}
|
||||||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
|
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
|
||||||
|
|
|
@ -10,11 +10,3 @@
|
||||||
{% include 'post/pager' %}
|
{% include 'post/pager' %}
|
||||||
{% include 'post/about-author' %}
|
{% include 'post/about-author' %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
|
||||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/post.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="{{ site.url }}/assets/js/post.js"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -11,7 +11,3 @@
|
||||||
{% include 'project/skills' %}
|
{% include 'project/skills' %}
|
||||||
{% include 'project/company' %}
|
{% include 'project/company' %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
|
||||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/project.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -9,7 +9,3 @@
|
||||||
{% include 'talk/video' %}
|
{% include 'talk/video' %}
|
||||||
{% include 'talk/events' %}
|
{% include 'talk/events' %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
|
||||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/talk.css">
|
|
||||||
{% endblock %}
|
|
||||||
|
|
Reference in a new issue