make each ray 1px narrower. move down the radial gradient a bit.

paulirish · Jan 2, 2013 · a04a771 · a04a771
1 parent bade52e
commit a04a771
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/css/style.css b/css/style.css
@@ -86,18 +86,18 @@ a, a:visited, a:active { text-decoration: none; color: black; font-weight: bold;
 
 a:hover, a.selected { color: #fbe762; }
 
-div.css-chart { background-image: -webkit-radial-gradient(482px 482px, circle, rgba(90, 100, 112, 0.5) 250px, rgba(0, 0, 0, 0) 400px); background-image: radial-gradient(circle at 482px 482px, rgba(90, 100, 112, 0.5) 250px, rgba(0, 0, 0, 0) 400px); margin: 0 auto 0 auto; width: 964px; height: 530px; position: relative; }
-div.css-chart p { display: block; position: absolute; bottom: -10px; left: 482px; background: rgba(74, 65, 70, 0.1); width: 282px; height: 23px; border: 0; padding: 0 0 0 200px; -webkit-transition: background 0.2s ease-out; transition: background 0.2s ease-out; }
+div.css-chart { background-image: -webkit-radial-gradient(482px 519px, circle, rgba(90, 100, 112, 0.5) 250px, rgba(0, 0, 0, 0) 400px); background-image: radial-gradient(circle at 482px 519px, rgba(90, 100, 112, 0.5) 250px, rgba(0, 0, 0, 0) 400px); margin: 0 auto 0 auto; width: 964px; height: 530px; position: relative; }
+div.css-chart p { display: block; position: absolute; bottom: -10px; left: 482px; background: rgba(74, 65, 70, 0.1); width: 282px; height: 22px; border: 0; padding: 0 0 0 200px; -webkit-transition: background 0.2s ease-out; transition: background 0.2s ease-out; }
 div.css-chart p:hover { background: #4a4146; }
 div.css-chart p.css3 { background: rgba(74, 65, 70, 0.1); }
 div.css-chart p.css3:hover { background: rgba(190, 211, 100, 0.2); }
-div.css-chart p em { position: absolute; bottom: 0; left: 0; width: 100%; height: 23px; }
+div.css-chart p em { position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; }
 div.css-chart p em b { opacity: 0; -webkit-transition: opacity 1s ease-in; transition: opacity 1s ease-in; }
 .twenty12 div.css-chart p em.twenty12 b, .twenty11 div.css-chart p em.twenty11 b, .twenty10 div.css-chart p em.twenty10 b, .twenty09 div.css-chart p em.twenty09 b, .twenty08 div.css-chart p em.twenty08 b { opacity: 1; }
 div.css-chart p a { display: block; width: 100%; height: 100%; font-weight: normal; -webkit-transition: none; transition: none; position: relative; }
 div.css-chart p i { opacity: 0; position: absolute; top: 0; right: 284px; width: 400px; z-index: 4; display: block; height: auto; color: #f2efde; padding: 10px; text-align: center; border-radius: 0.5em; text-shadow: 1px 1px 0 black, 2px 2px 0 black, 3px 3px 0 black, 4px 4px 0 black, 5px 5px 0px black; -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; text-transform: uppercase; font-size: 28px; }
 div.css-chart p:hover i { opacity: 1; }
-div.css-chart p b { width: 12.5%; display: block; height: 23px; float: left; }
+div.css-chart p b { width: 12.5%; display: block; height: 22px; float: left; }
 
 b.ie6 { background-color: rgba(218, 168, 192, 0.6); }
 b.ie7 { background-color: rgba(222, 146, 159, 0.6); }

diff --git a/src/style.sass b/src/style.sass
@@ -21,7 +21,7 @@
   background-image: -webkit-radial-gradient($position, circle, $color1 $rad1, $color2 $rad2)
   background-image: radial-gradient(circle at $position, $color1 $rad1, $color2 $rad2)
 
-$barheight: 23px
+$barheight: 22px
 
 html
   background: #78909c
@@ -45,9 +45,8 @@ a:hover,
 a.selected
   color: rgb(251, 231, 98)
 
-
 div.css-chart
-  +radial-gradient(482px 482px, rgba(90, 100, 112, 0.5), 250px, rgba(0,0,0,0), 400px)
+  +radial-gradient(482px 519px, rgba(90, 100, 112, 0.5), 250px, rgba(0,0,0,0), 400px)
   margin: 0 auto 0 auto
   width: 964px
   height: 530px
@@ -102,7 +101,6 @@ div.css-chart
       transition: none
       position: relative
 
-
     i
       opacity: 0
       position: absolute
@@ -131,7 +129,6 @@ div.css-chart
       height: $barheight
       float: left
 
-
 b
   &.ie6
     background-color: rgba(218, 168, 192, 0.6)
@@ -198,7 +195,6 @@ ul
   .twenty08 & .twenty08 li
     opacity: 1
 
-
 li b
   display: inline-block
   width: 20px
@@ -213,7 +209,6 @@ $rays: 29
     i
       +transform(((180deg / ($rays - 1))*($i - 1)), 50%, 50%)
 
-
 #header
   h1, h3
     text-align: center
@@ -243,21 +238,18 @@ $rays: 29
     width: 160px
     z-index: 10
 
-
 /* quick kills */
 #body .twenty10 .ie9,
 #footer p label
   display: none !important
 
-
 #footer
   margin-top: 26px
   width: 100%
   p
     text-align: center
     text-transform: uppercase
 
-
 =selection
   background: #ff5e99
   color: white
@@ -277,7 +269,7 @@ a:link
 @media screen and (max-device-width: 480px)
   /* All Capable Mobile Browser (Opera Mobile, iPhone Safari, Android Chrome) CSS goes here */
   html
-    -webkit-text-size-adjust: 100%   /* Prevent iPhone from adjusting font size */
+    -webkit-text-size-adjust: 100% /* Prevent iPhone from adjusting font size */
 
   p:target i
     opacity: 1 /* Since iPhone does not support hover */