Browse Source

adjusted css for responsive header and text sizes

Casey DeLorme 10 năm trước cách đây
mục cha
commit
692666fe56
1 tập tin đã thay đổi với 66 bổ sung13 xóa
  1. 66 13
      public/css/main.css

+ 66 - 13
public/css/main.css

@@ -68,6 +68,29 @@ table {
 html {
     font-family: 'droid_sansregular', helvetica;
 }
+body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
+    font-size-adjust: 0.5;
+}
+h1 {
+    font-size: 2em;
+    line-height: 1.25;
+}
+h2 {
+    font-size: 1.625em;
+    line-height: 1.15384615;
+}
+h3 {
+    font-size: 1.375em;
+    line-height: 1.13636364;
+}
+h4 {
+  font-size: 1.125em;
+  line-height: 1.11111111;
+}
+blockquote, strong {
+    font-size: 1.25em;
+    line-height: 1.25;
+}
 h1, h2, h3, h4 {
     font-family: 'allerregular', sans-serif, georgia;
     margin-bottom: 15px;
@@ -80,25 +103,12 @@ h1, h2 {
 h3, h4, strong {
     font-weight: bold;
 }
-h1 {
-    font-size: 250%;
-}
-h2 {
-    font-size: 200%;
-}
-h3 {
-    font-size: 150%;
-}
-strong {
-    line-height: 125%;
-}
 p, ul {
     margin-bottom: 10px;
 }
 li {
     margin-left: 45px;
     list-style-type: disc;
-    line-height: 115%;
 }
 p>a, li>a {
     text-decoration: underline;
@@ -115,6 +125,8 @@ a>img {
 header, .content, footer {
     width: 80%;
     margin: 20px auto;
+    font-size: 1em;
+    line-height: 1.25;
 }
 
 /* header & navigation */
@@ -169,3 +181,44 @@ footer .skype {
     display: table;
     clear: both;
 }
+
+/* responsive styles */
+@media (min-width: 43.75em) {
+    header, .content, footer {
+        font-size: 1em;
+        line-height: 1.375;
+    }
+    h1 {
+        font-size: 2.5em;
+        line-height: 1.125;
+    }
+    h2 {
+        font-size: 2em;
+        line-height: 1.25;
+    }
+    h3 {
+        font-size: 1.5em;
+        line-height: 1.25;
+    }
+    h4 {
+        line-height: 1.22222222;
+    }
+    blockquote {
+        font-size: 1.5em;
+        line-height: 1.45833333;
+    }
+}
+@media (min-width: 56.25em) {
+    h1 {
+        font-size: 3em;
+        line-height: 1.05;
+    }
+    h2 {
+        font-size: 2.25em;
+        line-height: 1.25;
+    }
+    h3 {
+        font-size: 1.75em;
+        line-height: 1.25;
+    }
+}