Permalink
Browse files

refining the style with additional classes

  • Loading branch information...
1 parent bc4b87e commit 8dc6675f8fb1c99a0777d22a919f7394a1419062 @briandoll committed Mar 19, 2011
Showing with 40 additions and 15 deletions.
  1. +26 −3 css/all.css
  2. +14 −12 index.html
View
@@ -1,8 +1,8 @@
@import url("core/core.css");
@import url("plugins/plugins.css");
-h1 { font-size: 24pt; color: #000; }
-h3 { color: #000; }
+h1 { font-size: 24pt; color: #000; }
+h3 { font-size: 18pt; color: #000; }
a { color: #000; text-decoration: underline;}
a:visited { color: #000;}
@@ -19,7 +19,30 @@ a:visited { color: #000;}
color: #333;
}
+.dottedInput {
+ background-color: transparent;
+ text-align:right;
+ width: 50px;
+ height: 30px;
+ border: none;
+ border-bottom-color: #000;
+ border-bottom-width: 2px;
+ border-bottom-style: dotted;
+ color: black;
+}
+
+.woodBar {
+ background-color: transparent;
+ background-image: url('');
+ border-color: #666;
+ -moz-box-shadow: 5px 5px 5px #666;
+ -webkit-box-shadow: 5px 5px 5px #666;
+ box-shadow: 5px 5px 5px #666;
+}
+
.fullWidth { clear:both; width:100%; }
.smallText { font-size: 14px; }
.centered { text-align: center; }
-.medBreathingRoom { padding-top:10px; padding-bottom:10px;}
+.medVertPad { padding-top:10px; padding-bottom:10px;}
+.medHorMargin { margin-left:10px; margin-right:10px; }
+.doubleSpaced { line-height: 200%; }
View
@@ -18,10 +18,10 @@
<h1>I eat Paleo, but how much protein do I need every day?</h1>
</div>
<div class="body">
- <div class="fullWidth medBreathingRoom">
+ <div class="fullWidth medVertPad doubleSpaced">
<div>First, tell us a little about yourself:</div>
- <div id="weight">My lean body mass is <input type="text" id="bodyweight" value="100"> pounds.</div>
- <div id="percentage">I'm aiming to get
+ <div>My lean body mass is <input type="text" id="bodyweight" class="dottedInput medHorMargin" value="100"> pounds.</div>
+ <div>I'm aiming to get
<select id="protein_per_pound_of_bodyweight" class="transparentSelect">
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
@@ -30,20 +30,22 @@
<option value="1.5">1.5</option>
</select> grams of protein per pound of lean body mass.
</div>
- <div id="goal">Great! You'll need <input type="text" id="protein_goal" value="100"> grams of protein.</div>
+ <div>
+ Great! You'll need <input type="text" id="protein_goal" class="dottedInput medHorMargin" value="100"> grams of protein.
+ </div>
</div>
- <div class="fullWidth medBreathingRoom">
- <p>BUT HOW MUCH FOOD IS THAT??!?!?! Let's find out!</p>
+ <div class="fullWidth medVertPad">
+ <h3>BUT HOW MUCH FOOD IS THAT??!?!?! Let's find out!</h3>
<div>Let's add up a typical day's protein to see how much you'll need:</div>
<div class="leftCol">
<div id="food">
<a href="javascript:void(false)" class="button" id="add"><span class="plus icon"></span>Add Protein Source</a>
<ul>
<li>
- <input type="text" class="qty" value="">
- <select class="transparentSelect">
+ <input type="text" class="qty dottedInput medHorMargin" value="">
+ <select class="protein_source transparentSelect">
<option value="6">Egg(s)</option>
<option value="3">slices of Bacon</option>
<option value="7">oz. of Beef</option>
@@ -63,13 +65,13 @@
<div id="progress">
Progress:</br>
<div id="percent_complete">0%</div>
- <div id="progressbar"></div>
+ <div id="progressbar" class="woodBar"></div>
</div>
- <div id="congrats"></div>
+ <div id="congrats" class="medVertPad"></div>
</div>
</div>
- <div class="fullWidth medBreathingRoom">
+ <div class="fullWidth medVertPad">
<h3>FAQ</h3>
<strong>What about protein powder, dairy, nuts, veggies?</strong></br>
In the words of <a href="http://robbwolf.com/"> the man himself, Robb Wolf</a>:<br/>
@@ -84,7 +86,7 @@
</div>
- <div class="footer smallText centered medBreathingRoom">an <a href="http://emphaticsolutions.com">emphatic solution</a> by Brian Doll</div>
+ <div class="footer smallText centered medVertPad">an <a href="http://emphaticsolutions.com">emphatic solution</a> by Brian Doll</div>
</div>

0 comments on commit 8dc6675

Please sign in to comment.