scala-news-reader

commit c0fd94faaf7335d179c9485f400613120fa2a839
parent fc2d0140bbdf7bf60aadcc2dedc3cf116a318413
Author: Jul <jul@9o.is>
Date:   Wed, 31 Jul 2013 14:17:58 -0400

fixed index.html responsive css

Diffstat:
M
src/main/less/styles.less
 | 
70
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------
M
src/main/webapp/index.html
 | 
2
+-

2 files changed, 61 insertions(+), 11 deletions(-)
diff --git a/src/main/less/styles.less b/src/main/less/styles.less
@@ -269,16 +269,7 @@ body {
 
    }
 
-   @media (min-width: 768px) {
-     .marketing {
-       font-size: @marketingFontSize;
-       line-height: @marketingLineHeight;
-       .small { font-size: @marketingFontSize * 0.5 }
-       #marketing-main-inner {
-         margin: 50px 0;
-       }
-     }
-   }
+
 
    .features {
         padding: 10px;
@@ -302,6 +293,65 @@ body {
         }
    }
 
+   @media (min-width: 1200px) {
+           .marketing {
+                  font-size: @marketingFontSize;
+                  line-height: @marketingLineHeight;
+                  .small { font-size: @marketingFontSize * 0.5 }
+                  #marketing-main-inner {
+                    margin: 50px 0;
+                  }
+                }
+         }
+
+         @media (min-width: 980px) and (max-width: 1199px) {
+              .marketing {
+                     font-size: @marketingFontSize * 0.9;
+                     line-height: @marketingLineHeight * 0.9;
+                     .small { font-size: @marketingFontSize * 0.45 }
+                     #marketing-main-inner {
+                       margin: 25px 0;
+                     }
+                   }
+            }
+
+      @media (min-width: 768px) and (max-width: 979px) {
+        .marketing {
+               font-size: @marketingFontSize * 0.8;
+               line-height: @marketingLineHeight * 0.8;
+               .small { font-size: @marketingFontSize * 0.4 }
+               #marketing-main-inner {
+                 margin: 25px 0;
+               }
+             }
+      }
+
+      @media (min-width: 500px) and (max-width: 767px) {
+        .marketing {
+                          font-size: @marketingFontSize * 0.9;
+                          line-height: @marketingLineHeight * 0.9;
+                          .small { font-size: @marketingFontSize * 0.45 }
+                          #marketing-main-inner {
+                            margin: 25px 0;
+                          }
+                        }
+        .features [class*="span"].content { height: auto !important; }
+        .features { padding: 0; }
+      }
+
+      @media (max-width: 499px) {
+         .marketing {
+                     font-size: @marketingFontSize * 0.8;
+                     line-height: @marketingLineHeight * 0.8;
+                     .small { font-size: @marketingFontSize * 0.4 }
+                     #marketing-main-inner {
+                       margin: 25px 0;
+                     }
+                   }
+         .features [class*="span"].content { height: auto !important; }
+         .features { padding: 0; }
+         }
+
    .row-fluid .offset0 {
                margin-left: 0
            }
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -60,7 +60,7 @@
                         <div class="span12 offset0 content" style="background-color:#f1eee0; color: #666">
                             <div class="row-fluid">
                                 <div class="span4">
-                                    <div class="text">Discover writers that fit you most. Watch a quick 30 second intro video about the writer's purpose.</div>
+                                    <div class="text">Watch a quick 30 second intro video about the writer's purpose.</div>
                                 </div>
                                 <div class="span8">
                                     <img src="/img/features/video1.jpg" />