From 0dcaa1adb20db05228f93521de9fd45ac74acf32 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 28 Feb 2014 11:21:02 -0800 Subject: [PATCH 1/2] use media queries to only show font-weight 100 on retina screens. --- docs/assets/css/docs.css | 27 +++++++++++++++++++++++---- sass/docs.scss | 36 +++++++++++++++++++++++++++++++----- 2 files changed, 54 insertions(+), 9 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 68bca61..de2264b 100644 --- a/docs/assets/css/docs.css +++ b/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,7 +387,13 @@ body { .docs-sub-content .page-description { margin-top: 0; margin-bottom: 0; - font-weight: 100; + 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; @@ -415,7 +430,11 @@ body { .section-lead { font-size: 18px; color: #777; - font-weight: 100; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .section-lead { + font-weight: 100; + } } @media screen and (min-width: 768px) { diff --git a/sass/docs.scss b/sass/docs.scss index 72377ea..fbac843 100644 --- a/sass/docs.scss +++ b/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,12 +132,18 @@ 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, -.docs-component-group{ +.docs-component-group { display: none; } .docs-title a, @@ -377,7 +390,14 @@ body { .page-description { margin-top: 0; margin-bottom: 0; - font-weight: 100; + 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; @@ -418,7 +438,13 @@ body { .section-lead { font-size: 18px; color: #777; - font-weight: 100; + + // Use a thinner weight on retina + @media + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + font-weight: 100; + } } // Desktop: Section headings From 0be2d3803eb97390b41152b8de2c9ae4a73f6a8f Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 28 Feb 2014 11:24:46 -0800 Subject: [PATCH 2/2] add a font-family to code --- docs/assets/css/docs.css | 1 + sass/docs.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index de2264b..b19bbe5 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -665,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; } diff --git a/sass/docs.scss b/sass/docs.scss index fbac843..e0edd09 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -697,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; }