Permalink
Browse files

Add type size breakpoints

  • Loading branch information...
1 parent 40cdd52 commit 681762b214e2bf3c340d6db3d0ca036033bdae44 @gordonbrander committed Apr 16, 2014
Showing with 83 additions and 8 deletions.
  1. +83 −8 contents/assets/site.css
View
@@ -73,6 +73,7 @@ html {
background: #fff;
color: #555;
font-family: "Fira Sans", sans-serif;
+ padding: 18px 0;
}
img {
@@ -87,12 +88,11 @@ strong {
font-weight: 600;
}
-/* Type sizing @ 21px, 9px, 3px cadence
+/* Type sizing @ 16px with 9px cadence
----------------------------------------------------------------------------- */
-
html {
- font-size: 21px;
- line-height: 1.571429; /* 33px */
+ font-size: 14px;
+ line-height: 1.6875; /* 27px */
}
h1,
@@ -106,13 +106,21 @@ h6 {
}
h1 {
- font-size: 36px;
- line-height: 54px;
+ font-size: 21px;
+ line-height: 27px;
}
h2 {
- font-size: 30px;
- line-height: 45px;
+ font-size: 18px;
+ line-height: 21px;
+}
+
+h3,
+h4,
+h5,
+h6 {
+ font-size: 14px;
+ line-height: 27px;
}
p,
@@ -140,4 +148,71 @@ li {
hr {
margin-bottom: 54px;
margin-top: 54px;
+}
+
+/* Type sizing @ 21px with 9px cadence
+----------------------------------------------------------------------------- */
+
+@media screen and (min-width: 1320px) {
+
+ html {
+ font-size: 21px;
+ line-height: 1.571429; /* 33px */
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-bottom: 18px;
+ margin-top: 54px;
+ }
+
+ h1 {
+ font-size: 36px;
+ line-height: 54px;
+ }
+
+ h2 {
+ font-size: 30px;
+ line-height: 45px;
+ }
+
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: 21px;
+ line-height: 33px;
+ }
+
+ p,
+ table {
+ margin-bottom: 18px;
+ margin-top: 0;
+ }
+
+ ul,
+ ol {
+ margin-bottom: 18px;
+ margin-top: 0;
+ }
+
+ li ul,
+ li ol {
+ margin-bottom: 0;
+ }
+
+ li {
+ margin-bottom: 9px;
+ margin-top: 9px;
+ }
+
+ hr {
+ margin-bottom: 54px;
+ margin-top: 54px;
+ }
+
}

0 comments on commit 681762b

Please sign in to comment.