update typography.less, add long-text class

shawlang · Oct 7, 2012 · 6fddc11 · 6fddc11
1 parent 17f253e
commit 6fddc11
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 22 deletions.
diff --git a/css/modern-responsive.css b/css/modern-responsive.css
@@ -98,6 +98,12 @@
   .hero-unit {
     margin-left: 0;
   }
+  table thead tr th {
+    font-size: 9pt;
+  }
+  table tbody tr td {
+    font-size: 10pt;
+  }
   h1 {
     font-size: 30pt;
   }
@@ -107,5 +113,11 @@
 }
 /* Landscape phones and down */
 @media (max-width: 480px) {
-
+  table thead tr th {
+    font-size: 8pt;
+  }
+  table tbody tr td {
+    font-size: 9pt;
+    padding: 2px 5;
+  }
 }
diff --git a/css/modern.css b/css/modern.css
@@ -755,6 +755,12 @@ table {
  * Typography.less
  *
  */
+@font-face {
+  font-family: 'PT Serif Caption';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PT Serif Caption'), local('PTSerif-Caption'), url(http://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format('woff');
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -873,6 +879,29 @@ table {
   font-weight: 300;
   font-size: 8pt;
 }
+#font .long-text {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+}
+#font .long-text-smaller {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  font-size: 9pt;
+}
+#font .long-text-lead {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  font-size: 20pt;
+}
 #state .header,
 #state .subheader,
 #state .small-subheader,
@@ -1057,6 +1086,13 @@ p {
   letter-spacing: 0.02em;
   line-height: 20px;
 }
+p.long-text {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+}
 p {
   margin: 0 0 10px;
 }
