Merge branch 'master' of https://github.com/Dogfalo/materialize

Dogfalo · Dec 31, 2014 · 52e63bc · 52e63bc
2 parents 3ba35de + e9cbd72
commit 52e63bc
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 29 deletions.
diff --git a/about.html b/about.html
@@ -99,17 +99,19 @@ <h2 class="header">Material Design</h2>
 
         <h3 class="header light">Principles</h3>
         <div class="row">
-          <div class="col s12 m4">
+          <div class="col s12 l4">
             <img class="promo" src="images/metaphor.png">
             <h4 class="center">Material is the metaphor</h4>
             <p class="light">The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.</p>
           </div>
-          <div class="col s12 m4">
+          <br>
+          <div class="col s12 l4">
             <img class="promo" src="images/bold.png">
             <h4 class="center">Bold, graphic, intentional</h4>
             <p class="light">Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users.</p>
           </div>
-          <div class="col s12 m4">
+          <br>
+          <div class="col s12 l4">
             <img class="promo" src="images/motion.png">
             <h4 class="center">Motion provides meaning</h4>
             <p class="light">Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.</p>

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
@@ -7400,7 +7400,7 @@ ul.side-nav.full {
  }
 
 /***************
-  HTML Styles	
+  HTML Styles
 ***************/
 body {
   background-color: #fcfcfc; }
@@ -7438,7 +7438,7 @@ nav {
   padding: 20px 20px; }
 
 /********************
-  Index Page Styles	
+  Index Page Styles
 ********************/
 #logo-container {
   position: absolute;
@@ -7520,6 +7520,11 @@ nav {
 
 .promo {
   width: 100%; }
+  @media only screen and (max-width : 992px) {
+    .promo {
+      width: 60%;
+      margin: 0 auto;
+      display: block; } }
   .promo i {
     color: #ee6e73;
     font-size: 7rem;

diff --git a/jade/about/about_content.html b/jade/about/about_content.html
@@ -41,17 +41,19 @@ <h2 class="header">Material Design</h2>
 
         <h3 class="header light">Principles</h3>
         <div class="row">
-          <div class="col s12 m4">
+          <div class="col s12 l4">
             <img class="promo" src="images/metaphor.png">
             <h4 class="center">Material is the metaphor</h4>
             <p class="light">The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.</p>
           </div>
-          <div class="col s12 m4">
+          <br>
+          <div class="col s12 l4">
             <img class="promo" src="images/bold.png">
             <h4 class="center">Bold, graphic, intentional</h4>
             <p class="light">Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users.</p>
           </div>
-          <div class="col s12 m4">
+          <br>
+          <div class="col s12 l4">
             <img class="promo" src="images/motion.png">
             <h4 class="center">Motion provides meaning</h4>
             <p class="light">Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.</p>

diff --git a/jade/javascript/javascript_content.html b/jade/javascript/javascript_content.html
@@ -88,11 +88,12 @@ <h3 class="header">Tooltips</h3>
         <div class="row">
           <div class="col s12">
             <p>Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.</p>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="bottom" data-tooltip="I am tooltip"> Bottom Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="top" data-tooltip="I am tooltip"> Top Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="left" data-tooltip="I am tooltip"> Left Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="right" data-tooltip="I am tooltip"> Right Tooltip</a>
-            <br>
+            <div class="row">
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="bottom" data-tooltip="I am tooltip"> Bottom Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="top" data-tooltip="I am tooltip"> Top Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="left" data-tooltip="I am tooltip"> Left Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="right" data-tooltip="I am tooltip"> Right Tooltip</a>
+            </div>
           </div>
         </div>
         <div class="row">

diff --git a/javascript.html b/javascript.html
@@ -145,11 +145,12 @@ <h3 class="header">Tooltips</h3>
         <div class="row">
           <div class="col s12">
             <p>Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.</p>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="bottom" data-tooltip="I am tooltip"> Bottom Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="top" data-tooltip="I am tooltip"> Top Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="left" data-tooltip="I am tooltip"> Left Tooltip</a>
-            <a class="btn tooltipped col s4 offset-s4 m3" data-position="right" data-tooltip="I am tooltip"> Right Tooltip</a>
-            <br>
+            <div class="row">
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="bottom" data-tooltip="I am tooltip"> Bottom Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="top" data-tooltip="I am tooltip"> Top Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="left" data-tooltip="I am tooltip"> Left Tooltip</a>
+              <a class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="right" data-tooltip="I am tooltip"> Right Tooltip</a>
+            </div>
           </div>
         </div>
         <div class="row">

diff --git a/sass/style.scss b/sass/style.scss
@@ -1,5 +1,5 @@
 /***************
-  HTML Styles	
+  HTML Styles
 ***************/
 body {
   background-color: #fcfcfc;
@@ -23,7 +23,7 @@ nav {
 
   a {
     -webkit-font-smoothing: antialiased;
-  } 
+  }
   ul li:hover, ul li.active {
     background-color: color("materialize-red", "lighten-1");
   }
@@ -47,7 +47,7 @@ nav {
 }
 
 /********************
-  Index Page Styles	
+  Index Page Styles
 ********************/
 
 #logo-container {
@@ -141,6 +141,11 @@ nav {
 
 .promo{
   width: 100%;
+  @media #{$medium-and-down} {
+    width: 60%;
+    margin: 0 auto;
+    display: block;
+  }
 
   i {
     color: color("materialize-red", "lighten-2");
@@ -322,7 +327,7 @@ $height: auto;
     @include box-sizing(border-box);
   }
   .col {
-    margin-bottom: 55px;   
+    margin-bottom: 55px;
   }
 }
 
@@ -358,7 +363,7 @@ $height: auto;
   }
 }
 
-// tabs 
+// tabs
 .tabs-wrapper {
   position: relative;
   height: 48px;
@@ -379,13 +384,13 @@ $height: auto;
   width: 125px;
   height: 125px;
   margin: 20px auto;
-  
+
   @media only screen and (max-width: $large-screen) {
     width: 100px;
     height: 100px;
-    
+
   }
-  
+
   @media only screen and (max-width: $small-screen) {
     width: 150px;
     height: 150px;
@@ -410,7 +415,7 @@ $height: auto;
   }
 }
 
-// Table of contents 
+// Table of contents
 ul.table-of-contents {
   margin-top: 0;
   padding-top: 48px;
@@ -586,7 +591,7 @@ body.parallax-demo footer {
 
 .mobile-image {
  @media #{$small-and-down} {
-  max-width: 100%; 
+  max-width: 100%;
  }
 }
 
@@ -596,7 +601,7 @@ body.parallax-demo footer {
     height: 57px;
     line-height: 57px;
     code {
-     line-height: 57px; 
+     line-height: 57px;
     }
   }
   .btn {