[FFmpeg-devel] [PATCH 09/16] web: Various UI improvements based on IRC feedback

Clément Bœsch u at pkh.me
Mon Jul 14 10:31:11 CEST 2014


From: db0company <db0company at gmail.com>

+ Consulting page new design
+ Reordered left menu
+ Donations new design
---
 src/consulting     | 195 +++++++++++++++++++++---------------
 src/contact        | 287 ++++++++++++++++++++++++++++++-----------------------
 src/donations      |  83 +++++++++++-----
 src/download       |  23 +++--
 src/index          |   9 +-
 src/template_head2 |  69 ++++++-------
 style.less         |  43 +++++---
 7 files changed, 410 insertions(+), 299 deletions(-)

diff --git a/src/consulting b/src/consulting
index 49be7d6..4d7eb68 100644
--- a/src/consulting
+++ b/src/consulting
@@ -1,34 +1,39 @@
-<p>
-If you're running a business that uses FFmpeg or would like to use FFmpeg,
-you will sometimes want to have an expert, i.e. one of the original
-developers, work with you to figure out an issue, fix a bug or add
-some new feature.
+<p class="with-icon">
+  <span class="pull-left"><i class="fa fa-life-saver fa-5x"></i></span>
+  If you're running a business that uses FFmpeg or would like to use FFmpeg,
+  you will sometimes want to have an expert, i.e. one of the original
+  developers, work with you to figure out an issue, fix a bug or add
+  some new feature.
 </p>
 
-<p>
-This page is a list of those FFmpeg developers that are available for
-employment or consulting. The FFmpeg project highly recommends these people
-to be hired by your business. All developers on this list maintain some
-code in FFmpeg,
-which serves as a testimony for their competence. By hiring one of these
-developers, your business can also (indirectly) support the development
-of FFmpeg.
+<p class="with-icon">
+  <span class="pull-right"><i class="fa fa-users fa-5x"></i></span>
+  This page is a list of those FFmpeg developers that are available for
+  employment or consulting. The FFmpeg project highly recommends these people
+  to be hired by your business. All developers on this list maintain some
+  code in FFmpeg,
+  which serves as a testimony for their competence. By hiring one of these
+  developers, your business can also (indirectly) support the development
+  of FFmpeg.
 </p>
 
-<p>
-If you do not know whom to hire in particular or if none of the listed
-areas of expertise fits your requirements, you can send an email to
-the <a href="contact.html">ffmpeg-devel mailing list</a>, where it will
-reach a wider audience.
+<p class="with-icon">
+  <span class="pull-left"><i class="fa fa-question-circle fa-5x"></i></span>
+  If you do not know whom to hire in particular or if none of the listed
+  areas of expertise fits your requirements, you can send an email to
+  the <a href="contact.html">ffmpeg-devel mailing list</a>, where it will
+  reach a wider audience.
 </p>
 
+<br><br>
+
 <!--
 1) please keep this list alphabetically (by firstname)
 2) please limit yourself to approx. one paragraph each
 3) make sure to add some way for potential clients to contact you
 
 E.g.:
-"<h2>Firstname M.I. Lastname</h2>
+"<h3>Firstname M.I. Lastname</h3>
  <p>
  Firstname is located in Location, Country and available for
  contracting work. He has worked on FFmpeg since Year1 and has been a maintainer
@@ -38,65 +43,93 @@ E.g.:
  </p>"
 -->
 
