From ec3abdeb03a574dbcff26655d54db06f12435ea4 Mon Sep 17 00:00:00 2001 From: Leonid Solomein Date: Mon, 23 Sep 2013 11:23:56 +0600 Subject: [PATCH 1/4] Add markup --- .gitignore | 1 + Gruntfile.js | 35 +++++++++ css/build.css | 176 ++++++++++++++++++++++++++++++++++++++++++++ css/build.min.css | 1 + index.html | 46 ++++++++++++ less/build.less | 6 ++ less/code.less | 40 ++++++++++ less/common.less | 69 +++++++++++++++++ less/mixins.less | 31 ++++++++ less/print.less | 28 +++++++ less/screen.less | 16 ++++ less/variables.less | 46 ++++++++++++ package.json | 9 +++ 13 files changed, 504 insertions(+) create mode 100644 .gitignore create mode 100644 Gruntfile.js create mode 100644 css/build.css create mode 100644 css/build.min.css create mode 100644 index.html create mode 100644 less/build.less create mode 100644 less/code.less create mode 100644 less/common.less create mode 100644 less/mixins.less create mode 100644 less/print.less create mode 100644 less/screen.less create mode 100644 less/variables.less create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..70751e3 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,35 @@ +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + recess: { + options: { + compile: true, + }, + build: { + src: ['less/build.less'], + dest: 'css/build.css' + }, + min: { + options: { + compress: true + }, + src: ['less/build.less'], + dest: 'css/build.min.css' + } + }, + + watch: { + dist: { + files: 'less/*.less', + tasks: ['recess'] + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-recess'); + + grunt.registerTask('dev', ['watch']); + grunt.registerTask('default', ['recess']); +}; \ No newline at end of file diff --git a/css/build.css b/css/build.css new file mode 100644 index 0000000..a03d6df --- /dev/null +++ b/css/build.css @@ -0,0 +1,176 @@ +html { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: 100%; +} + +body { + margin: 0; + font-size: 14px; + font-size: 0.875rem; + color: #000000; + text-rendering: optimizeLegibility; + background-color: #ababab; +} + +.article { + max-width: 672px; + padding: 49px 72px; + margin: 30px auto; + background: #ffffff; +} + +a { + color: #021eaa; +} + +a:hover { + text-decoration: underline; +} + +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + outline: 0; +} + +h1, +h2 { + margin: 0; + font-weight: normal; + color: #444444; + border-bottom: 0 solid #ebebeb; +} + +h1 { + padding-bottom: 8px; + margin-bottom: 103px; + font-family: "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: 38px; + font-size: 2.375rem; + text-align: right; + border-width: 3px; +} + +h2 { + padding-bottom: 10px; + margin-top: 54px; + font-family: Tahoma, Verdana, sans-serif; + font-size: 18px; + font-size: 1.125rem; + font-weight: bold; + word-spacing: -2px; + border-width: 2px; +} + +p { + margin-top: 18px; + margin-bottom: 27px; + line-height: 24px; + line-height: 1.5rem; +} + +.text-oblique { + font-style: oblique; + color: #5f5f5f; +} + +code, +pre, +.code_block { + font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; + font-size: 12px; + font-size: 0.75rem; + font-weight: bold; +} + +pre { + word-wrap: break-word; + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; +} + +.code_block { + position: relative; + display: block; + padding-top: 16px; + padding-bottom: 10px; + color: #34581e; + border-top: 22px solid #ffd966; + border-bottom: 4px solid #ffd966; +} + +.code_block:before { + position: absolute; + top: -22px; + display: block; + width: 100%; + height: 22px; + background: #ffd966; + background: -moz-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff2c5), color-stop(100%, #ffdd66)); + background: -webkit-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); + background: -o-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); + background: -ms-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); + background: linear-gradient(to bottom, #fff2c5 0%, #ffdd66 100%); + content: ""; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd66', endColorstr='#fff2c5', GradientType=0); +} + +.code-default { + color: #34581e; +} + +.code-value { + color: #b45f06; +} + +.code-comment { + color: #7a7a7a; +} + +@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) { + .article { + padding: 25px 36px; + margin: 0 auto; + } +} + +@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { + h1 { + margin-bottom: 52px; + text-align: left; + } + h2 { + margin-top: 27px; + } +} + +@media print { + body, + .article { + padding: 0; + margin: 0; + color: #000000; + background: #ffffff; + } + a { + color: #000000; + text-decoration: none; + } + a[href^=http]:after { + content: " <" attr(href) ">"; + } + h2 { + page-break-after: avoid; + } + .code_block { + page-break-inside: avoid; + } + .code_block:before { + height: 0; + } +} \ No newline at end of file diff --git a/css/build.min.css b/css/build.min.css new file mode 100644 index 0000000..550e278 --- /dev/null +++ b/css/build.min.css @@ -0,0 +1 @@ +html{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:100%}body{margin:0;font-size:14px;font-size:.875rem;color:#000;text-rendering:optimizeLegibility;background-color:#ababab}.article{max-width:672px;padding:49px 72px;margin:30px auto;background:#fff}a{color:#021eaa}a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1,h2{margin:0;font-weight:normal;color:#444;border-bottom:0 solid #ebebeb}h1{padding-bottom:8px;margin-bottom:103px;font-family:"Arial Narrow","HelveticaNeueCondensed","HelveticaNeue-Condensed","Helvetica Neue Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:38px;font-size:2.375rem;text-align:right;border-width:3px}h2{padding-bottom:10px;margin-top:54px;font-family:Tahoma,Verdana,sans-serif;font-size:18px;font-size:1.125rem;font-weight:bold;word-spacing:-2px;border-width:2px}p{margin-top:18px;margin-bottom:27px;line-height:24px;line-height:1.5rem}.text-oblique{font-style:oblique;color:#5f5f5f}code,pre,.code_block{font-family:"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;font-size:12px;font-size:.75rem;font-weight:bold}pre{word-wrap:break-word;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;white-space:pre-wrap}.code_block{position:relative;display:block;padding-top:16px;padding-bottom:10px;color:#34581e;border-top:22px solid #ffd966;border-bottom:4px solid #ffd966}.code_block:before{position:absolute;top:-22px;display:block;width:100%;height:22px;background:#ffd966;background:-moz-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff2c5),color-stop(100%,#fd6));background:-webkit-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-o-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-ms-linear-gradient(top,#fff2c5 0,#fd6 100%);background:linear-gradient(to bottom,#fff2c5 0,#fd6 100%);content:"";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd66',endColorstr='#fff2c5',GradientType=0)}.code-default{color:#34581e}.code-value{color:#b45f06}.code-comment{color:#7a7a7a}@media only screen and (max-width:768px),only screen and (max-device-width:768px){.article{padding:25px 36px;margin:0 auto}}@media only screen and (max-width:480px),only screen and (max-device-width:480px){h1{margin-bottom:52px;text-align:left}h2{margin-top:27px}}@media print{body,.article{padding:0;margin:0;color:#000;background:#fff}a{color:#000;text-decoration:none}a[href^=http]:after{content:" <" attr(href) ">"}h2{page-break-after:avoid}.code_block{page-break-inside:avoid}.code_block:before{height:0}} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7cc3f32 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + JavaScript Enlightenment — Preface + + + +
+

Preface

+

Before you begin, it is important to understand various styles employed in this book. Please do not skip this section, because it contains important information that will aid you as you read the book.

+ +

More code, less words

+

Please examine the code examples in detail. The text should be viewed as secondary to the code itself. It is my opinion that a code example is worth a thousand words. Do not worry if youʼre initially confused by explanations. Examine the code. Tinker with it. Reread the code comments. Repeat this process until the concept being explained becomes clear. I hope you achieve a level of expertise such that well-documented code is all you need to grok a programming concept. +

+ +

Exhaustive code and repetition

+

You will probably curse me for repeating myself and for being so comprehensive with my code examples. And while I might deserve it, I prefer to err on the side of being exact, verbose, and repetitive, rather than make false assumptions authors often make about their reader. Yes, both can be annoying, depending upon what knowledge you bring to the subject, but they can also serve a useful purpose for those who want to learn a subject in detail.

+ +

Color-coding Conventions

+

In the JavaScript code examples (example shown below), orange is used to highlight code directly relevant to the concept being discussed. Any additional code used to support the orange colored code will be green. The color gray in the code examples is reserved for JavaScript comments (example shown below).

+ + 
<!DOCTYPE html><html lang="en"><body><script>
+
+// this is a comment about a specific part of the code
+var foo = 'calling out this part of the code';
+
+</script></body></html>
+ +

In addition to code examples being color-coded, the text in this book is colored so as to denote JavaScript words/keywords v.s. JavaScript code v.s. regular text. Below, I take an excerpt from the book to demonstrate this coloring semantic.

+ +

"Consider that the cody object created from the Object() constructor function (i.e var cody = new Object()) is not really different from a string object created via the String() constructor function. To drive this fact home, examine the code below:"

+ +

Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and regular black text for everything in-between.

+ +

jsFiddle, JS Bin, and Firebug lite-dev

+

The majority of code examples in this book are linked to a corresponding jsFiddle page, where the code can be tweaked and executed online. The jsFiddle examples have been configured to use the Firebug lite-dev plugin so that the log function (i.e. console.log) will work in most any modern browser regardless of if the browser has its own console. Before reading this book make sure you are comfortable with the usage and purpose of console.log.

+ +

In situations where jsFiddle & Firebug lite-dev caused complications with the JavaScript code JS Bin & Firebug Lite-dev will be used. I've tried to avoid a dependency on a browser console by using Firebug lite-dev but with certain code examples the solution itself gets in the way of code execution. In these situations the console built into your web browser will have to be leveraged to output logs. If you are not using a browser with a built in JavaScript console I would suggest upgrading or switching browsers.

+ +

When JS Bin is used, keep in mind that the code has to be executed manually (clicking 'Render') which differs from the page load execution done by jsFiddle.

+
+ + \ No newline at end of file diff --git a/less/build.less b/less/build.less new file mode 100644 index 0000000..dc9f6c1 --- /dev/null +++ b/less/build.less @@ -0,0 +1,6 @@ +@import "./variables.less"; +@import "./mixins.less"; +@import "./common.less"; +@import "./code.less"; +@import "./screen.less"; +@import "./print.less"; \ No newline at end of file diff --git a/less/code.less b/less/code.less new file mode 100644 index 0000000..47ded94 --- /dev/null +++ b/less/code.less @@ -0,0 +1,40 @@ +code, pre, .code_block { + .font-size(@code-font-size); + font-family: @code-font-family; + font-weight: bold; +} + +pre { + .pre-wrap() +} + +.code_block { + display: block; + color: @color-code-default; + border-bottom: @code-bottom-divider-height solid @color-code-divider; + border-top: @code-top-divider-height solid @color-code-divider; + padding-top: @code-padding-top; + padding-bottom: @code-padding-bottom; + position: relative; + &:before { + .gradient(@color-code-divider, @color-code-gradient-start, @color-code-gradient-end); + content: ""; + display: block; + position: absolute; + height: @code-top-divider-height; + width: 100%; + top: -@code-top-divider-height; + } +} + +.code-default { + color: @color-code-default +} + +.code-value { + color: @color-code-value +} + +.code-comment { + color: @color-code-comment +} \ No newline at end of file diff --git a/less/common.less b/less/common.less new file mode 100644 index 0000000..ece7215 --- /dev/null +++ b/less/common.less @@ -0,0 +1,69 @@ +html { + font-size: 100%; + font-family: @main-font-family; +} + +body { + .font-size(@main-font-size); + margin: 0; + background-color: @color-body; + color: @color-text-default; + text-rendering: optimizeLegibility; +} + +.article { + margin: 30px auto; + padding: @page-padding-vertical @page-padding-horizontal; + max-width: @page-width; + background: @color-article; +} + +a { + color: @color-link; + &:hover { + text-decoration: underline; + } + &:focus { + outline: thin dotted; + } + &:active, &:hover { + outline: 0; + } +} + +h1, h2 { + margin: 0; + border-bottom: 0 solid @color-header-divider; + color: @color-header; + font-weight: normal; +} + +h1 { + .font-size(@h1-font-size); + margin-bottom: @h1-margin; + padding-bottom: @h1-padding; + border-width: 3px; + text-align: right; + font-family: @h1-font-family; +} + +h2 { + .font-size(@h2-font-size); + margin-top: @h2-margin; + padding-bottom: @h2-padding; + border-width: 2px; + word-spacing: -2px; + font-weight: bold; + font-family: @h2-font-family; +} + +p { + .line-height(@base-size * 1.5); + margin-top: @p-margin; + margin-bottom: @p-padding; +} + +.text-oblique { + color: @color-text-oblique; + font-style: oblique; +} diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000..9e24536 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,31 @@ +.font-size (@sizeValue) { + @remValue: @sizeValue / @base-size; + @pxValue: (@sizeValue); + font-size: ~"@{pxValue}px"; + font-size: ~"@{remValue}rem"; +} + +.line-height (@sizeValue) { + @remValue: @sizeValue / @base-size; + @pxValue: (@sizeValue); + line-height: ~"@{pxValue}px"; + line-height: ~"@{remValue}rem"; +} + +.pre-wrap() { + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; +} + +.gradient(@color, @start, @stop) { + background: @color; + background: -moz-linear-gradient(top, @start 0%, @stop 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(100%, @stop)); + background: -webkit-linear-gradient(top, @start 0%, @stop 100%); + background: -o-linear-gradient(top, @start 0%, @stop 100%); + background: -ms-linear-gradient(top, @start 0%, @stop 100%); + background: linear-gradient(to bottom, @start 0%, @stop 100%); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); +} \ No newline at end of file diff --git a/less/print.less b/less/print.less new file mode 100644 index 0000000..bdfe579 --- /dev/null +++ b/less/print.less @@ -0,0 +1,28 @@ +@media print { + body, .article { + margin: 0; + padding: 0; + background: @color-white; + color: @color-black; + } + + a { + color: @color-black; + text-decoration: none; + } + + a[href^=http]:after { + content:" <" attr(href) ">"; + } + + h2 { + page-break-after: avoid; + } + + .code_block { + page-break-inside: avoid; + &:before { + height: 0; + } + } +} \ No newline at end of file diff --git a/less/screen.less b/less/screen.less new file mode 100644 index 0000000..f0d67a2 --- /dev/null +++ b/less/screen.less @@ -0,0 +1,16 @@ +@media only screen and (max-width : @screen-medium), only screen and (max-device-width: @screen-medium) { + .article { + margin: 0 auto; + padding: ceil(@page-padding-vertical / 2) ceil(@page-padding-horizontal / 2); + } +} + +@media only screen and (max-width: @screen-small), only screen and (max-device-width: @screen-small) { + h1 { + text-align: left; + margin-bottom: ceil(@h1-margin / 2); + } + h2 { + margin-top: ceil(@h2-margin / 2); + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..17b6a27 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,46 @@ +@color-white: #fff; +@color-black: #000; +@color-link: #021eaa; +@color-text-default: @color-black; +@color-text-oblique: #5f5f5f; +@color-body: #ababab; +@color-article: @color-white; +@color-header: #444; +@color-header-divider: #ebebeb; +@color-code-divider: #ffd966; +@color-code-gradient-start: #fff2c5; +@color-code-gradient-end: #ffdd66; +@color-code-default: #34581e; +@color-code-comment: #7a7a7a; +@color-code-value: #b45f06; + +@page-width: 672px; +@page-padding-vertical: 49px; +@page-padding-horizontal: 72px; + +@base-size: 16; + +@main-font-size: 14; +@code-font-size: 12; +@h1-font-size: 38; +@h2-font-size: 18; + +@main-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +@code-font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; +@h1-font-family: "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif; +@h2-font-family: Tahoma, Verdana, sans-serif; + +@h1-padding: 8px; +@h1-margin: 103px; +@h2-padding: 10px; +@h2-margin: 54px; +@p-margin: 18px; +@p-padding: 27px; + +@code-top-divider-height: 22px; +@code-bottom-divider-height: 4px; +@code-padding-top: 16px; +@code-padding-bottom: 10px; + +@screen-small: 480px; +@screen-medium: 768px; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..1d2b13f --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "name": "introduction", + "version": "0.0.1", + "devDependencies": { + "grunt": "latest", + "grunt-contrib-watch": "latest", + "grunt-recess": "latest" + } +} \ No newline at end of file From ade3b469e701e04ec6dff6f453bb3a019e9d4a39 Mon Sep 17 00:00:00 2001 From: Leonid Solomein Date: Mon, 23 Sep 2013 20:06:12 +0600 Subject: [PATCH 2/4] Fix tabulation --- Gruntfile.js | 58 ++++++++++++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 70751e3..6a8be18 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,35 +1,35 @@ module.exports = function(grunt) { - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), - recess: { - options: { - compile: true, - }, - build: { - src: ['less/build.less'], - dest: 'css/build.css' - }, - min: { - options: { - compress: true - }, - src: ['less/build.less'], - dest: 'css/build.min.css' - } - }, + recess: { + options: { + compile: true, + }, + build: { + src: ['less/build.less'], + dest: 'css/build.css' + }, + min: { + options: { + compress: true + }, + src: ['less/build.less'], + dest: 'css/build.min.css' + } + }, - watch: { - dist: { - files: 'less/*.less', - tasks: ['recess'] - } - } - }); + watch: { + dist: { + files: 'less/*.less', + tasks: ['recess'] + } + } + }); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-recess'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-recess'); - grunt.registerTask('dev', ['watch']); - grunt.registerTask('default', ['recess']); + grunt.registerTask('dev', ['watch']); + grunt.registerTask('default', ['recess']); }; \ No newline at end of file From b95449a3ed167fd6fa375e66e076e687a6bda4fa Mon Sep 17 00:00:00 2001 From: Leonid Solomein Date: Mon, 23 Sep 2013 21:52:50 +0600 Subject: [PATCH 3/4] Update README --- README.md | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 5cfd465..232f99b 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,14 @@ -# 1-introduction - -Первое вводное домашнее задание по курсу ШРИ, по лекциям HTML и CSS. - -## Задание -У вас есть глава из книги [JavaScript Enlightenment](http://javascriptenlightenment.com/) в PDF. Ваша задача — сверстать её с помощью HTML, -с подключаемым внешним CSS-файлом. Верстка в браузере должна быть максимально близка к оригиналу. - -## Дополнительно -* Сверстать версию для печати, которая при выводе на печать будет выглядеть аналогично оригиналу в PDF с разбивкой на страницы; -* Поработать над улучшением типографики страницы. +# 1-introduction + +Первое вводное домашнее задание по курсу ШРИ, по лекциям HTML и CSS. + +## Задание +У вас есть глава из книги [JavaScript Enlightenment](http://javascriptenlightenment.com/) в PDF. Ваша задача — сверстать её с помощью HTML, +с подключаемым внешним CSS-файлом. Верстка в браузере должна быть максимально близка к оригиналу. + +## Дополнительно +* Сверстать версию для печати, которая при выводе на печать будет выглядеть аналогично оригиналу в PDF с разбивкой на страницы; +* Поработать над улучшением типографики страницы. + +## Решение +Можно посмотреть [здесь](http://solomein.github.io/1-introduction/). \ No newline at end of file From ed0d8e4db3e16b8899787cd4b929ac531c04b0fd Mon Sep 17 00:00:00 2001 From: Leonid Solomein Date: Tue, 24 Sep 2013 22:09:47 +0600 Subject: [PATCH 4/4] Optimization --- .gitignore | 1 - Gruntfile.js | 35 --------- css/build.css | 176 -------------------------------------------- css/build.min.css | 1 - css/styles.css | 152 ++++++++++++++++++++++++++++++++++++++ index.html | 2 +- less/build.less | 6 -- less/code.less | 40 ---------- less/common.less | 69 ----------------- less/mixins.less | 31 -------- less/print.less | 28 ------- less/screen.less | 16 ---- less/variables.less | 46 ------------ package.json | 9 --- 14 files changed, 153 insertions(+), 459 deletions(-) delete mode 100644 .gitignore delete mode 100644 Gruntfile.js delete mode 100644 css/build.css delete mode 100644 css/build.min.css create mode 100644 css/styles.css delete mode 100644 less/build.less delete mode 100644 less/code.less delete mode 100644 less/common.less delete mode 100644 less/mixins.less delete mode 100644 less/print.less delete mode 100644 less/screen.less delete mode 100644 less/variables.less delete mode 100644 package.json diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 40b878d..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 6a8be18..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,35 +0,0 @@ -module.exports = function(grunt) { - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - recess: { - options: { - compile: true, - }, - build: { - src: ['less/build.less'], - dest: 'css/build.css' - }, - min: { - options: { - compress: true - }, - src: ['less/build.less'], - dest: 'css/build.min.css' - } - }, - - watch: { - dist: { - files: 'less/*.less', - tasks: ['recess'] - } - } - }); - - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-recess'); - - grunt.registerTask('dev', ['watch']); - grunt.registerTask('default', ['recess']); -}; \ No newline at end of file diff --git a/css/build.css b/css/build.css deleted file mode 100644 index a03d6df..0000000 --- a/css/build.css +++ /dev/null @@ -1,176 +0,0 @@ -html { - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - font-size: 100%; -} - -body { - margin: 0; - font-size: 14px; - font-size: 0.875rem; - color: #000000; - text-rendering: optimizeLegibility; - background-color: #ababab; -} - -.article { - max-width: 672px; - padding: 49px 72px; - margin: 30px auto; - background: #ffffff; -} - -a { - color: #021eaa; -} - -a:hover { - text-decoration: underline; -} - -a:focus { - outline: thin dotted; -} - -a:active, -a:hover { - outline: 0; -} - -h1, -h2 { - margin: 0; - font-weight: normal; - color: #444444; - border-bottom: 0 solid #ebebeb; -} - -h1 { - padding-bottom: 8px; - margin-bottom: 103px; - font-family: "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif; - font-size: 38px; - font-size: 2.375rem; - text-align: right; - border-width: 3px; -} - -h2 { - padding-bottom: 10px; - margin-top: 54px; - font-family: Tahoma, Verdana, sans-serif; - font-size: 18px; - font-size: 1.125rem; - font-weight: bold; - word-spacing: -2px; - border-width: 2px; -} - -p { - margin-top: 18px; - margin-bottom: 27px; - line-height: 24px; - line-height: 1.5rem; -} - -.text-oblique { - font-style: oblique; - color: #5f5f5f; -} - -code, -pre, -.code_block { - font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; - font-size: 12px; - font-size: 0.75rem; - font-weight: bold; -} - -pre { - word-wrap: break-word; - white-space: -moz-pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; -} - -.code_block { - position: relative; - display: block; - padding-top: 16px; - padding-bottom: 10px; - color: #34581e; - border-top: 22px solid #ffd966; - border-bottom: 4px solid #ffd966; -} - -.code_block:before { - position: absolute; - top: -22px; - display: block; - width: 100%; - height: 22px; - background: #ffd966; - background: -moz-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff2c5), color-stop(100%, #ffdd66)); - background: -webkit-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); - background: -o-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); - background: -ms-linear-gradient(top, #fff2c5 0%, #ffdd66 100%); - background: linear-gradient(to bottom, #fff2c5 0%, #ffdd66 100%); - content: ""; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd66', endColorstr='#fff2c5', GradientType=0); -} - -.code-default { - color: #34581e; -} - -.code-value { - color: #b45f06; -} - -.code-comment { - color: #7a7a7a; -} - -@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) { - .article { - padding: 25px 36px; - margin: 0 auto; - } -} - -@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { - h1 { - margin-bottom: 52px; - text-align: left; - } - h2 { - margin-top: 27px; - } -} - -@media print { - body, - .article { - padding: 0; - margin: 0; - color: #000000; - background: #ffffff; - } - a { - color: #000000; - text-decoration: none; - } - a[href^=http]:after { - content: " <" attr(href) ">"; - } - h2 { - page-break-after: avoid; - } - .code_block { - page-break-inside: avoid; - } - .code_block:before { - height: 0; - } -} \ No newline at end of file diff --git a/css/build.min.css b/css/build.min.css deleted file mode 100644 index 550e278..0000000 --- a/css/build.min.css +++ /dev/null @@ -1 +0,0 @@ -html{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:100%}body{margin:0;font-size:14px;font-size:.875rem;color:#000;text-rendering:optimizeLegibility;background-color:#ababab}.article{max-width:672px;padding:49px 72px;margin:30px auto;background:#fff}a{color:#021eaa}a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1,h2{margin:0;font-weight:normal;color:#444;border-bottom:0 solid #ebebeb}h1{padding-bottom:8px;margin-bottom:103px;font-family:"Arial Narrow","HelveticaNeueCondensed","HelveticaNeue-Condensed","Helvetica Neue Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:38px;font-size:2.375rem;text-align:right;border-width:3px}h2{padding-bottom:10px;margin-top:54px;font-family:Tahoma,Verdana,sans-serif;font-size:18px;font-size:1.125rem;font-weight:bold;word-spacing:-2px;border-width:2px}p{margin-top:18px;margin-bottom:27px;line-height:24px;line-height:1.5rem}.text-oblique{font-style:oblique;color:#5f5f5f}code,pre,.code_block{font-family:"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;font-size:12px;font-size:.75rem;font-weight:bold}pre{word-wrap:break-word;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;white-space:pre-wrap}.code_block{position:relative;display:block;padding-top:16px;padding-bottom:10px;color:#34581e;border-top:22px solid #ffd966;border-bottom:4px solid #ffd966}.code_block:before{position:absolute;top:-22px;display:block;width:100%;height:22px;background:#ffd966;background:-moz-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff2c5),color-stop(100%,#fd6));background:-webkit-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-o-linear-gradient(top,#fff2c5 0,#fd6 100%);background:-ms-linear-gradient(top,#fff2c5 0,#fd6 100%);background:linear-gradient(to bottom,#fff2c5 0,#fd6 100%);content:"";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd66',endColorstr='#fff2c5',GradientType=0)}.code-default{color:#34581e}.code-value{color:#b45f06}.code-comment{color:#7a7a7a}@media only screen and (max-width:768px),only screen and (max-device-width:768px){.article{padding:25px 36px;margin:0 auto}}@media only screen and (max-width:480px),only screen and (max-device-width:480px){h1{margin-bottom:52px;text-align:left}h2{margin-top:27px}}@media print{body,.article{padding:0;margin:0;color:#000;background:#fff}a{color:#000;text-decoration:none}a[href^=http]:after{content:" <" attr(href) ">"}h2{page-break-after:avoid}.code_block{page-break-inside:avoid}.code_block:before{height:0}} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..9d98c33 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,152 @@ +body { + margin: 0; + color: #000; + text-rendering: optimizeLegibility; + background: #ababab; +} + +.article { + max-width: 672px; + padding: 49px 72px; + margin: 30px auto; + background: #fff; +} + +a { + color: #021eaa; +} + +h1, +h2 { + color: #444; + border-bottom: 2px solid #ebebeb; +} + +h1 { + padding: 0 0 8px; + margin: 0 0 103px; + font: 38px "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif; + text-align: right; + border-width: 3px; +} + +h2 { + padding: 0 0 10px; + margin: 54px 0 0; + font: 700 18px Tahoma, Verdana, sans-serif; + word-spacing: -2px; +} + +p { + margin: 18px 0 27px; + font: 14px/24px Arial, "Helvetica Neue", Helvetica, sans-serif; +} + +code, +pre, +.code_block { + font: 700 12px "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; +} + +pre { + word-wrap: break-word; + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; +} + +.code_block { + position: relative; + display: block; + padding: 16px 0 10px; + color: #34581e; + border-top: 22px solid #fff2c5; + border-bottom: 4px solid #ffd966; +} + +.code_block:before { + position: absolute; + top: -22px; + display: block; + width: 100%; + height: 22px; + background: #fff2c5; + background: -moz-linear-gradient(top, #fff2c5 0%, #fd6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff2c5), color-stop(100%, #fd6)); + background: -webkit-linear-gradient(top, #fff2c5 0%, #fd6 100%); + background: -o-linear-gradient(top, #fff2c5 0%, #fd6 100%); + background: -ms-linear-gradient(top, #fff2c5 0%, #fd6 100%); + background: linear-gradient(to bottom, #fff2c5 0%, #fd6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd6', endColorstr='#fff2c5', GradientType=0); + content: ""; +} + +.code-default { + color: #34581e; +} + +.code-value { + color: #b45f06; +} + +.code-comment { + color: #7a7a7a; +} + +.text-oblique { + font-style: oblique; + color: #5f5f5f; +} + +@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) { + + .article { + padding: 25px 36px; + margin: 0 auto; + } + +} + +@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { + + h1 { + margin: 0 0 52px; + text-align: left; + } + + h2 { + margin: 27px 0 0; + } +} + +@media print { + + body, + .article { + padding: 0; + margin: 0; + color: #000; + background: #fff; + } + + a { + text-decoration: none; + } + + a[href^=http]:after { + content: " <" attr(href) ">"; + } + + h2 { + page-break-after: avoid; + } + + .code_block { + page-break-inside: avoid; + } + + .code_block:before { + display: none; + } + +} \ No newline at end of file diff --git a/index.html b/index.html index 7cc3f32..352cbba 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ JavaScript Enlightenment — Preface - +
diff --git a/less/build.less b/less/build.less deleted file mode 100644 index dc9f6c1..0000000 --- a/less/build.less +++ /dev/null @@ -1,6 +0,0 @@ -@import "./variables.less"; -@import "./mixins.less"; -@import "./common.less"; -@import "./code.less"; -@import "./screen.less"; -@import "./print.less"; \ No newline at end of file diff --git a/less/code.less b/less/code.less deleted file mode 100644 index 47ded94..0000000 --- a/less/code.less +++ /dev/null @@ -1,40 +0,0 @@ -code, pre, .code_block { - .font-size(@code-font-size); - font-family: @code-font-family; - font-weight: bold; -} - -pre { - .pre-wrap() -} - -.code_block { - display: block; - color: @color-code-default; - border-bottom: @code-bottom-divider-height solid @color-code-divider; - border-top: @code-top-divider-height solid @color-code-divider; - padding-top: @code-padding-top; - padding-bottom: @code-padding-bottom; - position: relative; - &:before { - .gradient(@color-code-divider, @color-code-gradient-start, @color-code-gradient-end); - content: ""; - display: block; - position: absolute; - height: @code-top-divider-height; - width: 100%; - top: -@code-top-divider-height; - } -} - -.code-default { - color: @color-code-default -} - -.code-value { - color: @color-code-value -} - -.code-comment { - color: @color-code-comment -} \ No newline at end of file diff --git a/less/common.less b/less/common.less deleted file mode 100644 index ece7215..0000000 --- a/less/common.less +++ /dev/null @@ -1,69 +0,0 @@ -html { - font-size: 100%; - font-family: @main-font-family; -} - -body { - .font-size(@main-font-size); - margin: 0; - background-color: @color-body; - color: @color-text-default; - text-rendering: optimizeLegibility; -} - -.article { - margin: 30px auto; - padding: @page-padding-vertical @page-padding-horizontal; - max-width: @page-width; - background: @color-article; -} - -a { - color: @color-link; - &:hover { - text-decoration: underline; - } - &:focus { - outline: thin dotted; - } - &:active, &:hover { - outline: 0; - } -} - -h1, h2 { - margin: 0; - border-bottom: 0 solid @color-header-divider; - color: @color-header; - font-weight: normal; -} - -h1 { - .font-size(@h1-font-size); - margin-bottom: @h1-margin; - padding-bottom: @h1-padding; - border-width: 3px; - text-align: right; - font-family: @h1-font-family; -} - -h2 { - .font-size(@h2-font-size); - margin-top: @h2-margin; - padding-bottom: @h2-padding; - border-width: 2px; - word-spacing: -2px; - font-weight: bold; - font-family: @h2-font-family; -} - -p { - .line-height(@base-size * 1.5); - margin-top: @p-margin; - margin-bottom: @p-padding; -} - -.text-oblique { - color: @color-text-oblique; - font-style: oblique; -} diff --git a/less/mixins.less b/less/mixins.less deleted file mode 100644 index 9e24536..0000000 --- a/less/mixins.less +++ /dev/null @@ -1,31 +0,0 @@ -.font-size (@sizeValue) { - @remValue: @sizeValue / @base-size; - @pxValue: (@sizeValue); - font-size: ~"@{pxValue}px"; - font-size: ~"@{remValue}rem"; -} - -.line-height (@sizeValue) { - @remValue: @sizeValue / @base-size; - @pxValue: (@sizeValue); - line-height: ~"@{pxValue}px"; - line-height: ~"@{remValue}rem"; -} - -.pre-wrap() { - white-space: -moz-pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; -} - -.gradient(@color, @start, @stop) { - background: @color; - background: -moz-linear-gradient(top, @start 0%, @stop 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(100%, @stop)); - background: -webkit-linear-gradient(top, @start 0%, @stop 100%); - background: -o-linear-gradient(top, @start 0%, @stop 100%); - background: -ms-linear-gradient(top, @start 0%, @stop 100%); - background: linear-gradient(to bottom, @start 0%, @stop 100%); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); -} \ No newline at end of file diff --git a/less/print.less b/less/print.less deleted file mode 100644 index bdfe579..0000000 --- a/less/print.less +++ /dev/null @@ -1,28 +0,0 @@ -@media print { - body, .article { - margin: 0; - padding: 0; - background: @color-white; - color: @color-black; - } - - a { - color: @color-black; - text-decoration: none; - } - - a[href^=http]:after { - content:" <" attr(href) ">"; - } - - h2 { - page-break-after: avoid; - } - - .code_block { - page-break-inside: avoid; - &:before { - height: 0; - } - } -} \ No newline at end of file diff --git a/less/screen.less b/less/screen.less deleted file mode 100644 index f0d67a2..0000000 --- a/less/screen.less +++ /dev/null @@ -1,16 +0,0 @@ -@media only screen and (max-width : @screen-medium), only screen and (max-device-width: @screen-medium) { - .article { - margin: 0 auto; - padding: ceil(@page-padding-vertical / 2) ceil(@page-padding-horizontal / 2); - } -} - -@media only screen and (max-width: @screen-small), only screen and (max-device-width: @screen-small) { - h1 { - text-align: left; - margin-bottom: ceil(@h1-margin / 2); - } - h2 { - margin-top: ceil(@h2-margin / 2); - } -} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less deleted file mode 100644 index 17b6a27..0000000 --- a/less/variables.less +++ /dev/null @@ -1,46 +0,0 @@ -@color-white: #fff; -@color-black: #000; -@color-link: #021eaa; -@color-text-default: @color-black; -@color-text-oblique: #5f5f5f; -@color-body: #ababab; -@color-article: @color-white; -@color-header: #444; -@color-header-divider: #ebebeb; -@color-code-divider: #ffd966; -@color-code-gradient-start: #fff2c5; -@color-code-gradient-end: #ffdd66; -@color-code-default: #34581e; -@color-code-comment: #7a7a7a; -@color-code-value: #b45f06; - -@page-width: 672px; -@page-padding-vertical: 49px; -@page-padding-horizontal: 72px; - -@base-size: 16; - -@main-font-size: 14; -@code-font-size: 12; -@h1-font-size: 38; -@h2-font-size: 18; - -@main-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; -@code-font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; -@h1-font-family: "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif; -@h2-font-family: Tahoma, Verdana, sans-serif; - -@h1-padding: 8px; -@h1-margin: 103px; -@h2-padding: 10px; -@h2-margin: 54px; -@p-margin: 18px; -@p-padding: 27px; - -@code-top-divider-height: 22px; -@code-bottom-divider-height: 4px; -@code-padding-top: 16px; -@code-padding-bottom: 10px; - -@screen-small: 480px; -@screen-medium: 768px; \ No newline at end of file diff --git a/package.json b/package.json deleted file mode 100644 index 1d2b13f..0000000 --- a/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "introduction", - "version": "0.0.1", - "devDependencies": { - "grunt": "latest", - "grunt-contrib-watch": "latest", - "grunt-recess": "latest" - } -} \ No newline at end of file