www/server/staging/ghm2016 home-ghm.html

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 16/06/21 19:17:03

Modified files:
        server/staging/ghm2016: home-ghm.html 

Log message:
        New version of the home page, inspired by Matt.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/ghm2016/home-ghm.html?cvsroot=www&r1=1.2&r2=1.3

Patches:
Index: home-ghm.html
===================================================================
RCS file: /webcvs/www/www/server/staging/ghm2016/home-ghm.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- home-ghm.html       16 Jun 2016 17:27:14 -0000      1.2
+++ home-ghm.html       21 Jun 2016 19:17:03 -0000      1.3
@@ -14,64 +14,111 @@
    height: 0px; visibility: hidden; width: 0px;
 }
 #home h2 {
-   color: #333; text-shadow: none;
+   color: #333;
    margin-bottom: .6em;
 }
-#home .button.large {
+.button.large {
    font-size: 1.5em;
    font-family: "FreeSans", sans-serif;
    float: right;
    position: relative; top: .5em;
 }
-#home .button a, #home .button a:visited {
-   color: #e74c3c; color: white;
-   background: white; background: #e74c3c;
+.button.large a, .button.large a:visited {
+   color: white;
+   background: #e74c3c;
    border: .2em solid white;
 }
+.button.large a:hover {
+   color: white;
+   background: #b2140a;
+}
 #gnu-linux {
    width: 30em; max-width: 100%;
    padding-top: .3em;
    margin: 0 auto 2em;
 }
-#gnu-linux p { margin: 0; }
-#gnu-linux img { width: 93%; }
-#home .button a:hover { color: #777; color: #bbb; }
-#home .first-column p.back { margin: 1em 0; }
-#home .second-column h4 img { height: .75em; width: .75em; }
-#home .emph-box, #Action, #home .highlight-para {
-   margin: 2.3em 0 1em;
+#gnu-linux p {
+   margin: 0;
 }
-#home .emph-box h4 {
-   text-align: center;
-   font-size: 1.5em;
-   margin-top: 0;
+#gnu-linux img {
+   width: 93%;
+}
+p.back {
+   margin-bottom: 0;
+}
+.card p.back {
+   margin-top: 1em;
 }
-#home .emph-box {
+.card {
+   margin: 2.3em 0 1.5em;
    background: white;
+   border: 1px solid #ccc;
+   border-radius: .4em;
+   -moz-border-radius: .4em;
+   -khtml-border-radius: .4em;
+   -webkit-border-radius: .4em;
+   -opera-border-radius: .4em;
+}
+.card-header {
+   padding: .7em 1.2em;
+   margin: 0; 
+   background: #f5f5f5;
+   border-bottom: 1px solid #ccc;
+   border-radius: .4em .4em 0 0;
+   -moz-border-radius: .4em .4em 0 0;
+   -khtml-border-radius: .4em .4em 0 0;
+   -webkit-border-radius: .4em .4em 0 0;
+   -opera-border-radius: .4em .4em 0 0;
+}
+.card-header h3 {
+   margin: 0;
+}
+.card-header img {
+   height: 1em;
+   margin: 0 1em;
+   position: relative; top: .1em;
+}
+.card-body ul { margin: 0; }
+.card-body > *:first-child > li:first-child,
+ .card-body > *:first-child  {
+   margin-top: 0;
+}
+.card .card-body > * > li, .card-body > * {
+   margin-bottom: 0;
+}
+.card-body {
+   padding: 1em 1.2em 1.2em;
 }
-#Action {
-   text-align: left;
-   padding: 0 1em;
-   border-left: .3em dotted #f49943;
-   border-right: .3em dotted #f49943;
-}
-#Action h2 {
-   text-align: center;
-   margin-bottom: .9em;
-}
-#Action li { margin-bottom: .7em; }
-#home .highlight-para {
-   border: .1em solid #f49943;
-}
-p#backtotop { float: right; margin-top: 2.5em; }
-#sisters { font-size: .9em; margin: 0 3% 1.5em 3%; }
address@hidden (min-width: 55em) {
-   #home .first-column {
-      width: 60%;
+#home #mission-statement {
+   text-align: justify;
+   padding: 0;
+   background: #f7f7f7;
+   border-color: #e74c3c;
+}
+p#fsfbanner {
+   width: 18em;
+   max-width: 100%;
+   margin: 0 auto;
+}
+#home #mission-statement img {
+   float: none;
+   width: 100%;
+   margin: .5em 0 0;
+}
+#blurb {
+   margin: 0;
+   background: #f5f5f5;
+}
+#content #backtotop {
+   margin: 0;
+}
address@hidden (min-width: 62em) {
+   .first-column {
+      width: 68%;
       float: left;
    }
-   #home .second-column {
-      width: 37%;
+   .second-column {
+      width: 29%;
       float: right;
    }
 }