-<h2>Baptiste Coudurier</h2>
-<p>
-Baptiste Coudurier is located in Los Angeles, California and is available for
-contracting work. He has worked on FFmpeg since 2005 and has been a maintainer
-since 2006. He has special expertise in broadcast codecs
-(ProRes, DNxHD, IMX/D-10, AVC-Intra), formats (MXF, GXF, MOV) and usages
-(Avid, FCP, Interlacing, Time Code, Metadata). You can contact him by email at
-<a href="mailto:baptiste.coudurier at gmail.com">baptiste.coudurier at gmail.com</a>.
-</p>
-
-<h2>Benjamin Larsson</h2>
-<p>
-Benjamin Larsson is located in Stockholm, Sweden and is available for contracting
-work. He has worked on FFmpeg since 2004. Main area of expertise is audio codecs.
-You can contact him by email at
-<a href="mailto:benjamin%20at%20southpole%20dot%20se">benjamin at southpole dot se</a>.
-</p>
-
-<h2>Carl Eugen Hoyos</h2>
-<p>
-Carl Eugen is located in Austria and available for contracting work.
-He has worked on FFmpeg since 2007 and has been a maintainer since 2007.
-He has experience with software license issues, and currently maintains the
-FFmpeg bug tracker
-You can contact him by email at
-<a href="mailto:ce at hoyos.ws">ce at hoyos dot ws</a>.
-</p>
-
-<h2>Clément Bœsch</h2>
-<p>
-Clément is located in France and available for contracting work.
-He has worked on FFmpeg since 2011 and has been a maintainer since 2011.
-He has experience with subtitles, filters and all kinds of random
-things accross the codebase.
-You can contact him by email at
-<a href="mailto:ubitux%20at%20gmail%20dot%20com">ubitux at gmail dot com</a>.
-</p>
-
-<h2>Michael Niedermayer</h2>
-<p>
-Michael is located in Vienna, Austria and available for contracting work.
-He is an expert in all areas of video coding as well as x86 assembly.
-You can contact him by email at <a href="mailto:michael at niedermayer.cc">michael at niedermayer.cc</a>.
-</p>
-
-<h2>Paul B Mahol</h2>
-<p>
-Paul is located in Croatia and available for contracting work. He has
-worked on FFmpeg since 2011 and has been a maintainer since 2012. He has
-experience with various codecs, containers, filters and reverse
-engineering. You can contact him by email at
-<a href="mailto:onemda at gmail dot com">onemda at gmail dot com</a>.
-</p>
-
-<h2>Stefano Sabatini</h2>
-<p>
-Stefano is located in Italy and is available for contracting
-work. He has worked on FFmpeg since 2007 and has been a maintainer since
-2008. He has special expertise in libavfilter, ff* tools usage and
-usability issues. You can contact him by email at
-<a href="mailto:stefasab at gmail.com">stefasab at gmail.com</a>.
-</p>
+<div class="row">
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Baptiste Coudurier</h3>
+      <p>
+	Baptiste Coudurier is located in Los Angeles, California and is available for
+	contracting work. He has worked on FFmpeg since 2005 and has been a maintainer
+	since 2006. He has special expertise in broadcast codecs
+	(ProRes, DNxHD, IMX/D-10, AVC-Intra), formats (MXF, GXF, MOV) and usages
+	(Avid, FCP, Interlacing, Time Code, Metadata). You can contact him by email at
+	<a href="mailto:baptiste.coudurier at gmail.com">baptiste.coudurier at gmail.com</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Benjamin Larsson</h3>
+      <p>
+	Benjamin Larsson is located in Stockholm, Sweden and is available for contracting
+	work. He has worked on FFmpeg since 2004. Main area of expertise is audio codecs.
+	You can contact him by email at
+	<a href="mailto:benjamin%20at%20southpole%20dot%20se">benjamin at southpole dot se</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Carl Eugen Hoyos</h3>
+      <p>
+	Carl Eugen is located in Austria and available for contracting work.
+	He has worked on FFmpeg since 2007 and has been a maintainer since 2007.
+	He has experience with software license issues, and currently maintains the
+	FFmpeg bug tracker
+	You can contact him by email at
+	<a href="mailto:ce at hoyos.ws">ce at hoyos dot ws</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+</div> <!-- row -->
+<div class="row">
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Clément Bœsch</h3>
+      <p>
+	Clément is located in France and available for contracting work.
+	He has worked on FFmpeg since 2011 and has been a maintainer since 2011.
+	He has experience with subtitles, filters and all kinds of random
+	things accross the codebase.
+	You can contact him by email at
+	<a href="mailto:ubitux%20at%20gmail%20dot%20com">ubitux at gmail dot com</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Michael Niedermayer</h3>
+      <p>
+	Michael is located in Vienna, Austria and available for contracting work.
+	He is an expert in all areas of video coding as well as x86 assembly.
+	You can contact him by email at <a href="mailto:michael at niedermayer.cc">michael at niedermayer.cc</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Paul B Mahol</h3>
+      <p>
+	Paul is located in Croatia and available for contracting work. He has
+	worked on FFmpeg since 2011 and has been a maintainer since 2012. He has
+	experience with various codecs, containers, filters and reverse
+	engineering. You can contact him by email at
+	<a href="mailto:onemda at gmail dot com">onemda at gmail dot com</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+</div> <!-- row -->
+<div class="row">
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Stefano Sabatini</h3>
+      <p>
+	Stefano is located in Italy and is available for contracting
+	work. He has worked on FFmpeg since 2007 and has been a maintainer since
+	2008. He has special expertise in libavfilter, ff* tools usage and
+	usability issues. You can contact him by email at
+	<a href="mailto:stefasab at gmail.com">stefasab at gmail.com</a>.
+      </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+</div> <!-- row -->
diff --git a/src/contact b/src/contact
index 796e683..99ed4b7 100644
--- a/src/contact
+++ b/src/contact
@@ -1,128 +1,163 @@
-<h2 id="MailingLists">Mailing Lists</h2>
 
