Merge branch 'syntax-switcher' of https://github.com/Mr21/sass-site into Mr21-syntax-switcher

source/assets/js/components/sass-syntax-switcher.js

@@ -1,18 +1,24 @@
 $(function() {
-  $( "#topic-2" ).tabs();
-  $( "#topic-3" ).tabs();
-  $( "#topic-5" ).tabs();
-  $( "#topic-6" ).tabs();
-  $( "#topic-7" ).tabs();
-  $( "#topic-8" ).tabs();
+  // Initialize the tabs (Sass/SCSS) with jQuery-ui
+  $( ".slides ul" ).parent().tabs();
 
-  // Hover states on the static widgets
-  $( "#dialog-link, #icons li" ).hover(
-    function() {
-      $( this ).addClass( "ui-state-hover" );
-    },
-    function() {
-      $( this ).removeClass( "ui-state-hover" );
-    }
-  );
+  // Switch ALL the tabs (Sass/SCSS) together
+  var
+    noRecursion = false,
+    jqA = $( "a.ui-tabs-anchor" ),
+    jqASass = jqA.filter( ":contains('Sass')" ).click(function() {
+      if ( !noRecursion ) {
+        noRecursion = true;
+        jqASass.not( this ).click();
+        noRecursion = false;
+      }
+    }),
+    jqASCSS = jqA.filter( ":contains('SCSS')" ).click(function() {
+      if ( !noRecursion ) {
+        noRecursion = true;
+        jqASCSS.not( this ).click();
+        noRecursion = false;
+      }
+    })
+  ;
 });

source/code-snippets/_homepage-extend-sass.md

@@ -4,15 +4,19 @@
   padding: 10px
   color: #333
 
+
 .success
   @extend .message
   border-color: green
 
+
 .error
   @extend .message
   border-color: red
 
+
 .warning
   @extend .message
   border-color: yellow
+
 ```

source/code-snippets/_homepage-import-1-sass.md

@@ -7,4 +7,5 @@ ul,
 ol
   margin:  0
   padding: 0
+
 ```

source/code-snippets/_homepage-import-2-sass.md

@@ -6,4 +6,5 @@
 body
   font: 100% Helvetica, sans-serif
   background-color: #efefef
+
 ```

source/code-snippets/_homepage-nesting-css.md

@@ -14,4 +14,4 @@ nav a {
   padding: 6px 12px;
   text-decoration: none;
 }
-```
+```

source/code-snippets/_homepage-nesting-sass.md

@@ -12,4 +12,6 @@ nav
     display: block
     padding: 6px 12px
     text-decoration: none
+
+
 ```

source/code-snippets/_homepage-operators-css.md

@@ -12,4 +12,4 @@ aside[role="complimentary"] {
   float: right;
   width: 31.25%;
 }
-```
+```

source/code-snippets/_homepage-operators-sass.md

@@ -6,7 +6,9 @@ article[role="main"]
   float: left
   width: 600px / 960px * 100%
 
+
 aside[role="complimentary"]
   float: right
   width: 300px / 960px * 100%
+
 ```

source/code-snippets/_homepage-operators-scss.md

@@ -1,6 +1,7 @@
 ```scss
 .container { width: 100%; }
 
+
 article[role="main"] {
   float: left;
   width: 600px / 960px * 100%;
@@ -10,4 +11,4 @@ aside[role="complimentary"] {
   float: right;
   width: 300px / 960px * 100%;
 }
-```
+```

source/code-snippets/_homepage-variables-sass.md

@@ -5,4 +5,5 @@ $primary-color: #333
 body
   font: 100% $font-stack
   color: $primary-color
+
 ```