@@ -79,20 +126,18 @@
 <!--#if expr="$LANGUAGE_SUFFIX = /[.](ar|fa|he)/" -->
 <!--
 p#backtotop { float: left; }
address@hidden (min-width: 55em) {
-   #home .first-column {
-      width: 60%;
address@hidden (min-width: 62em) {
+   .first-column {
       float: right;
    }
-   #home .second-column {
-      width: 37%;
+   .second-column {
       float: left;
    }
 }
 -->
 <!--#endif -->
 </style>
-<!--#include virtual="/server/staging/ghm2016/fs-gang-definitions.transp.html" 
-->
+<!--#include virtual="/server/staging/ghm2016/fs-gang-definitions.html" -->
 <!--#include virtual="/po/home.translist" -->
 <!--#include virtual="/server/staging/ghm2016/banner.html" -->
 
@@ -102,7 +147,6 @@
 
 <div id="home">
 <div class="first-column">
-
 <h2>What is GNU?</h2>
 
 <p>GNU is an operating system that
@@ -119,9 +163,9 @@
 <p class="button large"><a
    href="/distros/free-distros.html">Try GNU/Linux!</a></p>
 
-<p><a href="/distros/screenshot.html"><img
+<a href="/distros/screenshot.html"><img
    src="/distros/screenshots/trisquel-medium.jpg"
-   alt="Screenshot of GNU"/></a></p>
+   alt="Screenshot of GNU"/></a>
 </div>
 
 <h2>What is the Free Software Movement?</h2>
@@ -133,6 +177,36 @@
 <a 
href="https://www.fsf.org/blogs/rms/20140407-geneva-tedx-talk-free-software-free-society";>
 the video explanation</a>.</p>
 
+<div id="mission-statement" class="card">
+<div class="card-body">
+<p id="fsfbanner"><a href="http://www.fsf.org";><img
+src="logo-fsf.org.small-transp.png" alt=" [FSF logo] "/></a></p>
+
+<blockquote>
+<p><strong>&ldquo;Our
+mission is to preserve, protect and promote the freedom to use, study,
+copy, modify, and redistribute computer software, and to defend the
+rights of Free Software users.&rdquo;</strong></p>
+</blockquote>
+
+<p>The <a href="http://www.fsf.org";>Free Software Foundation</a> is
+the principal organizational sponsor of the GNU Operating System.
+<strong>Support GNU and the FSF</strong> by <a
+href="http://shop.fsf.org/";>buying manuals and gear</a>, <a
+href="https://my.fsf.org/associate/support_freedom?referrer=4052";>
+<strong>joining the FSF</strong></a> as an associate member, or making
+a <strong>donation</strong>, either <a
+href="http://donate.fsf.org/";>directly to the FSF</a> or <a
+href="http://flattr.com/thing/313733/gnuproject-on-Flattr";>via
+Flattr</a>.</p>
+
+<p id="sisters">The <a href="http://www.fsf.org/";>FSF</a> also has sister
+organizations in <a href="http://www.fsfe.org";>Europe</a>, <a
+href="http://www.fsfla.org/";>Latin America</a> and <a
+href="http://fsf.org.in/";>India</a>.</p>
+</div>
+</div>
+
 <h2>What is Free Software?</h2>
 
 <p><strong>Free software means the users have the freedom to run,
@@ -200,18 +274,24 @@
 </div><!-- /first-column -->
 <div class="second-column">
 
-<div id="Flashes" class="emph-box">
-
-<h4><a href="http://planet.gnu.org/";>Planet GNU</a>
-<a href="http://planet.gnu.org/rss20.xml";><img src="/feed-icon-10x10.png" 
alt="RSS Feed" /></a></h4>
+<div id="Flashes" class="card">
+<div class="card-header">
+<h3><a href="http://planet.gnu.org/";>Planet GNU</a>
+<a href="http://planet.gnu.org/rss20.xml";><img src="/feed-icon-10x10.png" 
alt="RSS Feed" /></a></h3>
+</div>
+<div class="card-body">
 <!--#include virtual="/planetfeeds.html" -->
 <p>For more news, see <a href="http://planet.gnu.org/";>Planet GNU</a>
 and the list of <a href="/software/recent-releases.html">recent GNU
 releases</a>.</p>
 </div>
+</div>
 
-<div id="Action">
-<h2>Take Action</h2>
+<div id="Action" class="card">
+<div class="card-header">
+<h3>Take Action</h3>
+</div>
+<div class="card-body">
 <ul>
 <li><strong><a href="http://www.fsf.org/campaigns";>Support current FSF
 campaigns</a></strong>.</li>
@@ -249,8 +329,13 @@
 
 <p class="back"><a href="/server/takeaction.html">More action items.</a></p>
 </div>
+</div>
 
-<div class="highlight-para">
+<div id="unmaint" class="card">
+<div class="card-header">
+<h3>Help GNU</h3>
+</div>
+<div class="card-body">
 <p><strong>Can you contribute to any of
 these <a href="http://www.fsf.org/campaigns/priority-projects/";>High
 Priority Projects</a>?</strong> Gnash, coreboot, free distributions of
@@ -259,14 +344,13 @@
 free software replacements for Skype, OpenDWG libraries, and Oracle
 Forms.</p>
 
-<p id="unmaint"><strong>Can you take over an <a
+<p><strong>Can you take over an <a
 href="/server/takeaction.html#unmaint">unmaintained GNU
 package</a>?</strong>
 <span class="gnun-split"></span>
   <a href="/software/halifax/">halifax</a>,
   <a href="/software/metahtml/">metahtml</a>,
-  <a href="/software/orgadoc/">orgadoc</a>
-  <span class="gnun-split"></span>,
+  <a href="/software/orgadoc/">orgadoc</a><span class="gnun-split"></span>,
 are all <a href="/server/takeaction.html#unmaint">looking for
 maintainers</a>.  Also, these packages are looking for co-maintainers:
 <span class="gnun-split"></span>
@@ -276,25 +360,40 @@
   <a href="/software/powerguru/">powerguru</a><span class="gnun-split"></span>.
 See the package web pages for more information.</p>
 </div>
-
-<div id="blurb" class="emph-box">
-<!--#include virtual="/server/home-pkgselect.html" -->
-<!--#include virtual="/server/home-pkgblurbs.html" -->
-<p class="back"><small><a href="/manual/blurbs.html">Short descriptions for 
all GNU
-packages.</a></small></p>
 </div>
 
 </div><!-- /second-column -->
 </div><!-- /home -->
+<p id="backtotop"><a href="#header">back to top</a></p>
 
 </div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/fs-gang.html" -->
-<!--#include virtual="/server/footer.html" -->
+<div id="fs-gang">
+<div class="img-container">
+<a href="http://www.fsf.org/working-together/gang";>meet the free software
+gang<img src="/graphics/fs-gang.png" alt=" [FS gang] "/></a>
+</div> <!-- /img-container -->
+<div id="blurb" class="card">
+<div class="card-body">
+<!--#include virtual="/server/home-pkgselect.html" -->
+<!--#include virtual="/server/home-pkgblurbs.html" -->
+<p class="back"><small><a href="/manual/blurbs.html">Short descriptions for 
all GNU
+packages.</a></small></p>
+</div>
+</div>
+</div> <!-- /fs-gang -->
 
-<p id="sisters">The <a href="http://www.fsf.org/";>FSF</a> also has sister
-organizations in <a href="http://www.fsfe.org";>Europe</a>, <a
-href="http://www.fsfla.org/";>Latin America</a> and <a
-href="http://fsf.org.in/";>India</a>.</p>
+<hr class="no-display" />
+<div id="fsf-links">
+ <ul>
+  <li><a href="/">GNU&nbsp;home&nbsp;page</a></li>
+  <li><a href="http://www.fsf.org/";>FSF&nbsp;home&nbsp;page</a></li>
+  <li><a href="/graphics/graphics.html">GNU&nbsp;Art</a></li>
+  <li><a href="/people/people.html">GNU's&nbsp;Who?</a></li>
+  <li><a 
href="http://directory.fsf.org";>Free&nbsp;Software&nbsp;Directory</a></li>
+  <li><a href="https://h-node.org/";>Hardware</a></li>
+  <li><a href="/server/sitemap.html">Site&nbsp;map</a></li>
+ </ul>
+</div><!-- /fsf-links -->
 
 <div id="footer">
 <div class="unprintable">
@@ -353,7 +452,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2016/06/16 17:27:14 $
+$Date: 2016/06/21 19:17:03 $
 <!-- timestamp end -->
 </p>
 </div>