doc/style-guide.html

   1 <html>
   2  <head>
   3 <!--
   4 #
   5 # This file is part of my.gpodder.org.
   6 #
   7 # my.gpodder.org is free software: you can redistribute it and/or modify it
   8 # under the terms of the GNU Affero General Public License as published by
   9 # the Free Software Foundation, either version 3 of the License, or (at your
  10 # option) any later version.
  11 #
  12 # my.gpodder.org is distributed in the hope that it will be useful, but
  13 # WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  14 # or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
  15 # License for more details.
  16 #
  17 # You should have received a copy of the GNU Affero General Public License
  18 # along with my.gpodder.org. If not, see <http://www.gnu.org/licenses/>.
  19 #
  20 -->
  21   <title>my.gpodder.org Style Guide</title>
  22   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  23   <link rel="shortcut icon" href="http://gpodder.org/favicon.png">
  24   <link rel="stylesheet" href="../htdocs/media/screen.css" type="text/css" />
  25   <link rel="stylesheet" href="../htdocs/media/screen-base.css" type="text/css" />
  26  </head>
  27  <body>
  28   <h1 id="logo">
  29    <strong><img alt="gPodder" title="gPodder" src="http://gpodder.org/images/weblogo64.png" /></strong>
  30   </h1>
  31   <div id="topnav">
  32    <ul id="gpodder-menu">
  33     <li><a href="http://gpodder.org/"><img src="http://gpodder.org/images/icons/go-home.png" alt="">Home</a></li>
  34     <li><a href="http://gpodder.org/news.html"><img src="http://gpodder.org/images/icons/accessories-text-editor.png" alt="">News</a></li>
  35     <li><a href="http://gpodder.org/downloads.html"><img src="http://gpodder.org/images/icons/package-x-generic.png" alt="">Download</a></li>
  36     <li><a href="http://gpodder.org/documentation.html"><img src="http://gpodder.org/images/icons/help-browser.png" alt="">Help</a></li>
  37     <li><a href="http://bugs.gpodder.org/"><img src="http://gpodder.org/images/icons/dialog-warning.png" alt="">Bugs</a></li>
  38     <li><strong><img src="http://gpodder.org/images/icons/mygpo.png" alt="">Web Service</strong></li>
  39    </ul>
  40   </div>
  41
  42   <hr>
  43
  44   <div id="body">
  45
  46     <h1>my.gpodder.org Style Guide</h1>
  47
  48     <div class="success">Such boxes can be used to indicate the successful competion of some action. CSS-Class: <strong>success</strong></div>
  49
  50    <div class="error">Use such boxes to indicate failure. CSS-Class: <strong>error</strong></div>
  51
  52    <table class="list">
  53     <tr>
  54      <th>Column 1</th>
  55      <th>Column 2</td>
  56      <th>Numeric column</th>
  57     </tr>
  58     <tr>
  59      <td>This is a sample list table</td>
  60      <td>You can indicate numeric columns like this:</td>
  61      <td class="numeric">1234</td>
  62     </tr>
  63    </table>
  64
  65    <div class="info">This style can be used to style infos and remarks. CSS-Class: <strong>info</strong></div>
  66
  67
  68   </div>
  69   <div id="navigation">
  70    <span class="spacer1">&nbsp;</span>
  71    <span class="spacer2">&nbsp;</span>
  72     <ul id="menu">
  73      <li></li>
  74     </ul>
  75   </div>
  76
  77   <hr style="clear: both;">
  78
  79   <address>© 2005-2009 <a class="noextlink" href="http://thpinfo.com/">Thomas Perl</a> andthe gPodder Team</address>
  80  </body>
  81 </html>
  82