-<p>
-Please follow the netiquette when posting on FFmpeg mailing lists, especially
-avoid <a href="http://en.wikipedia.org/wiki/Top-posting">top-posting</a> and
-thread hijacking (that is, replying to a thread and changing the subject line to
-something completely unrelated that was not being discussed within the original
-thread).
-Configuring your mail client to break lines after 70 or so characters is a plus.
-If you attach files, avoid compressing small files, uncompressed is preferred.
-Also please try to avoid posting mails with overly long signatures or nonsense
-corporate disclaimers that claim the content of your mails is confidential.
-</p>
-<p>
-Attached patches should not have application/octet-stream as mime-type, but
-text/plain or even better text/x-diff or text/x-patch.
-If you send us a patch, please make it some form of unified diff. We prefer
-patches made using <code>git format-patch</code> from the root of your FFmpeg
-checkout or sent with <code>git send-email</code>. For more detailed
-guidelines, have a look at the
-<a href="http://www.mplayerhq.hu/DOCS/tech/patches.txt">MPlayer patch guidelines</a>
-most of what is written there applies to FFmpeg as well.
-Trespass these rules at the risk of being flamed.
-</p>
+<div class="well">
+  <div class="row">
+    <div class="col-md-9">
+      <h3 id="MailingLists">
+	<i class="fa fa-inbox"></i>
+	Mailing Lists</h3>
+      <div style="color: white">
+	<p>
+	  Please follow the netiquette when posting on FFmpeg mailing lists, especially
+	  avoid <a href="http://en.wikipedia.org/wiki/Top-posting">top-posting</a> and
+	  thread hijacking (that is, replying to a thread and changing the subject line to
+	  something completely unrelated that was not being discussed within the original
+	  thread).
+	</p>
+      </div>
+      <small style="color: white">
+	<p>
+	  Configuring your mail client to break lines after 70 or so characters is a plus.
+	  If you attach files, avoid compressing small files, uncompressed is preferred.
+	  Also please try to avoid posting mails with overly long signatures or nonsense
+	  corporate disclaimers that claim the content of your mails is confidential.
+	</p>
+	<p>
+	  Attached patches should not have application/octet-stream as mime-type, but
+	  text/plain or even better text/x-diff or text/x-patch.<br>
+	  If you send us a patch, please make it some form of unified diff. We prefer
+	  patches made using <code>git format-patch</code> from the root of your FFmpeg
+	  checkout or sent with <code>git send-email</code>. For more detailed
+	  guidelines, have a look at the
+	  <a href="http://www.mplayerhq.hu/DOCS/tech/patches.txt">MPlayer patch guidelines</a>
+	  most of what is written there applies to FFmpeg as well.
+	  Trespass these rules at the risk of being flamed.
+	</p>
+      </small>
+      <br>
+      <div class="list-group">
+	<a class="list-group-item" href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-user/">
+	  <strong>ffmpeg-user</strong><br>
+	  This list is for regular user questions and discussions including usage of
+	  <code>ffmpeg</code>, <code>ffplay</code>, <code>ffprobe</code>, and
+	  <code>ffserver</code>
+	</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/mailman/listinfo/libav-user/">
+	  <strong>libav-user</strong><br>
+	  This list is for application developer questions about development using the
+	  FFmpeg libraries
+	</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-devel/">
+	  <strong>ffmpeg-devel</strong><br>
+	  This list is for development of FFmpeg itself. It is <strong>not</strong> for
+	  development of software that use the FFmpeg libraries and <strong>not</strong>
+	  for bug reports
+	</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-cvslog/">
+	  <strong>ffmpeg-cvslog</strong><br>
+	  This list gets all changes to the FFmpeg sources / main git repository.
+	</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-trac/">
+	  <strong>ffmpeg-trac</strong><br>
+	  This list gets all changes to the FFmpeg Trac issue tracker.
+	</a>
+      </div> <!-- list-group -->
+    </div> <!-- col -->
+    <div class="col-md-3">
+      <h3 id="MailingListArchives">
+	<i class="fa fa-archive"></i>
+	Archives</h3>
+      <p>
+	To read up on past discussions, read the mailing list archives. It is highly
+	likely that you will find an answer to your questions there, so make sure to
+	browse the archives before posting questions.
+      </p>
+      <br>
+      <div class="list-group">
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffmpeg-user/">ffmpeg-user archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/libav-user/">libav-user archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffmpeg-devel/">ffmpeg-devel archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffmpeg-cvslog/">ffmpeg-cvslog archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffmpeg-trac/">ffmpeg-trac archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffmpeg-soc/">ffmpeg-soc archives</a>
+	<a class="list-group-item" href="https://lists.ffmpeg.org/pipermail/ffserver-user/">ffserver-user archives</a>
+	<small>ffserver-user merged with ffmpeg-user on 2013-02-04</small>
+      </div> <!-- list-group -->
+    </div> <!-- col -->
+
+    <br><br>
+
+    <div class="text-center">
+      <a href="http://dir.gmane.org/index.php?prefix=gmane.comp.video.ffmpeg" class="btn btn-lg btn-success">
+	Read on Gmane</a>
+    </div>
+  </div> <!-- row -->
+</div> <!-- well -->
+
+<div class="well">
+  <div class="row">
+    <div class="col-md-9">
+      <h3 id="IRCChannels">
+	<i class="fa fa-comment"></i>
+	IRC Channels</h3>
+      <div style="color: white">
+	<p>
+	  FFmpeg has two official channels on the <a href="http://freenode.net/">freenode</a>
+	  IRC network. Both channels are open and unmoderated. Developers with commit
+	  rights have operator status, contributors with patches in FFmpeg
+	  have voice in the channels.
+	</p>
+      </div>
+      <div class="list-group">
+	<a class="list-group-item" href="irc://irc.freenode.net/ffmpeg">
+	  <strong>#ffmpeg</strong><br>
+	  For user support and general questions similar to the ffmpeg-user mailing list
+	</a>
+	<a class="list-group-item" href="irc://irc.freenode.net/ffmpeg-devel">
+	  <strong>#ffmpeg-devel</strong><br>
+	  Strictly dedicated to FFmpeg development. This means development of FFmpeg
+	  itself. Development of other software that uses the FFmpeg libraries is offtopic
+	  there.
+	</a>
+      </div> <!-- list-group -->
+
+    </div> <!-- col -->
+    <div class="col-md-3">
+      <h3 id="IRCChannelArchives">
+	<i class="fa fa-archive"></i>
+	Archives</h3>
+      <p>
+	Our IRC channels are publically logged and archives of both channels can be
+	viewed at <a href="http://lists.ffmpeg.org/pipermail/ffmpeg-devel-irc/">
+	  ffmpeg-devel-irc</a>.
+      </p>
+
+    </div> <!-- col -->
+  </div> <!-- row -->
+</div> <!-- well -->
+
+<div class="well">
+  <h3 id="Forums">
+    <i class="fa fa-pencil"></i>
+    Forums</h3>
+  <div style="color: white">
+    <p>
+      FFmpeg offers no official forum. However, we collect links to FFmpeg-related forums
+      found in the world wide web. If you would like to see your forum added here, please
+      send an email to the
+      <a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-devel/">ffmpeg-devel</a>
+      mailing list.
+    </p>
+    <p>
+      Also if you don't receive a reply on the forums, try our official mailing list or
+      IRC channels. And most importantly, if you see questions from others on the forums
+      or mailing list that you know the answer to, please help and reply. The forums
+      are largely community supported and few official developers read them regularly.
+    </p>
+  </div>
+  <p class="text-center">
+    <a class="btn btn-success btn-lg" href="http://ffmpeg.zeranoe.com/forum/">FFmpeg on Windows</a>
+       
+    <a class="btn btn-success btn-lg" href="http://ffmpeg.gusari.org/">FFmpeg Support Forum</a>
+  </p>
+</div> <!-- well -->
 
