diff --git a/README.txt b/README.txt index fd61653bb518d3571746b6c2bc38451cfac20f9e..d3954ae763061d2043ca914d54b48f449a7f7dbe 100644 --- a/README.txt +++ b/README.txt @@ -1,4 +1,8 @@ -Boilerplate was put together by Dan Linn at Metal Toad Media for use internally. It was good enough he felt he should let others use it, too. He agreed with the Basic theme (http://drupal.org/project/basic) developers and thought Zen was getting a little hefty. Using elements from Basic, Boron (Another Metal Toad theme), and the HTML 5 Boilerplate 3.0, this theme was born. +Boilerplate was put together by Dan Linn at Metal Toad Media for use internally. It was +good enough he felt he should let others use it, too. He agreed with the Basic theme +(http://drupal.org/project/basic) developers and thought Zen was getting a little hefty. +Using elements from Basic, Boron (Another Metal Toad theme), and the +HTML 5 Boilerplate 3.0, this theme was born. __________________________________________________________________________________________ @@ -43,14 +47,27 @@ What are the files for ? In /CSS ------- -- default.css => define default classes, browser resets and admin styles - ie6 => used to debug IE6 - ie7 => used to debug IE7 -- layout.css => define the layout of the theme -- print.css => define the way the theme look like when printed -- style.css => contains some default font styles. that's where you can add custom css +- style.css => contains the base css loaded on every page. It is recomended that you use the + included Sass files to edit these styles: http://sass-lang.com/ - tabs.css => styles for the admin tabs (from ZEN) +In /SASS +------- + +- _base.scss => define sass variables and partials to be included in all .scss files +- _custom.scss => define custom styles for page elements +- _defaults.scss => establishes general rules and browser resets +- _layout.scss => define the layout (positioning) of the theme's major elements +- _mixins.scss => define custom sass functions and mixins for use in other .scss files +- _mobile.scss => define the way the theme addapts on mobile devices +- _print.scss => define the way the theme look like when printed +- ie6.scss => used to debug IE6 +- ie7.scss => used to debug IE7 +- style.scss => assembles all partials into a base css to be loaded on every page +- tabs.scss => styles for the admin tabs (from ZEN) + __________________________________________________________________________________________ Changing the Layout @@ -67,7 +84,7 @@ the following : 4. footer This is how the page template is buit in boilerplate, and it works in fluid and fixed layout. -Refers to the notes in layout.css to see how to modify the layout. +Refers to the notes in _layout.scss to see how to modify the layout. __________________________________________________________________________________________ diff --git a/boilerplate.info b/boilerplate.info index a55204a4ba5de625e7909b406fe86cc85a493251..291b4a570dc68a0c90f1d38bbd386095520a74cb 100644 --- a/boilerplate.info +++ b/boilerplate.info @@ -32,12 +32,7 @@ scripts[] = js/libs/modernizr-2.5.0.min.js scripts[] = js/script.js scripts[] = js/plugins.js - -stylesheets[all][] = css/default.css -stylesheets[all][] = css/layout.css stylesheets[all][] = css/style.css -stylesheets[all][] = css/mobile.css -stylesheets[print][] = css/print.css settings[basic_tabs] = 1 settings[basic_breadcrumb_separator] = ยป diff --git a/config.rb b/config.rb new file mode 100644 index 0000000000000000000000000000000000000000..05b6fa2a49da6f182f9a1532cb893574c76c509a --- /dev/null +++ b/config.rb @@ -0,0 +1,43 @@ +# +# This file is only needed for Compass/Sass integration. If you are not using +# Compass, you may safely ignore or delete this file. +# + + +# Change this to :production when ready to deploy the CSS to the live server. +environment = :development +#environment = :production + + +# Location of the theme's resources. +css_dir = "css" +sass_dir = "sass" +extensions_dir = "sass-extensions" +images_dir = "images" +javascripts_dir = "js" + + +# Require any additional compass plugins here. +#require 'ninesixty' +#require 'susy' + + +## +## You probably don't need to edit anything below this. +## + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed +output_style = (environment == :development) ? :expanded : :compressed + +# To enable relative paths to assets via compass helper functions. Since Drupal +# themes can be installed in multiple locations, we don't need to worry about +# the absolute path to the theme from server root. +relative_assets = true + +# Pass options to sass. +# - For development, we turn on the FireSass-compatible debug_info. +# - For production, we force the CSS to be regenerated even though the source +# scss may not have changed, since we want the CSS to be compressed and have +# the debug info removed. +sass_options = (environment == :development) ? {:debug_info => true} : {:always_update => true} diff --git a/css/default.css b/css/default.css deleted file mode 100644 index ab956fc668f803ac262d2ddd202c248532cd245d..0000000000000000000000000000000000000000 --- a/css/default.css +++ /dev/null @@ -1,762 +0,0 @@ -/* About Default Styles - --------------------- - default.css is used to establish general rules, browser reset, or admin user interface styles. - Browser Reset - ------------- - For a more complete reset, go to http://developer.yahoo.com/yui/reset/ -*/ -/* line 8, ../sass/default.scss */ -* { - margin: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - *behavior: url(../js/boxsizing.htc); -} - -/* - * HTML5 Boilerplate - * - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - * - * Detailed information about this CSS: h5bp.com/css - * - * ==|== normalize ========================================================== - */ -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ -/* line 33, ../sass/default.scss */ -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; -} - -/* line 34, ../sass/default.scss */ -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/* line 35, ../sass/default.scss */ -audio:not([controls]) { - display: none; -} - -/* line 36, ../sass/default.scss */ -[hidden] { - display: none; -} - -/* ============================================================================= - Base - ========================================================================== */ -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g - */ -/* line 47, ../sass/default.scss */ -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -/* line 49, ../sass/default.scss */ -html, button, input, select, textarea { - font-family: sans-serif; - color: #222; -} - -/* line 51, ../sass/default.scss */ -body { - margin: 0; - font-size: 1em; - line-height: 1.4; -} - -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate - * Also: hot pink! (or customize the background color to match your design) - */ -/* line 59, ../sass/default.scss */ -::-moz-selection { - background: #fe57a1; - color: #fff; - text-shadow: none; -} - -/* line 60, ../sass/default.scss */ -::selection { - background: #fe57a1; - color: #fff; - text-shadow: none; -} - -/* ============================================================================= - Links - ========================================================================== */ -/* line 67, ../sass/default.scss */ -a { - color: #00e; -} - -/* line 68, ../sass/default.scss */ -a:visited { - color: #551a8b; -} - -/* line 69, ../sass/default.scss */ -a:hover { - color: #06e; -} - -/* line 70, ../sass/default.scss */ -a:focus { - outline: thin dotted; -} - -/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ -/* line 73, ../sass/default.scss */ -a:hover, a:active { - outline: 0; -} - -/* ============================================================================= - Typography - ========================================================================== */ -/* line 80, ../sass/default.scss */ -abbr[title] { - border-bottom: 1px dotted; -} - -/* line 82, ../sass/default.scss */ -b, strong { - font-weight: bold; -} - -/* line 84, ../sass/default.scss */ -blockquote { - margin: 1em 40px; -} - -/* line 86, ../sass/default.scss */ -dfn { - font-style: italic; -} - -/* line 88, ../sass/default.scss */ -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* line 90, ../sass/default.scss */ -ins { - background: #ff9; - color: #000; - text-decoration: none; -} - -/* line 92, ../sass/default.scss */ -mark { - background: #ff0; - color: #000; - font-style: italic; - font-weight: bold; -} - -/* Redeclare monospace font family: h5bp.com/j */ -/* line 95, ../sass/default.scss */ -pre, code, kbd, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/* Improve readability of pre-formatted text in all browsers */ -/* line 98, ../sass/default.scss */ -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/* line 100, ../sass/default.scss */ -q { - quotes: none; -} - -/* line 101, ../sass/default.scss */ -q:before, q:after { - content: ""; - content: none; -} - -/* line 103, ../sass/default.scss */ -small { - font-size: 85%; -} - -/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ -/* line 106, ../sass/default.scss */ -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -/* line 107, ../sass/default.scss */ -sup { - top: -0.5em; -} - -/* line 108, ../sass/default.scss */ -sub { - bottom: -0.25em; -} - -/* ============================================================================= - Lists - ========================================================================== */ -/* line 115, ../sass/default.scss */ -ul, ol { - margin: 1em 0; - padding: 0 0 0 40px; -} - -/* line 116, ../sass/default.scss */ -dd { - margin: 0 0 0 40px; -} - -/* line 117, ../sass/default.scss */ -nav ul, nav ol { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; -} - -/* ============================================================================= - Embedded content - ========================================================================== */ -/* - * 1. Improve image quality when scaled in IE7: h5bp.com/d - * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 - */ -/* line 129, ../sass/default.scss */ -img { - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; -} - -/* - * Correct overflow not hidden in IE9 - */ -/* line 135, ../sass/default.scss */ -svg:not(:root) { - overflow: hidden; -} - -/* ============================================================================= - Figures - ========================================================================== */ -/* line 142, ../sass/default.scss */ -figure { - margin: 0; -} - -/* ============================================================================= - Forms - ========================================================================== */ -/* line 149, ../sass/default.scss */ -form { - margin: 0; -} - -/* line 150, ../sass/default.scss */ -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* Indicate that 'label' will shift focus to the associated form element */ -/* line 153, ../sass/default.scss */ -label { - cursor: pointer; -} - -/* - * 1. Correct color not inheriting in IE6/7/8/9 - * 2. Correct alignment displayed oddly in IE6/7 - */ -/* line 160, ../sass/default.scss */ -legend { - border: 0; - *margin-left: -7px; - padding: 0; - white-space: normal; -} - -/* - * 1. Correct font-size not inheriting in all browsers - * 2. Remove margins in FF3/4 S5 Chrome - * 3. Define consistent vertical alignment display in all browsers - */ -/* line 168, ../sass/default.scss */ -button, input, select, textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} - -/* - * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) - */ -/* line 174, ../sass/default.scss */ -button, input { - line-height: normal; -} - -/* - * 1. Display hand cursor for clickable form elements - * 2. Allow styling of clickable form elements in iOS - * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) - */ -/* line 182, ../sass/default.scss */ -button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; - *overflow: visible; -} - -/* - * Re-set default cursor for disabled elements - */ -/* line 188, ../sass/default.scss */ -button[disabled], input[disabled] { - cursor: default; -} - -/* - * Consistent box sizing and appearance - */ -/* line 194, ../sass/default.scss */ -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; - *width: 13px; - *height: 13px; -} - -/* line 195, ../sass/default.scss */ -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} - -/* line 196, ../sass/default.scss */ -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -/* - * Remove inner padding and border in FF3/4: h5bp.com/l - */ -/* line 202, ../sass/default.scss */ -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Remove default vertical scrollbar in IE6/7/8/9 - * 2. Allow only vertical resizing - */ -/* line 209, ../sass/default.scss */ -textarea { - overflow: auto; - vertical-align: top; - resize: vertical; -} - -/* Colors for form validity */ -/* line 213, ../sass/default.scss */ -input:invalid, textarea:invalid { - background-color: #f0dddd; -} - -/* ============================================================================= - Tables - ========================================================================== */ -/* line 220, ../sass/default.scss */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* line 221, ../sass/default.scss */ -td { - vertical-align: top; -} - -/* ============================================================================= - Chrome Frame Prompt - ========================================================================== */ -/* line 228, ../sass/default.scss */ -.chromeframe { - margin: 0.2em 0; - background: #ccc; - color: black; - padding: 0.2em 0; -} - -/* ==|== non-semantic helper classes ======================================== - Please define your styles before this section. - ========================================================================== */ -/* For image replacement */ -/* line 236, ../sass/default.scss */ -.ir { - display: block; - border: 0; - text-indent: -999em; - overflow: hidden; - background-color: transparent; - background-repeat: no-repeat; - text-align: left; - direction: ltr; - *line-height: 0; -} - -/* line 237, ../sass/default.scss */ -.ir br { - display: none; -} - -/* Hide from both screenreaders and browsers: h5bp.com/u */ -/* line 240, ../sass/default.scss */ -.hidden { - display: none !important; - visibility: hidden; -} - -/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ -/* line 243, ../sass/default.scss */ -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ -/* line 246, ../sass/default.scss */ -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; -} - -/* Hide visually and from screenreaders, but maintain layout */ -/* line 249, ../sass/default.scss */ -.invisible { - visibility: hidden; -} - -/* ==|== print styles ======================================================= - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r - ========================================================================== */ -@media print { - /* line 260, ../sass/default.scss */ - * { - background: transparent !important; - color: black !important; - box-shadow: none !important; - text-shadow: none !important; - filter: none !important; - -ms-filter: none !important; - } - - /* Black prints faster: h5bp.com/s */ - /* line 261, ../sass/default.scss */ - a, a:visited { - text-decoration: underline; - } - - /* line 262, ../sass/default.scss */ - a[href]:after { - content: " (" attr(href) ")"; - } - - /* line 263, ../sass/default.scss */ - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* line 264, ../sass/default.scss */ - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: ""; - } - - /* Don't show links for images, or javascript/internal links */ - /* line 265, ../sass/default.scss */ - pre, blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* line 266, ../sass/default.scss */ - thead { - display: table-header-group; - } - - /* h5bp.com/t */ - /* line 267, ../sass/default.scss */ - tr, img { - page-break-inside: avoid; - } - - /* line 268, ../sass/default.scss */ - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; -} - - /* line 270, ../sass/default.scss */ - p, h2, h3 { - orphans: 3; - widows: 3; - } - - /* line 271, ../sass/default.scss */ - h2, h3 { - page-break-after: avoid; - } -} -/* Clear Floats Without Structural Markup - --------------------------------------- - http://www.positioniseverything.net/easyclearing.html -*/ -/* line 280, ../sass/default.scss */ -.clearfix { - display: inline-block; -} -/* line 282, ../sass/default.scss */ -.clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - font-size: 0; -} - -/* Hides from IE-mac \*/ -/* line 293, ../sass/default.scss */ -* html .clearfix { - height: 1%; -} - -/* line 297, ../sass/default.scss */ -.clearfix { - display: block; -} - -/* End hide from IE-mac */ -/* line 302, ../sass/default.scss */ -#navigation li { - list-style: none; - margin: 5px; - float: left; -} - -/* line 307, ../sass/default.scss */ -#navigation ul { - margin: 0px; - float: left; - padding: 0px; -} - -/* clear classes */ -/* line 314, ../sass/default.scss */ -.clearleft, .clearl, .cleft { - clear: left; -} - -/* line 317, ../sass/default.scss */ -.clearright, .clearr, .cright { - clear: right; -} - -/* line 321, ../sass/default.scss */ -.clear, .clearboth, .clearall { - clear: both; -} - -/* Float classes */ -/* line 325, ../sass/default.scss */ -.floatleft, .fleft, .floatl { - float: left; - margin: 0 10px 5px 0; -} - -/* line 330, ../sass/default.scss */ -.floatright, .fright, .floatr { - float: right; - margin: 0 0 5px 10px; -} - -/* Contain floats: h5bp.com/q */ -/* line 336, ../sass/default.scss */ -.clearfix:before, .clearfix:after { - content: ""; - display: table; -} - -/* line 337, ../sass/default.scss */ -.clearfix:after { - clear: both; -} - -/* line 338, ../sass/default.scss */ -.clearfix { - *zoom: 1; -} - -/* "Skip to Main Content" link - --------------------------- - This link useful for both visually impaired people and those with mobility impairments - who cannot use a mouse. http://www.webaim.org/techniques/css/invisiblecontent/ -*/ -/* line 347, ../sass/default.scss */ -#skip a:link, #skip a:hover, #skip a:visited { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} -/* line 355, ../sass/default.scss */ -#skip a:active, #skip a:focus { - position: static; - width: auto; - height: auto; -} - -/* bug fix with views 2 edit links.*/ -/* line 362, ../sass/default.scss */ -div.view div.views-admin-links { - width: auto; -} - -/* Rollover edit links for blocks. */ -/* line 366, ../sass/default.scss */ -div.block { - position: relative; -} -/* line 368, ../sass/default.scss */ -div.block .edit { - display: none; - position: absolute; - right: -20px; - top: -5px; - z-index: 40; - padding: 3px 8px 0; - font-size: 10px; - line-height: 16px; - background-color: white; - border: 1px solid #cccccc; - /*let's get fancy!*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -moz-box-shadow: 0 1px 3px #888888; - -webkit-box-shadow: -1px 1px 2px #666666; -} -/* line 384, ../sass/default.scss */ -div.block .edit a { - display: block; - border: 0; - padding: 0; - margin: 0; -} -/* line 391, ../sass/default.scss */ -div.block:hover .edit { - display: block; -} - -/* Wireframe styles. */ -/* line 410, ../sass/default.scss */ -.wireframe-mode #header, -.wireframe-mode #content-top, -.wireframe-mode #content-top > *, -.wireframe-mode #content-header, -.wireframe-mode #content-header > *, -.wireframe-mode #content-area, -.wireframe-mode #content-area > *, -.wireframe-mode #content-bottom, -.wireframe-mode #content-bottom > *, -.wireframe-mode #primary, -.wireframe-mode #secondary, -.wireframe-mode #sidebar-left-inner, -.wireframe-mode #sidebar-right-inner, -.wireframe-mode .block { - padding: 2px; - border: 1px solid #bbbbbb; -} -/* line 414, ../sass/default.scss */ -.wireframe-mode .node { - border-bottom: 1px solid #bbbbbb; - margin-bottom: 10px; -} -/* line 418, ../sass/default.scss */ -.wireframe-mode .block { - margin-bottom: 3px; -} -/* line 424, ../sass/default.scss */ -.wireframe-mode #content-top, -.wireframe-mode #content-header, -.wireframe-mode #content-area, -.wireframe-mode #content-bottom { - margin: 0 3px 3px; -} -/* line 427, ../sass/default.scss */ -.wireframe-mode #footer { - margin-top: 3px; - padding: 2px; - border: 1px solid #cccccc; -} -/* line 434, ../sass/default.scss */ -.wireframe-mode .with-navigation #content, -.wireframe-mode .with-navigation .sidebar { - margin-top: 50px; -} -/* line 438, ../sass/default.scss */ -.wireframe-mode #navigation { - height: 50px; -} diff --git a/css/ie6.css b/css/ie6.css deleted file mode 100644 index c7ebb8c45e81a1476b6ee691748e7b92e5a93c1d..0000000000000000000000000000000000000000 --- a/css/ie6.css +++ /dev/null @@ -1,68 +0,0 @@ -/* Yes, we all hate IE6. - -/* Fix the admin page in ie6. */ -/* line 6, ../sass/ie6.scss */ -div.admin .left, -div.admin .right { - width: 46%; -} - -/* Tabs CSS - IE 5 and 6 don't support PNGs with alpha transparency. */ -/* line 13, ../sass/ie6.scss */ -ul.primary, -ul.secondary { - width: 100%; - width: auto; -} -/* line 17, ../sass/ie6.scss */ -ul.primary li a, -ul.primary li a .tab, -ul.secondary li a, -ul.secondary li a .tab { - display: inline; - display: inline-block; -} - -/* line 24, ../sass/ie6.scss */ -ul.primary li a { - background: url(../images/tabs/tab-left-ie6.png) no-repeat left -38px; -} -/* line 26, ../sass/ie6.scss */ -ul.primary li a .tab { - background: url(../images/tabs/tab-right-ie6.png) no-repeat right -38px; -} -/* line 29, ../sass/ie6.scss */ -ul.primary li a:hover { - cursor: pointer; - color: #555555; - text-decoration: none; - background-position: left -76px; -} -/* line 34, ../sass/ie6.scss */ -ul.primary li a:hover .tab { - background-position: right -76px; -} -/* line 40, ../sass/ie6.scss */ -ul.primary li .active a, ul.primary li .active a:hover { - background: url(../images/tabs/tab-left-ie6.png) no-repeat left 0; -} -/* line 42, ../sass/ie6.scss */ -ul.primary li .active a .tab, ul.primary li .active a:hover .tab { - background: url(../images/tabs/tab-right-ie6.png) no-repeat right 0; -} - -/* line 53, ../sass/ie6.scss */ -ul.secondary li a:hover { - cursor: pointer; - color: #555555; - text-decoration: none; -} - -/* Drupal admin tables */ -/* line 66, ../sass/ie6.scss */ -#content tr.even th, -#content tr.even td, -#content tr.odd th, -#content tr.odd td { - border-bottom: 1px solid #cccccc; -} diff --git a/css/ie7.css b/css/ie7.css deleted file mode 100644 index 0675d49678e8aaabde8a8d4060c0f9a8fb22cc44..0000000000000000000000000000000000000000 --- a/css/ie7.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Yes, we all hate IE7 too. */ -/* Drupal admin tables. */ -/* line 7, ../sass/ie7.scss */ -#content tr.even th, -#content tr.even td, -#content tr.odd th, -#content tr.odd td { - border-bottom: 1px solid #cccccc; -} - -/* Minor fix for primary and secondary tabs in IE */ -/* line 16, ../sass/ie7.scss */ -ul .primary li a:hover, -ul .secondary li a:hover { - cursor: pointer; - color: #555555; - text-decoration: none; -} diff --git a/css/layout.css b/css/layout.css deleted file mode 100644 index bb5c76dac4a0bac6e2d6136f8c187f90fe31355b..0000000000000000000000000000000000000000 --- a/css/layout.css +++ /dev/null @@ -1,137 +0,0 @@ -/* -@media screen and (max-width : 480px) { - - $page_width:100%; - $second_sidebar_width:auto; - $first_sidebar_width:auto; - $navigation_height:auto; -} -*/ -/* Layout - ------ - Using a negative margin technique, adapted from ZEN. The page is loaded by this order: - - 1. Header - 2. Content - 3. Navigation menus - 4. Sidebar Left - 5. Sideabr Right - -/* remove 'auto' and the width to switch to a fluid width */ -/* line 15, ../sass/layout.scss */ -#page { - width: 960px; - margin: 0 auto; -} - -/* page height fills the screen and footer at the bottom */ -/* line 20, ../sass/layout.scss */ -body, #page { - height: 100%; -} - -/* line 24, ../sass/layout.scss */ -#main { - padding-bottom: 80px; - position: relative; -} - -/* line 28, ../sass/layout.scss */ -#footer { - position: absolute; - bottom: 0px; - height: 80px; - width: 960px; -} - -/* Layout rules. (Disclaimer: do not change if you're not sure you know what you're doing.) */ -/* line 35, ../sass/layout.scss */ -#content { - float: left; - width: 100%; - margin-right: -100%; - padding: 0; -} - -/* line 41, ../sass/layout.scss */ -.sidebar { - float: left; -} - -/* line 44, ../sass/layout.scss */ -#sidebar-second { - float: right; -} - -/* line 47, ../sass/layout.scss */ -#footer { - float: none; - clear: both; -} - -/* Layout Helpers*/ -/* line 56, ../sass/layout.scss */ -#header, -#footer, -.mission, -.breadcrumb, -.node { - clear: both; -} - -/* line 65, ../sass/layout.scss */ -.two-sidebars .center, -.sidebar-first .center { - margin-left: 19.792%; -} - -/* Left value & negative left value. */ -/* line 70, ../sass/layout.scss */ -#sidebar-first { - width: 19.792%; - margin-right: -190px; -} - -/* line 77, ../sass/layout.scss */ -.two-sidebars .center, -.sidebar-second .center { - margin-right: 200px; -} - -/* Right value. */ -/* line 83, ../sass/layout.scss */ -#sidebar-second { - width: 200px; -} - -/* Columns Inner - ------------- - You can change the padding inside the columns without changing the - width of them by just usinbg the INNER div of each column */ -/* line 91, ../sass/layout.scss */ -.inner { - padding: 0; -} - -/* Navigation styles - ----------------- - The navigation is loaded after the content, so we need to make space - for it, equal to its height, so if you change the height of the navigation, - remember to adapt the margin top of the content and sidebars. - */ -/* line 101, ../sass/layout.scss */ -#navigation { - float: left; - margin-left: 0; - margin-right: -100%; - padding: 0; - width: 100%; - height: 40px; -} - -/* Navigation height. */ -/* line 113, ../sass/layout.scss */ -.with-navigation #content, -.with-navigation .sidebar { - margin-top: 40px; -} diff --git a/css/print.css b/css/print.css deleted file mode 100644 index ab5b517249c2310cfe9b09f63ea0494d82d9628a..0000000000000000000000000000000000000000 --- a/css/print.css +++ /dev/null @@ -1,45 +0,0 @@ -/* Use this stylesheet for print styles only. */ -/* line 2, ../sass/print.scss */ -* { - background-color: transparent; -} - -/* line 13, ../sass/print.scss */ -.sidebar, -#navigation, -#header-region, -#search-theme-form, -#footer, -.breadcrumb, -.tabs, -.feed-icon, -.links { - display: none; -} - -/* line 17, ../sass/print.scss */ -#page { - width: 100%; -} - -/* line 24, ../sass/print.scss */ -#content, -#content #content-inner, -.content, -.title { - margin: 20px 0; - width: auto; -} - -/* line 32, ../sass/print.scss */ -a:hover, a:active, a:link, a:visited { - color: black; -} - -/* CSS2 selector to add visible href after links. */ -/* line 39, ../sass/print.scss */ -#content a:link:after, #content a:visited:after { - content: " (" attr(href) ") "; - font-size: 0.8em; - font-weight: normal; -} diff --git a/css/style.css b/css/style.css index 6321d0d7b243209b454eedc677043d366953c715..4e75b8026b181f6484037b2d63ad646492b7d41c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,132 +1,99 @@ -/* -@media screen and (max-width : 480px) { - - $page_width:100%; - $second_sidebar_width:auto; - $first_sidebar_width:auto; - $navigation_height:auto; -} -*/ -/* line 1, ../sass/_custom.scss */ -#footer p { - margin: 0px; -} - -/* Region Colors. delete when starting a new theme.*/ -/* line 7, ../sass/style.scss */ -#header { - background: #333333; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); - background-image: -webkit-linear-gradient(#aeaeae, #ffffff); - background-image: -moz-linear-gradient(#aeaeae, #ffffff); - background-image: -o-linear-gradient(#aeaeae, #ffffff); - background-image: -ms-linear-gradient(#aeaeae, #ffffff); - background-image: linear-gradient(#aeaeae, #ffffff); +/* line 14, ../sass/_defaults.scss */ +* { + margin: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + *behavior: url(../js/boxsizing.htc); } -/* line 11, ../sass/style.scss */ -#footer { - background: #efefef; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aeaeae)); - background-image: -webkit-linear-gradient(#ffffff, #aeaeae); - background-image: -moz-linear-gradient(#ffffff, #aeaeae); - background-image: -o-linear-gradient(#ffffff, #aeaeae); - background-image: -ms-linear-gradient(#ffffff, #aeaeae); - background-image: linear-gradient(#ffffff, #aeaeae); +/* line 114, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { + display: block; } -/* line 16, ../sass/style.scss */ -#sidebar-first { - background: #e7edff; - background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); - background-image: -webkit-linear-gradient(left, #aeaeae, #ffffff); - background-image: -moz-linear-gradient(left, #aeaeae, #ffffff); - background-image: -o-linear-gradient(left, #aeaeae, #ffffff); - background-image: -ms-linear-gradient(left, #aeaeae, #ffffff); - background-image: linear-gradient(left, #aeaeae, #ffffff); +/* line 25, ../sass/_defaults.scss */ +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; } -/* line 20, ../sass/style.scss */ -#sidebar-second { - background: #ffd075; - background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #aeaeae)); - background-image: -webkit-linear-gradient(left, #ffffff, #aeaeae); - background-image: -moz-linear-gradient(left, #ffffff, #aeaeae); - background-image: -o-linear-gradient(left, #ffffff, #aeaeae); - background-image: -ms-linear-gradient(left, #ffffff, #aeaeae); - background-image: linear-gradient(left, #ffffff, #aeaeae); +/* line 31, ../sass/_defaults.scss */ +audio:not([controls]) { + display: none; } -/* line 25, ../sass/style.scss */ -#navigation { - background: #feffa5; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); - background-image: -webkit-linear-gradient(#aeaeae, #ffffff); - background-image: -moz-linear-gradient(#aeaeae, #ffffff); - background-image: -o-linear-gradient(#aeaeae, #ffffff); - background-image: -ms-linear-gradient(#aeaeae, #ffffff); - background-image: linear-gradient(#aeaeae, #ffffff); +/* line 35, ../sass/_defaults.scss */ +[hidden] { + display: none; } -/* line 29, ../sass/style.scss */ -#main { - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 300, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); - background-image: -webkit-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); - background-image: -moz-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); - background-image: -o-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); - background-image: -ms-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); - background-image: radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); +/* line 42, ../sass/_defaults.scss */ +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } -/* line 32, ../sass/style.scss */ -body { - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 700, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); - background-image: -webkit-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); - background-image: -moz-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); - background-image: -o-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); - background-image: -ms-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); - background-image: radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); +/* line 48, ../sass/_defaults.scss */ +html, button, input, select, textarea { + font-family: "Helvetica Neue", helvetica, Arial, sans-serif; + color: #222222; } -/* Font styles. */ -/* line 38, ../sass/style.scss */ +/* line 53, ../sass/_defaults.scss */ body { margin: 0; - /* Setting up font size, leading and font family - http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography */ font: 13px/1.5em "Helvetica Neue", helvetica, Arial, sans-serif; letter-spacing: 0.03em; } -/* Links */ -/* line 49, ../sass/style.scss */ -a:link, a:visited { - color: blue; - text-decoration: none; +/* line 66, ../sass/_defaults.scss */ +::-moz-selection { + background: #fe57a1; + color: white; + text-shadow: none; +} + +/* line 71, ../sass/_defaults.scss */ +::selection { + background: #fe57a1; + color: white; + text-shadow: none; } -/* line 55, ../sass/style.scss */ +/* line 80, ../sass/_defaults.scss */ +a { + color: blue; +} +/* line 84, ../sass/_defaults.scss */ +a:visited { + color: blue; +} +/* line 87, ../sass/_defaults.scss */ +a:hover { + color: red; +} +/* line 90, ../sass/_defaults.scss */ +a:focus { + color: red; + outline: thin dotted; +} +/* line 94, ../sass/_defaults.scss */ a:hover, a:active { color: red; text-decoration: underline; + outline: 0; } -/* Titles. */ -/* line 62, ../sass/style.scss */ -#site-name { - font-size: 2.2em; - line-height: 1.3em; - font-weight: 300; - padding: 0 0 0.5em; - margin: 0; -} - -/* line 69, ../sass/style.scss */ +/* line 104, ../sass/_defaults.scss */ h1, h2, h3, h4, h5, h6 { line-height: 1.3em; + color: black; } -/* line 73, ../sass/style.scss */ +/* line 109, ../sass/_defaults.scss */ h1 { font-size: 2.2em; font-weight: 300; @@ -134,77 +101,102 @@ h1 { margin: 0; } -/* line 80, ../sass/style.scss */ +/* line 116, ../sass/_defaults.scss */ h2 { font-size: 1.8em; font-weight: 300; margin-bottom: 0.75em; } -/* line 86, ../sass/style.scss */ +/* line 122, ../sass/_defaults.scss */ h3 { font-size: 1.4em; margin-bottom: 1em; } -/* line 91, ../sass/style.scss */ +/* line 127, ../sass/_defaults.scss */ h4 { font-size: 1.2em; margin-bottom: 0.8em; } -/* line 96, ../sass/style.scss */ +/* line 132, ../sass/_defaults.scss */ h5 { font-size: 1.1em; font-weight: 600; margin-bottom: 0; } -/* line 101, ../sass/style.scss */ +/* line 138, ../sass/_defaults.scss */ h6 { font-size: 1em; font-weight: bold; } -/* Paragraph styles. */ -/* line 106, ../sass/style.scss */ +/* line 143, ../sass/_defaults.scss */ p { margin: 0 0 1em 0; } -/* List styles. */ -/* line 111, ../sass/style.scss */ -ul, ol { - margin-left: 0; - padding-left: 2em; +/* line 147, ../sass/_defaults.scss */ +abbr { + border-bottom: 1px dotted #666; + cursor: help; + white-space: nowrap; } -/* Table styles.*/ -/* line 117, ../sass/style.scss */ -table { - width: 99%; +/* line 153, ../sass/_defaults.scss */ +b, strong { + font-weight: bold; } -/* line 123, ../sass/style.scss */ -tr.even td, -tr.odd td { - padding: 10px 5px; +/* line 157, ../sass/_defaults.scss */ +blockquote { + margin: 1em 40px; } -/* line 128, ../sass/style.scss */ -tr.odd { - background-color: white; +/* line 161, ../sass/_defaults.scss */ +dfn { + font-style: italic; +} + +/* line 165, ../sass/_defaults.scss */ +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } -/* Code. */ -/* line 133, ../sass/style.scss */ -pre, code, tt { - font: 1em "andale mono", "lucida console", monospace; - line-height: 1.5; +/* line 174, ../sass/_defaults.scss */ +ins { + background: #ff9; + color: #000; + text-decoration: none; } -/* line 138, ../sass/style.scss */ +/* line 180, ../sass/_defaults.scss */ +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} + +/* line 187, ../sass/_defaults.scss */ +pre, code, kbd, samp, tt { + font-family: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; + font-size: 1em; + line-height: 1.5em; +} + +/* line 193, ../sass/_defaults.scss */ pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; background-color: #efefef; display: block; padding: 5px; @@ -212,58 +204,552 @@ pre { border: 1px solid #aaa; } -/* List styles. */ -/* line 146, ../sass/style.scss */ +/* line 204, ../sass/_defaults.scss */ +q { + quotes: none; +} + +/* line 208, ../sass/_defaults.scss */ +q:before, q:after { + content: ""; + content: none; +} + +/* line 213, ../sass/_defaults.scss */ +small { + font-size: 85%; +} + +/* line 217, ../sass/_defaults.scss */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +/* line 224, ../sass/_defaults.scss */ +sup { + top: -0.5em; +} + +/* line 228, ../sass/_defaults.scss */ +sub { + bottom: -0.25em; +} + +/* line 235, ../sass/_defaults.scss */ +ul, ol { + margin: 1em 0; + padding: 0 0 0 2em; +} + +/* line 240, ../sass/_defaults.scss */ +dd { + margin: 0 0 0 2em; +} + +/* line 244, ../sass/_defaults.scss */ +nav ul, nav ol { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} + +/* line 251, ../sass/_defaults.scss */ ul { list-style-type: disc; } -/* line 148, ../sass/style.scss */ +/* line 253, ../sass/_defaults.scss */ ul ul { list-style-type: circle; } -/* line 150, ../sass/style.scss */ +/* line 255, ../sass/_defaults.scss */ ul ul ul { list-style-type: square; } -/* line 152, ../sass/style.scss */ +/* line 257, ../sass/_defaults.scss */ ul ul ul ul { list-style-type: circle; } -/* line 158, ../sass/style.scss */ +/* line 264, ../sass/_defaults.scss */ ol { list-style-type: decimal; } -/* line 160, ../sass/style.scss */ +/* line 266, ../sass/_defaults.scss */ ol ol { list-style-type: lower-alpha; } -/* line 162, ../sass/style.scss */ +/* line 268, ../sass/_defaults.scss */ ol ol ol { list-style-type: decimal; } -/* Abbreviation. */ -/* line 168, ../sass/style.scss */ -abbr { - border-bottom: 1px dotted #666; - cursor: help; - white-space: nowrap; +/* line 277, ../sass/_defaults.scss */ +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} + +/* line 283, ../sass/_defaults.scss */ +svg:not(:root) { + overflow: hidden; +} + +/* line 290, ../sass/_defaults.scss */ +figure { + margin: 0; +} + +/* line 297, ../sass/_defaults.scss */ +form { + margin: 0; +} + +/* line 301, ../sass/_defaults.scss */ +fieldset { + margin: 0; + padding: 0; + border: 0; +} + +/* line 305, ../sass/_defaults.scss */ +label { + cursor: pointer; +} + +/* line 309, ../sass/_defaults.scss */ +legend { + border: 0; + *margin-left: -7px; + padding: 0; + white-space: normal; +} + +/* line 316, ../sass/_defaults.scss */ +button, input, select, textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} + +/* line 323, ../sass/_defaults.scss */ +button, input { + line-height: normal; +} + +/* line 331, ../sass/_defaults.scss */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; +} + +/* line 337, ../sass/_defaults.scss */ +button[disabled], input[disabled] { + cursor: default; +} + +/* line 342, ../sass/_defaults.scss */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} + +/* line 349, ../sass/_defaults.scss */ +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +/* line 357, ../sass/_defaults.scss */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* line 362, ../sass/_defaults.scss */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* line 367, ../sass/_defaults.scss */ +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} + +/* line 377, ../sass/_defaults.scss */ +input:invalid, +textarea:invalid { + background-color: #f0dddd; +} + +/* line 384, ../sass/_defaults.scss */ +table { + border-collapse: collapse; + border-spacing: 0; + width: 99%; +} + +/* line 390, ../sass/_defaults.scss */ +td { + vertical-align: top; +} + +/* line 396, ../sass/_defaults.scss */ +tr.even td, +tr.odd td { + padding: 10px 5px; +} + +/* line 401, ../sass/_defaults.scss */ +tr.odd { + background-color: white; +} + +/* line 408, ../sass/_defaults.scss */ +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; +} + +/* line 432, ../sass/_defaults.scss */ +.wireframe-mode #header, +.wireframe-mode #content-top, +.wireframe-mode #content-top > *, +.wireframe-mode #content-header, +.wireframe-mode #content-header > *, +.wireframe-mode #content-area, +.wireframe-mode #content-area > *, +.wireframe-mode #content-bottom, +.wireframe-mode #content-bottom > *, +.wireframe-mode #primary, +.wireframe-mode #secondary, +.wireframe-mode #sidebar-left-inner, +.wireframe-mode #sidebar-right-inner, +.wireframe-mode .block { + padding: 2px; + border: 1px solid #bbbbbb; +} +/* line 436, ../sass/_defaults.scss */ +.wireframe-mode .node { + border-bottom: 1px solid #bbbbbb; + margin-bottom: 10px; +} +/* line 440, ../sass/_defaults.scss */ +.wireframe-mode .block { + margin-bottom: 3px; +} +/* line 446, ../sass/_defaults.scss */ +.wireframe-mode #content-top, +.wireframe-mode #content-header, +.wireframe-mode #content-area, +.wireframe-mode #content-bottom { + margin: 0 3px 3px; +} +/* line 449, ../sass/_defaults.scss */ +.wireframe-mode #footer { + margin-top: 3px; + padding: 2px; + border: 1px solid #cccccc; +} +/* line 456, ../sass/_defaults.scss */ +.wireframe-mode .with-navigation #content, +.wireframe-mode .with-navigation .sidebar { + margin-top: 50px; +} +/* line 460, ../sass/_defaults.scss */ +.wireframe-mode #navigation { + height: 50px; +} + +/* line 20, ../sass/_layout.scss */ +#page { + width: 960px; + margin: 0 auto; +} + +/* line 25, ../sass/_layout.scss */ +body, #page { + height: 100%; +} + +/* line 29, ../sass/_layout.scss */ +#main { + padding-bottom: 80px; + position: relative; +} + +/* line 34, ../sass/_layout.scss */ +#skip a { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; +} +/* line 50, ../sass/_mixins.scss */ +#skip a:active, #skip a:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static !important; + width: auto; +} + +/* line 42, ../sass/_layout.scss */ +#content { + float: left; + width: 100%; + margin-right: -100%; + padding: 0; +} + +/* line 49, ../sass/_layout.scss */ +.sidebar { + float: left; +} + +/* line 53, ../sass/_layout.scss */ +#sidebar-second { + float: right; +} + +/* line 57, ../sass/_layout.scss */ +#footer { + position: absolute; + bottom: 0px; + height: 80px; + width: 960px; + float: none; + clear: both; +} + +/* line 73, ../sass/_layout.scss */ +#header, +#footer, +.mission, +.breadcrumb, +.node { + clear: both; +} + +/* line 82, ../sass/_layout.scss */ +.two-sidebars .center, +.sidebar-first .center { + margin-left: 19.792%; +} + +/* line 87, ../sass/_layout.scss */ +#sidebar-first { + width: 19.792%; + margin-right: -190px; +} + +/* line 94, ../sass/_layout.scss */ +.two-sidebars .center, +.sidebar-second .center { + margin-right: 200px; +} + +/* line 99, ../sass/_layout.scss */ +#sidebar-second { + width: 200px; +} + +/* line 109, ../sass/_layout.scss */ +.inner { + padding: 0; +} + +/* line 120, ../sass/_layout.scss */ +#navigation { + float: left; + margin-left: 0; + margin-right: -100%; + padding: 0; + width: 100%; + height: 40px; +} + +/* line 132, ../sass/_layout.scss */ +.with-navigation #content, +.with-navigation .sidebar { + margin-top: 40px; +} + +/* line 13, ../sass/_custom.scss */ +body { + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 700, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); + background-image: -webkit-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); + background-image: -moz-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); + background-image: -o-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); + background-image: -ms-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); + background-image: radial-gradient(50% 50%, #aeaeae 0px, #ffffff 700px); +} + +/* line 17, ../sass/_custom.scss */ +#header { + background: #333333; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); + background-image: -webkit-linear-gradient(#aeaeae, #ffffff); + background-image: -moz-linear-gradient(#aeaeae, #ffffff); + background-image: -o-linear-gradient(#aeaeae, #ffffff); + background-image: -ms-linear-gradient(#aeaeae, #ffffff); + background-image: linear-gradient(#aeaeae, #ffffff); +} + +/* line 22, ../sass/_custom.scss */ +#main { + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 300, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); + background-image: -webkit-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); + background-image: -moz-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); + background-image: -o-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); + background-image: -ms-radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); + background-image: radial-gradient(50% 50%, #aeaeae 0px, #ffffff 300px); +} + +/* line 26, ../sass/_custom.scss */ +#sidebar-first { + background: #e7edff; + background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); + background-image: -webkit-linear-gradient(left, #aeaeae, #ffffff); + background-image: -moz-linear-gradient(left, #aeaeae, #ffffff); + background-image: -o-linear-gradient(left, #aeaeae, #ffffff); + background-image: -ms-linear-gradient(left, #aeaeae, #ffffff); + background-image: linear-gradient(left, #aeaeae, #ffffff); +} + +/* line 31, ../sass/_custom.scss */ +#sidebar-second { + background: #ffd075; + background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #aeaeae)); + background-image: -webkit-linear-gradient(left, #ffffff, #aeaeae); + background-image: -moz-linear-gradient(left, #ffffff, #aeaeae); + background-image: -o-linear-gradient(left, #ffffff, #aeaeae); + background-image: -ms-linear-gradient(left, #ffffff, #aeaeae); + background-image: linear-gradient(left, #ffffff, #aeaeae); +} + +/* line 36, ../sass/_custom.scss */ +#navigation { + background: #feffa5; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeaeae), color-stop(100%, #ffffff)); + background-image: -webkit-linear-gradient(#aeaeae, #ffffff); + background-image: -moz-linear-gradient(#aeaeae, #ffffff); + background-image: -o-linear-gradient(#aeaeae, #ffffff); + background-image: -ms-linear-gradient(#aeaeae, #ffffff); + background-image: linear-gradient(#aeaeae, #ffffff); +} +/* line 39, ../sass/_custom.scss */ +#navigation ul { + margin: 0px; + float: left; + padding: 0px; +} +/* line 44, ../sass/_custom.scss */ +#navigation li { + list-style: none; + margin: 5px; + float: left; +} + +/* line 51, ../sass/_custom.scss */ +#site-name { + font-size: 2.2em; + line-height: 1.3em; + font-weight: 300; + padding: 0 0 0.5em; + margin: 0; +} + +/* line 59, ../sass/_custom.scss */ +#footer { + background: #efefef; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aeaeae)); + background-image: -webkit-linear-gradient(#ffffff, #aeaeae); + background-image: -moz-linear-gradient(#ffffff, #aeaeae); + background-image: -o-linear-gradient(#ffffff, #aeaeae); + background-image: -ms-linear-gradient(#ffffff, #aeaeae); + background-image: linear-gradient(#ffffff, #aeaeae); +} +/* line 62, ../sass/_custom.scss */ +#footer p { + margin: 0px; +} + +/* line 68, ../sass/_custom.scss */ +div.view div.views-admin-links { + width: auto; +} + +/* line 73, ../sass/_custom.scss */ +div.block { + position: relative; +} +/* line 75, ../sass/_custom.scss */ +div.block .edit { + display: none; + position: absolute; + right: -20px; + top: -5px; + z-index: 40; + padding: 3px 8px 0; + font-size: 10px; + line-height: 16px; + background-color: white; + border: 1px solid #cccccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -moz-box-shadow: 0 1px 3px #888888; + -webkit-box-shadow: -1px 1px 2px #666666; +} +/* line 91, ../sass/_custom.scss */ +div.block .edit a { + display: block; + border: 0; + padding: 0; + margin: 0; +} +/* line 98, ../sass/_custom.scss */ +div.block:hover .edit { + display: block; } -/* UI improvments. */ -/* line 174, ../sass/style.scss */ +/* line 106, ../sass/_custom.scss */ #edit-title { font-size: 24px; width: 99%; } -/* line 179, ../sass/style.scss */ +/* line 111, ../sass/_custom.scss */ #system-themes-form img { width: 100px; } -/* line 183, ../sass/style.scss */ +/* line 115, ../sass/_custom.scss */ .form-item .description { font-style: italic; line-height: 1.2em; @@ -272,13 +758,12 @@ abbr { color: #777; } -/* line 191, ../sass/style.scss */ +/* line 123, ../sass/_custom.scss */ #edit-delete { color: #c00; } -/* Console, style from slate theme. */ -/* line 196, ../sass/style.scss */ +/* line 127, ../sass/_custom.scss */ div.messages { padding: 9px; margin: 1em 0; @@ -287,23 +772,446 @@ div.messages { border: 1px solid #ace; } -/* line 203, ../sass/style.scss */ +/* line 135, ../sass/_custom.scss */ div.warning { color: #840; background: #fe6; border-color: #ed5; } -/* line 209, ../sass/style.scss */ +/* line 141, ../sass/_custom.scss */ div.error { color: white; background: #e63; border-color: #d52; } -/* line 215, ../sass/style.scss */ +/* line 147, ../sass/_custom.scss */ div.status { color: #360; background: #cf8; border-color: #bbee77; } + +/* line 157, ../sass/_custom.scss */ +.ir { + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; +} +/* line 167, ../sass/_custom.scss */ +.ir br { + display: none; +} + +/* line 172, ../sass/_custom.scss */ +.hidden { + display: none !important; + visibility: hidden; +} + +/* line 177, ../sass/_custom.scss */ +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; +} +/* line 179, ../sass/_custom.scss */ +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static !important; + width: auto; +} + +/* line 184, ../sass/_custom.scss */ +.invisible { + visibility: hidden; +} + +/* line 188, ../sass/_custom.scss */ +.clearfix { + *zoom: 1; +} +/* line 57, ../sass/_mixins.scss */ +.clearfix:before { + content: ""; + display: table; +} +/* line 38, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +/* line 193, ../sass/_custom.scss */ +.clearleft, .clearl, .cleft { + clear: left; +} + +/* line 196, ../sass/_custom.scss */ +.clearright, .clearr, .cright { + clear: right; +} + +/* line 200, ../sass/_custom.scss */ +.clear, .clearboth, .clearall { + clear: both; +} + +/* line 205, ../sass/_custom.scss */ +.floatleft, .fleft, .floatl { + display: inline; + float: left; + margin: 0 10px 5px 0; +} + +/* line 209, ../sass/_custom.scss */ +.floatright, .fright, .floatr { + display: inline; + float: right; + margin: 0 0 5px 10px; +} + +@media screen and (max-width : 480px) { + /* line 13, ../sass/_mobile.scss */ + html, body { + margin: 0; + padding: 0; + border: 0; + padding: 0px; + } + + /* line 20, ../sass/_mobile.scss */ + #page { + width: 100%; + margin: 40px 0px 0px 0px; + } + + /* line 25, ../sass/_mobile.scss */ + .sidebar, #sidebar-first, #sidebar-second { + float: none; + clear: both; + width: auto; + margin: 0px; + padding: 5px; + } + + /* line 33, ../sass/_mobile.scss */ + .with-navigation #content { + margin-top: 0px; + } + + /* line 37, ../sass/_mobile.scss */ + #navigation { + clear: both; + padding: 5px; + position: absolute; + top: 0px; + } + + /* line 44, ../sass/_mobile.scss */ + #footer { + position: relative; + width: 100%; + } + + /* line 49, ../sass/_mobile.scss */ + #main { + padding-bottom: 0px; + position: static; + } + + /* line 54, ../sass/_mobile.scss */ + #content #content-inner.center { + margin: 0px; + padding: 5px; + } + + /* line 59, ../sass/_mobile.scss */ + body { + font-family: Arial, sans-serif; + line-height: 1.5; + font-size: 16px; + background: #fff; + color: #000; + word-wrap: break-word; + -webkit-text-size-adjust: none; + } + + /* line 69, ../sass/_mobile.scss */ + h1, h2, h3, h4, h5, h6 { + font-weight: normal; + } + + /* line 73, ../sass/_mobile.scss */ + p img { + float: left; + margin: 0 10px 5px 0; + padding: 0; + } + + /* line 79, ../sass/_mobile.scss */ + img { + border: 0; + max-width: 100%; + } + + /* line 84, ../sass/_mobile.scss */ + table { + width: auto; + border-collapse: collapse; + border-spacing: 0; + } +} +@media screen and (max-width: 800px) { + /* line 95, ../sass/_mobile.scss */ + html, body { + margin: 0; + padding: 0; + border: 0; + padding: 0px; + } + + /* line 101, ../sass/_mobile.scss */ + #page { + width: 100%; + } + + /* line 104, ../sass/_mobile.scss */ + #sidebar-second { + float: none; + clear: both; + width: auto; + margin: 0px; + padding: 5px; + } + + /* + #navigation { + clear:both; + height:auto; + padding:5px; + } + */ + /* line 118, ../sass/_mobile.scss */ + #footer { + position: relative; + width: 100%; + } + + /* line 122, ../sass/_mobile.scss */ + #main { + padding-bottom: 0px; + } + + /* line 125, ../sass/_mobile.scss */ + body { + background: #fff; + word-wrap: break-word; + -webkit-text-size-adjust: none; + } + + /* line 130, ../sass/_mobile.scss */ + p img { + float: left; + margin: 0 10px 5px 0; + padding: 0; + } + + /* line 135, ../sass/_mobile.scss */ + img { + border: 0; + max-width: 100%; + } + + /* line 139, ../sass/_mobile.scss */ + table { + width: auto; + border-collapse: collapse; + border-spacing: 0; + } +} +@media print { + /* line 10, ../sass/_print.scss */ + * { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + } + + /* line 19, ../sass/_print.scss */ + a, a:visited { + text-decoration: underline; + } + + /* line 23, ../sass/_print.scss */ + a[href]:after { + content: " (" attr(href) ")"; + } + + /* line 27, ../sass/_print.scss */ + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* line 33, ../sass/_print.scss */ + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + /* line 37, ../sass/_print.scss */ + pre, blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* line 42, ../sass/_print.scss */ + thead { + display: table-header-group; + } + + /* line 46, ../sass/_print.scss */ + tr, img { + page-break-inside: avoid; + } + + /* line 50, ../sass/_print.scss */ + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; +} + + /* line 58, ../sass/_print.scss */ + p, h2, h3 { + orphans: 3; + widows: 3; + } + + /* line 63, ../sass/_print.scss */ + h2, h3 { + page-break-after: avoid; + } + + /* line 75, ../sass/_print.scss */ + .sidebar, + #navigation, + #header-region, + #search-theme-form, + #footer, + .breadcrumb, + .tabs, + .feed-icon, + .links { + display: none; + } + + /* line 79, ../sass/_print.scss */ + #page { + width: 100%; + } + + /* line 86, ../sass/_print.scss */ + #content, + #content #content-inner, + .content, + .title { + margin: 20px 0; + width: auto; + } + + /* line 95, ../sass/_print.scss */ + a:hover, a:active, a:link, a:visited { + color: black; + } + + /* line 101, ../sass/_print.scss */ + #content a:link:after, #content a:visited:after { + content: " (" attr(href) ") "; + font-size: 0.8em; + font-weight: normal; + } +} +/* line 13, ../sass/_ie7.scss */ +.lt-ie8 #content tr.even th, +.lt-ie8 #content tr.even td, +.lt-ie8 #content tr.odd th, +.lt-ie8 #content tr.odd td { + border-bottom: 1px solid #cccccc; +} + +/* line 23, ../sass/_ie7.scss */ +.lt-ie8 ul.primary li a:hover, +.lt-ie8 ul.secondary li a:hover { + cursor: pointer; + color: #555555; + text-decoration: none; +} + +/* line 12, ../sass/_ie6.scss */ +.lt-ie7 div.admin .left, +.lt-ie7 div.admin .right { + width: 46%; +} + +/* line 21, ../sass/_ie6.scss */ +.lt-ie7 ul.primary, +.lt-ie7 ul.secondary { + width: 100%; + width: auto; +} +/* line 25, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li a, +.lt-ie7 ul.primary li a .tab, +.lt-ie7 ul.secondary li a, +.lt-ie7 ul.secondary li a .tab { + display: inline; + display: inline-block; +} + +/* line 33, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li a { + background: url(../images/tabs/tab-left-ie6.png) no-repeat left -38px; +} +/* line 35, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li a .tab { + background: url(../images/tabs/tab-right-ie6.png) no-repeat right -38px; +} +/* line 38, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li a:hover { + background-position: left -76px; +} +/* line 40, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li a:hover .tab { + background-position: right -76px; +} +/* line 46, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li.active a, .lt-ie7 ul.primary li.active a:hover { + background: url(../images/tabs/tab-left-ie6.png) no-repeat left 0; +} +/* line 48, ../sass/_ie6.scss */ +.lt-ie7 ul.primary li.active a .tab, .lt-ie7 ul.primary li.active a:hover .tab { + background: url(../images/tabs/tab-right-ie6.png) no-repeat right 0; +} diff --git a/sass/README.txt b/sass/README.txt new file mode 100644 index 0000000000000000000000000000000000000000..17b02b78572078f1351756ffc958607bce96e37a --- /dev/null +++ b/sass/README.txt @@ -0,0 +1,54 @@ +ABOUT SASS AND COMPASS +---------------------- + +This directory includes the Sass files used to generate Boilerplate's CSS files. + +Sass is a language that is just normal CSS plus some extra features, like +variables, nested rules, math, mixins, etc. If your stylesheets are written in +Sass, helper applications can convert them to standard CSS so that you can +include the CSS in the normal ways with your theme. + +To learn more about Sass, visit: http://sass-lang.com + +Compass is a helper library for Sass. It includes libraries of shared mixins, a +package manager to add additional extension libraries, and an executable that +can easily convert Sass files into CSS. + +To learn more about Compass, visit: http://compass-style.org + + +DEVELOPING WITH SASS AND COMPASS +-------------------------------- + +To automatically generate the CSS versions of the scss while you are doing theme +development, you'll need to tell Compass to "watch" the sass directory so that +any time a .scss file is changed it will automatically place a generated CSS +file into your sub-theme's css directory: + + compass watch + + If you are already in the root of your sub-theme's directory, you can simply + type: compass watch + +While using generated CSS with Firebug, the line numbers it reports will be +wrong since it will be showing the generated CSS file's line numbers and not the +line numbers of the source Sass files. To correct this problem, you can install +the FireSass plug-in into Firefox. + https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ + + +MOVING YOUR CSS TO PRODUCTION +----------------------------- + +Once you have finished your sub-theme development and are ready to move your CSS +files to your production server, you'll need to tell sass to update all your CSS +files and to compress them (to improve performance). Note: the Compass command +will only generate CSS for .scss files that have recently changed; in order to +force it to regenerate all the CSS files, you can use the Compass' clean command +to delete all the generated CSS files. + +- Delete all CSS files by running: compass clean +- Edit the config.rb file in your theme's directory and uncomment this line by + deleting the "#" from the beginnning: + #environment = :production +- Regenerate all the CSS files by running: compass compile diff --git a/sass/_base.scss b/sass/_base.scss new file mode 100644 index 0000000000000000000000000000000000000000..adcf9def91ed99314dc685eb7ebaedcf827781fc --- /dev/null +++ b/sass/_base.scss @@ -0,0 +1,62 @@ +//////////////////////////////////////////////////////////////////////////////// +// "base" partial +// -------------------- +// To make it easier to use all variables and mixins in any Sass file in this +// theme, each .scss file has a @import "base" declaration. And this _base.scss +// file is in charge of importing all the other partials needed for the theme. +// +// This base partial is organized in this way: +// - First we set any shared Sass variables. +// - Next we import Compass plug-ins (Sass mixin libraries). +// - Last we import a _mixins.scss partial that includes our custom mixins. +//////////////////////////////////////////////////////////////////////////////// + +// +// Variables +//////////////////////////////////////// + +// +// Widths +// +$first_sidebar_width: 190px; +$second_sidebar_width: 200px; +$page_width: 960px; + +// +// Heights +// +$navigation_height: 40px; +$footer_height: 80px; + +// +// Backgrounds +// +$header_bg: #333; +$footer_bg: #efefef; +$sidebar_first_bg: #e7edff; +$sidebar_second_bg: #ffd075; +$navigation_bg: #feffa5; + +// +// Fonts +// +$main_font: "Helvetica Neue", helvetica, Arial, sans-serif; +$monospace_font: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; + +// +// Colors +// +$link_color: blue; +$visited_link_color: $link_color; +$active_link_color: red; +$main_text_color: #222; +$header_text_color: #000; +$selection_text_color: #fff; +$selection_bg_color: #fe57a1; + +// +// Partials to be shared with all .scss files. +//////////////////////////////////////// +@import "compass"; // See http://compass-style.org +@import "compass/reset/utilities"; +@import "mixins"; // Import our custom mixins last. diff --git a/sass/_custom.scss b/sass/_custom.scss index afbfd0c8e41897f125de09287c337b3993d140d4..4386d73f53d7946fd9042fb60aa6717f65aa1815 100644 --- a/sass/_custom.scss +++ b/sass/_custom.scss @@ -1,3 +1,211 @@ -#footer p { - margin:0px; +//////////////////////////////////////////////////////////////////////////////// +// Custom Styles +// -------------------- +// This partial defines the styles for page elements. Most custom +// styling should go here. +// +// Styling of standard HTML elements (paragraphs, headers, lists, etc...) can +// be found in _defaults.scss. +// +// Positioning of major page elements can be found in _layout.scss. +//////////////////////////////////////////////////////////////////////////////// + +body { + @include background-image(radial-gradient(50% 50%, #aeaeae 0px, #fff 700px)) +} + +#header { + background: $header_bg; + @include background-image(linear-gradient(#aeaeae, white)); +} + +#main { + @include background-image(radial-gradient(50% 50%, #aeaeae 0px, #fff 300px)) +} + +#sidebar-first { + background: $sidebar_first_bg; + @include background-image(linear-gradient(left, #aeaeae, white)); +} + +#sidebar-second { + background: $sidebar_second_bg; + @include background-image(linear-gradient(left, white, #aeaeae)); +} + +#navigation { + background: $navigation_bg; + @include background-image(linear-gradient(#aeaeae, white)); + ul { + margin: 0px; + float: left; + padding: 0px; + } + li { + list-style: none; + margin: 5px; + float: left; + } +} + +#site-name { + font-size: 2.2em; + line-height: 1.3em; + font-weight: 300; + padding: 0 0 0.5em; + margin: 0; +} + +#footer { + background: $footer_bg; + @include background-image(linear-gradient(white, #aeaeae)); + p { + margin:0px; + } +} + +// Bug fix for views 2 edit links. +div.view div.views-admin-links { + width: auto; +} + +// Rollover edit links for blocks. +div.block { + position: relative; + .edit { + display: none; + position: absolute; + right: -20px; + top: -5px; + z-index: 40; + padding: 3px 8px 0; + font-size: 10px; + line-height: 16px; + background-color: white; + border: 1px solid #cccccc; + // let's get fancy! + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -moz-box-shadow: 0 1px 3px #888888; + -webkit-box-shadow: -1px 1px 2px #666666; + a { + display: block; + border: 0; + padding: 0; + margin: 0; + } + } + &:hover .edit { + display: block + } +} + +// +// UI improvments. +// +#edit-title { + font-size: 24px; + width: 99%; +} + +#system-themes-form img { + width: 100px; +} + +.form-item .description { + font-style: italic; + line-height: 1.2em; + font-size: 0.8em; + margin-top: 5px; + color: #777; +} + +#edit-delete { + color: #c00; +} + +div.messages { // Console, style from slate theme. + padding: 9px; + margin: 1em 0; + color: #036; + background: #bdf; + border: 1px solid #ace; +} + +div.warning { + color: #840; + background: #fe6; + border-color: #ed5; +} + +div.error { + color: white; + background: #e63; + border-color: #d52; +} + +div.status { + color: #360; + background: #cf8; + border-color: #bbee77; +} + +// +// Non-semantic Helper Classes +//////////////////////////////////////// + +.ir { // For image replacement + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; + br { + display: none; + } +} + +.hidden { // Hide from both screenreaders and browsers: h5bp.com/u + display: none !important; + visibility: hidden; +} + +.visuallyhidden { // Hide only visually, but have it available for screenreaders: h5bp.com/v + @include element-invisible; + &.focusable:active, &.focusable:focus { // Allow the element to be focusable when navigated to via the keyboard: h5bp.com/p + @include element-invisible-off; + } +} + +.invisible { // Hide visually and from screenreaders, but maintain layout + visibility: hidden; +} + +.clearfix { // Contain floats: h5bp.com/q + @include my-clearfix; +} + +// clear classes +.clearleft, .clearl, .cleft { + clear: left; +} +.clearright, .clearr, .cright { + clear: right; +} + +.clear, .clearboth, .clearall { + clear: both; +} + +// Float classes +.floatleft, .fleft, .floatl { + @include my-float-left; +} + +.floatright, .fright, .floatr { + @include my-float-right; } diff --git a/sass/_defaults.scss b/sass/_defaults.scss new file mode 100644 index 0000000000000000000000000000000000000000..82b0d5edced85ee2daa07cf52640daecc83c82ec --- /dev/null +++ b/sass/_defaults.scss @@ -0,0 +1,463 @@ +//////////////////////////////////////////////////////////////////////////////// +// Default Element Styles +// -------------------- +// This partial establishes general rules and browser resets. Standard HTML +// elements (text, lists, tables, forms, etc...) are all defined here. +// +// This is largely addapted from the HTML5 Boilerplate project. Detailed +// information about Boilerplate CSS can be found at: http://h5bp.com/css +//////////////////////////////////////////////////////////////////////////////// + +// +// Reset box sizing +// +* { + margin: 0; + @include box-sizing(border-box); + *behavior: url(../js/boxsizing.htc); +} + +// +// HTML5 display definitions +// +@include reset-html5; + +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +audio:not([controls]) { + display: none; +} + +[hidden] { + display: none; +} + +// +// Base +// +html { + font-size: 100%; // Correct text resizing oddly in IE6/7 when body font-size is set using em units + -webkit-text-size-adjust: 100%; // Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g + -ms-text-size-adjust: 100%; +} + +html, button, input, select, textarea { + font-family: $main_font; + color: $main_text_color; +} + +body { + margin: 0; + // Setting up font size, leading and font family + // http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography + font: 13px / 1.5em $main_font; + letter-spacing: 0.03em; +} + + +// +// Remove text-shadow in selection highlight: h5bp.com/i +// These selection declarations have to be separate +// +::-moz-selection { + background: $selection_bg_color; + color: $selection_text_color; + text-shadow: none; +} +::selection { + background: $selection_bg_color; + color: $selection_text_color; + text-shadow: none; +} + +// +// Links +// +a { + color: $link_color; + &:link { + } + &:visited { + color: $visited_link_color; + } + &:hover { + color: $active_link_color; + } + &:focus { + color: $active_link_color; + outline: thin dotted; + } + &:hover, &:active { + color: $active_link_color; + text-decoration: underline; + outline: 0; // Improve readability when focused and hovered in all browsers: h5bp.com/h + } +} + +// +// Typography +// +h1, h2, h3, h4, h5, h6 { + line-height: 1.3em; + color: $header_text_color; +} + +h1 { + font-size: 2.2em; + font-weight: 300; + padding: 0 0 0.5em; + margin: 0; +} + +h2 { + font-size: 1.8em; + font-weight: 300; + margin-bottom: 0.75em; +} + +h3 { + font-size: 1.4em; + margin-bottom: 1em; +} + +h4 { + font-size: 1.2em; + margin-bottom: 0.8em; +} + +h5 { + font-size: 1.1em; + font-weight: 600; + margin-bottom: 0; +} + +h6 { + font-size: 1em; + font-weight: bold; +} + +p { + margin: 0 0 1em 0; +} + +abbr { + border-bottom: 1px dotted #666; + cursor: help; + white-space: nowrap; +} + +b, strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +dfn { + font-style: italic; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +ins { + background: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} + +pre, code, kbd, samp, tt { + font-family: $monospace_font; // Redeclare monospace font family: h5bp.com/j + font-size: 1em; + line-height: 1.5em; +} + +pre { // Improve readability of pre-formatted text in all browsers + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + background-color: #efefef; + display: block; + padding: 5px; + margin: 5px 0; + border: 1px solid #aaa; +} + +q { + quotes: none; +} + +q:before, q:after { + content: ""; + content: none; +} + +small { + font-size: 85%; +} + +sub, sup { // Position subscript and superscript content without affecting line-height: h5bp.com/k + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// +// Lists +// +ul, ol { + margin: 1em 0; + padding: 0 0 0 2em; +} + +dd { + margin: 0 0 0 2em; +} + +nav ul, nav ol { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} + +ul { + list-style-type: disc; + ul { + list-style-type: circle; + ul { + list-style-type: square; + ul { + list-style-type: circle; + } + } + } +} + +ol { + list-style-type: decimal; + ol { + list-style-type: lower-alpha; + ol { + list-style-type: decimal; + } + } +} + +// +// Embedded content +// +img { + border: 0; + -ms-interpolation-mode: bicubic; // Improve image quality when scaled in IE7: h5bp.com/d + vertical-align: middle; // Remove the gap between images and borders on image containers: h5bp.com/i/440 +} + +svg:not(:root) { + overflow: hidden; // Correct overflow not hidden in IE9 +} + +// +// Figures +// +figure { + margin: 0; +} + +// +// Forms +// +form { + margin: 0; +} + +fieldset { + @include reset-box-model; +} + +label { + cursor: pointer; // Indicate that 'label' will shift focus to the associated form element +} + +legend { + border: 0; // Correct color not inheriting in IE6/7/8/9 + *margin-left: -7px; // Correct alignment displayed oddly in IE6/7 + padding: 0; // Since we've removed the fieldset border, margin, and padding, we remove the default padding on legend to avoid unwanted horizontal whitespace. + white-space: normal; // Allow text to wrap in Firefox 3.6 +} + +button, input, select, textarea { + font-size: 100%; // Correct font-size not inheriting in all browsers + margin: 0; // Remove margins in FF3/4 S5 Chrome + vertical-align: baseline; // Define consistent vertical alignment display in all browsers + *vertical-align: middle; +} + +button, input { + line-height: normal; // Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) + +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; // Display hand cursor for clickable form elements + -webkit-appearance: button; // Allow styling of clickable form elements in iOS + *overflow: visible; // Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) +} + +button[disabled], input[disabled] { + cursor: default; // Re-set default cursor for disabled elements +} + +input[type="checkbox"], +input[type="radio"] { // Consistent box sizing and appearance + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { // Remove inner padding and border in FF3/4: h5bp.com/l + border: 0; + padding: 0; +} + +textarea { + overflow: auto; // Remove default vertical scrollbar in IE6/7/8/9 + vertical-align: top; + resize: vertical; // Allow only vertical resizing +} + +input:valid, textarea:valid { // Colors for form validity +} + +input:invalid, +textarea:invalid { + background-color: #f0dddd; +} + +// +// Tables +// +table { + border-collapse: collapse; + border-spacing: 0; + width: 99%; +} + +td { + vertical-align: top; +} + +tr.even, +tr.odd { + td { + padding: 10px 5px; + } +} + +tr.odd { + background-color: white; +} + +// +// Chrome Frame Prompt +// +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; +} + +// +// Wireframe styles +// +.wireframe-mode { + #header, + #content-top, + #content-top>*, + #content-header, + #content-header>*, + #content-area, + #content-area>*, + #content-bottom, + #content-bottom>*, + #primary, + #secondary, + #sidebar-left-inner, + #sidebar-right-inner, + .block { + padding: 2px; + border: 1px solid #bbbbbb; + } + .node { + border-bottom: 1px solid #bbbbbb; + margin-bottom: 10px; + } + .block { + margin-bottom: 3px; + } + #content-top, + #content-header, + #content-area, + #content-bottom { + margin: 0 3px 3px; + } + #footer { + margin-top: 3px; + padding: 2px; + border: 1px solid #cccccc; + } + .with-navigation { + #content, + .sidebar { + margin-top: 50px; + } + } + #navigation { + height: 50px + } +} diff --git a/sass/ie6.scss b/sass/_ie6.scss similarity index 54% rename from sass/ie6.scss rename to sass/_ie6.scss index e8354a4d3f5019bc3f015d0763511fc7e26ed206..9ba5d69104d2409b0e7201deb8575734f531bae5 100644 --- a/sass/ie6.scss +++ b/sass/_ie6.scss @@ -1,69 +1,54 @@ -/* Yes, we all hate IE6. +//////////////////////////////////////////////////////////////////////////////// +// IE6 Styling +// -------------------- +// Yes, we all hate IE6. +//////////////////////////////////////////////////////////////////////////////// -/* Fix the admin page in ie6. */ -div.admin { +// +// Fix the admin page in ie6. +// +.lt-ie7 div.admin { .left, .right { width: 46%; - } } +} -/* Tabs CSS - IE 5 and 6 don't support PNGs with alpha transparency. */ -ul.primary, -ul.secondary { +// +// Tabs CSS - IE 5 and 6 don't support PNGs with alpha transparency. +// +.lt-ie7 ul.primary, +.lt-ie7 ul.secondary { width: 100%; width: auto; li a, li a .tab { display: inline; display: inline-block; - } } -ul.primary { +} + +.lt-ie7 ul.primary { li { a { background: url(../images/tabs/tab-left-ie6.png) no-repeat left -38px; .tab { background: url(../images/tabs/tab-right-ie6.png) no-repeat right -38px; - } - &:hover { - cursor: pointer; - color: #555555; - text-decoration: none; + } + &:hover { background-position: left -76px; .tab { background-position: right -76px; - } } } - .active { + } + &.active { a, a:hover { background: url(../images/tabs/tab-left-ie6.png) no-repeat left 0; .tab { background: url(../images/tabs/tab-right-ie6.png) no-repeat right 0; - } } } } } - -ul.secondary { - li { - a { - &:hover { - cursor: pointer; - color: #555555; - text-decoration: none; - } - } - } - } - -/* Drupal admin tables */ -#content tr.even, -#content tr.odd { - th, - td { - border-bottom: 1px solid #cccccc; - } - } \ No newline at end of file +} \ No newline at end of file diff --git a/sass/_ie7.scss b/sass/_ie7.scss new file mode 100644 index 0000000000000000000000000000000000000000..8fed9fbbb057cd632a29fffadbc58680b561aef9 --- /dev/null +++ b/sass/_ie7.scss @@ -0,0 +1,28 @@ +//////////////////////////////////////////////////////////////////////////////// +// IE7 Styling +// -------------------- +// Yes, we all hate IE7 too. +//////////////////////////////////////////////////////////////////////////////// + +// +// Drupal admin tables +// +.lt-ie8 #content tr.even, +.lt-ie8 #content tr.odd { + th, + td { + border-bottom: 1px solid #cccccc; + } +} + +// +// Minor fix for primary and secondary tabs in IE7 +// +.lt-ie8 ul.primary, +.lt-ie8 ul.secondary { + li a:hover { + cursor: pointer; + color: #555555; + text-decoration: none; + } +} \ No newline at end of file diff --git a/sass/_iphone.scss b/sass/_iphone.scss deleted file mode 100644 index 4fe2df00f2ec483307e6e43d6af3a2cc4b3b0d5e..0000000000000000000000000000000000000000 --- a/sass/_iphone.scss +++ /dev/null @@ -1,3 +0,0 @@ -@media screen and (max-width : 480px) { - -} \ No newline at end of file diff --git a/sass/_layout.scss b/sass/_layout.scss new file mode 100644 index 0000000000000000000000000000000000000000..900186ff795a407d3c801357888cb7edf1f8a510 --- /dev/null +++ b/sass/_layout.scss @@ -0,0 +1,135 @@ +//////////////////////////////////////////////////////////////////////////////// +// Layout Styling +// -------------------- +// This partial defines CSS classes to create a table-free layout, with +// 1-3 columns, depending on whether blocks are enabled in the left or right +// columns. +// +// We use a negative margin technique, adapted from the Zen Columns layout +// method (http://drupal.org/node/201428). The page is loaded in this order: +// 1. Header +// 2. Content +// 3. Navigation menus +// 4. Sidebar Left +// 5. Sideabr Right +// +// Only CSS that affects the layout (positioning) of major elements should be +// listed here. Most visual styling should go in _custom.scss. +//////////////////////////////////////////////////////////////////////////////// + +#page { // Remove 'auto' and the width to switch to a fluid width. + width: $page_width; + margin: 0 auto; +} + +body, #page { + height:100%; // Page height fills the screen and footer at the bottom. +} + +#main { + padding-bottom: $footer_height; + position: relative; +} + +#skip a { + // "Skip to Navigation" link + // --------------------------- + // This link useful for both visually impaired people and those with + // mobility impairments who cannot use a mouse. + @include element-invisible-focusable; +} + +#content { + float: left; + width: 100%; + margin-right: -100%; + padding: 0; +} + +.sidebar { + float: left; +} + +#sidebar-second { + float: right; +} + +#footer { + position: absolute; + bottom: 0px; + height: $footer_height; + width: $page_width; + float: none; + clear: both; +} + +// +// Layout Helpers +// +#header, +#footer, +.mission, +.breadcrumb, +.node { + clear: both; +} + +// +// Column widths +// +.two-sidebars, +.sidebar-first { + .center { + margin-left: percentage($first_sidebar_width / $page_width); + } +} + +#sidebar-first { + width: percentage($first_sidebar_width / $page_width); + margin-right: -$first_sidebar_width; +} + +.two-sidebars, +.sidebar-second { + .center { + margin-right: $second_sidebar_width; + } +} + +#sidebar-second { + width: $second_sidebar_width; +} + +// +// Columns Inner +// ------------- +// You can change the padding inside the columns without changing the +// width of them by just usinbg the INNER div of each column +// +.inner { + padding: 0; +} + +// +// Navigation styles +// ----------------- +// The navigation is loaded after the content, so we need to make space +// for it, equal to its height, so if you change the height of the navigation, +// remember to adapt the margin top of the content and sidebars. +// +#navigation { + float: left; + margin-left: 0; + margin-right: -100%; + padding: 0; + width: 100%; + height: $navigation_height; +} + +// Navigation height +.with-navigation { + #content, + .sidebar { + margin-top: $navigation_height; + } +} diff --git a/sass/_mixins.scss b/sass/_mixins.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f3de88be48437c318953effbecf2ad9168ee4675 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -0,0 +1,74 @@ +//////////////////////////////////////////////////////////////////////////////// +// Custom Sass Mixins +// -------------------- +// This file contains custom Sass mixins and functions. It will be included +// in any files that import the "base" partial. To use a mixin from this +// file, add this line to the top of your .scss file: +// @import "base"; +// Then to use a mixin for a particular rule, add this inside the ruleset's +// curly brackets: +// @include mix-in-name; +//////////////////////////////////////////////////////////////////////////////// + +// +// Custom Functions +//////////////////////////////////////// + + + +// +// Custom Mixins +//////////////////////////////////////// + +// Hide element visually, but have it available for screenreaders. +@mixin element-invisible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; +} + +// Turns off the element-invisible effect. +@mixin element-invisible-off { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static !important; + width: auto; +} + +// Hide element visually, but have it available for screenreaders +// and make it focusable +@mixin element-invisible-focusable { + @include element-invisible; + &:active, + &:focus { // Allow the element to be focusable when navigated to via the keyboard: h5bp.com/p + @include element-invisible-off; + } +} + +// Clearfix to contain floats: h5bp.com/q +@mixin my-clearfix { + &:before { // prevent top margin colapse + content: ""; + display: table; + } + @include pie-clearfix; +} + +// Float element left with margins +@mixin my-float-left { + @include float-left; + margin: 0 10px 5px 0; +} + +// Float element right with margins +@mixin my-float-right { + @include float-right; + margin: 0 0 5px 10px; +} diff --git a/css/mobile.css b/sass/_mobile.scss similarity index 57% rename from css/mobile.css rename to sass/_mobile.scss index b0381cbd0268ca5d0fcfcd5d75ea0261faa841e7..b9c539f6fc4a39745807a62e232218a92dd0aadb 100644 --- a/css/mobile.css +++ b/sass/_mobile.scss @@ -1,16 +1,15 @@ -/* +//////////////////////////////////////////////////////////////////////////////// +// Mobile Styles +// -------------------- +// This partial defines styles to be used when a page is printed. The styles are +// included in the main style sheet to avoid an unnecessary HTTP connection: +// h5bp.com/r +//////////////////////////////////////////////////////////////////////////////// + +// +// iPhone and smart phone Styling +//////////////////////////////////////// @media screen and (max-width : 480px) { - - $page_width:100%; - $second_sidebar_width:auto; - $first_sidebar_width:auto; - $navigation_height:auto; -} -*/ -/* iPhone and smart phone Styling */ -@media screen and (max-width : 480px) { - /* CSS Mobile Reset */ - /* line 8, ../sass/mobile.scss */ html, body { margin: 0; padding: 0; @@ -18,13 +17,11 @@ padding: 0px; } - /* line 14, ../sass/mobile.scss */ #page { width: 100%; - margin: 40px 0px 0px 0px; + margin: $navigation_height 0px 0px 0px; } - /* line 18, ../sass/mobile.scss */ .sidebar, #sidebar-first, #sidebar-second { float: none; clear: both; @@ -33,12 +30,10 @@ padding: 5px; } - /* line 25, ../sass/mobile.scss */ .with-navigation #content { margin-top: 0px; } - /* line 28, ../sass/mobile.scss */ #navigation { clear: both; padding: 5px; @@ -46,27 +41,23 @@ top: 0px; } - /* line 34, ../sass/mobile.scss */ #footer { position: relative; width: 100%; } - /* line 38, ../sass/mobile.scss */ #main { padding-bottom: 0px; position: static; } - /* line 42, ../sass/mobile.scss */ #content #content-inner.center { margin: 0px; padding: 5px; } - /* line 47, ../sass/mobile.scss */ body { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; line-height: 1.5; font-size: 16px; background: #fff; @@ -75,47 +66,41 @@ -webkit-text-size-adjust: none; } - /* line 57, ../sass/mobile.scss */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } - /* line 59, ../sass/mobile.scss */ p img { float: left; margin: 0 10px 5px 0; padding: 0; } - /* line 61, ../sass/mobile.scss */ img { border: 0; max-width: 100%; } - /* line 63, ../sass/mobile.scss */ table { width: auto; border-collapse: collapse; border-spacing: 0; } } -/* Netbook Styling */ -@media screen and (max-width : 800px) { - /* line 69, ../sass/mobile.scss */ + +// +// Netbook Styling +//////////////////////////////////////// +@media screen and (max-width: 800px) { html, body { margin: 0; padding: 0; border: 0; padding: 0px; } - - /* line 75, ../sass/mobile.scss */ #page { width: 100%; } - - /* line 78, ../sass/mobile.scss */ #sidebar-second { float: none; clear: both; @@ -123,46 +108,34 @@ margin: 0px; padding: 5px; } - /* - #navigation { - clear:both; - height:auto; - padding:5px; - } + #navigation { + clear:both; + height:auto; + padding:5px; + } */ - /* line 92, ../sass/mobile.scss */ #footer { position: relative; width: 100%; } - - /* line 96, ../sass/mobile.scss */ #main { padding-bottom: 0px; } - - /* line 100, ../sass/mobile.scss */ body { background: #fff; word-wrap: break-word; -webkit-text-size-adjust: none; } - - /* line 107, ../sass/mobile.scss */ p img { float: left; margin: 0 10px 5px 0; padding: 0; } - - /* line 109, ../sass/mobile.scss */ img { border: 0; max-width: 100%; } - - /* line 111, ../sass/mobile.scss */ table { width: auto; border-collapse: collapse; diff --git a/sass/_print.scss b/sass/_print.scss new file mode 100644 index 0000000000000000000000000000000000000000..bbca787a38268a7b9f4220a381564ba07c8b87f0 --- /dev/null +++ b/sass/_print.scss @@ -0,0 +1,107 @@ +//////////////////////////////////////////////////////////////////////////////// +// Print Styles +// -------------------- +// This partial defines styles to be used when a page is printed. The styles are +// included in the main style sheet to avoid an unnecessary HTTP connection: +// h5bp.com/r +//////////////////////////////////////////////////////////////////////////////// + +@media print { + * { + background: transparent !important; + color: black !important; // Black prints faster: h5bp.com/s + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + } + + a, a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { // Don't show links for images, or javascript/internal links + content: ""; + } + + pre, blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { // h5bp.com/t + display: table-header-group; + } + + tr, img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, h2, h3 { + orphans: 3; + widows: 3; + } + + h2, h3 { + page-break-after: avoid; + } + + .sidebar, + #navigation, + #header-region, + #search-theme-form, + #footer, + .breadcrumb, + .tabs, + .feed-icon, + .links { + display: none; + } + + #page { + width: 100%; + } + + #content, + #content #content-inner, + .content, + .title { + margin: 20px 0; + width: auto; + } + + a { + &:hover, + &:active, + &:link, + &:visited { + color: black + } + } + + #content a { // CSS2 selector to add visible href after links. + &:link:after, &:visited:after { + content: " (" attr(href) ") "; + font-size: 0.8em; + font-weight: normal; + } + } +} \ No newline at end of file diff --git a/sass/_variables.scss b/sass/_variables.scss deleted file mode 100644 index 605fc76e2ade52c0052e0894b84a5b253833ec47..0000000000000000000000000000000000000000 --- a/sass/_variables.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Widths. -$first_sidebar_width: 190px; -$second_sidebar_width: 200px; -$page_width: 960px; - -//Heights -$navigation_height: 40px; -$footer_height: 80px; - - -//Backgrounds -$header_bg: #333; -$footer_bg: #efefef; -$sidebar_first_bg: #e7edff; -$sidebar_second_bg: #ffd075; -$navigation_bg: #feffa5; - -//Fonts -$main_font: "Helvetica Neue", helvetica, Arial, sans-serif; - -//Colors -$link_color: blue; -$activelink_color:red; \ No newline at end of file diff --git a/sass/default.scss b/sass/default.scss deleted file mode 100644 index f9c6ab10f97c136fd2cf102d405d3457daf99ced..0000000000000000000000000000000000000000 --- a/sass/default.scss +++ /dev/null @@ -1,441 +0,0 @@ -/* About Default Styles - --------------------- - default.css is used to establish general rules, browser reset, or admin user interface styles. - Browser Reset - ------------- - For a more complete reset, go to http://developer.yahoo.com/yui/reset/ -*/ -* { - margin:0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing:border-box; - *behavior: url(../js/boxsizing.htc) - } - -/* - * HTML5 Boilerplate - * - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - * - * Detailed information about this CSS: h5bp.com/css - * - * ==|== normalize ========================================================== - */ - - -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } -audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } -audio:not([controls]) { display: none; } -[hidden] { display: none; } - -/* ============================================================================= - Base - ========================================================================== */ - -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g - */ - -html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } - -html, button, input, select, textarea { font-family: sans-serif; color: #222; } - -body { margin: 0; font-size: 1em; line-height: 1.4; } - -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate - * Also: hot pink! (or customize the background color to match your design) - */ - -::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } -::selection { background: #fe57a1; color: #fff; text-shadow: none; } - - -/* ============================================================================= - Links - ========================================================================== */ - -a { color: #00e; } -a:visited { color: #551a8b; } -a:hover { color: #06e; } -a:focus { outline: thin dotted; } - -/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ -a:hover, a:active { outline: 0; } - - -/* ============================================================================= - Typography - ========================================================================== */ - -abbr[title] { border-bottom: 1px dotted; } - -b, strong { font-weight: bold; } - -blockquote { margin: 1em 40px; } - -dfn { font-style: italic; } - -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } - -ins { background: #ff9; color: #000; text-decoration: none; } - -mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } - -/* Redeclare monospace font family: h5bp.com/j */ -pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } - -/* Improve readability of pre-formatted text in all browsers */ -pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } - -q { quotes: none; } -q:before, q:after { content: ""; content: none; } - -small { font-size: 85%; } - -/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - - -/* ============================================================================= - Lists - ========================================================================== */ - -ul, ol { margin: 1em 0; padding: 0 0 0 40px; } -dd { margin: 0 0 0 40px; } -nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } - - -/* ============================================================================= - Embedded content - ========================================================================== */ - -/* - * 1. Improve image quality when scaled in IE7: h5bp.com/d - * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 - */ - -img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } - -/* - * Correct overflow not hidden in IE9 - */ - -svg:not(:root) { overflow: hidden; } - - -/* ============================================================================= - Figures - ========================================================================== */ - -figure { margin: 0; } - - -/* ============================================================================= - Forms - ========================================================================== */ - -form { margin: 0; } -fieldset { border: 0; margin: 0; padding: 0; } - -/* Indicate that 'label' will shift focus to the associated form element */ -label { cursor: pointer; } - -/* - * 1. Correct color not inheriting in IE6/7/8/9 - * 2. Correct alignment displayed oddly in IE6/7 - */ - -legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } - -/* - * 1. Correct font-size not inheriting in all browsers - * 2. Remove margins in FF3/4 S5 Chrome - * 3. Define consistent vertical alignment display in all browsers - */ - -button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } - -/* - * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) - */ - -button, input { line-height: normal; } - -/* - * 1. Display hand cursor for clickable form elements - * 2. Allow styling of clickable form elements in iOS - * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) - */ - -button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } - -/* - * Re-set default cursor for disabled elements - */ - -button[disabled], input[disabled] { cursor: default; } - -/* - * Consistent box sizing and appearance - */ - -input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } -input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } - -/* - * Remove inner padding and border in FF3/4: h5bp.com/l - */ - -button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } - -/* - * 1. Remove default vertical scrollbar in IE6/7/8/9 - * 2. Allow only vertical resizing - */ - -textarea { overflow: auto; vertical-align: top; resize: vertical; } - -/* Colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { background-color: #f0dddd; } - - -/* ============================================================================= - Tables - ========================================================================== */ - -table { border-collapse: collapse; border-spacing: 0; } -td { vertical-align: top; } - - -/* ============================================================================= - Chrome Frame Prompt - ========================================================================== */ - -.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } - - -/* ==|== non-semantic helper classes ======================================== - Please define your styles before this section. - ========================================================================== */ - -/* For image replacement */ -.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } -.ir br { display: none; } - -/* Hide from both screenreaders and browsers: h5bp.com/u */ -.hidden { display: none !important; visibility: hidden; } - -/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } - -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } - -/* Hide visually and from screenreaders, but maintain layout */ -.invisible { visibility: hidden; } - - - - -/* ==|== print styles ======================================================= - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r - ========================================================================== */ - -@media print { - * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ - a, a:visited { text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } /* h5bp.com/t */ - tr, img { page-break-inside: avoid; } - img { max-width: 100% !important; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } -} - - - -/* Clear Floats Without Structural Markup - --------------------------------------- - http://www.positioniseverything.net/easyclearing.html -*/ -.clearfix { - display: inline-block; - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - font-size: 0; - } - } - -/* Hides from IE-mac \*/ -* html .clearfix { - height: 1%; - } - -.clearfix { - display: block; - } - -/* End hide from IE-mac */ -#navigation li { - list-style: none; - margin:5px; - float: left; -} -#navigation ul { - margin: 0px; - float:left; - padding: 0px; -} - -/* clear classes */ -.clearleft, .clearl, .cleft { - clear: left; - } -.clearright, .clearr, .cright { - clear: right; - } - -.clear, .clearboth, .clearall { - clear: both; - } -/* Float classes */ -.floatleft, .fleft, .floatl { - float: left; - margin: 0 10px 5px 0; - } - -.floatright, .fright, .floatr { - float: right; - margin: 0 0 5px 10px; - } - -/* Contain floats: h5bp.com/q */ -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } -.clearfix { *zoom: 1; } - - -/* "Skip to Main Content" link - --------------------------- - This link useful for both visually impaired people and those with mobility impairments - who cannot use a mouse. http://www.webaim.org/techniques/css/invisiblecontent/ -*/ -#skip a { - &:link, &:hover, &:visited { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; - } - &:active, &:focus { - position: static; - width: auto; - height: auto; - } - } -/* bug fix with views 2 edit links.*/ -div.view div.views-admin-links { - width: auto; - } -/* Rollover edit links for blocks. */ -div.block { - position: relative; - .edit { - display: none; - position: absolute; - right: -20px; - top: -5px; - z-index: 40; - padding: 3px 8px 0; - font-size: 10px; - line-height: 16px; - background-color: white; - border: 1px solid #cccccc; - /*let's get fancy!*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -moz-box-shadow: 0 1px 3px #888888; - -webkit-box-shadow: -1px 1px 2px #666666; - a { - display: block; - border: 0; - padding: 0; - margin: 0; - } - } - &:hover .edit { - display: block - } - } -/* Wireframe styles. */ -.wireframe-mode { - #header, - #content-top, - #content-top>*, - #content-header, - #content-header>*, - #content-area, - #content-area>*, - #content-bottom, - #content-bottom>*, - #primary, - #secondary, - #sidebar-left-inner, - #sidebar-right-inner, - .block { - padding: 2px; - border: 1px solid #bbbbbb; - } - .node { - border-bottom: 1px solid #bbbbbb; - margin-bottom: 10px; - } - .block { - margin-bottom: 3px; - } - #content-top, - #content-header, - #content-area, - #content-bottom { - margin: 0 3px 3px; - } - #footer { - margin-top: 3px; - padding: 2px; - border: 1px solid #cccccc; - } - .with-navigation { - #content, - .sidebar { - margin-top: 50px; - } - } - #navigation { - height: 50px - } - } diff --git a/sass/ie7.scss b/sass/ie7.scss deleted file mode 100644 index 5c11b8b303e39bc08d9cb499887c15e30f3274f4..0000000000000000000000000000000000000000 --- a/sass/ie7.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* Yes, we all hate IE7 too. */ - -/* Drupal admin tables. */ -#content tr.even, -#content tr.odd { - th, - td { - border-bottom: 1px solid #cccccc; - } - } - -/* Minor fix for primary and secondary tabs in IE */ -ul { - .primary, - .secondary { - li a:hover { - cursor: pointer; - color: #555555; - text-decoration: none; - } - } - } \ No newline at end of file diff --git a/sass/layout.scss b/sass/layout.scss deleted file mode 100644 index 213a88f6ff4ebd2d351824033b6191f1f4fc277a..0000000000000000000000000000000000000000 --- a/sass/layout.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import "_variables.scss"; -@import "_mixins.scss"; - -/* Layout - ------ - Using a negative margin technique, adapted from ZEN. The page is loaded by this order: - - 1. Header - 2. Content - 3. Navigation menus - 4. Sidebar Left - 5. Sideabr Right - -/* remove 'auto' and the width to switch to a fluid width */ -#page { - width: $page_width; - margin: 0 auto; - } -/* page height fills the screen and footer at the bottom */ -body, #page { - height:100%; - -} -#main { - padding-bottom: $footer_height; - position: relative; -} -#footer { - position: absolute; - bottom: 0px; - height:$footer_height; - width: $page_width; -} -/* Layout rules. (Disclaimer: do not change if you're not sure you know what you're doing.) */ -#content { - float: left; - width: 100%; - margin-right: -100%; - padding: 0; - } -.sidebar { - float: left; - } -#sidebar-second { - float: right; - } -#footer { - float: none; - clear: both; - } -/* Layout Helpers*/ -#header, -#footer, -.mission, -.breadcrumb, -.node { - clear: both; - } -/* Sidebars width - -------------- - -// Left value.*/ -.two-sidebars, -.sidebar-first { - .center { - margin-left: percentage($first_sidebar_width / $page_width); - } - } -/* Left value & negative left value. */ -#sidebar-first { - width: percentage($first_sidebar_width / $page_width); - margin-right: -$first_sidebar_width; - } - -.two-sidebars, -.sidebar-second { - .center { - margin-right: $second_sidebar_width; - } - } - -/* Right value. */ -#sidebar-second { - width: $second_sidebar_width; - } - -/* Columns Inner - ------------- - You can change the padding inside the columns without changing the - width of them by just usinbg the INNER div of each column */ -.inner { - padding: 0; - } - -/* Navigation styles - ----------------- - The navigation is loaded after the content, so we need to make space - for it, equal to its height, so if you change the height of the navigation, - remember to adapt the margin top of the content and sidebars. - */ -#navigation { - float: left; - margin-left: 0; - margin-right: -100%; - padding: 0; - width: 100%; - height: $navigation_height; - } - -/* Navigation height. */ -.with-navigation { - #content, - .sidebar { - margin-top: $navigation_height; - } - } \ No newline at end of file diff --git a/sass/mobile.scss b/sass/mobile.scss deleted file mode 100644 index da038cc26b109d0bf078ec3cef6a441f08534edd..0000000000000000000000000000000000000000 --- a/sass/mobile.scss +++ /dev/null @@ -1,111 +0,0 @@ -@import "_variables.scss"; -/* iPhone and smart phone Styling */ -@media screen and (max-width : 480px) { - -/* CSS Mobile Reset */ - - html, body - { - margin: 0; - padding: 0; - border: 0; - padding:0px; - } - #page { - width:100%; - margin:$navigation_height 0px 0px 0px; - } - .sidebar, #sidebar-first, #sidebar-second { - float:none; - clear:both; - width:auto; - margin:0px; - padding:5px; - } - .with-navigation #content { - margin-top: 0px; - } - #navigation { - clear:both; - padding:5px; - position: absolute; - top:0px; - } - #footer{ - position: relative; - width:100%; - } - #main { - padding-bottom:0px; - position: static; - } - #content #content-inner.center { - margin:0px; - padding:5px; - } - body - { - font-family:Arial, sans-serif; - line-height:1.5; - font-size:16px; - background: #fff; - color: #000; - word-wrap: break-word; - -webkit-text-size-adjust: none; - } - - h1, h2, h3, h4, h5, h6{ font-weight: normal; } - - p img { float: left; margin: 0 10px 5px 0; padding: 0; } - - img { border: 0; max-width: 100%; } - - table { width:auto; border-collapse: collapse;border-spacing: 0; } -} -/* Netbook Styling */ - -@media screen and (max-width : 800px) { - html, body - { - margin: 0; - padding: 0; - border: 0; - padding:0px; - } - #page { - width:100%; - } - #sidebar-second { - float:none; - clear:both; - width:auto; - margin:0px; - padding:5px; - } -/* - #navigation { - clear:both; - height:auto; - padding:5px; - } -*/ - #footer{ - position: relative; - width:100%; - } - #main { - padding-bottom:0px; - } - body - { - background: #fff; - word-wrap: break-word; - -webkit-text-size-adjust: none; - } - - p img { float: left; margin: 0 10px 5px 0; padding: 0; } - - img { border: 0; max-width: 100%; } - - table { width:auto; border-collapse: collapse;border-spacing: 0; } -} \ No newline at end of file diff --git a/sass/print.scss b/sass/print.scss deleted file mode 100644 index 6d64aa8cfc322a5492941613464c7603ae4611ea..0000000000000000000000000000000000000000 --- a/sass/print.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* Use this stylesheet for print styles only. */ -* { - background-color: transparent - } -.sidebar, -#navigation, -#header-region, -#search-theme-form, -#footer, -.breadcrumb, -.tabs, -.feed-icon, -.links { - display: none; - } - -#page { - width: 100%; - } - -#content, -#content #content-inner, -.content, -.title { - margin: 20px 0; - width: auto; - } -a { - &:hover, - &:active, - &:link, - &:visited { - color: black - } - } - -/* CSS2 selector to add visible href after links. */ -#content a { - &:link:after, &:visited:after { - content: " (" attr(href) ") "; - font-size: 0.8em; - font-weight: normal; - } - } diff --git a/sass/style.scss b/sass/style.scss index 2e5d1621581e7eada2122bd9602c3434030919b8..60cc01038af97eaf43583785cdeae99d36cd4830 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,219 +1,15 @@ -@import "_variables.scss"; -@import "_custom.scss"; -@import "compass"; -@import "compass/css3/images"; - -/* Region Colors. delete when starting a new theme.*/ -#header { - background: $header_bg; - @include background-image(linear-gradient(#aeaeae, white)); - } -#footer { - background: $footer_bg; - @include background-image(linear-gradient(white, #aeaeae)); - } - -#sidebar-first { - background: $sidebar_first_bg; - @include background-image(linear-gradient(left, #aeaeae, white)); - } -#sidebar-second { - background: $sidebar_second_bg; - - @include background-image(linear-gradient(left, white, #aeaeae)); - } -#navigation { - background: $navigation_bg; - @include background-image(linear-gradient(#aeaeae, white)); - } -#main { - @include background-image(radial-gradient(50% 50%, #aeaeae 0px, #fff 300px)) -} -body { - @include background-image(radial-gradient(50% 50%, #aeaeae 0px, #fff 700px)) -} - -/* Font styles. */ -body { - margin: 0; - - /* Setting up font size, leading and font family - http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography */ - font: 13px / 1.5em $main_font; - letter-spacing: 0.03em; - } - -/* Links */ -a { - &:link, &:visited { - color: $link_color; - text-decoration: none; - } - } -a { - &:hover, &:active { - color: $activelink_color; - text-decoration: underline; - } - } - -/* Titles. */ -#site-name { - font-size: 2.2em; - line-height: 1.3em; - font-weight: 300; - padding: 0 0 0.5em; - margin: 0; - } -h1, h2, h3, h4, h5, h6 { - line-height: 1.3em; - } - -h1 { - font-size: 2.2em; - font-weight: 300; - padding: 0 0 0.5em; - margin: 0; - } - -h2 { - font-size: 1.8em; - font-weight: 300; - margin-bottom: 0.75em; - } - -h3 { - font-size: 1.4em; - margin-bottom: 1em; - } - -h4 { - font-size: 1.2em; - margin-bottom: 0.8em; - } - -h5 { - font-size: 1.1em; - font-weight: 600; - margin-bottom: 0; - } -h6 { - font-size: 1em; - font-weight: bold; - } -/* Paragraph styles. */ -p { - margin: 0 0 1em 0; - } - -/* List styles. */ -ul, ol { - margin-left: 0; - padding-left: 2em; - } - -/* Table styles.*/ -table { - width: 99%; - } - -tr.even, -tr.odd { - td { - padding: 10px 5px; - } - } - -tr.odd { - background-color: white; - } - -/* Code. */ -pre, code, tt { - font: 1em "andale mono", "lucida console", monospace; - line-height: 1.5; - } - -pre { - background-color: #efefef; - display: block; - padding: 5px; - margin: 5px 0; - border: 1px solid #aaa; - } -/* List styles. */ -ul { - list-style-type: disc; - ul { - list-style-type: circle; - ul { - list-style-type: square; - ul { - list-style-type: circle; - } - } - } - } -ol { - list-style-type: decimal; - ol { - list-style-type: lower-alpha; - ol { - list-style-type: decimal; - } - } - } -/* Abbreviation. */ -abbr { - border-bottom: 1px dotted #666; - cursor: help; - white-space: nowrap; - } -/* UI improvments. */ -#edit-title { - font-size: 24px; - width: 99%; - } - -#system-themes-form img { - width: 100px; - } - -.form-item .description { - font-style: italic; - line-height: 1.2em; - font-size: 0.8em; - margin-top: 5px; - color: #777; - } - -#edit-delete { - color: #c00; - } - -/* Console, style from slate theme. */ -div.messages { - padding: 9px; - margin: 1em 0; - color: #036; - background: #bdf; - border: 1px solid #ace; - } -div.warning { - color: #840; - background: #fe6; - border-color: #ed5; - } - -div.error { - color: white; - background: #e63; - border-color: #d52; - } - -div.status { - color: #360; - background: #cf8; - border-color: #bbee77; - } - +//////////////////////////////////////////////////////////////////////////////// +// Page Styling +// -------------------- +// This file combines all partials into one main style sheet, to be loaded on +// all pages. +//////////////////////////////////////////////////////////////////////////////// + +@import "base"; // Imports default variables and mixins. +@import "defaults"; // Establishes general rules and browser resets. +@import "layout"; // Defines positioning of major page elements. +@import "custom"; // Defines custom styles. +@import "mobile"; // Defines styles for mobile browsers. +@import "print"; // Defines styles for printing. +@import "ie7"; // Fiexes to support IE7. +@import "ie6"; // Fiexes to support IE6. diff --git a/sass/tabs.scss b/sass/tabs.scss index cc3ba02e150dd859920d0d2632ef8e77cc2c7654..96be4a671dcf8a29f09bf70a7f268f4164314469 100644 --- a/sass/tabs.scss +++ b/sass/tabs.scss @@ -8,11 +8,11 @@ div.tabs { margin: 0 0 5px 0; - } +} ul.primary, ul.secondary { width: 99%; - } +} ul.primary { margin: 0; @@ -34,9 +34,9 @@ ul.primary { background: url(../images/tabs/tab-left.png) no-repeat left 0; .tab { background: url(../images/tabs/tab-right.png) no-repeat right 0; - } } } + } a { display: block; height: 24px; @@ -54,8 +54,8 @@ ul.primary { background: url(../images/tabs/tab-left.png) no-repeat left -76px; .tab { background: url(../images/tabs/tab-right.png) no-repeat right -76px; - } } + } .tab { display: block; height: 20px; @@ -64,10 +64,10 @@ ul.primary { border-width: 0; line-height: 20px; background: url(../images/tabs/tab-right.png) no-repeat right -38px; - } } } } +} ul.secondary { margin: 0; @@ -81,7 +81,7 @@ ul.secondary { margin: 0 5px 0 0; padding: 5px 0; border-right: none; - } + } a { display: block; height: 24px; @@ -95,16 +95,16 @@ ul.secondary { border: 1px solid silver; color: black; background: url(../images/tabs/tab-secondary.png) repeat-x left top; - } + } &:hover { background: url(../images/tabs/tab-secondary.png) repeat-x left bottom; - } + } .tab { display: block; height: 18px; margin: 0; padding: 3px 8px; line-height: 18px; - } } - } \ No newline at end of file + } +} \ No newline at end of file