www layout.css

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 14/04/07 16:26:07

Modified files:
        .              : layout.css 

Log message:
        Restyling of searcher, top-links and translation list; transnotes > 
translators-notes; other adjustments.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.166&r2=1.167

Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -b -r1.166 -r1.167
--- layout.css  31 Mar 2014 07:30:46 -0000      1.166
+++ layout.css  7 Apr 2014 16:25:22 -0000       1.167
@@ -30,7 +30,7 @@
    black    normal text, hover on #555 and nav-bars
    white    #navigation
    #999     light gray: text shadow
-   #222, #333, #555: special items
+   #222, #333, #404040, #555: special items
    #777     medium gray: normal hover
    #334683  blue from GNU banner: h2, special links
    #004780  greenish blue: normal links
@@ -41,11 +41,10 @@
 
 Backgrounds
    white    #inner, navbar li.active
-   #f5f6f7  very light bluish gray: #footer, .emph-box
-   #f0f2f4  #translations, #outdated, .listing
+   #f0f2f4  light bluish gray: #translations, .emph-box, #outdated,
+            .listing, #footer
    #e7e9eb  .button, .lyrics
-   #d1d4d7  #edu-navbar, #fsf-links
-   #c9cccf  #searcher
+   #d1d4d7  #edu-navbar, #fsf-links, #searcher
    #ddd     gray (looks purplish): #gpl-compat-matrix 
    #ccffcc  light green: #gpl-compat-matrix
    #e4ffcc  light yellowish green: #gpl-compat-matrix
@@ -62,6 +61,7 @@
    black, #111, #333, #666: tables
    #b9bcbf  bluish gray: #fsf-frame, #Action, .highlight-para, .announcement
    #c9cccf  bluish gray: .button
+   #d1d4d7  bluish gray: #translations, #outdated
    #3465a4  blue (slightly lighter than GNU banner): edu-cases ridges, .note
    #334683  #join-fsf
    #171d33  dark blue (from screenshot): shade behind .button.large
@@ -80,6 +80,7 @@
    #333         white          12.63          612
    #333         #e7e9eb        10.38          546
    #333         #c9cccf         7.83          459
+   #404040      #d1d4d7         6.97          444
    #444         white           9.74          561
    #555         white           7.46          510
 
@@ -104,6 +105,7 @@
    #005090      white           8.23          461
    #005090      #e4ffcc         7.64          383
    #005090      #fff898         7.50          351
+   #005090      #f0f2f4         7.34          422
    #005090      #ccffcc         7.35          359
    #005090      #777            1.84          103
    #005090      #333            1.53          151
@@ -199,25 +201,27 @@
    float: left;
    font-size: .9em;
    font-family: "FreeSans", sans-serif;
-   line-height: 2.2em;
+   line-height: 1.4em;
    font-weight: bold;
-   padding: 0 1em;
-   margin-top: .1em;
+   padding: .1em .4em;
+   margin: .33em 1.1em;
+   background: #d1d4d7;
 }
 #toplinks a, #toplinks a:visited {
    padding: 0 .2em;
-   color: #222; text-decoration: none;
+   color: #404040; text-decoration: none;
 }
 #toplinks a:hover { color: #777; }
 
 #searcher {
+   text-align: right;
    font-size: .9em;
    font-family: "FreeSans", sans-serif;
    font-weight: bold;
    text-align: right;
-   line-height: 2.1em;
-   padding: .15em 1.2% .15em 1.2%;
-   background-color: #c9cccf;
+   line-height: 2em;
+   padding: .15em .95em;
+   background-color: #d1d4d7;
 }
 
 #searcher input {
@@ -227,11 +231,16 @@
 
 #translations {
    clear: both;
+   text-align: left;
    font-size: .8em;
    font-family: "FreeSans", sans-serif;
    line-height: 1.3em;
-   padding: 0 1.5% .2em 1.5%;
+   padding: .2em 0.5em .1em .5em;
    background-color: #f0f2f4;
+   border-top: .1em solid #d1d4d7;
+   border-bottom: .4em solid #d1d4d7;
+   border-left: 1.25em solid #d1d4d7;
+   border-right: 1.25em solid #d1d4d7;
 }
 #translations span {
    display: inline; white-space: nowrap;
@@ -270,7 +279,10 @@
 
 /*** HEADER ***/
 
-#header { font-family: "FreeSans", sans-serif; background-color: white; }
+#header {
+   font-family: "FreeSans", sans-serif;
+   background-color: white;
+}
 #header:after {
    clear: both; content: ""; display: block;
    height: 0px; visibility: hidden; width: 0px;
@@ -326,14 +338,14 @@
 #gnu-banner {
    font-size: 1.8em;
    font-weight: bold;
-   line-height: 1.1em;
-   padding-top: 1.4em;
+   line-height: 1.3em;
+   padding-top: 1.3em;
 }
 #gnu-banner img {
    float: left;
    height: 2.4em;
    margin: 0 .15em 0 1.5%;
-   position: relative; bottom: .7em;
+   position: relative; bottom: .5em;
 }
 #gnu-banner a {
    color: #334683; text-decoration: none;
@@ -537,7 +549,7 @@
    font-size: .9em;
    padding: 1.11em 1.5%;
    color: #333;
-   background-color: #f5f6f7;
+   background-color: #f0f2f4;
    border-top: 1px solid #c9cccf;
 }
 #footer p { margin-bottom: 0; }
@@ -546,6 +558,8 @@
    margin-bottom: .7em;
 }
 
+#bottom-notes { margin-top: .7em; }
+
 
 /*** HOME PAGE ***/
 
@@ -608,7 +622,7 @@
 .emph-box {
    padding: 1em; padding-top: 0;
    margin-bottom: 2.5em;
-   background-color: #f5f6f7;
+   background-color: #f0f2f4;
    border: 1px solid #c9cccf;
 }
 .emph-box p { font-size: .9em }
@@ -688,7 +702,7 @@
    float: right;
    text-align: center;
    font-style: normal;
-   width: 17em;
+   width: 17em; max-width: 100%;
    padding: 0 .5em;
    margin:  .3em 1em 1em 1em;
    border: .3em solid #3465a4;
@@ -732,8 +746,8 @@
 #outdated a:hover { color: #777; }
 
 /* For translators notes */
-/* #content .transnotes { font-size: .9em; } */
-#content .transnotes hr { margin-top: 1.65em; }
+#content .translators-notes { font-size: .9em; }
+#content .translators-notes hr { margin-top: 1.65em; }
 
 
 /*** EDUCATION ***/
@@ -806,10 +820,47 @@
 img.ambedkar {
    float: right;
    width: 26em; max-width: 100%;
-   margin: 2.4em 0 2.4em 2.4em;
+   margin: 1.3em 0 2em 2em;
+}
+
+/* For the education sub-section "In Depth" */
+#content .indepth {
+   clear: right;
+   float: right;
+   font-style: normal;
+   width: 17em;
+   padding: 0 .5em;
+   margin: 0 1em 1em 1em;
+   border: .3em solid #3465a4;
+}
+
+/* For the video in education.html */
+/* 
http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design
 */
+
+.video-responsive {
+   position: relative;
+   max-width: 50em;
+   height: 0;
+   overflow: hidden;
+   padding-bottom: 60%;
+   margin: auto;
+}
+
+#rms-movie {
+   position: relative;
+   height: 0;
+   min-width: 20em;
+   overflow: hidden;
+   padding-bottom: 50%;
 }
 
-#rms-movie video { width: 100%; }
+#rms-movie video, .video-responsive video {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
 
 /* End items specific to education */