@@ -1330,7 +1366,7 @@ ol.unstyled,
 .page .page-header .page-header-content  > .page-back {
   position: absolute;
   top: 34px;
-  left: 44px;
+  left: 30px;
 }
 .page .page-header .page-header-content .user-login {
   float: right;
@@ -1446,8 +1482,8 @@ ol.unstyled,
  * Buttons.less
  */
 .modern-ui-logo {
-  height: 32px;
-  width: 32px;
+  height: 24px;
+  width: 24px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
   -webkit-background-size: cover;

diff --git a/less/buttons.less b/less/buttons.less
@@ -10,8 +10,8 @@
 @img-back-button: url(data:image/png;base64,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);
 
 .modern-ui-logo {
-    height: 32px;
-    width: 32px;
+    height: 24px;
+    width: 24px;
     display: block;
     background-image: @logo;
     -webkit-background-size: cover;

diff --git a/less/layout.less b/less/layout.less
@@ -121,7 +121,7 @@
             & > .page-back {
                 position: absolute;
                 top: 34px;
-                left: 44px;
+                left: 30px;
             }
 
             .user-login {

diff --git a/less/modern-responsive.less b/less/modern-responsive.less
@@ -53,11 +53,48 @@
     [class*="offset"], .hero-unit {
         margin-left: 0;
     }
+
+    table {
+        thead {
+            tr {
+                th {
+                    font-size: 9pt;
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                td {
+                    font-size: 10pt;
+                }
+            }
+        }
+    }
+
     h1 {font-size: 30pt;}
     h2 {font-size: 16pt;}
 }
 
 /* Landscape phones and down */
 @media (max-width: 480px) {
 
+    table {
+        thead {
+            tr {
+                th {
+                    font-size: 8pt;
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                td {
+                    font-size: 9pt;
+                    padding: 2px 5px;
+                }
+            }
+        }
+    }
 }
diff --git a/less/typography.less b/less/typography.less
@@ -6,6 +6,16 @@
  * Typography.less
  *
  */
+
+// Cambria equals
+// font-family: 'PT Serif Caption', serif;
+@font-face {
+    font-family: 'PT Serif Caption';
+    font-style: normal;
+    font-weight: 400;
+    src: local('PT Serif Caption'), local('PTSerif-Caption'), url(http://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format('woff');
+}
+
 @font-face {
     font-family: 'Open Sans';
     font-style: normal;
@@ -119,6 +129,24 @@
         font-weight: 300;
         font-size: 8pt;
     }
+
+    .long-text {
+        //.body;
+        font-family: 'PT Serif Caption', sans-serif, serif !important;
+        font-weight: 300;
+        font-size: 10pt;
+        letter-spacing: 0.02em;
+        line-height: 20px;
+    }
+    .long-text-smaller {
+        .long-text;
+        font-size: 9pt;
+    }
+    .long-text-lead {
+        .long-text;
+        font-size: 20pt;
+    }
+
 }
 
 #state {
@@ -204,6 +232,10 @@ body, p {
     #font > .body;
 }
 
+p.long-text {
+    #font > .long-text;
+}
+
 p {
     margin: 0 0 10px;
 }

diff --git a/public/css/modern-responsive.css b/public/css/modern-responsive.css
@@ -98,6 +98,12 @@
   .hero-unit {
     margin-left: 0;
   }
+  table thead tr th {
+    font-size: 9pt;
+  }
+  table tbody tr td {
+    font-size: 10pt;
+  }
   h1 {
     font-size: 30pt;
   }
@@ -107,5 +113,11 @@
 }
 /* Landscape phones and down */
 @media (max-width: 480px) {
-
+  table thead tr th {
+    font-size: 8pt;
+  }
+  table tbody tr td {
+    font-size: 9pt;
+    padding: 2px 5;
+  }
 }
diff --git a/public/css/modern.css b/public/css/modern.css
@@ -755,6 +755,12 @@ table {
  * Typography.less
  *
  */
+@font-face {
+  font-family: 'PT Serif Caption';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PT Serif Caption'), local('PTSerif-Caption'), url(http://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format('woff');
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -873,6 +879,29 @@ table {
   font-weight: 300;
   font-size: 8pt;
 }
+#font .long-text {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+}
+#font .long-text-smaller {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  font-size: 9pt;
+}
+#font .long-text-lead {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  font-size: 20pt;
+}
 #state .header,
 #state .subheader,
 #state .small-subheader,
@@ -1057,6 +1086,13 @@ p {
   letter-spacing: 0.02em;
   line-height: 20px;
 }
+p.long-text {
+  font-family: 'PT Serif Caption', sans-serif, serif !important;
+  font-weight: 300;
+  font-size: 10pt;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+}
 p {
   margin: 0 0 10px;
 }
@@ -1330,7 +1366,7 @@ ol.unstyled,
 .page .page-header .page-header-content  > .page-back {
   position: absolute;
   top: 34px;
-  left: 44px;
+  left: 30px;
 }
 .page .page-header .page-header-content .user-login {
   float: right;
@@ -1446,8 +1482,8 @@ ol.unstyled,
  * Buttons.less
  */
 .modern-ui-logo {
-  height: 32px;
-  width: 32px;
+  height: 24px;
+  width: 24px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
   -webkit-background-size: cover;

diff --git a/public/css/site.css b/public/css/site.css
@@ -13,7 +13,7 @@ body {
 
 
 .github-info {
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 .github-info li {
@@ -37,6 +37,11 @@ body {
 .header-bar-inner > ul li span {width: 30px; height: 30px; font-size: 9pt; border: 0;}
 .header-bar-inner > ul li a img {width: 18px;}
 
+#brand-name {
+    line-height: 12px;
+    margin-top: 5px;  
+}
+
 @media (min-width: 768px) and (max-width: 979px) {
     .page {
         width: 724px;
@@ -55,26 +60,20 @@ body {
         zoom: .6;
     }
 
-    #brand-name {
-        display: none;
-    }
     .modern-ui-logo {
         width: 24px;
         height: 24px;
     }
     .github-info {
         margin-top: 5px;
     }
-    #jetbrains {
-        display: none;
-    }
 
     a, .link {
         font-size: 9pt;
     }
 
-    .prettyprint {
-        display: none;
+    h3 {
+        line-height: 11px;
     }
 }
 
@@ -83,4 +82,13 @@ body {
         display: none;
     }
 
+    .prettyprint {
+        display: none;
+    }
+    #jetbrains {
+        display: none;
+    }
+    #brand-name {
+        display: none;
+    }
 }