www-commits
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

www/server/staging/nav-bar/test9 layout7.css ed...


From: Therese Godefroy
Subject: www/server/staging/nav-bar/test9 layout7.css ed...
Date: Wed, 09 Apr 2014 11:12:55 +0000

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 14/04/09 11:12:55

Modified files:
        server/staging/nav-bar/test9: layout7.css edu-software-gimp.html 
                                      education.html 

Log message:
        Resize videos with 2 container divs, to avoid gray bands.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/nav-bar/test9/layout7.css?cvsroot=www&r1=1.14&r2=1.15
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/nav-bar/test9/edu-software-gimp.html?cvsroot=www&r1=1.1&r2=1.2
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/nav-bar/test9/education.html?cvsroot=www&r1=1.3&r2=1.4

Patches:
Index: layout7.css
===================================================================
RCS file: /webcvs/www/www/server/staging/nav-bar/test9/layout7.css,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -b -r1.14 -r1.15
--- layout7.css 8 Apr 2014 17:35:59 -0000       1.14
+++ layout7.css 9 Apr 2014 11:12:53 -0000       1.15
@@ -1,7 +1,8 @@
 /*
 layout.css -- css stylesheet used on www.gnu.org
 
-Copyright (C) 2006, 2007, 2008, 2009, 2010, 2011, 2013 Free Software Foundation
+Copyright (C) 2006, 2007, 2008, 2009, 2010, 2011,
+   2013, 2014 Free Software Foundation
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
@@ -60,12 +61,13 @@
    black, #111, #333, #666: tables
    #b9bcbf  bluish gray: #fsf-frame, #Action, .highlight-para, .announcement
    #c9cccf  bluish gray: .button, .toc, #legend
+   #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
    #6989b6  light blue: border for h3 (license-list.html)
    green, orange, red, blue: coded border for license-list.html
-
+*/
 
 /*** Luminosity contrast ratio and color difference ***
    source: http://springmeier.org/www/contrastcalculator/index.php
@@ -83,7 +85,6 @@
    #404040      #d1d4d7         6.97          444
    #444         white           9.74          561
    #555         white           7.46          510
-   #999         white           2.85          306
 
 Red from GNU banner
    #971611      white           8.61          704
@@ -132,7 +133,6 @@
    margin: 0;
    text-decoration: none;
    color: #000;
-   background-repeat: none
    background-color: #5b6a96;
    /* Source: http://www.impressivewebs.com/css3-linear-gradient-syntax/ */
    background: -moz-linear-gradient(#5b6a96, #c9cccf); /* FF 3.6+ */  
@@ -151,6 +151,7 @@
    margin: auto; max-width:74.92em; overflow: hidden;
    background-color: white;
 }
+
 .inner h2, .inner  ul { padding-left: 1.5%; }
 #content ul { padding-left: 0; }
 
@@ -215,10 +216,10 @@
 #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: 2em;
    padding: .15em .95em;
    background-color: #d1d4d7;
@@ -338,14 +339,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;
@@ -443,7 +444,6 @@
 #content ul li, #fsf-campaigns ul li {
    list-style: square;
 }
-
 #content ol {
   list-style: decimal; margin-left: 1.9em; margin-right: 1.9em;
 }
@@ -531,7 +531,6 @@
    font-weight: bold;
    margin: .7em 1em 1.5em 1em;
 }
-
 div#backtotop {
 /* For older versions of layout. */
    margin-left: 0; margin-bottom: 0; float: none;
@@ -704,8 +703,8 @@
    float: right;
    text-align: center;
    font-style: normal;
-   width: 17em;
-   padding: 0 .5em;
+   width: 17em; max-width: 100%;
+   padding: 0 .8em .5em .8em;
    margin:  .3em 1em 1em 1em;
    border: .3em solid #3465a4;
 }
@@ -814,7 +813,6 @@
    font-size: 1.3em;
    margin: 0;
 }
-
 div.edu-cases ul, div.edu-cases ol {
    padding-left: 3em;
    margin-right: 3em;
@@ -823,10 +821,53 @@
 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; max-width: 100%;
+   padding: 0 .4em .8em 1.2em;
+   margin: 0 1em 1em 1em;
+   border: .3em solid #3465a4;
+}
+
+/* For the videos in education.html and edu-software-gimp */
+/* 
http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design
 */
+
+#rms-movie {
+   display: inline-block;
+   position: relative;
+   width: 70%; min-width: 20em;
 }
 
