Bug 1137904. Add headlines to MWC page.

mozilla · Feb 27, 2015 · d0bf649 · d0bf649
1 parent e8d5d23
commit d0bf649
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/bedrock/firefox/templates/firefox/os/mwc-2015-preview.html b/bedrock/firefox/templates/firefox/os/mwc-2015-preview.html
@@ -65,6 +65,27 @@ <h2>{{ _('Mozilla at Mobile World Congress 2015') }}</h2>
     </div>
   </section>
 
+  <section id="news">
+    <div class="container">
+      <div class="left">
+        <h3>{{ _('In the news') }}</h3>
+        <a href="">{{ _('See all press') }}</a>
+      </div>
+
+      <div class="right">
+      {% set feed_links = firefox_os_feed_links(LANG) %}
+      {% if feed_links %}
+        <ul>
+        {% for link, title in feed_links[:3] %}
+          <li><a rel="external" href="{{ link }}">{{ title }}</a></li>
+        {% endfor %}
+        </ul>
+      {% endif %}
+        </ul>
+      </div>
+    </div>
+  </section>
+
   <section id="info">
     <div class="container">
       <h3>{{ _('Be part of our growing family of partners') }}</h3>

diff --git a/media/css/firefox/os/mwc-2015-preview.less b/media/css/firefox/os/mwc-2015-preview.less
@@ -128,6 +128,49 @@ html, body {
     }
 }
 
+#news {
+    position: relative;
+    background: #fff;
+    padding: (@baseLine * 3) 0;
+
+    .container {
+        .clearfix();
+    }
+
+    h3 {
+        .font-size(48px);
+    }
+
+    a {
+        color: #2bb8a0;
+        .trailing-arrow();
+    }
+
+    .left,
+    .right {
+        float: left;
+        width: 50%;
+    }
+
+    .left a {
+        .font-size(@largeFontSize);
+    }
+
+    ul {
+        margin: 0;
+    }
+
+    li {
+        list-style-type: none;
+        margin: 0 0 @baseLine;
+
+        a {
+            .font-size(20px);
+            font-style: italic;
+        }
+    }
+}
+
 #info {
     position: relative;
     background: #eaeff2;
@@ -550,6 +593,28 @@ html, body {
         }
     }
 
+    #news {
+        text-align: center;
+
+        h3 {
+            .font-size(28px);
+        }
+
+        .left,
+        .right {
+            float: none;
+            width: auto;
+        }
+
+        ul {
+            margin-top: @baseLine * 2;
+        }
+
+        li a {
+            .font-size(@largeFontSize);
+        }
+    }
+
     #info {
         h3 {
             .font-size(28px);
@@ -675,6 +740,28 @@ html, body {
         }
     }
 
+    #news {
+        text-align: center;
+
+        h3 {
+            .font-size(28px);
+        }
+
+        .left,
+        .right {
+            float: none;
+            width: auto;
+        }
+
+        ul {
+            margin-top: @baseLine * 2;
+        }
+
+        li a {
+            .font-size(@largeFontSize);
+        }
+    }
+
     #info {
         h3 {
             .font-size(28px);