summaryrefslogtreecommitdiffstats
path: root/STARTERKIT
diff options
context:
space:
mode:
authorJohnAlbin2011-04-04 02:46:28 +0800
committerJohnAlbin2011-04-04 02:46:28 +0800
commitc1f07ee24c13b6480ad29e6a0fbfd29c74ce2c31 (patch)
tree777663cc9cf9d6f1b5fccb424b8722b2e82f70c6 /STARTERKIT
parentf30def9ab9003d3e8ecd250ecb298cf1d111cdc4 (diff)
Issue #481952 by kdebaas and JohnAlbin: Add vertical rhythm to line heights and margins
Diffstat (limited to 'STARTERKIT')
-rw-r--r--STARTERKIT/css/blocks.css2
-rw-r--r--STARTERKIT/css/comments.css2
-rw-r--r--STARTERKIT/css/forms.css10
-rw-r--r--STARTERKIT/css/html-reset.css58
-rw-r--r--STARTERKIT/css/layout-fixed.css4
-rw-r--r--STARTERKIT/css/layout-liquid.css4
-rw-r--r--STARTERKIT/css/pages.css10
7 files changed, 44 insertions, 46 deletions
diff --git a/STARTERKIT/css/blocks.css b/STARTERKIT/css/blocks.css
index 2f79cc5..00d8485 100644
--- a/STARTERKIT/css/blocks.css
+++ b/STARTERKIT/css/blocks.css
@@ -5,7 +5,7 @@
.block /* Block wrapper */ {
- margin-bottom: 1em;
+ margin-bottom: 1.5em;
}
.block.first /* The first block in the region */ {
diff --git a/STARTERKIT/css/comments.css b/STARTERKIT/css/comments.css
index 31ab26a..f3a1d88 100644
--- a/STARTERKIT/css/comments.css
+++ b/STARTERKIT/css/comments.css
@@ -5,7 +5,7 @@
#comments /* Wrapper for the list of comments and its title */ {
- margin: 1em 0;
+ margin: 1.5em 0;
}
#comments h2.title /* Heading for the list of comments */ {
diff --git a/STARTERKIT/css/forms.css b/STARTERKIT/css/forms.css
index cc44c22..38b18c7 100644
--- a/STARTERKIT/css/forms.css
+++ b/STARTERKIT/css/forms.css
@@ -5,7 +5,7 @@
.form-item /* Wrapper for a form element (or group of form elements) and its label */ {
- margin: 1em 0;
+ margin: 1.5em 0;
}
.form-item input.error,
@@ -34,7 +34,7 @@
.form-checkboxes .form-item,
.form-radios .form-item /* Pack groups of checkboxes and radio buttons closer together */ {
- margin: 0.4em 0;
+ margin: 0; /* Drupal core uses "0.4em 0" */
}
.form-submit /* The submit button */ {
@@ -86,16 +86,16 @@
html.js #user-login-form li.openid-link,
#user-login-form li.openid-link /* The "Log in using OpenID" link. */ {
- margin-top: 1em;
+ margin-top: 1.5em;
margin-left: -20px; /* LTR */ /* Un-do some of the padding on the ul list. */
}
#user-login-form li.user-link /* The "Cancel OpenID login" link. */ {
- margin-top: 1em;
+ margin-top: 1.5em;
}
#user-login ul {
- margin: 1em 0;
+ margin: 1.5em 0;
}
diff --git a/STARTERKIT/css/html-reset.css b/STARTERKIT/css/html-reset.css
index e090f61..479b0f2 100644
--- a/STARTERKIT/css/html-reset.css
+++ b/STARTERKIT/css/html-reset.css
@@ -14,11 +14,12 @@
/*
* Fonts
*
- * Our font size and line height declarations are based on the following ALA
- * article:
- * http://www.alistapart.com/articles/howtosizetextincss
+ * Our font size and line height declarations are based on the following
+ * articles:
+ * - http://www.alistapart.com/articles/howtosizetextincss
+ * - http://24ways.org/2006/compose-to-a-vertical-rhythm
*
- * All modern browsrs use a 16px default font size. Specifying the font-size
+ * All modern browsers use a 16px default font size. Specifying the font-size
* and line-height in ems (relative to the 16px default font) allows the user
* to resize the font in the browser and produces the most consistent results
* across different browsers.
@@ -119,47 +120,44 @@ code {
}
/*
- * Headings
+ * Block-level elements
+ *
+ * To achieve a pleasant vertical rhythm, we use the 1.5em line height of our
+ * base font as the top and bottom margins for our block level elements and make
+ * the line heights of any larger fonts be a multiple of 1.5 ems. For more
+ * information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
*/
+
+/* Headings */
h1 {
font-size: 2em;
- line-height: 1.3em;
- margin-top: 0;
- margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
- Remember, a margin specified in ems is relative to
- the element's font-size, not to the pages' base
- font size. So, for example, if we want a 1em margin
- (relative to the base font), we have to divide that
- length by the element's font-size:
- 1em / 2em = 0.5em */
+ line-height: 1.5em;
+ margin: 0.75em 0;
+ /* 0.75em is equivalent to 1.5em in the page's base font. font. Remember, a
+ margin specified in ems is relative to the element's font-size, not to the
+ pages' base font size. So, for example, if we want a 1.5em margin (relative
+ to the base font), we have to divide that length by the element's
+ font-size: 1.5em / 2em = 0.5em */
}
h2 {
font-size: 1.5em;
- line-height: 1.3em;
- margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
- margin-bottom: 0.667em;
+ margin: 1em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.5 = 1em */
}
h3 {
font-size: 1.3em;
- line-height: 1.3em;
- margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
- margin-bottom: 0.769em;
+ margin: 1.154em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.3 = 1.154 */
}
h4,
h5,
h6 {
font-size: 1.1em;
- line-height: 1.3em;
- margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
- margin-bottom: 0.909em;
+ margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
}
-/*
- * Block-level elements
- */
+/* Other block-level elements */
p,
ul,
ol,
@@ -167,11 +165,11 @@ dl,
pre,
table,
fieldset {
- margin: 1em 0;
+ margin: 1.5em 0;
}
blockquote {
- margin: 1em 2em;
+ margin: 1.5em 2em;
}
/*
@@ -187,7 +185,7 @@ ol {
.block ul,
.item-list ul /* Drupal overrides */ {
- margin: 1em 0;
+ margin: 1.5em 0;
padding: 0 0 0 2em; /* LTR */
}
@@ -316,6 +314,6 @@ form {
}
fieldset {
- margin: 1em 0;
+ margin: 1.5em 0;
padding: 0.5em;
}
diff --git a/STARTERKIT/css/layout-fixed.css b/STARTERKIT/css/layout-fixed.css
index 9810725..633121e 100644
--- a/STARTERKIT/css/layout-fixed.css
+++ b/STARTERKIT/css/layout-fixed.css
@@ -103,7 +103,7 @@ body {
margin-left: 0; /* LTR */
margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
- height: 2.3em; /* The navigation can have any arbritrary height. We picked one
+ height: 3em; /* The navigation can have any arbritrary height. We picked one
that is the line-height plus 1em: 1.3 + 1 = 2.3
Set this to the same value as the margin-top below. */
}
@@ -111,7 +111,7 @@ body {
.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
- margin-top: 2.3em; /* Set this to the same value as the navigation height above. */
+ margin-top: 3em; /* Set this to the same value as the navigation height above. */
}
#navigation .section {
diff --git a/STARTERKIT/css/layout-liquid.css b/STARTERKIT/css/layout-liquid.css
index 260e132..b990f6c 100644
--- a/STARTERKIT/css/layout-liquid.css
+++ b/STARTERKIT/css/layout-liquid.css
@@ -93,7 +93,7 @@ body {
margin-left: 0; /* LTR */
margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
- height: 2.3em; /* The navigation can have any arbritrary height. We picked one
+ height: 3em; /* The navigation can have any arbritrary height. We picked one
that is the line-height plus 1em: 1.3 + 1 = 2.3
Set this to the same value as the margin-top below. */
}
@@ -101,7 +101,7 @@ body {
.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
- margin-top: 2.3em; /* Set this to the same value as the navigation height above. */
+ margin-top: 3em; /* Set this to the same value as the navigation height above. */
}
#navigation .section {
diff --git a/STARTERKIT/css/pages.css b/STARTERKIT/css/pages.css
index 77ee5b8..9e499ff 100644
--- a/STARTERKIT/css/pages.css
+++ b/STARTERKIT/css/pages.css
@@ -63,7 +63,7 @@ h1#site-name,
div#site-name /* The name of the website */ {
margin: 0;
font-size: 2em;
- line-height: 1.3em;
+ line-height: 1.5em;
}
#site-name a:link,
@@ -162,7 +162,7 @@ div.tabs /* See also the tabs.css file. */ {
}
.help /* Help text on a page */ {
- margin: 1em 0;
+ margin: 1.5em 0;
}
.more-help-link /* Link to more help */ {
@@ -174,7 +174,7 @@ div.tabs /* See also the tabs.css file. */ {
}
ul.links /* List of links */ {
- margin: 1em 0;
+ margin: 1.5em 0;
padding: 0;
}
@@ -191,7 +191,7 @@ ul.links li {
.pager /* A list of page numbers when more than 1 page of content is available */ {
clear: both;
- margin: 1em 0;
+ margin: 1.5em 0;
text-align: center;
}
@@ -201,7 +201,7 @@ ul.links li {
}
.feed-icon /* The link to the RSS or Atom feed for the current list of content */ {
- margin: 1em 0;
+ margin: 1.5em 0;
}
.more-link /* Aggregator, blog, and forum more link */ {