Jeremy Newman : update main menu so subtitles wrap correctly on small screens

[Jeremy Newman]

Module: website
Branch: master
Commit: 45da178889b4713d4f47b01d98f9d77e8a82acde
URL:    http://source.winehq.org/git/website.git/?a=commit;h=45da178889b4713d4f47b01...

Author: Jeremy Newman <jnewman(a)codeweavers.com>
Date:   Tue Dec  9 10:22:35 2008 -0600

update main menu so subtitles wrap correctly on small screens

---

 styles.css                 |    8 ++++----
 templates/en/home.template |   25 ++++++++++---------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/styles.css b/styles.css
index bb4630a..98c90e3 100644
--- a/styles.css
+++ b/styles.css
@@ -220,10 +220,10 @@ ul.winehq_menu li.devel            { background-image: url('images/main_devel.pn
 ul.winehq_menu li.devel:hover      { background-image: url('images/main_devel_s.png'); background-repeat: no-repeat }
 ul.winehq_menu li.donate           { background-image: url('images/main_donate.png'); background-repeat: no-repeat }
 ul.winehq_menu li.donate:hover     { background-image: url('images/main_donate_s.png'); background-repeat: no-repeat }
-ul.winehq_menu li a                { text-decoration: none; }
-ul.winehq_menu li a:hover .title   { text-decoration: underline; color: red; }
-ul.winehq_menu span.title          { font-size: 24px; color:  maroon; padding-left: 20px; margin-top: 10px; }
-ul.winehq_menu span.subtitle       { font-size: 14px; color: #4e4e4e; padding-left: 35px; }
+ul.winehq_menu li a                { text-decoration: none; color:  maroon; }
+ul.winehq_menu li a:hover          { text-decoration: underline; color: red; }
+ul.winehq_menu div.title           { font-size: 24px; padding: 0; margin: 5px 0 0 20px; }
+ul.winehq_menu div.subtitle        { font-size: 14px; color: #4e4e4e; padding: 0; margin: 0 0 0 35px; }
 
 /* stuff */
 img                 { border: 0; }
diff --git a/templates/en/home.template b/templates/en/home.template
index dd17acd..3560f32 100644
--- a/templates/en/home.template
+++ b/templates/en/home.template
@@ -10,38 +10,33 @@
         <ul class="winehq_menu">
         
             <li class="info" onClick="document.location='{$root}/about/';">
-            <a href="{$root}/about/">
-            <span class="title">Information</span></a><br>
-            <span class="subtitle">Overview of Wine features.</span>
+            <div class="title"><a href="{$root}/about/">Information</a></div>
+            <div class="subtitle">Overview of Wine features.</div>
             </li>
 
             <li class="dl" onClick="document.location='{$root}/download/';">
-            <a href="{$root}/download/">
-            <span class="title">Download</span></a><br>
-            <span class="subtitle">Get Wine now!</span>
+            <div class="title"><a href="{$root}/download/">Download</a></div>
+            <div class="subtitle">Get Wine now!</div>
             </li>
 
             <li class="help" onClick="document.location='{$root}/help/';">
-            <a href="{$root}/help/">
-            <span class="title">Help!</span></a><br>
-            <span class="subtitle">Documentation, Support, and Wiki.</span>
+            <div class="title"><a href="{$root}/help/">Help!</a></div>
+            <div class="subtitle">Documentation, Support, and Wiki.</div>
             </li>
 
             <li class="devel" onClick="document.location='{$root}/devel/';">
-            <a href="{$root}/devel/">
-            <span class="title">Development</span></a><br>
-            <span class="subtitle">Wine source, Bug Tracking, etc.</span>
+            <div class="title"><a href="{$root}/devel/">Development</a></div>
+            <div class="subtitle">Wine source, Bug Tracking, etc.</div>
             </li>
 
             <li class="donate" onClick="document.donateForm.submit();">
             <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="donateForm" style="margin: 0; padding: 0;">
-            <a href="javascript:document.donateForm.submit();">
-            <span class="title">Donate</span></a>
+            <div class="title"><a href="javascript:document.donateForm.submit();">Donate</a></div>
             <input type="hidden" name="cmd" value="_xclick">
             <input type="hidden" name="business" value="donate(a)winehq.org">
             <input type="hidden" name="item_name" value="Wine donation">
             </form>
-            <span class="subtitle">Donate to Wine.</span>
+            <div class="subtitle">Donate to Wine.</div>
             </li>
 
         </ul>