-<p>
-<a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-user/">ffmpeg-user</a>:
-This list is for regular user questions and discussions including usage of
-<code>ffmpeg</code>, <code>ffplay</code>, <code>ffprobe</code>, and
-<code>ffserver</code>.
-<br />
-<a href="https://lists.ffmpeg.org/mailman/listinfo/libav-user/">libav-user</a>:
-This list is for application developer questions about development using the
-FFmpeg libraries.
-<br />
-<a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-devel/">ffmpeg-devel</a>:
-This list is for development of FFmpeg itself. It is <strong>not</strong> for
-development of software that use the FFmpeg libraries and <strong>not</strong>
-for bug reports.
-<br />
-<a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-cvslog/">ffmpeg-cvslog</a>:
-This list gets all changes to the FFmpeg sources / main git repository.
-<br />
-<a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-trac/">ffmpeg-trac</a>:
-This list gets all changes to the FFmpeg Trac issue tracker.
-</p>
-
-<p>
-Alternatively, you can follow our mailing lists through
-<a href="http://dir.gmane.org/index.php?prefix=gmane.comp.video.ffmpeg">Gmane</a>.
-</p>
-
-
-<h2 id="MailingListArchives">Mailing List Archives</h2>
-
-<p>
-To read up on past discussions, read the mailing list archives. It is highly
-likely that you will find an answer to your questions there, so make sure to
-browse the archives before posting questions.
-</p>
-
-<p>
-<a href="https://lists.ffmpeg.org/pipermail/ffmpeg-user/">ffmpeg-user archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/libav-user/">libav-user archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/ffmpeg-devel/">ffmpeg-devel archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/ffmpeg-cvslog/">ffmpeg-cvslog archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/ffmpeg-trac/">ffmpeg-trac archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/ffmpeg-soc/">ffmpeg-soc archives</a>
-<br />
-<a href="https://lists.ffmpeg.org/pipermail/ffserver-user/">ffserver-user archives</a>
-(ffserver-user merged with ffmpeg-user on 2013-02-04)
-</p>
-
-
-<h2 id="IRCChannels">IRC Channels</h2>
-
-<p>
-FFmpeg has two official channels on the <a href="http://freenode.net/">freenode</a>
-IRC network. Both channels are open and unmoderated. Developers with commit
-rights have operator status, contributors with patches in FFmpeg
-have voice in the channels.
-</p>
-
-<p>
-<a href="irc://irc.freenode.net/ffmpeg"><b>#ffmpeg</b></a> is for user support
-and general questions similar to the ffmpeg-user mailing list.
-</p>
-
-<p>
-<a href="irc://irc.freenode.net/ffmpeg-devel"><b>#ffmpeg-devel</b></a> is
-strictly dedicated to FFmpeg development. This means development of FFmpeg
-itself. Development of other software that uses the FFmpeg libraries is offtopic
-there.
-</p>
-
-<h2 id="IRCChannelArchives">IRC Channel Archives</h2>
-
-<p>
-Our IRC channels are publically logged and archives of both channels can be
-viewed at <a href="http://lists.ffmpeg.org/pipermail/ffmpeg-devel-irc/">
-ffmpeg-devel-irc</a>.
-</p>
-
-<h2 id="Forums">Forums</h2>
-<p>
-FFmpeg offers no official forum. However, we collect links to FFmpeg-related forums
-found in the world wide web. If you would like to see your forum added here, please
-send an email to the
-<a href="https://lists.ffmpeg.org/mailman/listinfo/ffmpeg-devel/">ffmpeg-devel</a>
-mailing list.
-
-Also if you don't receive a reply on the forums, try our official mailing list or
-IRC channels. And most importantly, if you see questions from others on the forums
-or mailing list that you know the answer to, please help and reply. The forums
-are largely community supported and few official developers read them regularly.
-</p>
-
-<p>
-<a href="http://ffmpeg.zeranoe.com/forum/">FFmpeg on Windows</a>
-<br />
-<a href="http://ffmpeg.gusari.org/">FFmpeg Support Forum</a>
-<br />
-</p>
diff --git a/src/donations b/src/donations
index 52144a3..ec504e8 100644
--- a/src/donations
+++ b/src/donations
@@ -1,30 +1,61 @@
-<p>Donations will be used to fund expenses related to development
-(e.g. to cover equipment and server maintenance costs), to sponsor bug
-fixing, feature development, the participation or organization of
-meetings and events in the project interest area, and to support
-internal development or educational projects or any other activity
-promoting FFmpeg.</p>
-
-<h2>Donations for FFmpeg through SPI</h2>
-<p>You can send donations to FFmpeg through SPI.
+<p class="with-icon">
+  <span class="pull-left" style="color: #e55"><i class="fa fa-heart fa-5x"></i></span>
+  Donations will be used to fund expenses related to development
+  (e.g. to cover equipment and server maintenance costs), to sponsor bug
+  fixing, feature development, the participation or organization of
+  meetings and events in the project interest area, and to support
+  internal development or educational projects or any other activity
+  promoting FFmpeg.
 </p>
 
