diff --git a/Gruntfile.js b/Gruntfile.js
index fc7cdc08c..49b132673 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -197,12 +197,56 @@ module.exports = function(grunt) {
grunt.file.copy(appPath + '/' + configPath, buildPath + '/' + appPath + '/' + configPath);
});
+ grunt.registerTask('webfont-custom', function() {
+ var dir = './styles/fonts/';
+ var destName = 'main-fonts';
+ var donePromise = this.async();
+ var svg2ttf = {
+ cmd: 'svg2ttf',
+ args: [dir + destName + '.svg', dir + destName + '.ttf'],
+ };
+ var ttf2woff = {
+ cmd: 'ttf2woff',
+ args: [dir + destName + '.ttf', dir + destName + '.woff'],
+ };
+ var ttf2woff2 = {
+ cmd: 'cat',
+ //args: [dir + destName + '.ttf', dir + destName + '.woff2'],
+ args: [dir + destName + '.ttf', '|', 'ttf2woff2', '>>', dir + destName + '.woff2'],
+ };
+ var ttf2eot = {
+ cmd: 'ttf2eot',
+ args: [dir + destName + '.ttf', dir + destName + '.eot'],
+ };
+ grunt.util.spawn(svg2ttf, function done(error, result, code) {
+ grunt.log.ok('.ttf file created');
+
+ grunt.util.spawn(ttf2woff, function done(error, result, code) {
+ grunt.log.ok('.woff file created');
+
+ grunt.util.spawn(ttf2eot, function done(error, result, code) {
+ grunt.log.ok('.eot file created');
+ donePromise();
+ /*
+ grunt.util.spawn(ttf2woff2, function done(error, result, code) {
+ grunt.log.ok('.woff2 file created');
+ donePromise();
+ });
+ */
+ });
+ });
+ });
+
+ });
+
grunt.registerTask('bower', ['bowercopy']);
grunt.registerTask('dev', ['bowercopy', 'connect', 'watch']);
grunt.registerTask('test', ['jshint', 'mocha']);
+ grunt.registerTask('build:fonts', ['webfont-custom']);
+
grunt.registerTask('build', ['bowercopy', 'jshint', 'sass', 'before-rjs', 'requirejs', 'uglify', 'cssmin', 'concat', 'clean', 'copy']);
grunt.registerTask('default', ['dev']);
diff --git a/package.json b/package.json
index 2bca12324..6e2cc5204 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,11 @@
"grunt-mocha": "^0.4.15",
"grunt-sass": "^1.1.0",
"istanbul": "^0.4.2",
- "node-sass": "^3.4.2"
+ "node-sass": "^3.4.2",
+ "svg2ttf": "^4.0.1",
+ "ttf2eot": "^2.0.0",
+ "ttf2woff": "^2.0.1",
+ "ttf2woff2": "^2.0.3"
},
"keywords": [
"wte",
@@ -46,6 +50,7 @@
"scripts": {
"postinstall": "node ./node_modules/bower/bin/bower install --config.interactive=false",
"build": "./node_modules/.bin/grunt build",
+ "build:fonts": "./node_modules/.bin/grunt build:fonts",
"test": "./node_modules/.bin/grunt test",
"start": "./node_modules/.bin/grunt dev"
}
diff --git a/src/demo.js b/src/demo.js
index dab9f5785..49b2900bd 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -77,19 +77,6 @@ panels: {
className : 'fa fa-arrows',
command : 'move-comp',
stopDefaultCommand: 1,
- },{
- id: 'image-comp',
- className: 'fa fa-picture-o',
- dragDrop: 1,
- stopDefaultCommand: 1,
- options: {
- content: ''+
- '
' +
- '
' +
- '
' +
- '
' +
- '
Block 1
',
- attributes: { title: 'Block1', class:'b1-cl'}
+ attributes: {class:'wte-fonts wte-f-b1'}
},{
id: 'b2',
- label: '♥ Block2',
+ label: '2 Blocks',
content: 'Block 2
',
+ attributes: {class:'wte-fonts wte-f-b2'}
},{
id: 'b3',
- label: 'Block3',
+ label: '3 Blocks',
content: 'Block 3
',
+ attributes: {class:'wte-fonts wte-f-b3'}
+ },{
+ id: 'b4',
+ label: '3/7 Block',
+ content: 'Block 4
',
+ attributes: {class:'wte-fonts wte-f-b37'}
+ },{
+ id: 'hero',
+ label: 'Hero section',
+ content: 'Hero here
',
+ attributes: {class:'wte-fonts wte-f-hero'}
+ },{
+ id: 'h1p',
+ label: 'Text section',
+ content: 'Text text text
',
+ attributes: {class:'wte-fonts wte-f-h1p'}
+ },{
+ id: '3ba',
+ label: 'Badges',
+ content: 'Badges
',
+ attributes: {class:'wte-fonts wte-f-3ba'}
},{
id: 'text',
label: 'Text',
- content: 'Insert your text here
',
- },{
- id: 'text2',
- label: 'Text2',
+ attributes: {class:'wte-fonts wte-f-text'},
content: {
type:'text',
content:'Insert your text here',
- style: { padding: '10px' },
+ style: {padding: '10px' },
activeOnRender: 1
},
},{
id: 'image',
label: 'Image',
- content: {type:'image', activeOnRender: 1},
+ attributes: {class:'wte-fonts wte-f-image'},
+ content: { type:'image', activeOnRender: 1},
+ },{
+ id: 'quo',
+ label: 'Quote',
+ content: 'Quote',
+ attributes: {class:'wte-fonts wte-f-quo'}
}],
},
diff --git a/styles/css/main.css b/styles/css/main.css
index 9b8313eea..b30c8f944 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2567,6 +2567,52 @@ $fontColorActive: #4f8ef7;
*/
/* darken($mainColor, 4%) - #383838*/
/*#515151*/
+@font-face {
+ font-family: 'font3336';
+ src: url("../fonts/main-fonts.eot?v=1");
+ src: url("../fonts/main-fonts.woff?v=1") format("woff"), url("../fonts/main-fonts.ttf?v=1") format("truetype"), url("../fonts/main-fonts.svg?v=1") format("svg"), url("../fonts/main-fonts.eot?v=1") format("embedded-opentype");
+ font-weight: normal;
+ font-style: normal; }
+
+.wte-fonts:before {
+ display: block;
+ font: normal normal normal 14px font3336;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 5em; }
+
+.wte-f-b1:before {
+ content: 'q'; }
+
+.wte-f-b2:before {
+ content: 'w'; }
+
+.wte-f-b3:before {
+ content: 'e'; }
+
+.wte-f-b37:before {
+ content: 'r'; }
+
+.wte-f-hero:before {
+ content: 't'; }
+
+.wte-f-h1p:before {
+ content: 'y'; }
+
+.wte-f-3ba:before {
+ content: 'u'; }
+
+.wte-f-image:before {
+ content: 'i'; }
+
+.wte-f-text:before {
+ content: 'o'; }
+
+.wte-f-quo:before {
+ content: 'p'; }
+
.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
background-color: transparent;
border: none;
@@ -3418,9 +3464,14 @@ ol.example li.placeholder:before {
width: 45%;
padding: 1em;
box-sizing: border-box;
- height: 100px;
+ height: 90px;
cursor: all-scroll;
- margin: 2.5%; }
+ margin: 2.5%;
+ font-size: 11px;
+ font-weight: lighter;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end; }
.wte-block.wte-bdrag {
width: auto;
diff --git a/styles/fonts/font3336.eot b/styles/fonts/font3336.eot
new file mode 100644
index 000000000..923a599ea
Binary files /dev/null and b/styles/fonts/font3336.eot differ
diff --git a/styles/fonts/font3336.svg b/styles/fonts/font3336.svg
new file mode 100644
index 000000000..0d090b2b1
--- /dev/null
+++ b/styles/fonts/font3336.svg
@@ -0,0 +1,93 @@
+
+
+
diff --git a/styles/fonts/font3336.ttf b/styles/fonts/font3336.ttf
new file mode 100644
index 000000000..33457758a
Binary files /dev/null and b/styles/fonts/font3336.ttf differ
diff --git a/styles/fonts/font3336.woff b/styles/fonts/font3336.woff
new file mode 100644
index 000000000..09d2a3b64
Binary files /dev/null and b/styles/fonts/font3336.woff differ
diff --git a/styles/fonts/font3336.woff2 b/styles/fonts/font3336.woff2
new file mode 100644
index 000000000..f8cab46b8
Binary files /dev/null and b/styles/fonts/font3336.woff2 differ
diff --git a/styles/fonts/main-fonts.svg b/styles/fonts/main-fonts.svg
new file mode 100644
index 000000000..e45807dd4
--- /dev/null
+++ b/styles/fonts/main-fonts.svg
@@ -0,0 +1,232 @@
+
+
+
+
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index d7d1a324b..c8d5ce098 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -39,6 +39,22 @@ $tagBg: #804f7b;
$secColor: $tagBg;
$imageCompDim: 50px;
+$fontPath: '../fonts';
+$fontName: 'main-fonts';
+$fontV: '1';
+
+@font-face {
+ font-family: 'font3336';
+ src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}');
+ src: url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
+ //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
+ url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
+ url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
+ url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
@mixin user-select($v) {
-moz-user-select: $v;
-khtml-user-select: $v;
@@ -60,6 +76,29 @@ $imageCompDim: 50px;
appearance: $v;
}
+.#{$app-prefix}fonts{
+}
+.#{$app-prefix}fonts:before{
+ display: block;
+ font: normal normal normal 14px font3336; // shortening font declaration
+ font-size: inherit; // can't have font-size inherit on line above, so need to override
+ text-rendering: auto; // optimizelegibility throws things off #1094
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 5em;
+}
+.#{$app-prefix}f-b1:before { content: 'q'; }
+.#{$app-prefix}f-b2:before { content: 'w'; }
+.#{$app-prefix}f-b3:before { content: 'e'; }
+.#{$app-prefix}f-b37:before { content: 'r'; }
+.#{$app-prefix}f-hero:before { content: 't'; }
+.#{$app-prefix}f-h1p:before { content: 'y'; }
+.#{$app-prefix}f-3ba:before { content: 'u'; }
+.#{$app-prefix}f-image:before { content: 'i'; }
+.#{$app-prefix}f-text:before { content: 'o'; }
+.#{$app-prefix}f-quo:before { content: 'p'; }
+
+
.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{
background-color: transparent;
border: none;
@@ -998,9 +1037,14 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
width: 45%;
padding: 1em;
box-sizing: border-box;
- height: 100px;
+ height: 90px;
cursor:all-scroll;
margin: 2.5%;
+ font-size: 11px;
+ font-weight: lighter;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
}
.#{$app-prefix}block.#{$app-prefix}bdrag{