incompl · ASammour · Mar 4, 2015 · Mar 4, 2015 · Mar 4, 2015 · Mar 17, 2015
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 _site
 node_modules
 .ftppass
+package-lock.json
+.jekyll-cache
diff --git a/README.textile b/README.textile
@@ -3,10 +3,16 @@ This is the source for "learnlayout.com":http://learnlayout.com in case you're c
 h2. How to Build
 
 * If needed, install "NPM":https://npmjs.org/
+** Last tested version was 6.14.4
 * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@
+** Last tested grunt-cli version was 1.3.2
+** Last tested grunt version was 0.4.5
 * If needed, do a @npm install@
 * If needed, install jekyll @sudo gem install jekyll@
-* If needed, install "pygments":http://pygments.org/download/ (I have used `sudo easy_install pygments` on Mac)
+** Last tested version was 4.1.1
+* If needed, install "pygments":http://pygments.org/download/
+** I most recently used `brew install pygments` on Mac
+** Last tested version was 2.7.2
 * Build + run test server with @grunt serve@
 * or build only with @grunt@
 
@@ -18,4 +24,8 @@ If you're not familiar with YAML, it's a very simple human-readable data format.
 
 To contribute to a translation, start with "en.yaml":https://github.com/incompl/csslayoutsite/blob/master/translations/en.yaml and either "email me":mailto:[email protected] translated YAML files or make pull requests against this repository if you know how.
 
-To test a translation, change the @lang@ property in "_config.yml":https://github.com/incompl/csslayoutsite/blob/master/templates/_config.yml before you build. If you choose an RTL language you need to add the line @rtl: true@ to the config.
+To test a translation, add a @lang@ parameter when using the @grunt@ commands described above. For example, @grunt serve --lang=es@
+
+h2. License
+
+"Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)":https://creativecommons.org/licenses/by-nc/4.0/
diff --git a/_plugins/localize.rb b/_plugins/localize.rb
@@ -37,7 +37,9 @@ def render(context)
 
   class RtlTag < Liquid::Tag
     def render(context)
-      rtl = context.registers[:site].config['rtl']
+      @lang = context.registers[:site].config['lang']
+      @translations = YAML::load(File.open("translations/#{@lang}.yaml"))
+      rtl = @translations['rtl']
       if rtl == true
         "rtl"
       else

diff --git a/deploy-all.sh b/deploy-all.sh
@@ -12,4 +12,5 @@ grunt deploy --lang=pt-br
 grunt deploy --lang=pt-pt
 grunt deploy --lang=ru
 grunt deploy --lang=zh
-grunt deploy --lang=zh-tw
+grunt deploy --lang=zh-tw
+grunt deploy --lang=ar
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "devDependencies": {
     "grunt": "~0.4.2",
+    "grunt-ftp-deploy": "^0.1.10",
     "grunt-jekyll": "~0.4.2"
   }
 }
diff --git a/templates/_layouts/default.html b/templates/_layouts/default.html
@@ -2,11 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    {% if page.title != nil %}
-      <title>{% localize global.short_title %} - {% localize page.title %}</title>
-    {% else %}
-      <title>{% localize global.title %}</title>
-    {% endif %}
+    <title>{% localize global.title %}</title>
     <meta name="viewport" content="width=600">
     <link rel="stylesheet" href="/css/style.css"/>
     <link rel="stylesheet" href="/css/code.css"/>
@@ -43,10 +39,6 @@
 
     <div id="container">
 
-      {% if page.title %}
-        <h1 class="content">{% localize page.title %}</h1>
-      {% endif %}
-
       {{ content }}
 
       {% if page.prev or page.next %}
@@ -100,27 +92,6 @@ <h1 class="content">{% localize page.title %}</h1>
       </li>
 
     </div>