-<h3>by credit card</h3>
-<p>
-Using <a href="https://co.clickandpledge.com/advanced/default.aspx?wid=56226">Click&Pledge (direct link)</a>.
-</p>
+<br><br>
 
-<h3>by check or money order</h3>
-<p>
-Following the <a href="http://www.spi-inc.org/donations/">instructions</a> from SPI.
-<b>Please make sure that you specify that your donation is for FFmpeg</b>.
-</p>
+<div class="row">
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Credit card</h3>
+      <p>Visa, MasterCard or Discovery</p><br><br>
+      <div class="text-center">
+	<a class="btn btn-success btn-lg"
+	   href="https://co.clickandpledge.com/advanced/default.aspx?wid=56226">
+	  Click&Pledge</a><br><br>
+      </div>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Check or Money Order</h3>
+      <p>US Dollars only</p><br><br>
+      <div class="text-center">
+	<a class="btn btn-success btn-lg"
+	   href="http://www.spi-inc.org/donations/">
+	  Use SPI</a><br><br>
+      </div>
+    <p class="with-icon">
+      <span class="pull-left"><i class="fa fa-warning fa-3x"></i></span>
+      Don't forget to specify that your donation is for FFmpeg!
+    </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+  <div class="col-md-4">
+    <div class="well">
+      <h3>Bank Transfer IBAN</h3>
+      <p>Not for USA and Canada</p><br><br>
+      <div class="text-center">
+	<a class="btn btn-success btn-lg"
+	   href="http://www.ffis.de/Verein/spi-en.html">
+	  Donate</a><br><br>
+      </div>
+    <p class="with-icon">
+      <span class="pull-left"><i class="fa fa-warning fa-3x"></i></span>
+      Don't forget to specify that your donation is for FFmpeg!
+    </p>
+    </div> <!-- well -->
+  </div> <!-- col -->
+</div> <!-- row -->
+
+<div class="row">
+  <div class="col-md-offset-4 col-md-8">
+  </div>
+</div>
 
