[planet-web] responsive design for the planet, fixes bug #691680

[Andreas Nilsson <andreasn src gnome org>]

commit 4a159974ac8caafbb8d02db0f4832fba7f5b0e20
Author: Andreas Nilsson <anilsson redhat com>
Date:   Wed Jan 8 22:36:53 2014 -0200

    responsive design for the planet, fixes bug #691680

 themes/gnome/index.html.tmpl |  131 +------------------------
 web/planet.css               |  223 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 226 insertions(+), 128 deletions(-)
---
diff --git a/themes/gnome/index.html.tmpl b/themes/gnome/index.html.tmpl
index f7a8f3d..0b67f79 100644
--- a/themes/gnome/index.html.tmpl
+++ b/themes/gnome/index.html.tmpl
@@ -16,131 +16,6 @@
        <link rel="stylesheet" href="https://planet.gnome.org/generic.css"; type="text/css">
        <link rel="stylesheet" href="https://blogs.gnome.org/wp-content/mu-plugins/bug-links/bug-links.css"; 
type="text/css">
 
-       <style rel="stylesheet" type="text/css">
-       #global_domain_bar
-       {
-    background: none repeat scroll 0 0 #FFFFFF;
-    height: 10px;
-    border: 0 none;
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-    vertical-align: baseline;
-    color: #2E3436;
-    font-family: Cantarell,'Droid Sans',Ubuntu,'DejaVu Sans',Arial,sans-serif;
-    font-size: 14px;
-    line-height: 1.7em;
-       }
-
-       #global_domain_bar a
-       {
-               -moz-border-radius: 5px 5px 5px 5px;
-               -webkit-border-radius: 5px;
-               border-radius: 5px 5px 5px 5px;
-               background: url("https://planet.gnome.org/img/30/favicon.png";) no-repeat scroll 8px 7px 
#FFFFFF;
-               color: #555753;
-               float: right;
-               font-size: 12px;
-               margin-right: 30px;
-               padding: 4px 12px 2px 26px;
-               text-decoration: none;
-               line-height: 1.7em;
-       }
-       
-       #page
-       {
-               background: url("https://planet.gnome.org/img/30/html-bg.png";) repeat-x scroll center top 
#FFFFFF;
-               font-family: Cantarell,'Droid Sans',Ubuntu,'DejaVu Sans',Arial,sans-serif;
-       }
-       
-               
-       a
-       { 
-               color: #0489B7;
-       }
-       
-       #global_domain_bar div {
-               max-width: 940px;
-               margin: 0 auto;
-       }
-       
-       div.post-contents
-       {
-               background: white;
-       }
-       
-       .post-title a
-       {
-               color: #0489B7;
-               font-weight: bold;
-       }
-       
-       #footer, #feeds
-       {
-    background: none repeat scroll 0 0 #D3D7CF;
-    color: #555753;
-       }
-       
-       #footer a
-       {
-    color: inherit;
-       }
-       
-       #footer-grass
-       {
-    background: url("https://planet.gnome.org/img/30/grass.png";) repeat-x scroll center top transparent;
-    height: 39px;
-    margin-top: -33px;
-       }
-       
-       #footer-art
-       {
-               margin-left: auto;
-               margin-right: auto;
-               clear: left;
-               height: 180px;
-               margin-top: 0;
-               width: 940px;
-               background-image: url("https://planet.gnome.org/img/30/default.png";);
-       }
-       
-       #planet-banner
-       {
-    margin-left: auto;
-    margin-right: auto;
-    clear: left;
-    margin-top: 0;
-    width: 65em;
-    padding: 0 1em;
-       }
-       
-       
-       #planet-subtitle
-       {
-               color: #555753;
-               font-size: 100%;
-               font-weight: bold;
-               margin: 0;
-               padding 0;
-               padding-top: 14px;
-       }
-       
-       #planet-logo
-       {
-               vertical-align: middle;
-               padding-bottom: 25px;
-               margin-left:    26px;
-               padding-right:  50px;
-       }
-       
-       .post
-       {
-               color: #555753;
-               line-height: 1.6;
-       }
-       </style>
-
-
        <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js";></script>
        <script type="text/javascript" src="https://planet.gnome.org/jquery.lazyload.min.js";></script>
        <script type="text/javascript"><!-- $(function(){ $('.post img').lazyload(); }); --></script>
@@ -158,10 +33,10 @@
   </div>
 
        <div id="planet-banner">
-               <p id="planet-subtitle">
+               <div id="planet-subtitle">
                        <a href="https://planet.gnome.org";><img id="planet-logo" 
src="https://planet.gnome.org/img/30/planet-logo.png";  alt="Planet GNOME" title="Planet GNOME"/></a>
-                       24 hours a day, 7 days a week, 365 days per year...
-               </p>
+                       <p>24 hours a day, 7 days a week, 365 days per year...</p>
+               </div>
        </div>
 
        <div id="content">