-#rms-movie video { width: 100%; }
+#mani-movie {
+   display: block;
+   position: relative;
+   width: 100%; max-width: 50em;
+   margin: auto;
+}
+
+.container-4x3 {
+   padding-top: 75%; margin: auto;
+   overflow: hidden;
+}
+
+.container-16x9 {
+   padding-top: 56.25%;
+   overflow: hidden;
+}
+
+.container-16x9 video, .container-4x3 video {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
 
 /* End items specific to education */
 
@@ -921,12 +962,9 @@
 /* This is used in pages of lists, such as gnu-linux.faq.html,
    to give readers a hint that they can link directly to a given item.
    We make it less obtrusive than the item heading it follows.  */
-.anchor-reference-id { font-size: 85%; font-weight: normal; }
+.anchor-reference-id { font-size: 80%; font-weight: normal; }
 
-span.anchor-reference-id a {
-   color: #333 !important;
-   text-shadow: none;
-}
+span.anchor-reference-id a { color: #333 !important; text-shadow: none; }
 span.anchor-reference-id a:hover { color: #777 !important; }
 
 /* For license-list.html */

Index: edu-software-gimp.html
===================================================================
RCS file: /webcvs/www/www/server/staging/nav-bar/test9/edu-software-gimp.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- edu-software-gimp.html      7 Apr 2014 16:18:49 -0000       1.1
+++ edu-software-gimp.html      9 Apr 2014 11:12:54 -0000       1.2
@@ -11,7 +11,7 @@
 
 <!-- start of head-include-2.html -->
 <link rel="stylesheet" href="combo.css" media="screen" />
-<link rel="stylesheet" href="layout5.css" media="screen" />
+<link rel="stylesheet" href="layout7.css" media="screen" />
 <link rel="stylesheet" href="/mini.css" media="handheld" />
 <link rel="stylesheet" href="/print.css" media="print" />
 <!-- end of head-include-2.html -->
@@ -135,13 +135,15 @@
 description of the video</a> is available for the visually impaired).
 </p>
 
-<div class="video-responsive">
-<video width="320" controls="controls">
+<div id="mani-movie">
+<div class="container-4x3">
+<video controls="controls">
   <source
     src="http://audio-video.gnu.org/video/we_use_gnu-linux_low.ogv"; 
     type='video/ogg; codecs="theora, vorbis"' />
 </video>
-</div>
+</div> <!-- /container-4x3 -->
+</div> <!-- /mani-movie -->
 
 <p class="center">Watch and download the video as 
 <a href="http://audio-video.gnu.org/video/we_use_gnu-linux_high.ogv";>
@@ -311,7 +313,7 @@
 
 <p></p><p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2014/04/07 16:18:49 $
+$Date: 2014/04/09 11:12:54 $
 <!-- timestamp end -->
 </p>
 </div>

Index: education.html
===================================================================
RCS file: /webcvs/www/www/server/staging/nav-bar/test9/education.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -b -r1.3 -r1.4
--- education.html      7 Apr 2014 16:18:49 -0000       1.3
+++ education.html      9 Apr 2014 11:12:54 -0000       1.4
@@ -11,7 +11,7 @@
 
 <!-- start of head-include-2.html -->
 <link rel="stylesheet" href="combo.css" media="screen" />
-<link rel="stylesheet" href="layout5.css" media="screen" />
+<link rel="stylesheet" href="layout7.css" media="screen" />
 <link rel="stylesheet" href="/mini.css" media="handheld" />
 <link rel="stylesheet" href="/print.css" media="print" />
 <!-- end of head-include-2.html -->
@@ -90,7 +90,6 @@
 
 
 <h3>The Basics</h3>
-
 <p>The GNU Project was 
 <a href=" /gnu/initial-announcement.html">launched</a> in 1983 by 
 Richard Stallman to develop a Free Libre operating system: the GNU 
@@ -119,12 +118,14 @@
 </blockquote>
 
 <div  id="rms-movie">
+<div  class="container-16x9">
 <!-- GNUN: localize URL /education/rms-education-es.ogv -->
 <video controls="controls">
   <source
     src="http://www.gnu.org/education/rms-education-es.ogv";
     type='video/ogg; codecs="theora, vorbis"' />
 </video>
+</div> <!-- /container-16x9 -->
 </div> <!-- /rms-movie -->
 
 <p>
@@ -200,7 +201,7 @@
 
 <p></p><p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2014/04/07 16:18:49 $
+$Date: 2014/04/09 11:12:54 $
 <!-- timestamp end -->
 </p>
 </div>



reply via email to

[Prev in Thread] Current Thread [Next in Thread]