-<h3>by bank transfer using IBAN (Not for USA/Canada)</h3>
-<p>
-Following the <a href='http://www.ffis.de/Verein/spi-en.html'>instructions</a> from ffis e.V.
-<b>Please make sure that you specify that your donation is for FFmpeg</b>.
-</p>
-<p>
-For more detailed instructions please check the <a href="http://www.spi-inc.org/donations/">SPI donations page</a>.
-</p>
diff --git a/src/download b/src/download
index 7dc5d7b..dd1221c 100644
--- a/src/download
+++ b/src/download
@@ -1,9 +1,10 @@
 
 <div id="download">
   <div class="btn-download-wrapper">
-    <a href="releases/ffmpeg-snapshot.tar.bz2" class="btn btn-success">
+    <a href="http://ffmpeg.org/releases/ffmpeg-2.2.4.tar.bz2" class="btn btn-success">
       <i class="fa fa-cloud-download"></i>
       Download
+      <small>ffmpeg-2.2.4.tar.bz2</small>
     </a>
   </div> <!-- btn-download-wrapper -->
 
@@ -121,7 +122,6 @@
 	</div> <!-- text -->
 
 	<br><br>
-	<hr>
 
 	<p>
 	  You can retrieve the source code through
@@ -132,16 +132,21 @@
 	<pre>git clone git://source.ffmpeg.org/ffmpeg.git ffmpeg</pre>
 
 	<div>
-	  <a href="releases/ffmpeg-snapshot-git.tar.bz2" class="btn btn-success pull-right">
-	    <i class="fa fa-git"></i>
-	    Git Snapshot
-	  </a>
+	  <div class="pull-right">
+	    <a href="releases/ffmpeg-snapshot-git.tar.bz2" class="btn btn-success">
+	      <i class="fa fa-git"></i>
+	      Git Snapshot
+	    </a>  
+	    <a href="http://git.videolan.org/?p=ffmpeg.git;a=tree" class="btn btn-success">
+	      Browse
+	    </a>
+	  </div>
 	  <small>
 	    Cannot access Git or wish to speed up the cloning and reduce the bandwidth usage?
 	  </small>
 	</div>
 
-	<hr>
+	<br><br>
 
 	<p class="info">
 	  FFmpeg has always been a very experimental and developer-driven project. It
@@ -154,13 +159,13 @@
 	<br><br>
 	<div class="row">
 	  <div class="col-sm-6">
-	    <a href="#repositories" class="btn btn-warning btn-block">
+	    <a href="#repositories" class="btn btn-success btn-block">
 	      <i class="fa fa-cubes"></i>
 	      Extra Repositories
 	    </a>
 	  </div> <!-- col -->
 	  <div class="col-sm-6">
-	    <a href="#releases" class="btn btn-warning btn-block">
+	    <a href="#releases" class="btn btn-success btn-block">
 	      <i class="fa fa-history"></i>
 	      Other Releases
 	    </a>
