Browse files

Layout fixes + Issue #4 CSS changes

  • Loading branch information...
1 parent baca1d0 commit cc3afbed17e9a1f6379f00c4208ba68358ad9b19 @brianking committed Apr 18, 2012
Showing with 230 additions and 211 deletions.
  1. +1 −1 data/foundation/stylesheets/app.css
  2. +92 −87 data/remo-start.html
  3. +137 −123 data/remo.html
View
2 data/foundation/stylesheets/app.css
@@ -83,7 +83,7 @@ html {
}
#wrapper {
- background: rgb(249, 249, 249) url('/media/img/remo/mozorg-gradient.png') repeat-x top center;
+ background: rgb(249, 249, 249) url('../../img/mozorg-gradient.png') repeat-x top center;
}
body {
View
179 data/remo-start.html
@@ -67,106 +67,111 @@
<body>
- <div class="container">
- <!-- Header -->
- <header class="row">
- <div class="twelve columns">
+ <!-- Wrapper for background -->
+ <div id="wrapper">
+
+ <div class="container">
+ <!-- Header -->
+ <header class="row">
+ <div class="twelve columns">
+
+ <!-- Logo & Navigation -->
+ <div class="row">
+
+ <!-- Logo and Wordmark -->
+ <div class="four columns" id="logo-box">
+ <div class="row hide-on-phones">
+ <a href="/">
+ <img src="Remo64.png"
+ alt="Mozilla Reps logo">
+ <h3>
+ Mozilla Reps Companion &nbsp;|&nbsp;
+ <span id="version"/>
+ </h3>
+ </a>
+ </div>
+ <div class="row show-on-phones">
+ <h2>Mozilla Reps Companion mobile</h2>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </header>
- <!-- Logo & Navigation -->
+ <!-- Separator -->
<div class="row">
+ <hr>
+ </div>
- <!-- Logo and Wordmark -->
- <div class="four columns" id="logo-box">
- <div class="row hide-on-phones">
- <a href="/">
- <img src="Remo64.png"
- alt="Mozilla Reps logo">
- <h3>
- Mozilla Reps Companion &nbsp;|&nbsp;
- <span id="version"/>
- </h3>
- </a>
- </div>
- <div class="row show-on-phones">
- <h2>Mozilla Reps Companion mobile</h2>
+ <!-- Main content section -->
+ <div class="row">
+ <div class="twelve columns main-section">
+
+ <div id="about">
+ <h5>
+ about:reps
+ </h5>
+ <br>
+ <p style="font-weight: bold;">
+ The Mozilla Reps Companion provides easy access to tools and documentation for Mozilla Reps.
+ </p>
+ <p>
+ The Mozilla Reps program aims to empower and support volunteer
+ Mozillians who want to become official representatives of
+ Mozilla in their region/locale.
+ </p>
+ <p>
+ The program provides a simple framework and a specific set of
+ tools to help Mozillians to organize and/or attend events,
+ recruit and mentor new contributors, document and share
+ activities, and support their local communities better.
+
+ <ul>
+ <li>
+ <i class="icon-large icon-home">
+ </i><a target="_blank" href="http://reps.mozilla.org/">Mozilla Reps Website</a>
+ </li>
+ <li>
+ <i class="icon-large icon-asterisk"></i>
+ <a target="_blank" href="https://wiki.mozilla.org/ReMo">Mozilla Reps Wiki</a>
+ </li>
+ <li>
+ <i class="icon-large icon-twitter-sign"></i>
+ <a target="_blank" href="https://twitter.com/#!/mozillareps">Follow us on Twitter</a>
+ </li>
+ </ul>
+ </p>
+
+ <p>
+ You can uninstall this add-on via the <a href="about:addons" onclick="openAddonsManager(); return false;">Add-ons Manager</a>.
+ </p>
+ </div>
</div>
- </div>
- </div>
</div>
- </header>
- <!-- Separator -->
- <div class="row">
- <hr>
- </div>
+ </div> <!-- end container div -->
- <!-- Main content section -->
- <div class="row">
- <div class="twelve columns main-section">
-
- <div id="about">
- <h5>
- about:reps
- </h5>
- <br>
- <p style="font-weight: bold;">
- The Mozilla Reps Companion provides easy access to tools and documentation for Mozilla Reps.
- </p>
- <p>
- The Mozilla Reps program aims to empower and support volunteer
- Mozillians who want to become official representatives of
- Mozilla in their region/locale.
- </p>
- <p>
- The program provides a simple framework and a specific set of
- tools to help Mozillians to organize and/or attend events,
- recruit and mentor new contributors, document and share
- activities, and support their local communities better.
-
- <ul>
- <li>
- <i class="icon-large icon-home">
- </i><a target="_blank" href="http://reps.mozilla.org/">Mozilla Reps Website</a>
- </li>
- <li>
- <i class="icon-large icon-asterisk"></i>
- <a target="_blank" href="https://wiki.mozilla.org/ReMo">Mozilla Reps Wiki</a>
- </li>
- <li>
- <i class="icon-large icon-twitter-sign"></i>
- <a target="_blank" href="https://twitter.com/#!/mozillareps">Follow us on Twitter</a>
- </li>
- </ul>
- </p>
-
- <p>
- You can uninstall this add-on via the <a href="about:addons" onclick="openAddonsManager(); return false;">Add-ons Manager</a>.
- </p>
- </div>
+ <!-- Footer -->
+ <div id="footer" class="hide-on-phones">
+ <div class="row">
+ <hr />
+ </div>
+ <div id="footer-contents">
+ <img id="footer-logo" src="remo_avatar.png" alt="Reps Logo gray">
+ <p id="footer-links">
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. You can obtain one a copy at <a target="_blank" href="http://mozilla.org/MPL/2.0/">http://mozilla.org/MPL/2.0/</a>.
+ </p>
</div>
-
</div>
- </div> <!-- end container div -->
-
- <!-- Footer -->
- <div id="footer" class="hide-on-phones">
- <div class="row">
- <hr />
- </div>
- <div id="footer-contents">
- <img id="footer-logo" src="remo_avatar.png" alt="Reps Logo gray">
- <p id="footer-links">
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. You can obtain one a copy at <a target="_blank" href="http://mozilla.org/MPL/2.0/">http://mozilla.org/MPL/2.0/</a>.
- </p>
+ <div class="addonbarhelper">
+ <p>Access to the Mozilla Reps Companion is always available via the <span style="font-weight: bold;"/>Add-on Bar</span>. Alternatively, via the Firefox <span style="font-weight: bold;"/>'Customize...'</span> feature, you can drag it into another toolbar.</p>
+ <div class="down-triangle"> </div>
</div>
- </div>
- <div class="addonbarhelper">
- <p>Access to the Mozilla Reps Companion is always available via the <span style="font-weight: bold;"/>Add-on Bar</span>. Alternatively, via the Firefox <span style="font-weight: bold;"/>'Customize...'</span> feature, you can drag it into another toolbar.</p>
- <div class="down-triangle"> </div>
</div>
</body>
View
260 data/remo.html
@@ -1,17 +1,15 @@
<!DOCTYPE html>
+
<html lang="en">
+
<head>
- <title>ReMo Companion</title>
- <meta charset="utf-8" />
+ <title>
+ Mozilla Reps Companion
+ </title>
<style>
@import url(FontAwesome/css/font-awesome.css);
@import url(foundation/stylesheets/foundation.css);
@import url(foundation/stylesheets/app.css);
- body,
- div {
- margin: 0;
- padding: 0;
- }
body {
/* Disable scrollbars */
@@ -20,7 +18,15 @@
height: 100%;
}
+ p.first {
+ padding-top: 0 !important;
+ margin-top: 0 !important;
+ }
+
#remo-top {
+ padding: 20px 0 0 0;
+ background: inherit;
+ /* Always on screen */
position: absolute;
width: 100%;
height: 80px;
@@ -31,138 +37,146 @@
overflow: auto;
position: fixed;
width: 100%;
- top: 80px;
+ top: 100px;
bottom: 0;
+ background: inherit;
}
</style>
- <script>
-
- </script>
</head>
-<body id="index">
-
- <div id="remo-top">
+<body>
+ <!-- Wrapper for background -->
+ <div id="wrapper">
- <header id="banner">
+ <div id="remo-top">
- <h2><img src="Remo32.png" style="vertical-align: middle; padding: 0 0.5em;"/>Mozilla Reps Companion</h2>
+ <header id="banner">
- </header>
+ <h2><img src="Remo32.png" style="vertical-align: middle; padding: 0 0.5em;"/>Mozilla Reps Companion</h2>
- <dl class="tabs contained">
- <dd><a href="#simpleContained1" class="active">Tools</a></dd>
- <dd><a href="#simpleContained2">Monthly Report</a></dd>
- <dd><a href="#simpleContained3">SOPs</a></dd>
- <dd><a href="#simpleContained4">Social</a></dd>
- <dd><a href="#simpleContained5">About</a></dd>
- </dl>
+ </header>
- </div>
+ <dl class="tabs contained">
+ <dd><a href="#simpleContained1" class="active">Tools</a></dd>
+ <dd><a href="#simpleContained2">Monthly Report</a></dd>
+ <dd><a href="#simpleContained3">SOPs</a></dd>
+ <dd><a href="#simpleContained4">Social</a></dd>
+ <dd><a href="#simpleContained5">About</a></dd>
+ </dl>
+
+ </div>
+
+ <div id="remo-main">
+
+ <ul class="tabs-content contained">
+ <li class="active" id="simpleContained1Tab">
+ <div>
+ <ul>
+ <li>
+ <i class="icon-large icon-road"></i>
+ <a target="_blank" href="https://wiki.mozilla.org/Form:Remoevents">Setup or attend an Event</a>
+ </li>
+ <li>
+ <i class="icon-large icon-barcode"></i>
+ <a target="_blank" href="https://bugzilla.mozilla.org/form.reps.budget">Make a Budget request</a>
+ </li>
+ <li>
+ <i class="icon-large icon-shopping-cart"></i>
+ <a target="_blank" href="https://bugzilla.mozilla.org/form.reps.swag">Request Swag</a>
+ </li>
+ <li>
+ <i class="icon-large icon-star"></i>
+ <a target="_blank" href="http://cards.mozillareps.org/">Business card generator</a>
+ </li>
+ </ul>
+ <a target="_blank" href="https://wiki.mozilla.org/ReMo/Tools_and_Resources">More tools and resources...</a>
+ </div>
+ </li>
+ <li id="simpleContained2Tab">
+ <div>
- <div id="remo-main">
-
- <ul class="tabs-content contained">
- <li class="active" id="simpleContained1Tab">
- <div>
- <ul>
- <li>
- <i class="icon-large icon-road"></i>
- <a target="_blank" href="https://wiki.mozilla.org/Form:Remoevents">Setup or attend an Event</a>
- </li>
- <li>
- <i class="icon-large icon-barcode"></i>
- <a target="_blank" href="https://bugzilla.mozilla.org/form.reps.budget">Make a Budget request</a>
- </li>
- <li>
- <i class="icon-large icon-shopping-cart"></i>
- <a target="_blank" href="https://bugzilla.mozilla.org/form.reps.swag">Request Swag</a>
- </li>
- <li>
- <i class="icon-large icon-star"></i>
- <a target="_blank" href="http://cards.mozillareps.org/">Business card generator</a>
- </li>
- </ul>
- <a target="_blank" href="https://wiki.mozilla.org/ReMo/Tools_and_Resources">More tools and resources...</a>
- </div>
- </li>
- <li id="simpleContained2Tab">
- <div>
- <ul>
- <li>
- <i class="icon-large icon-pencil"></i>
- <a target="_blank" href="https://reps.mozilla.org/people/me/currentreport/">Submit a new report</a>
- </li>
- </ul>
- <p>Reporting back on a regular basis is a crucial part of your role as a Mozilla Rep. This involves documenting and sharing all your activities in the past month so that your mentor can see your progress and support you where needed, but also so that the broader community can have full visibility on all the amazing work that you are doing. To this end, a very simple Monthly Report form was developed to enable Mozilla Reps to report back easily, quickly, and efficiently.</p>
- <a target="_blank" href="https://wiki.mozilla.org/ReMo/SOPs/Monthly_Reports">More about monthly reports...</a>
- </div>
- </li>
- <li id="simpleContained3Tab">
- <div>
- <p>
- A central aim of ReMo is to make it easier for Mozillians to represent Mozilla, but also in a more structured and consistent way, that way the broader community can benefit from their efforts even more.
- </p>
-
- <p>
- The following is a list of SOPs that will be very useful to all Mozilla Reps. <strong>Find your role, what you want to do and go!</strong>
- </p>
-
- <ul id="sop-list">
- <!-- generated SOPs from wiki will go here -->
- </ul>
- </div>
- </li>
- <li id="simpleContained4Tab">
- <div class="container">
- <ul>
- <li>
- <i class="icon-large icon-twitter-sign"></i>
- <a target="_blank" href="https://twitter.com/#!/mozillareps">Follow us on Twitter</a>
- </li>
- <li>
- <i class="icon-large icon-facebook-sign"></i>
- <a target="_blank" href="http://www.facebook.com/MozillaReps">Like Mozilla Reps on Facebook</a>
- </li>
- <li>
- <i class="icon-large icon-comment"></i>
- <a target="_blank" href="http://planet.mozillareps.org/">Planet Reps</a> for all the latest news
- </li>
- <li>
- <i class="icon-large icon-camera"></i>
- Tag your pictures <i>#mozreps</i> on <a target="_blank" href="http://www.flickr.com/photos/tags/mozreps/">Flickr</a>,
- <a target="_blank" href="https://picasaweb.google.com/lh/view?q=mozreps/">Picasa</a>, and other photo services.
- </li>
- </ul>
- </div>
- </li>
- <li id="simpleContained5Tab">
- <div>
-
- <p>The Mozilla Reps Companion provides easy access to tools and documentation for Mozilla Reps.</p>
-
- <p>
<ul>
<li>
- <i class="icon-large icon-github-sign"></i>
- <a target="_blank" href="https://github.com/brianking/ReMo-Helper">Source code on github</a>
+ <i class="icon-large icon-pencil"></i>
+ <a target="_blank" href="https://reps.mozilla.org/people/me/currentreport/">Submit a new report</a>
</li>
</ul>
- </p>
-
- <p>
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. You can obtain one a copy at <a target="_blank" href="http://mozilla.org/MPL/2.0/">http://mozilla.org/MPL/2.0/</a>
- <br/><br/>
- Some icons via <a target="_blank" href="http://fortawesome.github.com/Font-Awesome">Font Awesome</a>.
- <br/><br/>
- <a target="_blank" href="http://foundation.zurb.com/">Foundation</a> is licensed under the MIT license
- </p>
-
- </div>
- </li>
- </ul>
+ <p>Reporting back on a regular basis is a crucial part of your role as a Mozilla Rep. This involves documenting and sharing all your activities in the past month so that your mentor can see your progress and support you where needed, but also so that the broader community can have full visibility on all the amazing work that you are doing. To this end, a very simple Monthly Report form was developed to enable Mozilla Reps to report back easily, quickly, and efficiently.</p>
+ <a target="_blank" href="https://wiki.mozilla.org/ReMo/SOPs/Monthly_Reports">More about monthly reports...</a>
+
+ </div>
+ </li>
+ <li id="simpleContained3Tab">
+ <div>
+
+ <p class="first">
+ A central aim of ReMo is to make it easier for Mozillians to represent Mozilla, but also in a more structured and consistent way, that way the broader community can benefit from their efforts even more.
+ </p>
+
+ <p>
+ The following is a list of SOPs that will be very useful to all Mozilla Reps. <strong>Find your role, what you want to do and go!</strong>
+ </p>
+
+ <ul id="sop-list">
+ <!-- generated SOPs from wiki will go here -->
+ </ul>
+
+ </div>
+ </li>
+ <li id="simpleContained4Tab">
+ <div>
+
+ <ul>
+ <li>
+ <i class="icon-large icon-twitter-sign"></i>
+ <a target="_blank" href="https://twitter.com/#!/mozillareps">Follow us on Twitter</a>
+ </li>
+ <li>
+ <i class="icon-large icon-facebook-sign"></i>
+ <a target="_blank" href="http://www.facebook.com/MozillaReps">Like Mozilla Reps on Facebook</a>
+ </li>
+ <li>
+ <i class="icon-large icon-comment"></i>
+ <a target="_blank" href="http://planet.mozillareps.org/">Planet Reps</a> for all the latest news
+ </li>
+ <li>
+ <i class="icon-large icon-camera"></i>
+ Tag your pictures <i>#mozreps</i> on <a target="_blank" href="http://www.flickr.com/photos/tags/mozreps/">Flickr</a>,
+ <a target="_blank" href="https://picasaweb.google.com/lh/view?q=mozreps/">Picasa</a>, and other photo services.
+ </li>
+ </ul>
+
+ </div>
+ </li>
+ <li id="simpleContained5Tab">
+ <div>
+
+ <p class="first">The Mozilla Reps Companion provides easy access to tools and documentation for Mozilla Reps.</p>
+
+ <p>
+ <ul>
+ <li>
+ <i class="icon-large icon-github-sign"></i>
+ <a target="_blank" href="https://github.com/brianking/ReMo-Helper">Source code on github</a>
+ </li>
+ </ul>
+ </p>
+
+ <p>
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. You can obtain one a copy at <a target="_blank" href="http://mozilla.org/MPL/2.0/">http://mozilla.org/MPL/2.0/</a>
+ <br/><br/>
+ Some icons via <a target="_blank" href="http://fortawesome.github.com/Font-Awesome">Font Awesome</a>.
+ <br/><br/>
+ <a target="_blank" href="http://foundation.zurb.com/">Foundation</a> is licensed under the MIT license
+ </p>
+
+ </div>
+ </li>
+ </ul>
+
+ </div>
</div>

0 comments on commit cc3afbe

Please sign in to comment.