-    <div id="advertisements">
-      <span>Ads by <a href="http://bocoup.com">Bocoup</a></span>
-      <div>
-        <!--/* Revive Adserver Javascript Tag v3.0.5 */-->
-        <script type='text/javascript'><!--//<![CDATA[
-          var m3_u = (location.protocol=='https:'?'https://revive.bocoup.com/www/delivery/ajs.php':'http://revive.bocoup.com/www/delivery/ajs.php');
-            var m3_r = Math.floor(Math.random()*99999999999);
-            if (!document.MAX_used) document.MAX_used = ',';
-            document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
-            document.write ("?zoneid=4");
-            document.write ('&amp;cb=' + m3_r);
-            if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
-            document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
-            document.write ("&amp;loc=" + escape(window.location));
-            if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
-            if (document.context) document.write ("&context=" + escape(document.context));
-            if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
-            document.write ("'><\/scr"+"ipt>");
-            //]]>--></script><noscript><a href='http://revive.bocoup.com/www/delivery/ck.php?n=a9ab3fcf&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://revive.bocoup.com/www/delivery/avw.php?zoneid=4&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a9ab3fcf' border='0' alt='' /></a></noscript>
-      </div>
-    </div>
 
   </body>
 </html>
diff --git a/templates/about.html b/templates/about.html
@@ -1,6 +1,5 @@
 ---
 layout: default
-title: about.title
 noFooter: true
 ---
 
@@ -22,6 +21,10 @@
   }
 </style>
 
+<h1>
+  {% localize about.title %}
+</h1>
+
 <div id="credits">
   <a href="http://incompl.com"><img src="http://www.gravatar.com/avatar/b8d0f1cea63b396befeeb8c74533abb6?s=300" alt="Greg Smith"></a>
 

diff --git a/templates/box-model.html b/templates/box-model.html
@@ -1,6 +1,5 @@
 ---
 layout: default
-title: box_model.title
 next: box-sizing
 prev: max-width
 num: 5
@@ -26,6 +25,10 @@
   }
 </style>
 
+<h1>
+  {% localize box_model.title %}
+</h1>
+
 <p class="content">
   {% localize box_model.intro %}
 </p>

diff --git a/templates/box-sizing.html b/templates/box-sizing.html
@@ -1,6 +1,5 @@
 ---
 layout: default
-title: box_sizing.title
 next: position
 prev: box-model
 num: 6
@@ -26,6 +25,10 @@
   }
 </style>
 
+<h1>
+  {% localize box_sizing.title %}
+</h1>
+
 <p class="content">
   {% localize box_sizing.1 %}
 </p>

diff --git a/templates/clear.html b/templates/clear.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: clear.title
 next: clearfix
 prev: float
 num: 10
 ---
 
+<h1>
+  {% localize clear.title %}
+</h1>
+
 <p class="content">
   {% localize clear.1 %}
 </p>

diff --git a/templates/clearfix.html b/templates/clearfix.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: clearfix.title
 next: float-layout
 prev: clear
 num: 11
 ---
 
+<h1>
+  {% localize clearfix.title %}
+</h1>
+
 <p class="content">
   {% localize clearfix.1 %}
 </p>

diff --git a/templates/column.html b/templates/column.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: column.title
 next: flexbox
 prev: inline-block-layout
 num: 17
 ---
 
+<h1>
+  {% localize column.title %}
+</h1>
+
 <p class="content">
   {% localize column.1 %}
 </p>

diff --git a/templates/css/style.css b/templates/css/style.css
@@ -165,7 +165,7 @@ h1.content {
   direction: ltr;
 }
 