diff --git a/src/index b/src/index
index 1418b7d..e8309c3 100644
--- a/src/index
+++ b/src/index
@@ -9,13 +9,10 @@
     </div> <!-- col -->
     <div class="col-md-6">
       <div class="btn-download-wrapper">
-	<a href="releases/ffmpeg-snapshot.tar.bz2" class="btn btn-success">
+	<a href="download.html" class="btn btn-success">
 	  <i class="fa fa-cloud-download"></i>
 	  Download
-	</a><br>
-	<a href="download.html"><small>
-	    <i class="fa fa-arrow-circle-o-down"></i>
-	    more download options</small></a>
+	</a>
       </div> <!-- btn-download-wrapper -->
     </div> <!-- col -->
   </div> <!-- row -->
@@ -23,7 +20,7 @@
   <div class="well example">
     <h3>Converting <strong>videos</strong> and <strong>audios</strong> has never been so easy.
     </h3>
-    <pre><code>$ ffmpeg -i inputvideo.mkv outputvideo.mp4</code></pre>
+    <pre>$ ffmpeg -i inputvideo.mp4 outputvideo.avi</pre>
     <div class="text-right">
       <a href="about.html" class="btn btn-success btn-lg">Discover more</a>
     </div>
diff --git a/src/template_head2 b/src/template_head2
index 646a199..609485e 100644
--- a/src/template_head2
+++ b/src/template_head2
@@ -22,45 +22,36 @@
 	      <img src="img/ffmpeg_20.png" alt="FFmpeg" />
 	      FFmpeg</a>
           </li>
-            <li>
-              <a href="download.html">Download</a>
-            </li>
-            <li>
-              <a href="about.html">Discover</a>
-	       <ul>
-		 <li><a href="about.html">About</a></li>
-		 <li><a href="projects.html">Projects</a></li>
-               </ul>
-            </li>
-            <li>
-              <a href="documentation.html">Documentation</a>
-	       <ul>
-		 <li><a href="documentation.html#command-line">Command line</a></li>
-		 <li><a href="documentation.html#components">Components</a></li>
-		 <li><a href="documentation.html#libraries">Libraries</a></li>
-		 <li><a href="documentation.html#more">More</a></li>
-               </ul>
-            </li>
-            <li>
-              <a href="contact.html#MailingLists">Community</a>
-	       <ul>
-		 <li><a href="bugreports.html">Bug reports</a></li>
-		 <li><a href="download.html#sources">Source Code</a></li>
-		 <li><a href="tets.html">Tets</a></li>
-		 <li><a href="contact.html#IRCChannels">IRC</a></li>
-		 <li><a href="contact.html#Forums">Forums</a></li>
-		 <li><a href="contact.html#MailingLists">Mailing Lists</a></li>
-               </ul>
-            </li>
-            <li>
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">More</a>
-	       <ul>
-		 <li><a href="donations.html">Donations</a></li>
-		 <li><a href="consulting.html">Hire Developers</a></li>
-		 <li><a href="contact.html">Contact</a></li>
-		 <li><a href="security.html">Security</a></li>
-               </ul>
-            </li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="download.html">Download</a></li>
+          <li><a href="documentation.html">Documentation</a></li>
+          <li><a href="contact.html#MailingLists">Community</a>
+	    <ul>
+	      <li><a href="contact.html#MailingLists">Mailing Lists</a></li>
+	      <li><a href="contact.html#IRCChannels">IRC</a></li>
+	      <li><a href="contact.html#Forums">Forums</a></li>
+	      <li><a href="bugreports.html">Bug reports</a></li>
+	      <li><a href="http://trac.ffmpeg.org">Wiki</a></li>
+	      <li><a href="projects.html">Projects</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Developers</a>
+	    <ul>
+	      <li><a href="download.html#get-sources">Source Code</a>
+	      <li><a href="http://fate.ffmpeg.org">FATE</a></li>
+	      <li><a href="http://coverage.ffmpeg.org">Coverage</a></li>
+	    </ul>
+          </li>
+          <li><a href="#">More</a>
+	    <ul>
+	      <li><a href="donations.html">
+		  Donate<span style="color: #e55; font-size: 0.8em; margin-left: -10px"><i class="fa fa-heart"></i></span></a></li>
+	      <li><a href="consulting.html">Hire Developers</a></li>
+	      <li><a href="contact.html">Contact</a></li>
+	      <li><a href="security.html">Security</a></li>
+	      <li><a href="legal.html">Legal</a></li>
+            </ul>
+          </li>
 	</ul>
       </nav>
 
