Merge pull request #351 from twbs/font-weights

Only use font-weight: 100 on retina screens

docs/assets/css/docs.css

@@ -93,12 +93,17 @@ body {
   left: 50%;
   margin-bottom: 0;
   font-size: 22px;
-  font-weight: 100;
+  font-weight: 300;
   z-index: 20;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .docs-title {
+    font-weight: 100;
+  }
+}
 
 .docs-nav .docs-nav-trigger {
   color: #fff;
@@ -125,9 +130,13 @@ body {
 .docs-nav .docs-nav-item {
   display: block;
   padding: 20px 15px;
-  font-weight: 100;
   font-size: 22px;
 }
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .docs-nav .docs-nav-item {
+    font-weight: 100;
+  }
+}
 
 .docs-jump-menu,
 .docs-component-group {
@@ -378,8 +387,14 @@ body {
 .docs-sub-content .page-description {
   margin-top: 0;
   margin-bottom: 0;
+  font-weight: 300;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .docs-sub-content .page-title,
+  .docs-sub-content .page-description {
     font-weight: 100;
   }
+}
 .docs-sub-content .page-title {
   font-size: 40px;
   margin-bottom: 5px;
@@ -415,8 +430,12 @@ body {
 .section-lead {
   font-size: 18px;
   color: #777;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .section-lead {
     font-weight: 100;
   }
+}
 
 @media screen and (min-width: 768px) {
   .section-heading {
@@ -646,6 +665,7 @@ body {
 code {
   padding: 2px 4px;
   font-size: 90%;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   background-color: #f9f9f9;
   border-radius: 3px;
 }

sass/docs.scss

@@ -93,9 +93,16 @@ body {
   left: 50%;
   margin-bottom: 0;
   font-size: 22px;
-  font-weight: 100;
+  font-weight: 300;
   z-index: 20;
   @include transform(translateX(-50%));
+
+  // Use a thinner weight on retina
+  @media 
+    (-webkit-min-device-pixel-ratio: 2), 
+    (min-resolution: 192dpi) {
+      font-weight: 100;
+    }
 }
 .docs-nav {
   .docs-nav-trigger {
@@ -125,8 +132,14 @@ body {
   .docs-nav-item {
     display: block;
     padding: 20px 15px;
-    font-weight: 100;
     font-size: 22px;
+    
+    // Use a thinner weight on retina
+    @media 
+      (-webkit-min-device-pixel-ratio: 2), 
+      (min-resolution: 192dpi) {
+        font-weight: 100;
+      }
   }
 }
 .docs-jump-menu,
@@ -377,8 +390,15 @@ body {
   .page-description {
     margin-top: 0;
     margin-bottom: 0;
+    font-weight: 300;
+
+    // Use a thinner weight on retina
+    @media 
+      (-webkit-min-device-pixel-ratio: 2), 
+      (min-resolution: 192dpi) {
         font-weight: 100;
       }
+  }
   .page-title {
     font-size: 40px;
     margin-bottom: 5px;
@@ -418,8 +438,14 @@ body {
 .section-lead {
   font-size: 18px;
   color: #777;
+
+  // Use a thinner weight on retina
+  @media 
+    (-webkit-min-device-pixel-ratio: 2), 
+    (min-resolution: 192dpi) {
       font-weight: 100;
     }
+}
 
 // Desktop: Section headings 
 @media screen and (min-width: 768px) {
@@ -671,6 +697,7 @@ body {
 code {
   padding: 2px 4px;
   font-size: 90%;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   background-color: #f9f9f9;
   border-radius: 3px;
 }