-.css, .html {
+.language-css, .language-html {
   display: block;
   text-shadow: 1px 1px 0 black;
   background-color: #333333;
@@ -183,15 +183,15 @@ h1.content {
   white-space: pre;
 }
 
-.html:before {
+.language-html:before {
   content: "html";
   float: right;
   color: black;
   text-shadow: -1px 1px 0 #666; /* \m/ */
   font-size: 1.5em;
 }
 
-.css:before {
+.language-css:before {
   content: "css";
   float: right;
   color: black;
@@ -338,29 +338,10 @@ footer {
   float: left;
 }
 
-#share #license {
-
+#share > li:not(first-child){
+  margin-left: 10px;
 }
 
-#advertisements {
-  clear: both;
-  margin: 0 auto;
-  width: 370px;
-  text-align: center;
-}
-
-#advertisements span {
-  font-size: 10px;
-  font-style: italic;
-  margin: 0;
-}
-
-#advertisements div {
-  font-size: 13px;
-  text-align: left;
-}
-
-
 @media screen and (min-width:601px) {
 
   #menu {
@@ -415,7 +396,7 @@ footer {
 
 }
 
-@media screen and (max-width:404px) { 
+@media screen and (max-width:404px) {
 
   a.nav {
     width: 40%;

diff --git a/templates/display.html b/templates/display.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: display.title
 next: margin-auto
 prev: no-layout
 num: 2
 ---
 
+<h1>
+  {% localize display.title %}
+</h1>
+
 <p class="content">
   {% localize display.intro %}
 </p>

diff --git a/templates/flexbox.html b/templates/flexbox.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: flexbox.title
 next: frameworks
 prev: column
 num: 18
 ---
 
+<h1>
+  {% localize flexbox.title %}
+</h1>
+
 <p class="content">
   {% localize flexbox.1 %}
 </p>

diff --git a/templates/float-layout.html b/templates/float-layout.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: float_layout.title
 next: percent
 prev: clearfix
 num: 12
 ---
 
+<h1>
+  {% localize float_layout.title %}
+</h1>
+
 <p class="content">
   {% localize float_layout.1 %}
 </p>

diff --git a/templates/float.html b/templates/float.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: float.title
 next: clear
 prev: position-example
 num: 9
 ---
 
+<h1>
+  {% localize float.title %}
+</h1>
+
 <p class="content">
   {% localize float.1 %}
 </p>

diff --git a/templates/frameworks.html b/templates/frameworks.html
@@ -1,11 +1,14 @@
 ---
 layout: default
-title: frameworks.title
 next: about
 prev: flexbox
 num: 19
 ---
 
+<h1>
+  {% localize frameworks.title %}
+</h1>
+
 <p class="content">
   {% localize frameworks.1 %}
 </p>
@@ -38,14 +41,13 @@
   <a href="http://www.blueprintcss.org/"><img src="/images/blueprint.jpg" alt="blueprint"></a>
   <a href="http://www.unsemantic.com"><img src="/images/unsemantic.png" alt="unsemantic"></a>
   <a href="http://bluetrip.org/"><img src="/images/bluetrip.jpg" alt="bluetrip"></a>
-  <a href="http://elasticss.com/"><img src="/images/elasticss.jpg" alt="elasticss"></a>
   <a href="http://twitter.github.com/bootstrap/"><img src="/images/bootstrap.jpg" alt="bootstrap"></a>
-  <a href="http://gumbyframework.com/"><img src="/images/gumby.jpg" alt="gumby"></a>
   <a href="http://susy.oddbird.net/"><img src="/images/susy.jpg" alt="susy"></a>
   <a href="http://foundation.zurb.com/"><img src="/images/foundation.png" alt="foundation"></a>
   <a href="http://imperavi.com/kube/"><img src="/images/kube.png" alt="kube"></a>
   <a href="http://groundworkcss.github.com/"><img src="/images/groundwork.gif" alt="groundwork"></a>
   <a href="http://semantic-ui.com"><img src="/images/semantic_ui.png" alt="semantic ui"></a>
+  <a href="http://purecss.io/"><img src="/images/logo_pure.png" alt="Purecss"></a>
 </div>
 
 <p class="content">

diff --git a/templates/images/elasticss.jpg b/templates/images/elasticss.jpg
diff --git a/templates/images/gumby.jpg b/templates/images/gumby.jpg
diff --git a/templates/images/logo_pure.png b/templates/images/logo_pure.png
diff --git a/templates/index.html b/templates/index.html
@@ -39,6 +39,7 @@
   <span><a href="http://pt-pt.learnlayout.com">{% localize index.pt-pt %}</a></span>
   <span><a href="http://ru.learnlayout.com">{% localize index.russian %}</a></span>
   <span><a href="http://fa.learnlayout.com">{% localize index.persian %}</a></span>
+  <span><a href="http://ar.learnlayout.com">{% localize index.arabic %}</a></span>
   <span><a href="http://zh.learnlayout.com">{% localize index.chinese %}</a></span>
   <span><a href="http://zh-tw.learnlayout.com">{% localize index.tradchinese %}</a></span>
   <span><a href="http://ko.learnlayout.com">{% localize index.korean %}</a></span>