diff --git a/style.less b/style.less
index f8d0766..80a5ab0 100644
--- a/style.less
+++ b/style.less
@@ -7,12 +7,14 @@
 @Cmaindark: darken(@Cmain, 5%);
 @Cmaindarkdark: darken(@Cmaindark, 5%);
 @Cmainlight: lighten(@Cmain, 5%);
+ at Cmainlightlight: lighten(@Cmainlight, 50%);
 @Cborder: #101010;
 @Cinvert: darken(#fff, 10%);
 @Csecond: darken(#4cae4c, 0%);
 @Cseconddark: darken(@Csecond, 10%);
 @Cseconddarkdark: darken(@Cseconddark, 10%);
 @Csecondlight: lighten(@Csecond, 15%);
+ at Csecondlightlight: lighten(@Csecondlight, 20%);
 
 // ************************************************************************* //
 // SIZES
@@ -37,7 +39,7 @@ a {
 	color: @Cinvert;
     }
     &:hover {
-	color: @Cseconddark;
+	color: @Csecondlight;
 	strong {
 	    color: @Csecond;
 	}
@@ -56,7 +58,7 @@ h1, h2, h3, h4 {
 }
 
 h1, h2, h3 {
-    color: @Csecond;
+    color: @Cmainlightlight;
     strong {
 	color: @Cinvert;
     }
@@ -67,12 +69,12 @@ h4, h5, h6 {
 }
 
 h1 {
-  border-bottom: 4px @Csecond solid;
+  border-bottom: 4px @Cmainlightlight solid;
   padding: 20px 2%;
 }
 
 h3 {
-  border-bottom: 2px @Csecond solid;
+  border-bottom: 2px @Cmainlightlight solid;
   padding: 15px 1%;
 }
 
@@ -86,7 +88,7 @@ h4 {
 .list-group {
     .list-group-item {
 	background-color: @Cmainlight;
-	border-color: @Csecondlight;
+	border-color: black;
     }
     &.list-group-big .list-group-item {
 	padding: 25px;
@@ -103,11 +105,14 @@ h4 {
 
 .well {
     background-color: @Cmaindark;
-    border-color: @Csecond;
-    color: @Cseconddark;
+    border-color: black;
+    color: @Cmainlightlight;
     strong {
 	color: @Cinvert;
     }
+    code {
+	background-color: @Cmain;
+    }
     hr {
 	border-color: @Cseconddark;
     }
@@ -117,7 +122,7 @@ h4 {
 	padding: 0;
     }
     a {
-	color: @Csecondlight;
+	color: @Csecond;
     }
     a.btn {
 	color: white;
@@ -126,7 +131,6 @@ h4 {
 	display: block;
 	padding: 0 10px;
 	font-style: italic;
-	color: @Cseconddarkdark;
     }
     &.example {
 	padding-top: 40px;
@@ -163,7 +167,7 @@ a.well {
     display: block;
     &:hover {
 	text-decoration: none;
-	opacity: 0.6;
+	opacity: 0.8;
 	/* background-color: @Cmain; */
 	/* border-color: @Csecondlight; */
 	/* &.well-with-icon { */
@@ -195,9 +199,13 @@ a.well {
     }
 }
 
+dd {
+    margin-left: 20px;
+}
+
 code {
     background-color: @Cmaindark;
-    color: @Csecond;
+    color: @Csecondlight;
     display: inline-block;
     margin: 5px;
 }
@@ -252,11 +260,14 @@ code {
 
 .content-header {
     height: auto;
+    background-color: @Cmaindark;
     h1 {
+	color: @Cinvert;
 	display: block;
 	margin: 0;
 	margin-bottom: 20px;
 	line-height: normal;
+	border-bottom: none;
     }
 }
 
@@ -270,6 +281,10 @@ code {
     }
     h4.first {
 	margin-top: 20px;
+	small {
+	    color: inherit;
+	    font-size: 1em;
+	}
     }
 
     .btn-download-wrapper {
@@ -281,6 +296,10 @@ code {
 	    display: inline-block;
 	    margin-bottom: 5px;
 	}
+	small {
+	    display: block;
+	    font-size: 0.4em;
+	}
     }
     h2.description {
 	color: @Cinvert;
@@ -310,7 +329,7 @@ code {
 	}
 	@linuxcolor: #e43;
 	@windowscolor: #06a;
-	@maccolor: #0a6;
+	@maccolor: darkgrey;
 	.btn-build[href="#build-linux"] {
 	    background-color: @linuxcolor;
 	    &:hover {
-- 
2.0.1



More information about the ffmpeg-devel mailing list