diff --git a/web/planet.css b/web/planet.css
index 3e79646..d1ecdb9 100644
--- a/web/planet.css
+++ b/web/planet.css
@@ -229,3 +229,226 @@ b.bo { bottom: 0px; left: 0px; background-position: bottom left; }
        text-align: center;
        font-size: small;
 }
+
+/* Copied from inline css FIXME */
+
+#global_domain_bar
+       {
+    background: none repeat scroll 0 0 #FFFFFF;
+    height: 10px;
+    border: 0 none;
+    font-size: 100%;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+    color: #2E3436;
+    font-family: Cantarell,'Droid Sans',Ubuntu,'DejaVu Sans',Arial,sans-serif;
+    font-size: 14px;
+    line-height: 1.7em;
+       }
+
+       #global_domain_bar a
+       {
+               -moz-border-radius: 5px 5px 5px 5px;
+               -webkit-border-radius: 5px;
+               border-radius: 5px 5px 5px 5px;
+               background: url("https://planet.gnome.org/img/30/favicon.png";) no-repeat scroll 8px 7px 
#FFFFFF;
+               color: #555753;
+               float: right;
+               font-size: 12px;
+               margin-right: 30px;
+               padding: 4px 12px 2px 26px;
+               text-decoration: none;
+               line-height: 1.7em;
+       }
+       
+       #page
+       {
+               background: url("https://planet.gnome.org/img/30/html-bg.png";) repeat-x scroll center top 
#FFFFFF;
+               font-family: Cantarell,'Droid Sans',Ubuntu,'DejaVu Sans',Arial,sans-serif;
+       }
+       
+               
+       a
+       { 
+               color: #0489B7;
+       }
+       
+       #global_domain_bar div {
+               max-width: 940px;
+               margin: 0 auto;
+       }
+       
+       div.post-contents
+       {
+               background: white;
+       }
+       
+       .post-title a
+       {
+               color: #0489B7;
+               font-weight: bold;
+       }
+       
+       #footer, #feeds
+       {
+    background: none repeat scroll 0 0 #D3D7CF;
+    color: #555753;
+       }
+       
+       #footer a
+       {
+    color: inherit;
+       }
+       
+       #footer-grass
+       {
+    background: url("https://planet.gnome.org/img/30/grass.png";) repeat-x scroll center top transparent;
+    height: 39px;
+    margin-top: -33px;
+       }
+       
+       #footer-art
+       {
+               margin-left: auto;
+               margin-right: auto;
+               clear: left;
+               height: 180px;
+               margin-top: 0;
+               width: 940px;
+               background-image: url("https://planet.gnome.org/img/30/default.png";);
+       }
+       
+       #planet-banner
+       {
+    margin-left: auto;
+    margin-right: auto;
+    clear: left;
+    margin-top: 0;
+    width: 65em;
+    padding: 0 1em;
+       }
+       
+       
+       #planet-subtitle
+       {
+               color: #555753;
+               font-size: 100%;
+               font-weight: bold;
+               margin: 0;
+               padding 0;
+               padding-top: 14px;
+       }
+       
+       #planet-logo
+       {
+               vertical-align: middle;
+               padding-bottom: 25px;
+               margin-left:    26px;
+               padding-right:  50px;
+       }
+       
+       .post
+       {
+               color: #555753;
+               line-height: 1.6;
+       }
+
+
+ media (max-width: 768px) {
+
+    #planet-banner {
+        width: auto;
+        padding: 0;
+        margin: ;
+    }
+
+    #planet-logo {
+        margin: 0;
+        padding: 0;
+        margin-left: 0;
+    }
+    
+    #planet-subtitle p {
+        display: none;
+    }
+    
+    #content {
+        padding: 0px;
+    }
+    
+    .entry {
+        border-top: 1px solid #c0c0c0;
+    }
+    
+    div.person-info {
+        float: none;
+        text-align: left;
+        padding: 0;
+        margin: 0;
+        left: 0;
+        margin-top: 0 !important;
+        width: auto;
+    }
+    
+    div.person-info a {
+           text-decoration: none;
+           color: #777;
+           font-size: large;
+           font-weight: bold;
+    }
+    
+    div.person-info img {
+        display: inline-block;
+        float: right;
+        max-width: 50px;
+    }
+    
+    div.person-info br,
+    div.person-info p {
+        display: none;
+    }
+    
+    div.post {
+        margin-left: 0;
+        background: none;
+        border: none;
+        box-shadow: none;
+        padding: 0;
+    }
+
+    /* padding for post */
+    div.person-info,
+    div.post,
+    h2.date {
+        padding: 10px 10px 0px;
+    }
+    
+    .post-contents {
+        overflow: hidden;
+    }
+    
+    .post-contents img,
+    .post-contents video,
+    .post-contents a img,
+    .post-contents table {
+        max-width: 100%;
+    }
+    
+    .post-contents .wp-caption {
+        margin: 0;
+    }
+    
+    .post-contents h1 {
+        line-height: 100%;
+        font-size: medium;
+    }
+    
+    .post-title {
+        font-weight: normal;
+    }
+    
+    #footer-art {
+        display: none;
+    }
+}