Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img
[fsf-giving-guide.git] / stylesheet.css
index 46f7c52..13b2ea8 100755 (executable)
@@ -50,7 +50,7 @@ li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
 
 br {margin-bottom: 20em; margin-top: 20em;}
 
-h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
+h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; }
 h2 {  font-size: 1.75em;  font-family: 'Signika Light';        color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
 h3 {  font-size: 1.625em; font-family: 'Signika Bold'; color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;        margin-bottom: 0.5em; margin-top: 2em; }
@@ -105,14 +105,24 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 }
 
 .share_wrapper {
-  padding: 1.2em;
-  float: right;
-  display: inline-block;
 }
 
 .share {
-  max-width: 36px;
-  min-width: 36px;
+  text-align: center;
+}
+
+.share a{
+  background-color: #FFE859;
+  border-bottom: 0;
+  padding: .6em 2em;
+  font-family: 'Signika Bold';
+  font-size: 1.4em;
+  color: #2CAF8F;
+  border-radius: 50em;
+}
+
+.share a:hover {
+  background-color: #FDDE56;
 }
 
 .navbar {
@@ -188,16 +198,19 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .wrapper,
 .section_wrapper,
+.buy_avoid,
 .recommended {
-  width: 750px;
+  max-width: 750px;
   min-width: 750px;
   margin: auto;
 }
 
 .main_title {
   width: 100%;
-  text-align: center;
+  text-align: left;
+  border-bottom: 1px solid lightgray;
   margin-top: 3em;
+  margin-bottom: 2em;
   display: inline-block;
 }
 
@@ -205,21 +218,29 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   border-bottom: none;
 }
 
-.product_img,
+.product_img {
+  margin: auto;
+  /* width: 168px; */
+  height: 168px;
+}
+
 .product {
   margin: auto;
-  width: 168px;
+  display: block;
+  /* margin-bottom: 8em; */
+  /* max-width: 168px; */
+  max-height: 168px;
 }
 
 .good,
 .bad {
+  display: none; /* FIXME: This is temporary until I fix the sizes*/
   position: relative;
   top: 175px;
   left: 84px;
   width: 60px;
 }
 
-.buy, .avoid,
 .free, .proprietary {
   text-align: center;
 }
@@ -231,24 +252,45 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .buy img,
 .avoid img {
-  margin-top: 2em;
   max-width: 151px;
   height: 42px;
 }
 
+.buy_avoid_wrapper {
+  margin-top: 2em;
+  min-width: 100%;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.buy {
+  text-align: center;
+  margin: auto;
+  width: 45.555555%;
+  float: left;
+
+}
+
+.avoid {
+  text-align: center;
+  margin: auto;
+  width: 45.555555%;
+  float: right;
+}
+
 .free {
   float: left;
-  width: 45%;
+  width: 45.555555%;
 }
 
 .proprietary {
   float: right;
-  width: 45%;
+  width: 45.555555%;
 }
 
 /* Recommended Section */
 
-.recommend_title {
+.topic_title {
   border-bottom: 1px solid #2CAF8F;
   width: 100%;
   text-align: left;
@@ -272,3 +314,9 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 .recommended_product_img {
   width: 120px;
 }
+
+.recommend_wrapper .buy {
+  float: none;
+  text-align: center;
+  width: 100%;
+}