diff --git a/zen-internals/css/blocks.css b/zen-internals/css/blocks.css index 2f79cc5a4b8204b2e8bcee18f16d3d543079a89c..00d8485149368e8ce1e0f75c8b56025166da2936 100644 --- a/zen-internals/css/blocks.css +++ b/zen-internals/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/zen-internals/css/comments.css b/zen-internals/css/comments.css index 63bc1011f99b07216b25c407c78333f39764cd53..f3a1d8838fc94c4e4912a5f55d781c3690f671da 100644 --- a/zen-internals/css/comments.css +++ b/zen-internals/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 */ { @@ -18,6 +18,7 @@ } .comment-preview /* Preview of the comment before submitting new or updated comment */ { + background-color: #ffffea; /* Drupal core will use a #ffffea background. See #1110842 */ } .comment.new /* A new comment since the user last viewed the page. */ { @@ -51,7 +52,7 @@ .comment-by-viewer /* A comment created by the current user */ { } -.comment h3.comment-title /* Comment title */ { +h3.comment-title /* Comment title */ { } .new /* "New" marker for comments that are new for the current user */ { @@ -76,7 +77,3 @@ .indented /* Nested comments are indented */ { /* margin-left: 25px; */ /* Drupal core uses a 25px left margin */ } - -.preview .comment /* Preview of the comment before submitting new or updated comment */ { - /* background-color: #ffffea; */ /* Drupal core uses a #ffffea background */ -} diff --git a/zen-internals/css/fields.css b/zen-internals/css/fields.css index a3d1c18767f5dc46f587be7a2ae7f57231230bb1..43523ee0d33f78f5725625f504a4e2af95c935eb 100644 --- a/zen-internals/css/fields.css +++ b/zen-internals/css/fields.css @@ -4,20 +4,31 @@ */ +.field /* Wrapper for any field. */ { +} + /* - * Field types + * Field types (Core) */ +.field-type-text { +} -.field /* Wrapper for any CCK field. */ { +.field-type-text-long { } -.field-type-datetime /* Always use "datetime" when creating new CCK date fields. "date" and "datestamp" are legacy types. */ { +.field-type-text-with-summary { +} + +.field-type-image { } -.field-type-filefield /* Field from filefield module */ { +.field-type-file { } -.field-type-nodereference { +.field-type-taxonomy-term-reference { +} + +.field-type-number-integer { } .field-type-number-decimal { @@ -26,19 +37,42 @@ .field-type-number-float { } -.field-type-number-integer { +.field-type-list-text { } -.field-type-text { +.field-type-list-boolean { +} + +.field-type-list-integer { } -.field-type-userreference { +.field-type-list-float { +} + +/* + * Field types (Contrib) + */ +.field-type-datetime /* Always use "datetime" when creating new CCK date fields. "date" and "datestamp" are legacy types. */ { +} + +.field-type-node-reference { +} + +.field-type-user-reference { } /* * Named fields */ +.field-name-body { +} + +.field-name-field-image { +} + +.field-name-field-tags { +} -.field-field-FIELDNAME /* Underscores in field name are replaced with dashes. */ { +.field-name-field-FIELDNAME /* Underscores in field name are replaced with dashes. */ { } diff --git a/zen-internals/css/forms-rtl.css b/zen-internals/css/forms-rtl.css index 4e4318e58d6cfdf0683ce183a0d7c812712c30f4..9365438245bb2ad5156fd4ce9dc9017be617af59 100644 --- a/zen-internals/css/forms-rtl.css +++ b/zen-internals/css/forms-rtl.css @@ -19,17 +19,12 @@ * styling of list items. */ +html.js #user-login-form li.openid-link, #user-login-form li.openid-link /* The "Log in using OpenID" link. */ { margin-left: 0; margin-right: -20px; /* Un-do some of the padding on the ul list. */ } -#user-login li.openid-link, -#user-login li.user-link /* The OpenID links on the /user form. */ { - margin-left: 0; - margin-right: -2em; /* Un-do all of the padding on the ul list. */ -} - /* * Drupal admin tables @@ -38,8 +33,7 @@ * section of the site. */ -form th, -form thead th { +form th { text-align: right; padding-left: 1em; padding-right: 0; diff --git a/zen-internals/css/forms.css b/zen-internals/css/forms.css index e96dd6b6b68dc1271c793f353d2cf212218aa0a1..38b18c77a861a9ceee8e6c0eb712551ffbe2e23e 100644 --- a/zen-internals/css/forms.css +++ b/zen-internals/css/forms.css @@ -4,10 +4,8 @@ */ -.form-item, -.form-checkboxes, -.form-radios /* Wrapper for a form element (or group of form elements) and its label */ { - margin: 1em 0; +.form-item /* Wrapper for a form element (or group of form elements) and its label */ { + margin: 1.5em 0; } .form-item input.error, @@ -36,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 */ { @@ -51,6 +49,15 @@ } +/* + * Password confirmation + */ +.password-parent, +.confirm-parent { + margin: 0; +} + + /* * Search (search-block-form.tpl.php) */ @@ -77,43 +84,34 @@ margin-bottom: 0; /* Position OpenID's ul next to the rest of the links. */ } +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; -} - -#user-login li.openid-link, -#user-login li.user-link /* The OpenID links on the /user form. */ { - margin-left: -2em; /* LTR */ /* Un-do all of the padding on the ul list. */ + margin: 1.5em 0; } /* * Drupal admin tables * - * We overrode these styles in html-elements.css, but restore them for the admin + * We overrode these styles in html-reset.css, but restore them for the admin * section of the site. */ -form tbody { - border-top: 1px solid #ccc; -} - -form th, -form thead th { +form th { text-align: left; /* LTR */ padding-right: 1em; /* LTR */ border-bottom: 3px solid #ccc; } -form tbody th { - border-bottom: 1px solid #ccc; +form tbody { + border-top: 1px solid #ccc; } diff --git a/zen-internals/css/generate.sh b/zen-internals/css/generate.sh index 4d1f5c3f92a4ab1226a845e67bed7d6841729562..c779465be32f660f53505112460a02fa688bfe82 100755 --- a/zen-internals/css/generate.sh +++ b/zen-internals/css/generate.sh @@ -3,9 +3,15 @@ # This script is used by the MAINTAINER to make copies of the stylesheets for # the base Zen theme from the stylesheets in the STARTERKIT. +rm *.css; for FILENAME in ../../STARTERKIT/css/*.css; do cp ../../STARTERKIT/css/$FILENAME .; done # Don't need the core reference. rm drupal7-reference.css; + +rm ../images/*; +for FILENAME in ../../STARTERKIT/images/*; do + cp ../../STARTERKIT/css/$FILENAME ../images/; +done diff --git a/zen-internals/css/html-reset-rtl.css b/zen-internals/css/html-reset-rtl.css index 0260d5ed5af1ab15425b545cc8c64955910c720b..82f138575d520971559f9fb16a375759dad4bd56 100644 --- a/zen-internals/css/html-reset-rtl.css +++ b/zen-internals/css/html-reset-rtl.css @@ -30,8 +30,6 @@ dd { * Drupal provides table styling which is only useful for its admin section * forms, so we override this default CSS. (We set it back in forms.css.) */ -th, -thead th, -tbody th { +th { text-align: right; } diff --git a/zen-internals/css/html-reset.css b/zen-internals/css/html-reset.css index 04cd14bfcdb0886e5c62372e76944568ed16cf40..479b0f24b12c2552045f65d701d2dec4f4863b92 100644 --- a/zen-internals/css/html-reset.css +++ b/zen-internals/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. @@ -34,15 +35,47 @@ body { * to use a 14px font size on the page, delete the 12px declarations. */ - /* Use a 12px base font size with a 16px line height */ + /* Use a 12px base font size with a 18px line height */ font-size: 0.75em; /* 16px x .75 = 12px */ - line-height: 1.333em; /* 12px x 1.333 = 16px */ + line-height: 1.5em; /* 12px x 1.5 = 18px */ - /* Use a 14px base font size with a 18px line height */ + /* Use a 14px base font size with a 21px line height */ font-size: 0.875em; /* 16px x .875 = 14px */ - line-height: 1.286em; /* 14px x 1.286 = 18px */ + line-height: 1.5em; /* 14px x 1.5 = 21px */ } +/* + * Instead of relying on the fonts that are available on a user's computer, you + * can use web fonts which, like images, are resources downloaded to the user's + * browser. Because of the bandwidth and rendering resources required, web fonts + * should be used with care. + * + * Numerous resources for web fonts can be found on Google. Here are a few + * websites where you can find Open Source fonts to download: + * - http://www.fontsquirrel.com/fontface + * - http://www.theleagueofmoveabletype.com + * + * In order to use these fonts, you will need to convert them into formats + * suitable for web fonts. We recommend the free-to-use Font Squirrel's + * Font-Face Generator: + * http://www.fontsquirrel.com/fontface/generator + * + * The following is an example @font-face declaration. This font can then be + * used in any ruleset using a property like this: font-family: Example, serif; + +@font-face { + font-family: 'Example'; + src: url('../fonts/example.eot'); + src: url('../fonts/example.eot?iefix') format('eot'), + url('../fonts/example.woff') format('woff'), + url('../fonts/example.ttf') format('truetype'), + url('../fonts/example.svg#webfontOkOndcij') format('svg'); + font-weight: normal; + font-style: normal; +} + + */ + body, caption, th, @@ -55,14 +88,14 @@ legend, fieldset { /* The following font family declarations are based on the Microsoft core web * fonts which are common fonts available on most computer systems. The DejaVu - * fonts are commonly available on Linux systems where the MS fonts are less - * common. Tahoma and Helvetica are also widely available. + * and Nimbus Sans fonts are commonly available on Linux systems where the MS + * fonts are less common. Tahoma and Helvetica are also widely available. * * A user's web browser will look at the comma-separated list and will * attempt to use each font in turn until it finds one that is available - * on the user's computer. The final "generic" font (sans-serif or serif) - * hints at what type of font to use if the web browser doesn't find any - * of the fonts in the list. + * on the user's computer. The final "generic" font (sans-serif, serif or + * monospace) hints at what type of font to use if the web browser doesn't + * find any of the fonts in the list. font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif; font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif; @@ -87,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, @@ -135,11 +165,11 @@ dl, pre, table, fieldset { - margin: 1em 0; + margin: 1.5em 0; } blockquote { - margin: 1em 2em; + margin: 1.5em 2em; } /* @@ -155,7 +185,7 @@ ol { .block ul, .item-list ul /* Drupal overrides */ { - margin: 1em 0; + margin: 1.5em 0; padding: 0 0 0 2em; /* LTR */ } @@ -235,9 +265,7 @@ table { /* width: 100%; */ /* Prevent cramped-looking tables */ } -th, -thead th, -tbody th { +th { text-align: left; /* LTR */ padding: 0; border-bottom: none; @@ -286,6 +314,6 @@ form { } fieldset { - margin: 1em 0; + margin: 1.5em 0; padding: 0.5em; } diff --git a/zen-internals/css/ie6-rtl.css b/zen-internals/css/ie6-rtl.css deleted file mode 100644 index 4d6f40c8a90cd49576dcff6741e483e02c4fd5e8..0000000000000000000000000000000000000000 --- a/zen-internals/css/ie6-rtl.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @file - * RTL companion for the ie6.css file. - */ - - -/* - * Layout CSS - */ -#page { - text-align: right; /* 2nd part of IE5/IE6quirks centering hack */ -} diff --git a/zen-internals/css/ie6.css b/zen-internals/css/ie6.css index 7cb36240072552d74520ed62384b30d92a45040c..c8e9624eada754b85c6bb98cb288f11e1cbe6df1 100644 --- a/zen-internals/css/ie6.css +++ b/zen-internals/css/ie6.css @@ -1,6 +1,6 @@ /** * @file - * CSS targeted specifically for Internet Explorer 5 and 6 for Windows. + * CSS targeted specifically for Internet Explorer 6 for Windows. * * Any CSS in this file will override the rules specified in the ie.css file. */ @@ -10,14 +10,6 @@ * Layout CSS */ -body { - text-align: center; /* 1st part of IE5/IE6quirks centering hack */ -} - -#page { - text-align: left; /* LTR */ /* 2nd part of IE5/IE6quirks centering hack */ -} - #main-wrapper { zoom: 1; /* Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 */ } @@ -27,12 +19,12 @@ body { .region-sidebar-first, .region-sidebar-second /* Floating divs */ { display: inline; /* display inline or double your floated margin! [1] */ - overflow: hidden; /* in ie6, overflow auto is broken [2] and so is overflow visible [3] */ + overflow: hidden; /* in IE6, overflow auto is broken [2] and so is overflow visible [3] */ overflow-y: visible; } /* - * Tabs - IE 5 and 6 don't support PNGs with alpha transparency. + * Tabs - IE6 doesn't support PNGs with alpha transparency. */ ul.primary li a, @@ -69,22 +61,16 @@ ul.primary li.active a:hover .tab { } /* - * Messages - IE 5 and 6 don't support PNGs with alpha transparency. + * Wireframes - IE6 doesn't support the outline property. */ - -div.messages, -div.status, -div.warning, -div.error /* Important messages (status, warning, and error) for the user */ { - background-image: url(../images/messages-status-ie6.png); -} - -div.warning /* Medium priority messages */ { - background-image: url(../images/messages-warning-ie6.png); -} - -div.error /* High priority messages. See also the .error declaration below. */ { - background-image: url(../images/messages-error-ie6.png); +.with-wireframes #header .section, +.with-wireframes #content .section, +.with-wireframes #navigation .section, +.with-wireframes .region-sidebar-first .section, +.with-wireframes .region-sidebar-second .section, +.with-wireframes .region-footer, +.with-wireframes .region-bottom { + border: 1px solid #ccc; } diff --git a/zen-internals/css/layout-fixed.css b/zen-internals/css/layout-fixed.css index da16586b8c7ab69ce557f74148c9cf7e70c2f849..633121e46e478f9656f3c83dad3070522808a1d6 100644 --- a/zen-internals/css/layout-fixed.css +++ b/zen-internals/css/layout-fixed.css @@ -46,9 +46,6 @@ body { #header .section { } -#search-box { -} - .region-header { } @@ -106,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. */ } @@ -114,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 { @@ -155,10 +152,7 @@ body { /* * Footer */ -#footer { -} - -#footer .section { +.region-footer { } /* @@ -175,7 +169,7 @@ body { #navigation, .region-sidebar-first, .region-sidebar-second, -#footer, +.region-footer, .region-bottom { overflow: visible; word-wrap: break-word; /* A very nice CSS3 property */ diff --git a/zen-internals/css/layout-liquid.css b/zen-internals/css/layout-liquid.css index dbc08572ce5cfccedf3f4fbe8bbf99425cd17892..b990f6c0edc46e70860ea8f662b84f29c2f0f6fb 100644 --- a/zen-internals/css/layout-liquid.css +++ b/zen-internals/css/layout-liquid.css @@ -39,9 +39,6 @@ body { #header .section { } -#search-box { -} - .region-header { } @@ -96,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. */ } @@ -104,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 { @@ -145,10 +142,7 @@ body { /* * Footer */ -#footer { -} - -#footer .section { +.region-footer { } /* @@ -165,7 +159,7 @@ body { #navigation, .region-sidebar-first, .region-sidebar-second, -#footer, +.region-footer, .region-bottom { overflow: visible; word-wrap: break-word; /* A very nice CSS3 property */ diff --git a/zen-internals/css/navigation.css b/zen-internals/css/navigation.css index 7d7ac8237f4a504cda6ea448a19a495257ca8274..feaf87751a85afe1e121de88c9aef06ad118cee3 100644 --- a/zen-internals/css/navigation.css +++ b/zen-internals/css/navigation.css @@ -41,6 +41,7 @@ li a.active { } #secondary-menu { + float: right; } /* diff --git a/zen-internals/css/pages.css b/zen-internals/css/pages.css index cc270490261fe68503c78c58b191068f1de1c3c5..9e499ff3f640e2faf0b1d60ff83b88237618cf7b 100644 --- a/zen-internals/css/pages.css +++ b/zen-internals/css/pages.css @@ -24,31 +24,18 @@ body { /* * The skip-link link will be completely hidden until a user tabs to the link. - * See http://www.webaim.org/techniques/skipnav/ + * See the element-focusable rule in system.base.css. */ #skip-link a, #skip-link a:visited { - position: absolute; display: block; - left: 0; - top: -500px; - width: 1px; - height: 1px; - overflow: hidden; + width: 100%; + padding: 2px 0 3px 0; text-align: center; background-color: #666; color: #fff; } -#skip-link a:hover, -#skip-link a:active, -#skip-link a:focus { - position: static; - width: 100%; - height: auto; - padding: 2px 0 3px 0; -} - /* * Header */ @@ -69,13 +56,14 @@ body { } #name-and-slogan /* Wrapper for website name and slogan */ { + float: left; } 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, @@ -142,6 +130,12 @@ tr.odd { } div.messages /* Important messages (status, warning, and error) for the user. See also the declarations in messages.css. */ { + margin: 1.5em 0; /* Drupal core uses "6px 0" margin */ +} + +div.messages ul { + margin-top: 0; + margin-bottom: 0; } div.status /* Normal priority messages */ { @@ -168,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 */ { @@ -180,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; } @@ -197,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; } @@ -207,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 */ { @@ -244,10 +238,7 @@ ul.links li { /* * Footer */ -#footer { -} - -#footer .section { +.region-footer { } #footer-message /* Wrapper for the footer message from Drupal's "Site information" diff --git a/zen-internals/css/wireframes.css b/zen-internals/css/wireframes.css index 5c0f50b0ed5540af3318cf7f905f5cd1a6323308..4be67e9af1586beb81c688a02dee5a28849495da 100644 --- a/zen-internals/css/wireframes.css +++ b/zen-internals/css/wireframes.css @@ -11,7 +11,7 @@ .with-wireframes #navigation .section, .with-wireframes .region-sidebar-first .section, .with-wireframes .region-sidebar-second .section, -.with-wireframes #footer .section, -.with-wireframes .region-page-closure { +.with-wireframes .region-footer, +.with-wireframes .region-bottom { outline: 1px solid #ccc; }