Refactor billboard CSS

fairmondo · Dec 5, 2014 · 6fd6613 · 6fd6613
1 parent e9a27eb
commit 6fd6613
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 69 deletions.
diff --git a/app/assets/stylesheets/billboards/_billboard-books.scss b/app/assets/stylesheets/billboards/_billboard-books.scss
@@ -4,24 +4,32 @@
 
 
 // General stuff
-#billboard-books > article > ul a > p {
-  text-align: left;
-  font-weight: 600;
-  font-size: 14px;
-  color: #428fbd;
-  text-decoration: underline;
+#billboard-books > article h2 {
+  font-weight    : 400;
+  text-transform : uppercase;
+  text-align     : center;
+  color          : $white;
 }
 
 #billboard-books > article h3 {
-  font-size: 14px;
-  color: #74a3c2;
+  font-weight : 400;
+  font-size   : 14px;
+  text-align  : center;
+  color       : #74a3c2;
+}
+
+#billboard-books > article > ul a > p {
+  font-weight     : 600;
+  font-size       : 14px;
+  text-align      : left;
+  text-decoration : underline;
+  color           : #428fbd;
 }
 
 #billboard-books > article > a {
-  position: absolute;
-  font-size: 18px;
-  font-weight: 600;
-  color: $white;
+  font-weight : 600;
+  font-size   : 18px;
+  color       : $white;
 }
 
 

diff --git a/app/assets/stylesheets/billboards/_billboard-ecobookstore.scss b/app/assets/stylesheets/billboards/_billboard-ecobookstore.scss
@@ -5,31 +5,29 @@
 
 // General stuff
 #billboard-ecobookstore > article h2 {
-  font-weight: 600;
-  color: #2b4b5e;
-  text-transform: none;
-  text-align: left;
+  font-weight    : 600;
+  text-transform : none;
+  color          : #2b4b5e;
+  text-align     : left;
 }
 
 #billboard-ecobookstore > article h3 {
-  text-indent: -1000em;
+  text-indent : -1000em;
 }
 
 #billboard-ecobookstore > article > a > p {
-  position: absolute;
-  font-weight: 600;
-  color: $white;
+  font-weight : 600;
+  color       : $white;
 }
 
 #billboard-ecobookstore > article > p {
-  position: absolute;
-  font-weight: 600;
-  line-height: 1.2em;
-  color: $white;
+  font-weight : 600;
+  line-height : 1.2em;
+  color       : $white;
 }
 
 #billboard-ecobookstore > article > p > span {
-  color: #e57a61;
+  color : #e57a61;
 }
 
 
@@ -48,7 +46,7 @@
   }
 
   #billboard-ecobookstore > article > a > p {
-    @include static-position($top: 260px, $left: 40px, $height: 25px, $width: 129px);
+    @include static-position($top: 276px, $left: 40px, $height: 25px, $width: 129px);
     font-size: 16px;
     padding: 4px 0 0 15px;
   }
@@ -97,7 +95,7 @@
   }
 
   #billboard-ecobookstore > article > a > p {
-    @include static-position($top: 337px, $left: 298px, $height: 27px, $width: 127px);
+    @include static-position($top: 354px, $left: 298px, $height: 27px, $width: 127px);
     font-size: 16px;
     padding: 4px 0 0 15px;
   }
@@ -145,7 +143,7 @@
   }
 
   #billboard-ecobookstore > article > a > p {
-    @include static-position($top: 333px, $left: 528px, $height: 30px, $width: 146px);
+    @include static-position($top: 351px, $left: 528px, $height: 30px, $width: 146px);
     font-size: 18px;
     padding: 4px 0 0 17px;
   }

diff --git a/app/assets/stylesheets/billboards/_billboard-gifts.scss b/app/assets/stylesheets/billboards/_billboard-gifts.scss
@@ -19,10 +19,6 @@
   color    : #d23727;
 }
 
-#billboard-gifts > article > ul {
-  position : static;
-}
-
 #billboard-gifts > article > ul > li p {
   font-size   : 18px;
   font-weight : 600;

diff --git a/app/assets/stylesheets/billboards/_billboard-gourmet.scss b/app/assets/stylesheets/billboards/_billboard-gourmet.scss
@@ -4,23 +4,25 @@
 
 
 // General stuff
-//#billboard-gourmet > article > ul a p {
-//  text-align: left;
-//  font-size: 14px;
-//}
+
+#billboard-gourmet > article h2 {
+  font-weight    : 400;
+  text-transform : uppercase;
+  text-align     : center;
+  color          : $white;
+}
 
 #billboard-gourmet > article > ul > li p {
-  text-align: left;
-  font-weight: 600;
-  font-size: 18px;
-  color: #428fbd;
+  font-weight : 600;
+  font-size   : 18px;
+  text-align  : left;
+  color       : #428fbd;
 }
 
 #billboard-gourmet > article > a {
-  position: absolute;
-  font-size: 18px;
-  font-weight: 600;
-  color: $white;
+  font-weight : 600;
+  font-size   : 18px;
+  color       : $white;
 }
 
 
@@ -129,6 +131,7 @@
 
   #billboard-gourmet > article > h2 {
     @include static-position($top: 127px, $left: 7px);
+    font-size: 30px;
   }
 
   #billboard-gourmet > article > a {

diff --git a/app/assets/stylesheets/controller/welcome.css.scss b/app/assets/stylesheets/controller/welcome.css.scss
@@ -115,7 +115,6 @@
 .billboard {
   background-repeat: no-repeat;
   background-position: center top;
-  position: relative;
   border-radius: 0.5em;  // Circumvent bug in Webkit browsers that would hide the rounded border from #billboard-inner
   height: 410px;
 }
@@ -126,42 +125,28 @@
   height: 410px;
 }
 
-.billboard > article h2,     .billboard > article > ul,
-.billboard > article li div, .billboard > article li p,
-.billboard > article h3 {
+// Set position to absolute for elements that are used in billboards
+.billboard > article h2,     .billboard > article h3,
+.billboard > article div,    .billboard > article p,
+.billboard > article > a {
   position: absolute;
-  margin: 0;
 }
 
-.billboard > article h2 {
+// Clear margins
+.billboard > article h2,  .billboard > article h3,
+.billboard > article div, .billboard > article p,
+.billboard > article ul,  .billboard > article li {
   margin: 0;
-  z-index: 10;
-  text-align: center;
-  font-size: 30px;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.billboard > article h3 {
-  margin: 0;
-  font-weight: 400;
-  font-size: 1.2em;
-  text-align: center;
-  color: $white;
 }
 
 .billboard > article > ul {
   list-style-type: none;
 }
 
-.billboard > article > section > a.billboard-textlink {
-  text-decoration: underline;
-  font-size: 0.9em;
-}
-
 #js-billboardslides { display: none; }
 
-#billboard .slidejs-container, #billboard .slidejs-control, #billboard .slidejs-slide {
+#billboard .slidejs-container, #billboard .slidejs-control,
+#billboard .slidejs-slide {
   min-height: 410px;
 }