Use crafty to build css, convert less to scss
This commit is contained in:
Stéphane Goetz
parent
d0b2850434
commit
3346dec1d6
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
module.exports = {
|
||||
presets: [
|
||||
"@swissquote/crafty-preset-postcss",
|
||||
"@swissquote/crafty-runner-gulp"
|
||||
],
|
||||
destination_css: "themes",
|
||||
css: {
|
||||
"theme_blue": {
|
||||
source: "themes/daux/scss/theme-blue.scss",
|
||||
destination: "daux/css/theme-blue.min.css"
|
||||
},
|
||||
"theme_green": {
|
||||
source: "themes/daux/scss/theme-green.scss",
|
||||
destination: "daux/css/theme-green.min.css"
|
||||
},
|
||||
"theme_navy": {
|
||||
source: "themes/daux/scss/theme-navy.scss",
|
||||
destination: "daux/css/theme-navy.min.css"
|
||||
},
|
||||
"theme_red": {
|
||||
source: "themes/daux/scss/theme-red.scss",
|
||||
destination: "daux/css/theme-red.min.css"
|
||||
},
|
||||
"daux_singlepage": {
|
||||
source: "themes/daux_singlepage/scss/main.scss",
|
||||
destination: "daux_singlepage/css/main.min.css"
|
||||
}
|
||||
}
|
||||
};
|
||||
86
gulpfile.js
86
gulpfile.js
|
|
@ -1,86 +0,0 @@
|
|||
var cssnano = require('cssnano'),
|
||||
gulp = require('gulp'),
|
||||
less = require('gulp-less'),
|
||||
rename = require('gulp-rename'),
|
||||
plumber = require('gulp-plumber'),
|
||||
postcss = require('gulp-postcss'),
|
||||
stylelint = require('gulp-stylelint');
|
||||
|
||||
var resources = {
|
||||
daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
|
||||
daux_green:{source: "themes/daux/less/theme-green.less", dest: "themes/daux/css/"},
|
||||
daux_navy:{source: "themes/daux/less/theme-navy.less", dest: "themes/daux/css/"},
|
||||
daux_red:{source: "themes/daux/less/theme-red.less", dest: "themes/daux/css/"},
|
||||
|
||||
daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
|
||||
};
|
||||
|
||||
var stylelintRules = {
|
||||
"indentation": 4,
|
||||
"selector-list-comma-newline-after": "always-multi-line",
|
||||
"selector-max-id": 0,
|
||||
|
||||
// Autoprefixer
|
||||
"at-rule-no-vendor-prefix": true,
|
||||
"media-feature-name-no-vendor-prefix": true,
|
||||
"property-no-vendor-prefix": true,
|
||||
"selector-no-vendor-prefix": true,
|
||||
"value-no-vendor-prefix": true
|
||||
};
|
||||
|
||||
var cssnanoOptions = {
|
||||
safe: true, // Disable dangerous optimisations
|
||||
filterPlugins: false, // This does very weird stuff
|
||||
autoprefixer: {
|
||||
add: true, // Add needed prefixes
|
||||
remove: true // Remove unnecessary prefixes
|
||||
}
|
||||
};
|
||||
|
||||
function createCSSTask(source, dest) {
|
||||
return function () {
|
||||
return gulp.src(source)
|
||||
.pipe(plumber())
|
||||
.pipe(less())
|
||||
.pipe(postcss([cssnano(cssnanoOptions)]))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest(dest));
|
||||
}
|
||||
}
|
||||
|
||||
gulp.task('lint-css', function () {
|
||||
return gulp
|
||||
.src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
|
||||
.pipe(stylelint({
|
||||
failAfterError: true,
|
||||
config: {
|
||||
extends: 'stylelint-config-standard',
|
||||
rules: stylelintRules
|
||||
},
|
||||
syntax: 'less',
|
||||
reporters: [{
|
||||
formatter: 'string',
|
||||
console: true
|
||||
}],
|
||||
debug: true
|
||||
}));
|
||||
});
|
||||
|
||||
var style_tasks = [];
|
||||
for (var style in resources) {
|
||||
if (resources.hasOwnProperty(style)) {
|
||||
gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
|
||||
style_tasks.push('style_' + style);
|
||||
}
|
||||
}
|
||||
|
||||
style_tasks.push('lint-css');
|
||||
|
||||
gulp.task("styles", style_tasks);
|
||||
|
||||
gulp.task('watch', ['default'], function () {
|
||||
// Watch .less files
|
||||
gulp.watch('themes/**/less/**/*.less', ['styles']);
|
||||
});
|
||||
|
||||
gulp.task('default', ['styles']);
|
||||
15
package.json
15
package.json
|
|
@ -3,17 +3,12 @@
|
|||
"version": "0.3.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"cssnano": "^3.7.3",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-stylelint": "^5.0.0",
|
||||
"stylelint-config-standard": "^17.0.0"
|
||||
"@swissquote/crafty": "^1.0.1",
|
||||
"@swissquote/crafty-preset-postcss": "^1.0.1",
|
||||
"@swissquote/crafty-runner-gulp": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
"watch": "gulp watch"
|
||||
"build": "crafty run",
|
||||
"watch": "crafty watch"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
<head>
|
||||
<title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
|
||||
<?php //SEO meta tags...
|
||||
if (array_key_exists('description', $page['attributes'])) {
|
||||
if (array_key_exists('attributes', $page) && array_key_exists('description', $page['attributes'])) {
|
||||
echo " <meta name=\"description\" content=\"{$page['attributes']['description']}\">\n";
|
||||
} elseif (array_key_exists('tagline', $params)) {
|
||||
echo " <meta name=\"description\" content=\"{$params['tagline']}\">\n";
|
||||
}
|
||||
if (array_key_exists('keywords', $page['attributes'])) {
|
||||
if (array_key_exists('attributes', $page) && array_key_exists('keywords', $page['attributes'])) {
|
||||
echo " <meta name=\"keywords\" content=\"{$page['attributes']['keywords']}\">\n";
|
||||
}
|
||||
if (array_key_exists('author', $page['attributes'])) {
|
||||
if (array_key_exists('attributes', $page) && array_key_exists('author', $page['attributes'])) {
|
||||
echo " <meta name=\"author\" content=\"{$page['attributes']['author']}\">\n";
|
||||
} elseif (array_key_exists('author', $params)) {
|
||||
echo " <meta name=\"author\" content=\"{$params['author']}\">\n";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
|
||||
@font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
@font-family-heading: "Roboto Slab", @font-family-text;
|
||||
:root {
|
||||
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
--font-family-heading: "Roboto Slab", var(--font-family-text);
|
||||
}
|
||||
|
||||
|
||||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */
|
||||
|
||||
|
|
@ -157,7 +157,7 @@ img {
|
|||
}
|
||||
|
||||
code {
|
||||
font-family: @font-family-monospace;
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
code, tt {
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
//Daux.io Blue
|
||||
@sidebar-background: #f7f7f7;
|
||||
@sidebar-hover: #c5c5cb;
|
||||
@lines: #e7e7e9;
|
||||
@dark: #3f4657;
|
||||
@light: #82becd;
|
||||
@text: #2d2d2d;
|
||||
|
||||
// Daux.io Base
|
||||
@import "theme.less";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
//Daux.io Green
|
||||
@sidebar-background: #f5f5f6;
|
||||
@sidebar-hover: #a0d55d;
|
||||
@lines: #e7e7e9;
|
||||
@dark: #000;
|
||||
@light: #8acc37;
|
||||
@text: #2d2d2d;
|
||||
|
||||
// Daux.io Base
|
||||
@import "theme.less";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
//Daux.io Navy
|
||||
@sidebar-hover: #c5c5cb;
|
||||
@lines: #e7e7e9;
|
||||
@sidebar-background: #f5f5f6;
|
||||
@dark: #13132a;
|
||||
@light: #7795b4;
|
||||
@text: #2d2d2d;
|
||||
|
||||
// Daux.io Base
|
||||
@import "theme.less";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
// Daux.io Red
|
||||
@sidebar-hover: #eee;
|
||||
@lines: #eee;
|
||||
@sidebar-background: #f7f7f7;
|
||||
@dark: #c64641; //#df4f49;
|
||||
@light: #ecb5a1;
|
||||
@text: #2d2d2d;
|
||||
|
||||
// Daux.io Base
|
||||
@import "theme.less";
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/*!
|
||||
* DAUX.IO
|
||||
* https://dauxio.github.io/
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
// Daux Style
|
||||
@import "../../common/less/vendor/normalize.less";
|
||||
@import "../../common/less/_fonts.less";
|
||||
@import "_mixins.less";
|
||||
@import "_utilities.less";
|
||||
|
||||
// Layout
|
||||
@import "_structure.less";
|
||||
|
||||
// Content presentation
|
||||
@import "_typography.less";
|
||||
@import "_components.less";
|
||||
@import "_homepage.less";
|
||||
@import "../../common/less/vendor/highlight.less";
|
||||
|
||||
@media print {
|
||||
@import "_print.less";
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ Base tags
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @light;
|
||||
color: var(--light);
|
||||
|
||||
&.external::after {
|
||||
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
|
||||
|
|
@ -27,7 +27,7 @@ hr {
|
|||
}
|
||||
|
||||
code {
|
||||
color: @dark;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
/* ===========================================================================================
|
||||
|
|
@ -97,32 +97,32 @@ Components
|
|||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
.border-right-radius(0);
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
&:last-child:not(:first-child) {
|
||||
.border-left-radius(0);
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Brand {
|
||||
display: block;
|
||||
background-color: @dark;
|
||||
background-color: var(--dark);
|
||||
padding: 15px 20px;
|
||||
font-size: 18px;
|
||||
text-shadow: none;
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 700;
|
||||
color: @light;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.Navbar {
|
||||
height: 50px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
background-color: @dark;
|
||||
background-color: var(--dark);
|
||||
margin-bottom: 0;
|
||||
|
||||
.Brand {
|
||||
|
|
@ -162,8 +162,8 @@ Components
|
|||
top: 50%;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-right: 0.15em solid @dark;
|
||||
border-top: 0.15em solid @dark;
|
||||
border-right: 0.15em solid var(--dark);
|
||||
border-top: 0.15em solid var(--dark);
|
||||
transform: rotate(45deg);
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
|
@ -176,17 +176,17 @@ Components
|
|||
display: block;
|
||||
margin: 0;
|
||||
padding: 6px 15px 6px 20px;
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 400;
|
||||
color: @dark;
|
||||
color: var(--dark);
|
||||
font-size: 15px;
|
||||
text-shadow: none;
|
||||
border-color: @lines;
|
||||
border-color: var(--lines);
|
||||
|
||||
&:hover {
|
||||
color: @dark;
|
||||
color: var(--dark);
|
||||
text-shadow: none;
|
||||
background-color: @sidebar-hover;
|
||||
background-color: var(--sidebar-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -200,8 +200,8 @@ Components
|
|||
margin: 0;
|
||||
margin-left: -15px;
|
||||
padding: 3px 30px;
|
||||
font-family: @font-family-text;
|
||||
color: @text;
|
||||
font-family: var(--font-family-text);
|
||||
color: var(--text);
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -210,7 +210,7 @@ Components
|
|||
}
|
||||
|
||||
&--active a {
|
||||
color: @dark;
|
||||
color: var(--dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -219,7 +219,7 @@ Components
|
|||
&--open,
|
||||
&--active {
|
||||
> a {
|
||||
background-color: @sidebar-hover;
|
||||
background-color: var(--sidebar-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ Components
|
|||
padding: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
|
|
@ -274,9 +274,9 @@ Components
|
|||
padding: 0 20px;
|
||||
|
||||
a {
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 400;
|
||||
color: @light;
|
||||
color:var(--light);
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +296,7 @@ Components
|
|||
transition: border-color ease-in-out 0.15s;
|
||||
|
||||
&:focus {
|
||||
border-color: @light;
|
||||
border-color: var(--light);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -395,7 +395,7 @@ ul.TableOfContents {
|
|||
text-align: center;
|
||||
clear: both;
|
||||
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
|
|
@ -460,7 +460,7 @@ ul.TableOfContents {
|
|||
|
||||
/* Checked state */
|
||||
.Checkbox input:checked ~ & {
|
||||
background: @dark;
|
||||
background: var(--dark);
|
||||
|
||||
/* Show check mark */
|
||||
&::after {
|
||||
|
|
@ -470,7 +470,7 @@ ul.TableOfContents {
|
|||
|
||||
/* Hover state whilst checked */
|
||||
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
|
||||
background: @light;
|
||||
background: var(--light);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
|
|
@ -38,15 +38,15 @@ Homepage
|
|||
|
||||
.Homepage {
|
||||
padding-top: 60px !important;
|
||||
background-color: @light;
|
||||
background-color: var(--light);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
color: @dark;
|
||||
color: var(--dark);
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.kill-box-shadow;
|
||||
@include kill-box-shadow;
|
||||
}
|
||||
|
||||
.HomepageTitle {
|
||||
|
|
@ -69,7 +69,7 @@ Homepage
|
|||
|
||||
.HomepageButtons {
|
||||
padding: 20px 0;
|
||||
background-color: @sidebar-hover;
|
||||
background-color: var(--sidebar-hover);
|
||||
text-align: center;
|
||||
|
||||
.Button--hero {
|
||||
|
|
@ -79,12 +79,12 @@ Homepage
|
|||
opacity: 0.8;
|
||||
margin: 0 10px;
|
||||
text-transform: uppercase;
|
||||
border: 5px solid @dark;
|
||||
font-family: @font-family-heading;
|
||||
border: 5px solid var(--dark);
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 700;
|
||||
|
||||
.kill-background-image;
|
||||
.kill-box-shadow;
|
||||
@include kill-background-image;
|
||||
@include kill-box-shadow;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
|
|
@ -96,13 +96,13 @@ Homepage
|
|||
}
|
||||
|
||||
&.Button--secondary {
|
||||
background-color: @sidebar-hover;
|
||||
color: @dark;
|
||||
background-color: var(--sidebar-hover);
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
&.Button--primary {
|
||||
background-color: @dark;
|
||||
color: @sidebar-background;
|
||||
background-color: var(--dark);
|
||||
color: var(--sidebar-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +136,7 @@ Homepage
|
|||
width: 0;
|
||||
height: 0;
|
||||
border: 3px solid transparent;
|
||||
border-left: 3px solid @light;
|
||||
border-left: 3px solid var(--light);
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 6px 6px 6px -12px;
|
||||
|
|
@ -145,7 +145,7 @@ Homepage
|
|||
}
|
||||
|
||||
.lead {
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -162,12 +162,12 @@ Homepage
|
|||
}
|
||||
|
||||
.HomepageFooter {
|
||||
background-color: @dark;
|
||||
background-color: var(--dark);
|
||||
border-radius: 0;
|
||||
color: @light;
|
||||
color: var(--light);
|
||||
border: none;
|
||||
|
||||
.kill-box-shadow;
|
||||
@include kill-box-shadow;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
|
|
@ -196,11 +196,11 @@ Homepage
|
|||
a {
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
color: @light;
|
||||
color: var(--light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,39 +2,42 @@
|
|||
Mixins
|
||||
============================================================================================== */
|
||||
|
||||
.kill-background-image() {
|
||||
@mixin kill-background-image {
|
||||
background-image: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.kill-box-shadow() {
|
||||
@mixin kill-box-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
|
||||
font-weight: @weight;
|
||||
font-size: @size;
|
||||
font-family: @font-family-text;
|
||||
line-height: @lineheight;
|
||||
@mixin sans-serif($weight: normal, $size: 14px, $lineheight: 20px) {
|
||||
font-weight: $weight;
|
||||
font-size: $size;
|
||||
font-family: $font-family-text;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
|
||||
// Single side border-radius
|
||||
|
||||
.border-top-radius(@radius) {
|
||||
border-top-right-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
border-bottom-left-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
|
|
@ -49,7 +52,7 @@ Mixins
|
|||
//
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
|
||||
.clearfix() {
|
||||
@mixin clearfix {
|
||||
&::before,
|
||||
&::after {
|
||||
content: " "; // 1
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../common/less/_print.less";
|
||||
@import "../../common/scss/_print.scss";
|
||||
|
||||
.Pager { display: none; }
|
||||
|
||||
|
|
@ -15,12 +15,12 @@ Docs Body & Page Structure
|
|||
html, body {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
color: @text;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.Columns {
|
||||
&__left {
|
||||
background-color: @sidebar-background;
|
||||
background-color: var(--sidebar-background);
|
||||
}
|
||||
|
||||
&__right {
|
||||
|
|
@ -44,8 +44,8 @@ html, body {
|
|||
border: none;
|
||||
float: right;
|
||||
|
||||
.kill-background-image;
|
||||
.kill-box-shadow;
|
||||
@include kill-background-image;
|
||||
@include kill-box-shadow;
|
||||
|
||||
&--bar {
|
||||
display: block;
|
||||
|
|
@ -53,17 +53,17 @@ html, body {
|
|||
height: 2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 3px;
|
||||
background-color: @light;
|
||||
.kill-box-shadow;
|
||||
background-color: var(--light);
|
||||
@include kill-box-shadow;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @sidebar-hover;
|
||||
.kill-box-shadow;
|
||||
background-color: var(--sidebar-hover);
|
||||
@include kill-box-shadow;
|
||||
|
||||
.Collapsible__trigger--bar {
|
||||
background-color: @dark;
|
||||
.kill-box-shadow;
|
||||
background-color: var(--dark);
|
||||
@include kill-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,7 +72,7 @@ html, body {
|
|||
@media screen and (min-width: 768px) {
|
||||
body {
|
||||
//Needed only for floating code blocks
|
||||
background-color: @light;
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.Navbar {
|
||||
|
|
@ -114,7 +114,7 @@ html, body {
|
|||
|
||||
&__left {
|
||||
width: 25%;
|
||||
border-right: 1px solid @lines;
|
||||
border-right: 1px solid var(--lines);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -3,7 +3,7 @@ Base CSS
|
|||
============================================================================================== */
|
||||
|
||||
body {
|
||||
font-family: @font-family-text;
|
||||
font-family: var(--font-family-text);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -12,12 +12,12 @@ body {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.s-content {
|
||||
@import "../../common/less/_typography.less";
|
||||
@import "../../common/scss/_typography.scss";
|
||||
|
||||
pre {
|
||||
border: none;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
// -------------------------
|
||||
|
||||
.clearfix {
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "theme.scss";
|
||||
|
||||
//Daux.io Blue
|
||||
:root {
|
||||
--sidebar-background: #f7f7f7;
|
||||
--sidebar-hover: #c5c5cb;
|
||||
--lines: #e7e7e9;
|
||||
--dark: #3f4657;
|
||||
--light: #82becd;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "theme.scss";
|
||||
|
||||
//Daux.io Green
|
||||
:root {
|
||||
--sidebar-background: #f5f5f6;
|
||||
--sidebar-hover: #a0d55d;
|
||||
--lines: #e7e7e9;
|
||||
--dark: #000;
|
||||
--light: #8acc37;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "theme.scss";
|
||||
|
||||
//Daux.io Navy
|
||||
:root {
|
||||
--sidebar-hover: #c5c5cb;
|
||||
--lines: #e7e7e9;
|
||||
--sidebar-background: #f5f5f6;
|
||||
--dark: #13132a;
|
||||
--light: #7795b4;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "theme.scss";
|
||||
|
||||
// Daux.io Red
|
||||
:root {
|
||||
--sidebar-hover: #eee;
|
||||
--lines: #eee;
|
||||
--sidebar-background: #f7f7f7;
|
||||
--dark: #c64641; //#df4f49;
|
||||
--light: #ecb5a1;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*!
|
||||
* DAUX.IO
|
||||
* https://dauxio.github.io/
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
// Daux Style
|
||||
@import "../../common/scss/vendor/normalize.scss";
|
||||
@import "../../common/scss/_fonts.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_utilities.scss";
|
||||
|
||||
// Layout
|
||||
@import "_structure.scss";
|
||||
|
||||
// Content presentation
|
||||
@import "_typography.scss";
|
||||
@import "_components.scss";
|
||||
@import "_homepage.scss";
|
||||
@import "../../common/scss/vendor/highlight.scss";
|
||||
|
||||
@media print {
|
||||
@import "_print.scss";
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
@import "../../common/less/_print.less";
|
||||
@import "../../common/scss/_print.scss";
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: @font-family-heading;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
|
@ -8,5 +8,5 @@ section.content {
|
|||
padding: 15px 25px 25px;
|
||||
background-color: white;
|
||||
|
||||
@import "../../common/less/_typography.less";
|
||||
@import "../../common/scss/_typography.scss";
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Core variables and mixins
|
||||
@import "../../common/less/_fonts.less";
|
||||
@import "vendor/highlight.less";
|
||||
@import "_typography.less";
|
||||
@import "../../common/scss/_fonts.scss";
|
||||
@import "vendor/highlight.scss";
|
||||
@import "_typography.scss";
|
||||
|
||||
* {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -17,7 +17,7 @@ body {
|
|||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: @font-family-text;
|
||||
font-family: var(--font-family-text);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -54,5 +54,5 @@ img {
|
|||
}
|
||||
|
||||
@media print {
|
||||
@import "_print.less";
|
||||
@import "_print.scss";
|
||||
}
|
||||
Loading…
Reference in New Issue