├── README.markdown
├── config.rb
├── css
├── forms.css
├── ie.css
├── layout.css
├── print.css
├── style.css
└── tabs.css
├── dgd7.info
├── images
├── apple-touch-icon.png
├── dgd7-cover.jpg
├── sprite.png
├── sprite
│ ├── check-lrg.png
│ ├── comment.png
│ ├── down.png
│ ├── druplicon.png
│ ├── home.png
│ ├── left.png
│ ├── link.png
│ ├── locked.png
│ ├── logo.mobile.png
│ ├── logo.png
│ ├── minus.png
│ ├── page.png
│ ├── plus.png
│ ├── popout.png
│ ├── printer.png
│ ├── reference.css
│ ├── right.png
│ ├── search.png
│ ├── up.png
│ ├── user.png
│ ├── warning-lrg.png
│ ├── x-lrg.png
│ └── x.png
└── throbber.gif
├── sass
├── forms.scss
├── ie.scss
├── layout.scss
├── print.scss
├── style.scss
└── tabs.scss
├── screenshot.png
├── template.php
└── templates
├── book-export-html.tpl.php
├── book-navigation.tpl.php
├── comment-wrapper.tpl.php
├── comment.tpl.php
├── field.tpl.php
├── html.tpl.php
├── node--book--compact.tpl.php
├── node--profile--compact.tpl.php
├── node.tpl.php
├── page.tpl.php
├── user-picture.tpl.php
└── views-view-list.tpl.php
/README.markdown:
--------------------------------------------------------------------------------
1 | # What's here?
2 |
3 | This theme was created to accompany the theming chapters (15 and 16) in
4 | [The Definitive Guide to Drupal 7](http://definitivedrupal.org). It's currently running on http://definitivedrupal.org and includes examples of:
5 |
6 | * General setup and customized Global Theme Settings (see pages 275-281).
7 | * Custom region implementation (see pages 282-292).
8 | * Template file overrides (see pages 293-301).
9 | * Theme function overrides (see pages 301-304).
10 | * Theme hook suggestions implementations (304-310).
11 | * Preprocess and process function implementations (see pages 313-321).
12 | * Alter hook implementations (see pages 321-327).
13 | * render(), hide(), and show() (see pages 327-329).
14 | * Advanced loading and removal of Stylesheets (see 341-347).
15 |
16 | You can purchase the book, which contains **way** more than a couple of chapters on theme development here: http://definitivedrupal.org/purchase. It's over 1,000 pages, was written by lots of Drupal rockstars, and covers so many aspects of Drupal 7 development.
17 |
18 | # Disclaimers
19 |
20 | ## I am NOT a web designer
21 |
22 | This is probably really obvious from viewing the site. This theme was created with 3 goals in mind:
23 |
24 | 1. Illustrate as many useful theming examples as possible.
25 | 2. Make it look decent.
26 | 3. Have fun with CSS3 and not care at all about older browsers.
27 |
28 | It's not perfect, and doesn't claim to be, but if you are trying to learn Drupal 7 theming in more detail, it should be helpful.
29 |
30 | ## Sass/Compass
31 |
32 | The CSS in this theme was written using Sass and Compass. The source is located in the "sass" directory and is ultimately complied into the "css" directory. In this case, existing code was quickly converted to Compass syntax, because I hate writing CSS3 without it and it's got lots of awesome utilities that make it a lot easier and faster to write CSS in general. Unfortunately, the time that I can spend on this has run out, but if I were to continue working on this theme (or had used SASS from the start), I would have made partials, mixins, sprites and more variables.
33 |
34 | To learn more about using SASS and Compass + Drupal, I highly recommend checking out all of the following resources:
35 |
36 | * [Sass](http://sass-lang.com)
37 | * [Compass](http://compass-style.org)
38 | * [The Sass Way](http://thesassway.com)
39 | * [The Coding Designer's Survival Kit](http://thecodingdesigner.com)
40 | * [The Coding Designer's Survival Kit (Drupal project)](http://drupal.org/project/survivalkit)
41 |
42 | ## Mobile Friendliness
43 |
44 | While this theme contains media queries that manipulate the layout so that it is easier to read on small screens, it's by no means meant to be an example of how to create a complete and robust mobile experience or responsive design and doesn't work where media queries are not supported. It's just a quick attempt to make it more mobile friendly as others have done: http://bit.ly/n3kqsJ.
45 |
46 | To learn more about making mobile friendly and responsive websites, here are some good resources and some code:
47 |
48 | * [Responsive Web Design (article)](http://www.alistapart.com/articles/responsive-web-design/)
49 | * [Responsive Web Design (book)](http://www.abookapart.com/products/responsive-web-design)
50 | * [HTML5 Mobile Boilerplate](http://html5boilerplate.com/mobile/)
51 | * [css3-mediaqueries.js](http://code.google.com/p/css3-mediaqueries-js/)
52 | * [respond.js](https://github.com/scottjehl/Respond)
53 | * [Responsive Images](https://github.com/filamentgroup/Responsive-Images)
54 |
55 | # More documentation
56 |
57 | There are many resources available, some of which are linked throughout the code comments and in this file. There's also plenty of official documentation on http://drupal.org:
58 |
59 | * [Theming Guide](http://drupal.org/theme-guide/6-7)
60 | * [Drupal API Documentation](http://api.drupal.org)
61 | * [A log of changes from Drupal 6 to Drupal 7](http://drupal.org/update/themes/6/7)
62 |
63 | # Tools
64 |
65 | Below is a collection of the tools/apps that I use on a daily basis and find invaluable. Maybe you will too.
66 |
67 | ## General
68 |
69 | * This theme was partially written in [TextMate](http://macromates.com) and [Espresso](http://macrabbit.com/espresso/) on Mac OS X.
70 | * I use [Google Chrome](http://www.google.com/chrome) for development.
71 | * I use [LiveReload](http://livereload.com) to automatically refresh my browser windows while I code.
72 | * I use [MAMP](http://www.mamp.info) for my local development environment.
73 | * I use [xDebug](http://xdebug.org) which gives very helpful stack traces when an error occurs.
74 | * I use [VMware Fusion](http://www.vmware.com/products/fusion/overview.html) and 3 virtual machines for cross-browser testing.
75 | * I use [VirtualHostX](http://clickontyler.com/virtualhostx) to easily setup local sites.
76 | * I use [Tower](http://www.git-tower.com) for version control.
77 | * I use [Colloquy](http://colloquy.info) to hang out and chat with other developers and frequent #drupal, #drupal-contribute, #drupal-html5 and #html5 on [IRC](http://drupal.org/irc).
78 |
79 | ## Drupal-specific
80 |
81 | * I use [Devel](http://drupal.org/project/devel) religiously while theming to print the contents of arrays/objects using dpm()
.
82 | * I use [Drush](http://drupal.org/project/drush) constantly during development (especially to clear the cache).
83 | * I use the [Design test](http://drupal.org/project/design) and [Style Guide](http://drupal.org/project/styleguide) modules which contain test pages with lots of different output to help ensure that I don't miss styling anything important when creating themes.
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | # Require any additional compass plugins here.
2 |
3 | # Set this to the root of your project when deployed:
4 | http_path = "/"
5 | css_dir = "css"
6 | sass_dir = "sass"
7 | images_dir = "images"
8 | javascripts_dir = "js"
9 |
10 | # You can select your preferred output style here (can be overridden via the command line):
11 | # output_style = :expanded or :nested or :compact or :compressed
12 |
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 |
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | line_comments = false
18 |
19 |
20 | # If you prefer the indented syntax, you might want to regenerate this
21 | # project again passing --syntax sass, or you can uncomment this:
22 | # preferred_syntax = :sass
23 | # and then run:
24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
25 |
--------------------------------------------------------------------------------
/css/forms.css:
--------------------------------------------------------------------------------
1 | /* This CSS was written using SASS and Compass.
2 | * @see http://compass-style.org/
3 | -----------------------------------------------------------------------------*/
4 | /* HTML5 Boilerplate goodies.
5 | * @see https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L132
6 | -----------------------------------------------------------------------------*/
7 | form {
8 | clear: both;
9 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
10 | margin: 0;
11 | }
12 |
13 | fieldset {
14 | border: solid 1px #ddd;
15 | padding: 1em;
16 | margin: 0 0 1em 0;
17 | }
18 |
19 | label {
20 | cursor: pointer;
21 | display: block;
22 | font-weight: bold;
23 | line-height: 2;
24 | }
25 | label.option {
26 | font-weight: normal;
27 | display: inline;
28 | }
29 |
30 | legend {
31 | border: 0;
32 | font-weight: bold;
33 | *margin-left: -7px;
34 | padding: 0;
35 | }
36 |
37 | button,
38 | input,
39 | select,
40 | textarea {
41 | font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
42 | font-size: 100%;
43 | margin: 0;
44 | vertical-align: baseline;
45 | *vertical-align: middle;
46 | }
47 |
48 | button,
49 | input {
50 | line-height: normal;
51 | *overflow: visible;
52 | }
53 |
54 | table button,
55 | table input {
56 | *overflow: auto;
57 | }
58 | table button .form-item,
59 | table input .form-item {
60 | margin: 0;
61 | }
62 |
63 | button,
64 | input[type="button"],
65 | input[type="reset"],
66 | input[type="submit"] {
67 | cursor: pointer;
68 | -webkit-appearance: button;
69 | }
70 |
71 | input[type="checkbox"],
72 | input[type="radio"] {
73 | box-sizing: border-box;
74 | padding: 0;
75 | }
76 |
77 | input[type="search"] {
78 | -webkit-appearance: textfield;
79 | -moz-box-sizing: content-box;
80 | -webkit-box-sizing: content-box;
81 | -ms-box-sizing: content-box;
82 | box-sizing: content-box;
83 | }
84 |
85 | input[type="search"]::-webkit-search-decoration {
86 | -webkit-appearance: none;
87 | }
88 |
89 | button::-moz-focus-inner,
90 | input::-moz-focus-inner {
91 | border: 0;
92 | padding: 0;
93 | }
94 |
95 | textarea {
96 | overflow: auto;
97 | vertical-align: top;
98 | resize: vertical;
99 | }
100 |
101 | input:invalid,
102 | textarea:invalid {
103 | background-color: #f0dddd;
104 | }
105 |
106 | /* Wrappers
107 | ------------------------------------------------------------------------------*/
108 | .form-item {
109 | margin: 0 0 20px 0;
110 | }
111 | .form-item .form-item {
112 | margin: 0 0 4px 0;
113 | }
114 |
115 | .form-actions {
116 | padding-top: 1em;
117 | }
118 |
119 | .container-inline .form-item {
120 | margin-right: 1em;
121 | }
122 |
123 | textarea,
124 | input:not([type="submit"]) {
125 | border: solid 1px #ddd;
126 | padding: 6px;
127 | -moz-border-radius: 4px;
128 | -webkit-border-radius: 4px;
129 | -o-border-radius: 4px;
130 | -ms-border-radius: 4px;
131 | -khtml-border-radius: 4px;
132 | border-radius: 4px;
133 | }
134 |
135 | textarea:focus,
136 | input:not([type="submit"]):focus {
137 | background-color: #eee;
138 | }
139 |
140 | input[size="60"] {
141 | max-width: 100%;
142 | -moz-box-sizing: border-box;
143 | -webkit-box-sizing: border-box;
144 | -ms-box-sizing: border-box;
145 | box-sizing: border-box;
146 | }
147 |
148 | select {
149 | border: solid 1px #ddd;
150 | }
151 |
152 | .resizable-textarea textarea {
153 | -moz-border-radius: 4px 4px 0 0;
154 | -webkit-border-radius: 4px 4px 0 0;
155 | -o-border-radius: 4px 4px 0 0;
156 | -ms-border-radius: 4px 4px 0 0;
157 | -khtml-border-radius: 4px 4px 0 0;
158 | border-radius: 4px 4px 0 0;
159 | }
160 |
161 | .filter-wrapper {
162 | padding-top: 0.5em;
163 | }
164 | .filter-wrapper .form-item {
165 | margin: 0;
166 | }
167 | .filter-wrapper ul.tips {
168 | padding: 0 0 0 20px;
169 | }
170 | .filter-wrapper ul.tips li {
171 | list-style: disc;
172 | }
173 | .filter-wrapper ul.tips code {
174 | font-size: 0.923em;
175 | }
176 |
177 | html.js input.form-autocomplete {
178 | background-image: url(../images/throbber.gif);
179 | background-position: 99% 6px;
180 | }
181 | html.js input.form-autocomplete.throbbing {
182 | background-position: 99% -17px;
183 | }
184 |
185 | button,
186 | input[type="submit"],
187 | .form-actions > a,
188 | .form-actions > a:visited {
189 | background-color: #444;
190 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #222222), color-stop(70%, #444444));
191 | background-image: -webkit-linear-gradient(top, #222222 40%, #444444 70%);
192 | background-image: -moz-linear-gradient(top, #222222 40%, #444444 70%);
193 | background-image: -o-linear-gradient(top, #222222 40%, #444444 70%);
194 | background-image: -ms-linear-gradient(top, #222222 40%, #444444 70%);
195 | background-image: linear-gradient(top, #222222 40%, #444444 70%);
196 | border: solid 1px #444;
197 | color: #fff;
198 | line-height: 2;
199 | height: 2em;
200 | padding: 0 1em;
201 | margin: 0 0.5em;
202 | vertical-align: baseline;
203 | -moz-border-radius: 4px;
204 | -webkit-border-radius: 4px;
205 | -o-border-radius: 4px;
206 | -ms-border-radius: 4px;
207 | -khtml-border-radius: 4px;
208 | border-radius: 4px;
209 | display: -moz-inline-box;
210 | -moz-box-orient: vertical;
211 | display: inline-block;
212 | vertical-align: middle;
213 | *vertical-align: auto;
214 | }
215 | button,
216 | input[type="submit"],
217 | .form-actions > a,
218 | .form-actions > a:visited {
219 | *display: inline;
220 | }
221 | button:first-child,
222 | input[type="submit"]:first-child,
223 | .form-actions > a:first-child,
224 | .form-actions > a:visited:first-child {
225 | margin-left: 0;
226 | }
227 |
228 | .form-required,
229 | .tabledrag-changed {
230 | color: #d44510;
231 | margin: 0.25em;
232 | }
233 |
234 | .description,
235 | .fieldset-description {
236 | color: #888;
237 | font-family: "Lucida Sans Unicode", "Lucida Grande", Tahoma, Verdana, sans-serif;
238 | font-style: italic;
239 | }
240 |
241 | .description {
242 | font-size: 0.923em;
243 | line-height: 1.4;
244 | padding: 0.5em 0;
245 | }
246 |
247 | div.form-item div.password-suggestions {
248 | background-color: #f8f8f8;
249 | border-color: #eee;
250 | color: #000;
251 | font-size: 1em;
252 | padding: 1em;
253 | }
254 |
255 | .outer .form-item {
256 | margin: 0;
257 | }
258 |
259 | .two-column .form-item {
260 | padding-left: 160px;
261 | position: relative;
262 | }
263 | .two-column .form-item .form-item {
264 | padding-left: 0;
265 | }
266 | .two-column .form-item .form-item label {
267 | position: relative;
268 | }
269 | .two-column .form-item label {
270 | position: absolute;
271 | left: 0;
272 | }
273 |
274 | .vertical-tabs .element-invisible {
275 | border: 0;
276 | height: 1px;
277 | margin: -1px;
278 | overflow: hidden;
279 | padding: 0;
280 | width: 1px;
281 | }
282 | .vertical-tabs .element-invisible.element-focusable:active, .vertical-tabs .element-invisible.element-focusable:focus {
283 | position: static !important;
284 | height: auto;
285 | margin: auto;
286 | overflow: visible;
287 | width: auto;
288 | }
289 |
290 | /* Lil screens
291 | -----------------------------------------------------------------------------*/
292 | @media screen and (min-width: 320px) and (max-width: 480px) {
293 | div.vertical-tabs {
294 | margin: 1em 0;
295 | }
296 | div.vertical-tabs ul.vertical-tabs-list {
297 | border-top: none;
298 | float: none;
299 | *zoom: 1;
300 | width: 100%;
301 | clear: both;
302 | margin: 0;
303 | }
304 | div.vertical-tabs ul.vertical-tabs-list:after {
305 | content: "";
306 | display: table;
307 | clear: both;
308 | }
309 | div.vertical-tabs ul.vertical-tabs-list li {
310 | border-width: 0 0 1px 0;
311 | }
312 | }
313 |
--------------------------------------------------------------------------------
/css/ie.css:
--------------------------------------------------------------------------------
1 | /*
2 | Dear old versions of IE,
3 | I'm sorry, but I don't have time for you right now.
4 | Luckily, this book is about Drupal, not cross-browser
5 | compatibility, so basically, you can suck it for once.
6 | Love,
7 | Jacine
8 | */
9 |
--------------------------------------------------------------------------------
/css/layout.css:
--------------------------------------------------------------------------------
1 | /* This CSS was written using SASS and Compass.
2 | * @see http://compass-style.org/
3 | -----------------------------------------------------------------------------*/
4 | .container {
5 | *zoom: 1;
6 | }
7 | .container:after {
8 | content: "";
9 | display: table;
10 | clear: both;
11 | }
12 | .container > :first-child {
13 | width: 90%;
14 | max-width: 1140px;
15 | margin: 0 auto;
16 | position: relative;
17 | }
18 |
19 | .column {
20 | float: left;
21 | display: inline;
22 | position: relative;
23 | }
24 |
25 | .column.main {
26 | width: 100%;
27 | }
28 |
29 | .column-first {
30 | width: 25%;
31 | left: -75%;
32 | }
33 |
34 | .column-second {
35 | float: right;
36 | width: 25%;
37 | }
38 |
39 | .sidebar-first .column.main {
40 | width: 75%;
41 | left: 25%;
42 | }
43 |
44 | .sidebar-second .column.main {
45 | width: 75%;
46 | }
47 |
48 | .two-sidebars .column.main {
49 | width: 50%;
50 | left: 25%;
51 | }
52 | .two-sidebars .column-first {
53 | left: -50%;
54 | }
55 |
56 | @media screen and (min-width: 320px) and (max-width: 480px) {
57 | .container > :first-child,
58 | .column {
59 | float: none;
60 | left: auto;
61 | right: auto;
62 | margin: 0 auto;
63 | min-width: 0;
64 | width: auto;
65 | }
66 | }
67 | @media screen and (min-width: 768px) and (max-width: 1024px) {
68 | .container {
69 | *zoom: 1;
70 | }
71 | .container:after {
72 | content: "";
73 | display: table;
74 | clear: both;
75 | }
76 | .container > :first-child {
77 | width: 100%;
78 | max-width: none;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/css/print.css:
--------------------------------------------------------------------------------
1 | /* This CSS was written using SASS and Compass.
2 | * @see http://compass-style.org/
3 | -----------------------------------------------------------------------------*/
4 | body {
5 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
6 | font-size: 11pt;
7 | line-height: 1.6;
8 | margin: 0 auto;
9 | padding: 25px 0;
10 | width: 90%;
11 | }
12 |
13 | article, aside, details, figcaption, figure, footer, header, hgroup,
14 | menu, nav, section {
15 | display: block;
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | -moz-transition-property: all;
21 | -webkit-transition-property: all;
22 | -o-transition-property: all;
23 | transition-property: all;
24 | -moz-transition-duration: 0.3s;
25 | -webkit-transition-duration: 0.3s;
26 | -o-transition-duration: 0.3s;
27 | transition-duration: 0.3s;
28 | -moz-transition-timing-function: linear;
29 | -webkit-transition-timing-function: linear;
30 | -o-transition-timing-function: linear;
31 | transition-timing-function: linear;
32 | }
33 |
34 | blockquote, p {
35 | margin: 1.5em 0;
36 | }
37 |
38 | p:first-child,
39 | p.first-child {
40 | margin-top: 0;
41 | }
42 |
43 | img {
44 | border: none;
45 | }
46 |
47 | abbr, acronym {
48 | border-bottom: 1px dotted;
49 | cursor: help;
50 | white-space: nowrap;
51 | }
52 |
53 | pre, code, kbd, samp, tt {
54 | font-family: monospace, monospace;
55 | _font-family: 'courier new', monospace;
56 | font-size: 1em;
57 | }
58 |
59 | pre {
60 | background-color: #eee;
61 | border: solid 1px #ddd;
62 | padding: 1em;
63 | white-space: pre-wrap;
64 | }
65 |
66 | blockquote {
67 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
68 | font-style: italic;
69 | }
70 |
71 | mark {
72 | font-size: 0.769em;
73 | }
74 |
75 | /* Layout
76 | -------------------------------------------------------------------------*/
77 | #toolbar,
78 | header[role="banner"],
79 | footer[role="contentinfo"],
80 | div.tabs,
81 | nav,
82 | form,
83 | .comment-form,
84 | div.sidebar,
85 | div.breadcrumb {
86 | display: none !important;
87 | }
88 |
89 | body div.column.main {
90 | display: block !important;
91 | width: 100% !important;
92 | left: 0 !important;
93 | right: auto !important;
94 | }
95 |
96 | body.toolbar-drawer {
97 | padding-top: 0 !important;
98 | }
99 |
100 | /* Headings
101 | -------------------------------------------------------------------------*/
102 | h1, h2, h3, h4, h5, h6 {
103 | font-weight: 400;
104 | line-height: 1em;
105 | padding: 0;
106 | margin: 24px 0 12px 0;
107 | }
108 |
109 | h1 {
110 | font-size: 2.153em;
111 | }
112 |
113 | h2 {
114 | font-size: 1.692em;
115 | }
116 |
117 | h3 {
118 | font-size: 1.385em;
119 | }
120 |
121 | h4 {
122 | font-size: 1.231em;
123 | }
124 |
125 | h5 {
126 | font-size: 1.077em;
127 | }
128 |
129 | h6 {
130 | font-size: 1em;
131 | }
132 |
133 | h1.book-heading {
134 | border-bottom: solid 1px #ddd;
135 | padding-bottom: 0.4em;
136 | }
137 |
138 | /* Lists
139 | -------------------------------------------------------------------------*/
140 | dl {
141 | margin: 1em 0;
142 | padding: 1em;
143 | }
144 |
145 | dt {
146 | font-size: 1.231em;
147 | }
148 |
149 | dd {
150 | margin: 0 0 0.5em 0;
151 | padding: 1em 0 1em 2em;
152 | }
153 |
154 | dd:last-child {
155 | border-bottom: 0;
156 | }
157 |
158 | dl dl {
159 | margin-left: 1em;
160 | }
161 |
162 | ul, ol {
163 | padding: 0;
164 | margin: 0 0 0 1.5em;
165 | }
166 |
167 | li {
168 | margin: 0;
169 | padding: 0;
170 | }
171 |
172 | ul.inline,
173 | .inline .content ul {
174 | display: inline;
175 | margin-left: 0;
176 | }
177 |
178 | ul.inline li,
179 | .inline .content li {
180 | display: inline;
181 | margin: 0 0.5em 0 0;
182 | }
183 |
184 | li p {
185 | margin-top: 0;
186 | }
187 |
188 | /* Tables
189 | -------------------------------------------------------------------------*/
190 | table {
191 | border: solid #e4e2e0;
192 | border-collapse: collapse;
193 | border-width: 1px 1px 0 1px;
194 | margin: 1em 0;
195 | width: 100%;
196 | }
197 |
198 | th {
199 | font-weight: 600;
200 | text-align: left;
201 | }
202 |
203 | th, td {
204 | border: solid #e4e2e0;
205 | border-width: 0 0 1px 0;
206 | padding: 0.5em;
207 | vertical-align: top;
208 | }
209 |
210 | thead th:last-child,
211 | tr td:last-child {
212 | border-right: solid 1px #e4e2e0;
213 | }
214 |
215 | table .form-item,
216 | table p {
217 | margin: 0;
218 | }
219 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /* This CSS was written using SASS and Compass.
2 | * @see http://compass-style.org/
3 | -----------------------------------------------------------------------------*/
4 | html {
5 | background-color: #ffcc00;
6 | }
7 |
8 | body {
9 | background-color: #111;
10 | color: #444;
11 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
12 | font-size: 81.3%;
13 | line-height: 1.6;
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | p {
19 | font-size: 1.077em;
20 | }
21 |
22 | a,
23 | a:visited {
24 | color: #3399cc;
25 | text-decoration: none;
26 | -moz-transition-property: none;
27 | -webkit-transition-property: none;
28 | -o-transition-property: none;
29 | transition-property: none;
30 | -moz-transition-duration: 1s;
31 | -webkit-transition-duration: 1s;
32 | -o-transition-duration: 1s;
33 | transition-duration: 1s;
34 | }
35 |
36 | a:hover {
37 | text-decoration: underline;
38 | }
39 |
40 | a:hover,
41 | a:focus,
42 | a:active {
43 | outline: none;
44 | }
45 |
46 | img {
47 | -moz-transition-property: all;
48 | -webkit-transition-property: all;
49 | -o-transition-property: all;
50 | transition-property: all;
51 | -moz-transition-duration: 0.3s;
52 | -webkit-transition-duration: 0.3s;
53 | -o-transition-duration: 0.3s;
54 | transition-duration: 0.3s;
55 | -moz-transition-timing-function: ease;
56 | -webkit-transition-timing-function: ease;
57 | -o-transition-timing-function: ease;
58 | transition-timing-function: ease;
59 | }
60 |
61 | h1, h2, h3, h4, h5, h6 {
62 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
63 | font-weight: 400;
64 | line-height: 1.1;
65 | margin: 0 0 24px 0;
66 | }
67 |
68 | h1 {
69 | font-size: 2.461em;
70 | }
71 |
72 | h2 {
73 | font-size: 1.692em;
74 | }
75 |
76 | h3 {
77 | font-size: 1.385em;
78 | }
79 |
80 | h4 {
81 | font-size: 1.231em;
82 | }
83 |
84 | h5 {
85 | font-size: 1.077em;
86 | }
87 |
88 | h6 {
89 | font-size: 1em;
90 | }
91 |
92 | h1 a, h2 a {
93 | color: #444;
94 | }
95 | h1 a:visited, h2 a:visited {
96 | color: #888;
97 | }
98 | h1 a:hover, h1 a:focus, h1 a:active, h2 a:hover, h2 a:focus, h2 a:active {
99 | color: #d44510;
100 | outline: 0;
101 | text-decoration: underline;
102 | }
103 |
104 | pre, code, kbd, samp, tt {
105 | font-family: monospace, monospace;
106 | _font-family: 'courier new', monospace;
107 | font-size: 1em;
108 | }
109 |
110 | pre {
111 | background-color: #eee;
112 | border: solid 1px #ddd;
113 | padding: 1em;
114 | white-space: pre-wrap;
115 | }
116 |
117 | blockquote {
118 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
119 | font-style: italic;
120 | }
121 |
122 | /* Tables
123 | -----------------------------------------------------------------------------*/
124 | td
125 | table {
126 | background-color: #fff;
127 | border: solid 1px #eee;
128 | border-bottom: 0;
129 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
130 | margin: 1em 0;
131 | width: 100%;
132 | }
133 |
134 | thead {
135 | background-color: #333;
136 | color: #fff;
137 | font-size: 0.923em;
138 | }
139 |
140 | tr {
141 | border-bottom: solid 1px #eee;
142 | }
143 | tr.even {
144 | background-color: #f8f8f8;
145 | }
146 |
147 | th {
148 | font-weight: normal;
149 | text-align: left;
150 | }
151 | th a {
152 | color: #ffcc00;
153 | }
154 |
155 | th, td {
156 | padding: 0.5em;
157 | vertical-align: top;
158 | }
159 |
160 | .page-title {
161 | background-color: #222;
162 | color: #fff;
163 | margin: 16px 0 0 0;
164 | padding: 0.7em;
165 | position: relative;
166 | -moz-border-radius: 10px 10px 0 0;
167 | -webkit-border-radius: 10px 10px 0 0;
168 | -o-border-radius: 10px 10px 0 0;
169 | -ms-border-radius: 10px 10px 0 0;
170 | -khtml-border-radius: 10px 10px 0 0;
171 | border-radius: 10px 10px 0 0;
172 | }
173 |
174 | .region-content {
175 | background-color: #fff;
176 | color: #444;
177 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
178 | padding: 20px;
179 | margin: 0 0 16px 0;
180 | -moz-border-radius: 0 0 10px 10px;
181 | -webkit-border-radius: 0 0 10px 10px;
182 | -o-border-radius: 0 0 10px 10px;
183 | -ms-border-radius: 0 0 10px 10px;
184 | -khtml-border-radius: 0 0 10px 10px;
185 | border-radius: 0 0 10px 10px;
186 | }
187 | .region-content .block {
188 | background-color: #fff;
189 | }
190 |
191 | .no-title .region-content {
192 | -moz-border-radius: 10px;
193 | -webkit-border-radius: 10px;
194 | -o-border-radius: 10px;
195 | -ms-border-radius: 10px;
196 | -khtml-border-radius: 10px;
197 | border-radius: 10px;
198 | }
199 |
200 | /* Lists
201 | -----------------------------------------------------------------------------*/
202 | ol, ul, li {
203 | margin: 0;
204 | padding: 0;
205 | list-style: none;
206 | }
207 |
208 | li.row {
209 | list-style: none;
210 | margin: 0 0 45px 0;
211 | padding: 0;
212 | }
213 |
214 | .content ul,
215 | .content ol {
216 | margin: 1em 0;
217 | padding: 0;
218 | }
219 | .content ul li,
220 | .content ol li {
221 | list-style: disc;
222 | margin: 0 0 5px 30px;
223 | padding: 0;
224 | }
225 |
226 | dt {
227 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
228 | font-size: 1.231em;
229 | }
230 |
231 | dd {
232 | margin: 1em;
233 | }
234 |
235 | .feed-icon {
236 | position: absolute;
237 | top: 1em;
238 | right: 1em;
239 | }
240 |
241 | /* Fields
242 | -----------------------------------------------------------------------------*/
243 | .views-field-title {
244 | font-size: 1.231em;
245 | }
246 | .views-field-title a {
247 | color: #676;
248 | }
249 |
250 | div[class^=field-] {
251 | margin-top: 20px;
252 | padding: 0;
253 | }
254 | div[class^=field-] h2, div[class^=field-] h3 {
255 | margin-bottom: 6px;
256 | text-shadow: 1px 1px 1px #fff;
257 | }
258 |
259 | div.field-tags ul {
260 | display: inline;
261 | margin-left: 0;
262 | }
263 | div.field-tags ul li {
264 | display: inline;
265 | padding-left: 0;
266 | margin-right: 5px;
267 | }
268 |
269 | /* Breadcrumbs
270 | -----------------------------------------------------------------------------*/
271 | .breadcrumb-wrapper {
272 | color: #000;
273 | float: left;
274 | text-transform: lowercase;
275 | width: 75%;
276 | }
277 | .breadcrumb-wrapper .breadcrumb {
278 | padding: 1em;
279 | }
280 | .breadcrumb-wrapper a:first-child {
281 | background: transparent url("../images/sprite.png") no-repeat 0 -472px;
282 | display: inline-block;
283 | height: 16px;
284 | margin-left: 0;
285 | text-indent: -999em;
286 | width: 16px;
287 | }
288 | .breadcrumb-wrapper a,
289 | .breadcrumb-wrapper a:visited {
290 | color: #444;
291 | margin: 0 0.25em;
292 | }
293 |
294 | /* Link lists
295 | -----------------------------------------------------------------------------*/
296 | .inline {
297 | margin-top: 20px;
298 | }
299 | .inline.links {
300 | display: block;
301 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
302 | text-align: right;
303 | }
304 | .inline li {
305 | list-style-type: none;
306 | padding: 0 0.5em;
307 | vertical-align: middle;
308 | display: -moz-inline-box;
309 | -moz-box-orient: vertical;
310 | display: inline-block;
311 | vertical-align: middle;
312 | *vertical-align: auto;
313 | }
314 | .inline li {
315 | *display: inline;
316 | }
317 | .inline li.first {
318 | padding-left: 0;
319 | }
320 | .inline li.last {
321 | padding-right: 0;
322 | }
323 |
324 | /* Blocks
325 | -----------------------------------------------------------------------------*/
326 | .block {
327 | padding: 0;
328 | margin-bottom: 1em;
329 | }
330 | .block .content {
331 | padding: 1em;
332 | }
333 |
334 | .main .region {
335 | background-color: #fff;
336 | color: #444;
337 | }
338 | .main .block {
339 | margin: 0;
340 | }
341 | .main .content {
342 | padding: 20px 20px 0 20px;
343 | }
344 | .main p:only-child {
345 | margin: 0;
346 | }
347 |
348 | /* Nodes
349 | -----------------------------------------------------------------------------*/
350 | .node {
351 | position: relative;
352 | margin-bottom: 3em;
353 | }
354 | .node .username {
355 | background: transparent url("../images/sprite.png") no-repeat -396px -348px;
356 | padding-left: 20px;
357 | font-size: 1.077em;
358 | }
359 | .node .username:hover, .node .username:focus, .node .username:active {
360 | background-image: url("../images/16-39c.png");
361 | color: #444;
362 | }
363 | .node .content {
364 | margin-top: 1em;
365 | padding: 1em 0;
366 | }
367 | .node .content ul.links {
368 | display: block;
369 | text-align: right;
370 | }
371 | .node .content ul.links a {
372 | color: #666;
373 | }
374 | .node img {
375 | display: block;
376 | margin-top: 1em;
377 | margin-bottom: 1em;
378 | }
379 | .node .icon {
380 | background: transparent url(../images/sprite.png) no-repeat 0 -2000px;
381 | display: inline-block;
382 | height: 1.6em;
383 | vertical-align: middle;
384 | width: 20px;
385 | }
386 | .node .icon:focus, .node .icon:hover {
387 | background-color: url("../images/16-39c.png");
388 | }
389 |
390 | .node-teaser .content {
391 | border-bottom: solid 1px #eee;
392 | }
393 |
394 | .node-title {
395 | margin-bottom: 10px;
396 | }
397 |
398 | .submitted {
399 | color: #666;
400 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
401 | margin-bottom: 1em;
402 | }
403 |
404 | .node-readmore .icon {
405 | background-position: -348px -696px;
406 | }
407 |
408 | .comment-add .icon {
409 | background-position: 0 -124px;
410 | }
411 |
412 | .book-add-child .icon {
413 | background-position: 0 -1587px;
414 | }
415 |
416 | .book-printer .icon {
417 | background-position: 0 -1819px;
418 | }
419 |
420 | /* Book navigation
421 | -----------------------------------------------------------------------------*/
422 | .book-navigation .menu {
423 | border-color: #eee;
424 | }
425 | .book-navigation .menu li {
426 | list-style: disc;
427 | }
428 | .book-navigation .page-links {
429 | background-color: #f8f8f8;
430 | border: solid 1px #eee;
431 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
432 | font-size: 0.923em;
433 | margin: 1em 0 0 0;
434 | padding: 0.5em;
435 | position: relative;
436 | -moz-border-radius: 4px;
437 | -webkit-border-radius: 4px;
438 | -o-border-radius: 4px;
439 | -ms-border-radius: 4px;
440 | -khtml-border-radius: 4px;
441 | border-radius: 4px;
442 | *zoom: 1;
443 | }
444 | .book-navigation .page-links:after {
445 | content: "";
446 | display: table;
447 | clear: both;
448 | }
449 | .book-navigation .page-links .icon {
450 | display: -moz-inline-box;
451 | -moz-box-orient: vertical;
452 | display: inline-block;
453 | vertical-align: middle;
454 | *vertical-align: auto;
455 | background-position: -216px -1583px;
456 | float: right;
457 | height: 16px;
458 | width: 16px;
459 | }
460 | .book-navigation .page-links .icon {
461 | *display: inline;
462 | }
463 | .book-navigation .page-links li {
464 | margin: 0;
465 | padding: 0;
466 | }
467 | .book-navigation .page-links a {
468 | padding-left: 20px;
469 | vertical-align: middle;
470 | display: -moz-inline-box;
471 | -moz-box-orient: vertical;
472 | display: inline-block;
473 | vertical-align: middle;
474 | *vertical-align: auto;
475 | }
476 | .book-navigation .page-links a {
477 | *display: inline;
478 | }
479 | .book-navigation .page-links a:hover, .book-navigation .page-links a:active, .book-navigation .page-links a:focus {
480 | color: #3399cc;
481 | text-decoration: none;
482 | }
483 |
484 | /* Skip link
485 | ------------------------------------------------------------------------------*/
486 | #skip-link {
487 | text-align: center;
488 | }
489 |
490 | #skip-link a {
491 | background: #ffcc00;
492 | color: #000;
493 | padding: 0.7em 1em;
494 | display: -moz-inline-box;
495 | -moz-box-orient: vertical;
496 | display: inline-block;
497 | vertical-align: middle;
498 | *vertical-align: auto;
499 | -moz-border-radius: 0 0 8px 8px;
500 | -webkit-border-radius: 0 0 8px 8px;
501 | -o-border-radius: 0 0 8px 8px;
502 | -ms-border-radius: 0 0 8px 8px;
503 | -khtml-border-radius: 0 0 8px 8px;
504 | border-radius: 0 0 8px 8px;
505 | }
506 | #skip-link a {
507 | *display: inline;
508 | }
509 |
510 | /* Navigation
511 | -----------------------------------------------------------------------------*/
512 | nav[role=navigation] {
513 | background: #ffcc00;
514 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(42%, #ffcc00), color-stop(71%, #e8bb09));
515 | background-image: -webkit-linear-gradient(top, #ffcc00 42%, #e8bb09 71%);
516 | background-image: -moz-linear-gradient(top, #ffcc00 42%, #e8bb09 71%);
517 | background-image: -o-linear-gradient(top, #ffcc00 42%, #e8bb09 71%);
518 | background-image: -ms-linear-gradient(top, #ffcc00 42%, #e8bb09 71%);
519 | background-image: linear-gradient(top, #ffcc00 42%, #e8bb09 71%);
520 | padding: 0;
521 | text-align: center;
522 | }
523 |
524 | .region-navigation .block {
525 | margin: 0;
526 | padding: 0;
527 | }
528 | .region-navigation h2.block-title {
529 | clip: rect(1px 1px 1px 1px);
530 | clip: rect(1px, 1px, 1px, 1px);
531 | position: absolute !important;
532 | }
533 | .region-navigation .content {
534 | margin: 0;
535 | padding: 0;
536 | }
537 | .region-navigation .content ul {
538 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
539 | font-size: 1.385em;
540 | padding: 0.5em 0;
541 | margin: 0;
542 | vertical-align: middle;
543 | display: -moz-inline-box;
544 | -moz-box-orient: vertical;
545 | display: inline-block;
546 | vertical-align: middle;
547 | *vertical-align: auto;
548 | }
549 | .region-navigation .content ul {
550 | *display: inline;
551 | }
552 | .region-navigation .content ul li {
553 | display: inline;
554 | float: left;
555 | position: relative;
556 | margin: 0 1em 0 0;
557 | }
558 | .region-navigation .content a {
559 | color: #000;
560 | padding: 0.35em 0.8em;
561 | vertical-align: middle;
562 | white-space: nowrap;
563 | display: -moz-inline-box;
564 | -moz-box-orient: vertical;
565 | display: inline-block;
566 | vertical-align: middle;
567 | *vertical-align: auto;
568 | -moz-border-radius: 10px;
569 | -webkit-border-radius: 10px;
570 | -o-border-radius: 10px;
571 | -ms-border-radius: 10px;
572 | -khtml-border-radius: 10px;
573 | border-radius: 10px;
574 | }
575 | .region-navigation .content a {
576 | *display: inline;
577 | }
578 | .region-navigation .content a:hover, .region-navigation .content a:focus
579 | .region-navigation .content a.active {
580 | background-color: #222;
581 | color: #fff;
582 | text-decoration: none;
583 | }
584 |
585 | /* Messages & Markers
586 | -----------------------------------------------------------------------------*/
587 | .messages {
588 | background-color: #fff;
589 | color: #000;
590 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
591 | }
592 | .messages .content {
593 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f5f5f5), color-stop(70%, #ffffff));
594 | background-image: -webkit-linear-gradient(top, #f5f5f5 40%, #ffffff 70%);
595 | background-image: -moz-linear-gradient(top, #f5f5f5 40%, #ffffff 70%);
596 | background-image: -o-linear-gradient(top, #f5f5f5 40%, #ffffff 70%);
597 | background-image: -ms-linear-gradient(top, #f5f5f5 40%, #ffffff 70%);
598 | background-image: linear-gradient(top, #f5f5f5 40%, #ffffff 70%);
599 | border-top: solid 1px #777;
600 | border-bottom: solid 1px #ddd;
601 | color: #000;
602 | font-size: 1.077em;
603 | margin: 0;
604 | padding: 1em 1em 0.8em 1em;
605 | }
606 | .messages p:first-child {
607 | margin-top: 0;
608 | }
609 |
610 | .message-title {
611 | padding: 0.4em;
612 | margin: 0;
613 | }
614 | .message-title .icon {
615 | background: url(../images/sprite.png) no-repeat 0 0;
616 | display: block;
617 | float: left;
618 | height: 24px;
619 | margin-right: 0.5em;
620 | width: 24px;
621 | }
622 |
623 | .status {
624 | background: #248625;
625 | color: #fff;
626 | }
627 |
628 | .warning {
629 | background: #ffcc00;
630 | }
631 | .warning .icon {
632 | background-position: -396px -464px;
633 | }
634 |
635 | .error {
636 | background-color: #a80f08;
637 | color: #fff;
638 | }
639 | .error .icon {
640 | background-position: -396px -720px;
641 | }
642 |
643 | span.marker {
644 | background-color: #d44510;
645 | color: #fff;
646 | float: left;
647 | line-height: 1.3;
648 | padding: 0 0.3em;
649 | margin-right: 0.4em;
650 | display: -moz-inline-box;
651 | -moz-box-orient: vertical;
652 | display: inline-block;
653 | vertical-align: middle;
654 | *vertical-align: auto;
655 | -moz-border-radius: 4px;
656 | -webkit-border-radius: 4px;
657 | -o-border-radius: 4px;
658 | -ms-border-radius: 4px;
659 | -khtml-border-radius: 4px;
660 | border-radius: 4px;
661 | }
662 | span.marker {
663 | *display: inline;
664 | }
665 |
666 | /* Action links
667 | -----------------------------------------------------------------------------*/
668 | .action-links {
669 | background-color: #fff;
670 | padding: 1em 0;
671 | }
672 | .action-links li {
673 | padding: 0 1em;
674 | position: relative;
675 | display: -moz-inline-box;
676 | -moz-box-orient: vertical;
677 | display: inline-block;
678 | vertical-align: middle;
679 | *vertical-align: auto;
680 | }
681 | .action-links li {
682 | *display: inline;
683 | }
684 | .action-links a {
685 | display: -moz-inline-box;
686 | -moz-box-orient: vertical;
687 | display: inline-block;
688 | vertical-align: middle;
689 | *vertical-align: auto;
690 | }
691 | .action-links a {
692 | *display: inline;
693 | }
694 | .action-links a:hover {
695 | text-decoration: none;
696 | color: #000;
697 | }
698 | .action-links .icon {
699 | background: transparent url(../images/sprite.png) no-repeat 0 -1587px;
700 | height: 16px;
701 | width: 20px;
702 | display: -moz-inline-box;
703 | -moz-box-orient: vertical;
704 | display: inline-block;
705 | vertical-align: middle;
706 | *vertical-align: auto;
707 | }
708 | .action-links .icon {
709 | *display: inline;
710 | }
711 | .action-links a:hover .icon,
712 | .action-links a:focus .icon {
713 | background-image: url(../images/sprite.png);
714 | }
715 |
716 | /* Pagers
717 | -----------------------------------------------------------------------------*/
718 | ul.pager {
719 | display: block;
720 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
721 | margin: 1.5em 0 1em 0;
722 | text-align: right;
723 | }
724 | ul.pager li {
725 | margin: 0.5em 0.2em 0 0;
726 | display: -moz-inline-box;
727 | -moz-box-orient: vertical;
728 | display: inline-block;
729 | vertical-align: middle;
730 | *vertical-align: auto;
731 | }
732 | ul.pager li {
733 | *display: inline;
734 | }
735 | ul.pager a,
736 | ul.pager .pager-current {
737 | background-color: #eee;
738 | padding: 0.2em 0.8em;
739 | display: -moz-inline-box;
740 | -moz-box-orient: vertical;
741 | display: inline-block;
742 | vertical-align: middle;
743 | *vertical-align: auto;
744 | -moz-border-radius: 3px;
745 | -webkit-border-radius: 3px;
746 | -o-border-radius: 3px;
747 | -ms-border-radius: 3px;
748 | -khtml-border-radius: 3px;
749 | border-radius: 3px;
750 | }
751 | ul.pager a,
752 | ul.pager .pager-current {
753 | *display: inline;
754 | }
755 | ul.pager .pager-current {
756 | color: #000;
757 | font-weight: bold;
758 | }
759 | ul.pager a:hover,
760 | ul.pager a:active,
761 | ul.pager a:focus {
762 | background-color: #3399cc;
763 | color: #fff;
764 | text-decoration: none;
765 | }
766 |
767 | /* Comments
768 | -----------------------------------------------------------------------------*/
769 | .comment-form {
770 | background-color: #fff;
771 | padding: 0;
772 | margin: 1em 0 0 0;
773 | }
774 | .comment-form .form-item label {
775 | display: inline;
776 | }
777 |
778 | .comment-wrapper {
779 | margin-top: 40px;
780 | }
781 |
782 | .comment {
783 | border-top: solid 1px #eee;
784 | padding: 20px 0 20px 110px;
785 | position: relative;
786 | }
787 | .comment h3 {
788 | margin: 0;
789 | }
790 | .comment h3 a,
791 | .comment h3 a:visited {
792 | color: #666;
793 | }
794 | .comment .meta {
795 | margin: 8px 0;
796 | color: #666;
797 | font-size: 0.923em;
798 | }
799 | .comment .content {
800 | margin: 0;
801 | padding: 0;
802 | }
803 | .comment .user-picture {
804 | width: 110px;
805 | position: absolute;
806 | left: 0;
807 | }
808 | .comment .user-picture img {
809 | margin: 0;
810 | }
811 |
812 | /* Clearfix
813 | -----------------------------------------------------------------------------*/
814 | ul.tabs,
815 | ul.action-links,
816 | .field-item,
817 | .form-item,
818 | .item-list {
819 | *zoom: 1;
820 | }
821 | ul.tabs:after,
822 | ul.action-links:after,
823 | .field-item:after,
824 | .form-item:after,
825 | .item-list:after {
826 | content: "";
827 | display: table;
828 | clear: both;
829 | }
830 |
831 | /* Header
832 | -----------------------------------------------------------------------------*/
833 | header[role=banner] {
834 | color: #fff;
835 | padding: 1.6em 1em;
836 | position: relative;
837 | }
838 |
839 | .site-name {
840 | margin: 0;
841 | padding: 0;
842 | }
843 | .site-name a {
844 | display: block;
845 | background: transparent url(../images/sprite.png) no-repeat 0 -1141px;
846 | height: 114px;
847 | text-indent: -999em;
848 | width: 296px;
849 | }
850 |
851 | .site-slogan {
852 | font: 1.231em "Droid Serif", Georgia, Verdana, Arial, sans-serif;
853 | margin-top: 0.5em;
854 | display: -moz-inline-box;
855 | -moz-box-orient: vertical;
856 | display: inline-block;
857 | vertical-align: middle;
858 | *vertical-align: auto;
859 | }
860 | .site-slogan {
861 | *display: inline;
862 | }
863 |
864 | .region-header {
865 | margin: 0;
866 | padding: 0;
867 | position: absolute;
868 | top: 0;
869 | right: 0;
870 | min-width: 260px;
871 | max-width: 50%;
872 | }
873 | .region-header .block {
874 | margin: 0 0 1em 0;
875 | }
876 |
877 | /* Footer
878 | -----------------------------------------------------------------------------*/
879 | footer[role=contentinfo] {
880 | background: #ffcc00;
881 | color: #444;
882 | -moz-border-radius: 0 50px 0 0;
883 | -webkit-border-radius: 0 50px 0 0;
884 | -o-border-radius: 0 50px 0 0;
885 | -ms-border-radius: 0 50px 0 0;
886 | -khtml-border-radius: 0 50px 0 0;
887 | border-radius: 0 50px 0 0;
888 | }
889 | footer[role=contentinfo] a,
890 | footer[role=contentinfo] a:visited {
891 | color: #000;
892 | }
893 |
894 | .region-footer #block-system-powered-by {
895 | color: #000;
896 | float: right;
897 | margin: 0;
898 | padding: 0;
899 | min-width: 300px;
900 | text-align: right;
901 | width: 25%;
902 | }
903 | .region-footer #block-system-powered-by .content {
904 | padding: 1em 50px 1em 1em;
905 | }
906 | .region-footer #block-system-powered-by .content span {
907 | display: block;
908 | }
909 | .region-footer #block-system-powered-by .content a {
910 | background: transparent url("/misc/druplicon.png") no-repeat;
911 | display: block;
912 | float: right;
913 | height: 100px;
914 | position: relative;
915 | text-align: left;
916 | text-indent: -999em;
917 | top: -65px;
918 | width: 88px;
919 | }
920 | .region-footer .view-authors li {
921 | display: -moz-inline-box;
922 | -moz-box-orient: vertical;
923 | display: inline-block;
924 | vertical-align: middle;
925 | *vertical-align: auto;
926 | margin-right: 0.5em;
927 | margin-bottom: 0.5em;
928 | width: 180px;
929 | }
930 | .region-footer .view-authors li {
931 | *display: inline;
932 | }
933 |
934 | /* Profiles & Bios
935 | -----------------------------------------------------------------------------*/
936 | .profile h3 {
937 | border: none;
938 | }
939 | .profile .user-picture {
940 | background-color: #222;
941 | padding: 10px;
942 | -moz-border-radius: 4px;
943 | -webkit-border-radius: 4px;
944 | -o-border-radius: 4px;
945 | -ms-border-radius: 4px;
946 | -khtml-border-radius: 4px;
947 | border-radius: 4px;
948 | }
949 | .profile .user-picture .change-user-picture {
950 | display: block;
951 | }
952 |
953 | .field-image img,
954 | .node-profile img,
955 | .view-display-id-biographies img {
956 | border: solid 5px #fff;
957 | -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2);
958 | -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2);
959 | -o-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2);
960 | box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2);
961 | }
962 | .field-image a:focus img,
963 | .field-image a:hover img,
964 | .field-image img:hover,
965 | .node-profile a:focus img,
966 | .node-profile a:hover img,
967 | .node-profile img:hover,
968 | .view-display-id-biographies a:focus img,
969 | .view-display-id-biographies a:hover img,
970 | .view-display-id-biographies img:hover {
971 | border-color: #3399cc;
972 | }
973 |
974 | .view-display-id-images ul {
975 | padding: 0;
976 | margin: 50px 0;
977 | text-align: center;
978 | display: -moz-inline-box;
979 | -moz-box-orient: vertical;
980 | display: inline-block;
981 | vertical-align: middle;
982 | *vertical-align: auto;
983 | }
984 | .view-display-id-images ul {
985 | *display: inline;
986 | }
987 | .view-display-id-images li {
988 | display: -moz-inline-box;
989 | -moz-box-orient: vertical;
990 | display: inline-block;
991 | vertical-align: middle;
992 | *vertical-align: auto;
993 | margin-bottom: 24px;
994 | text-align: center;
995 | vertical-align: baseline;
996 | width: 180px;
997 | }
998 | .view-display-id-images li {
999 | *display: inline;
1000 | }
1001 | .view-display-id-images img {
1002 | border: solid 4px #eee;
1003 | border-bottom-color: #ccc;
1004 | border-right-color: #ccc;
1005 | }
1006 |
1007 | .view-display-id-biographies li {
1008 | *zoom: 1;
1009 | margin-left: 45px;
1010 | position: relative;
1011 | }
1012 | .view-display-id-biographies li:after {
1013 | content: "";
1014 | display: table;
1015 | clear: both;
1016 | }
1017 | .view-display-id-biographies img {
1018 | float: left;
1019 | margin: 0 1.231em 0 0;
1020 | }
1021 |
1022 | .node-profile.node-full img {
1023 | width: 98%;
1024 | max-width: 98%;
1025 | width: auto !important;
1026 | display: -moz-inline-box;
1027 | -moz-box-orient: vertical;
1028 | display: inline-block;
1029 | vertical-align: middle;
1030 | *vertical-align: auto;
1031 | -moz-transform: rotate(-1deg);
1032 | -webkit-transform: rotate(-1deg);
1033 | -o-transform: rotate(-1deg);
1034 | -ms-transform: rotate(-1deg);
1035 | transform: rotate(-1deg);
1036 | }
1037 | .node-profile.node-full img {
1038 | *display: inline;
1039 | }
1040 |
1041 | .node-book .field-author {
1042 | *zoom: 1;
1043 | }
1044 | .node-book .field-author:after {
1045 | content: "";
1046 | display: table;
1047 | clear: both;
1048 | }
1049 | .node-book .field-author ul li {
1050 | margin: 0 0 40px 0;
1051 | list-style: none;
1052 | *zoom: 1;
1053 | }
1054 | .node-book .field-author ul li:after {
1055 | content: "";
1056 | display: table;
1057 | clear: both;
1058 | }
1059 | .node-book .field-image {
1060 | float: left;
1061 | margin: 0 20px 0 0;
1062 | height: 100%;
1063 | width: 120px;
1064 | }
1065 | .node-book .field-image img {
1066 | margin: 0;
1067 | }
1068 | .node-book .field-do-uid {
1069 | margin-top: 8px;
1070 | }
1071 | .node-book .field-do-uid h3 {
1072 | background: url(../images/sprite.png) no-repeat 0 -356px;
1073 | height: 16px;
1074 | width: 16px;
1075 | text-indent: -999em;
1076 | display: -moz-inline-box;
1077 | -moz-box-orient: vertical;
1078 | display: inline-block;
1079 | vertical-align: middle;
1080 | *vertical-align: auto;
1081 | }
1082 | .node-book .field-do-uid h3 {
1083 | *display: inline;
1084 | }
1085 | .node-book .body {
1086 | float: left;
1087 | }
1088 |
1089 | /* Author chapters
1090 | -----------------------------------------------------------------------------*/
1091 | div.view-author-chapters h3 {
1092 | margin: 0;
1093 | }
1094 | div.view-author-chapters h3 a:link {
1095 | color: #E8BB09;
1096 | }
1097 | div.view-author-chapters h3 a:visited {
1098 | color: #ccc;
1099 | }
1100 | div.view-author-chapters li.row {
1101 | color: #ccc;
1102 | margin: 0;
1103 | list-style: disc;
1104 | }
1105 |
1106 | /* Highlighted region
1107 | -----------------------------------------------------------------------------*/
1108 | .main .region-highlight {
1109 | background: #111;
1110 | color: #fff;
1111 | max-width: 960px;
1112 | margin: 0 auto;
1113 | }
1114 | .main .region-highlight .block {
1115 | margin: 20px 0 40px 0;
1116 | }
1117 | .main .region-highlight .block .content,
1118 | .main .region-highlight .block legend {
1119 | padding: 0;
1120 | }
1121 |
1122 | #block-block-1 {
1123 | background: url(../images/dgd7-cover.jpg) no-repeat 0 45px;
1124 | color: #fff;
1125 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif;
1126 | font-size: 1.538em;
1127 | padding: 75px 0 0 290px;
1128 | min-height: 290px;
1129 | }
1130 |
1131 | /* Search box
1132 | -----------------------------------------------------------------------------*/
1133 | .region-header .block-search .content {
1134 | padding: 0;
1135 | }
1136 |
1137 | .block-search input.form-text {
1138 | padding-right: 24px;
1139 | width: 100%;
1140 | -moz-box-sizing: border-box;
1141 | -webkit-box-sizing: border-box;
1142 | -ms-box-sizing: border-box;
1143 | box-sizing: border-box;
1144 | }
1145 | .block-search input.form-submit {
1146 | background: transparent url(../images/sprite.png) no-repeat -396px -116px;
1147 | border: none;
1148 | height: 16px;
1149 | margin: -1.7em 10px 0 0;
1150 | position: absolute;
1151 | right: 0;
1152 | text-indent: -999em;
1153 | width: 20px;
1154 | z-index: 1;
1155 | }
1156 | .block-search input.form-submit:hover, .block-search input.form-submit:focus, .block-search input.form-submit:active {
1157 | border: none;
1158 | cursor: pointer;
1159 | }
1160 |
1161 | /* Sidebars
1162 | ------------------------------------------------------------------------------*/
1163 | .sidebar .region {
1164 | margin: 16px;
1165 | }
1166 | .sidebar .block {
1167 | background-color: #202020;
1168 | border: 1px solid #333;
1169 | border-color: rgba(66, 66, 66, 0.15);
1170 | padding: 1em;
1171 | -moz-border-radius: 4px;
1172 | -webkit-border-radius: 4px;
1173 | -o-border-radius: 4px;
1174 | -ms-border-radius: 4px;
1175 | -khtml-border-radius: 4px;
1176 | border-radius: 4px;
1177 | }
1178 | .sidebar .block .block-title {
1179 | color: #eee;
1180 | font-size: 1.381em;
1181 | margin-bottom: 0;
1182 | text-shadow: 1px 1px 1px #232323;
1183 | }
1184 | .sidebar .block ul.menu {
1185 | color: #333;
1186 | list-style-type: square;
1187 | margin: 1em 0;
1188 | padding: 0;
1189 | }
1190 | .sidebar .block ul.menu li {
1191 | padding: 0;
1192 | margin: 0;
1193 | }
1194 | .sidebar .block ul.menu li ul {
1195 | margin: 5px 0 5px 20px;
1196 | }
1197 | .sidebar .block ul.menu li a.active:before {
1198 | content: "\2192 \00A0";
1199 | font-size: 1.231em;
1200 | vertical-align: middle;
1201 | }
1202 | .sidebar .block a {
1203 | color: #ddd;
1204 | line-height: 1;
1205 | }
1206 | .sidebar .block .active-trail > a, .sidebar .block a.active {
1207 | color: #ffcc00;
1208 | font-weight: bold;
1209 | }
1210 |
1211 | /* Outer
1212 | ------------------------------------------------------------------------------*/
1213 | .outer {
1214 | color: #fff;
1215 | }
1216 | .outer .node .content {
1217 | border: none;
1218 | }
1219 | .outer ul.pager a,
1220 | .outer ul.pager a.active,
1221 | .outer ul.pager .pager-current {
1222 | background-color: #444;
1223 | color: #fff;
1224 | }
1225 |
1226 | /* Misc
1227 | ------------------------------------------------------------------------------*/
1228 | .left,
1229 | .right {
1230 | display: block;
1231 | margin: 2em;
1232 | }
1233 |
1234 | .left {
1235 | float: left;
1236 | margin-left: 0;
1237 | }
1238 |
1239 | .right {
1240 | float: right;
1241 | margin-right: 0;
1242 | }
1243 |
1244 | /* Lil screens
1245 | -----------------------------------------------------------------------------*/
1246 | @media screen and (min-width: 320px) and (max-width: 480px) {
1247 | .region-content {
1248 | -moz-border-radius: 0;
1249 | -webkit-border-radius: 0;
1250 | -o-border-radius: 0;
1251 | -ms-border-radius: 0;
1252 | -khtml-border-radius: 0;
1253 | border-radius: 0;
1254 | overflow-x: auto;
1255 | }
1256 | .region-content .form-item,
1257 | .region-content .form-item div {
1258 | float: none !important;
1259 | }
1260 | .region-content .container-inline .form-text,
1261 | .region-content .container-inline .form-textarea {
1262 | margin-bottom: 1em;
1263 | }
1264 |
1265 | .page-title {
1266 | -moz-border-radius: 0;
1267 | -webkit-border-radius: 0;
1268 | -o-border-radius: 0;
1269 | -ms-border-radius: 0;
1270 | -khtml-border-radius: 0;
1271 | border-radius: 0;
1272 | }
1273 |
1274 | .site-name {
1275 | height: 105px;
1276 | width: 271px;
1277 | }
1278 | .site-name a {
1279 | background: url(../images/sprite.png) no-repeat 0 -936px;
1280 | height: 105px;
1281 | width: 271px;
1282 | }
1283 |
1284 | .region-header {
1285 | position: relative;
1286 | background-color: #222;
1287 | min-width: none;
1288 | max-width: none;
1289 | margin: 1em -1em -1em;
1290 | }
1291 | .region-header .block {
1292 | margin: 0;
1293 | }
1294 | .region-header .block .form-actions,
1295 | .region-header .block .form-item input {
1296 | margin: 0;
1297 | }
1298 |
1299 | .region-navigation {
1300 | text-align: left;
1301 | padding-left: 0.2em;
1302 | }
1303 | .region-navigation .content a {
1304 | font-size: 0.846em;
1305 | }
1306 | .region-navigation .content .active a {
1307 | margin-left: 0.5em;
1308 | }
1309 | .region-navigation .content ul li {
1310 | display: block;
1311 | float: none;
1312 | margin: 0;
1313 | white-space: nowrap;
1314 | }
1315 |
1316 | .breadcrumb {
1317 | clear: both;
1318 | }
1319 |
1320 | .node .content img {
1321 | clear: both !important;
1322 | float: none;
1323 | }
1324 |
1325 | .passworrd-strength,
1326 | .password-confirm {
1327 | margin-bottom: 1em;
1328 | padding-left: 0;
1329 | }
1330 |
1331 | .password-parent {
1332 | width: auto;
1333 | }
1334 |
1335 | #block-block-1 {
1336 | background-position: 50% 100%;
1337 | font-size: 1.385em;
1338 | margin-bottom: 1em;
1339 | padding: 0 20px 300px 20px;
1340 | }
1341 | #block-block-1 .content {
1342 | padding: 1em;
1343 | }
1344 |
1345 | .two-column .form-item {
1346 | padding-left: 0;
1347 | position: relative;
1348 | }
1349 | .two-column .form-item label {
1350 | position: relative;
1351 | left: 0;
1352 | }
1353 |
1354 | #block-block-2 .fieldset-wrapper {
1355 | padding-left: 0;
1356 | }
1357 | #block-block-2 .form-text {
1358 | width: 100%;
1359 | }
1360 | }
1361 |
--------------------------------------------------------------------------------
/css/tabs.css:
--------------------------------------------------------------------------------
1 | /* This CSS was written using SASS and Compass.
2 | * @see http://compass-style.org/
3 | -----------------------------------------------------------------------------*/
4 | /* Shared
5 | -----------------------------------------------------------------------------*/
6 | div.tabs {
7 | background-color: #222;
8 | padding: 0 2em;
9 | }
10 |
11 | ul.tabs {
12 | display: block;
13 | padding: 0;
14 | margin: 0;
15 | }
16 |
17 | .tabs li {
18 | color: #fff;
19 | margin: 0 0.2em 0 0;
20 | padding: 0;
21 | display: -moz-inline-box;
22 | -moz-box-orient: vertical;
23 | display: inline-block;
24 | vertical-align: middle;
25 | *vertical-align: auto;
26 | }
27 | .tabs li {
28 | *display: inline;
29 | }
30 |
31 | .tabs a {
32 | color: #fc0;
33 | display: block;
34 | }
35 | .tabs a:focus {
36 | outline: 0;
37 | }
38 |
39 | /* Primary
40 | -----------------------------------------------------------------------------*/
41 | .primary {
42 | font-size: 1.077em;
43 | line-height: 4ex;
44 | margin-top: 1em;
45 | overflow-y: auto;
46 | height: 4ex;
47 | }
48 | .primary a {
49 | padding: 0 1em;
50 | -moz-transition-property: none;
51 | -webkit-transition-property: none;
52 | -o-transition-property: none;
53 | transition-property: none;
54 | -moz-transition-duration: 1s;
55 | -webkit-transition-duration: 1s;
56 | -o-transition-duration: 1s;
57 | transition-duration: 1s;
58 | }
59 | .primary a:hover, .primary a:focus, .primary a:active, .primary a.active {
60 | background-color: #fff;
61 | color: #000;
62 | font-weight: bold;
63 | text-decoration: none;
64 | -moz-border-radius: 6px 6px 0 0;
65 | -webkit-border-radius: 6px 6px 0 0;
66 | -o-border-radius: 6px 6px 0 0;
67 | -ms-border-radius: 6px 6px 0 0;
68 | -khtml-border-radius: 6px 6px 0 0;
69 | border-radius: 6px 6px 0 0;
70 | }
71 |
72 | /* Secondary
73 | -----------------------------------------------------------------------------*/
74 | ul.secondary {
75 | background-color: #fff;
76 | line-height: 3ex;
77 | margin: 0 -2em;
78 | padding: 1em 1em 0 1em;
79 | position: relative;
80 | }
81 |
82 | .secondary a {
83 | background-color: #f8f8f8;
84 | border: solid 1px #eee;
85 | color: #000;
86 | font-size: 0.846em;
87 | font-weight: bold;
88 | padding: 0.2em 1em;
89 | text-transform: uppercase;
90 | -moz-border-radius: 3px;
91 | -webkit-border-radius: 3px;
92 | -o-border-radius: 3px;
93 | -ms-border-radius: 3px;
94 | -khtml-border-radius: 3px;
95 | border-radius: 3px;
96 | }
97 | .secondary a:hover, .secondary a:focus, .secondary a:active, .secondary a.active {
98 | background-color: #eee;
99 | border-color: #ddd;
100 | text-decoration: none;
101 | }
102 |
103 | /* Lil screens
104 | -----------------------------------------------------------------------------*/
105 | @media screen and (min-width: 320px) and (max-width: 480px) {
106 | div.tabs {
107 | padding: 0 1em;
108 | }
109 |
110 | ul.primary {
111 | font-size: 0.846em;
112 | }
113 |
114 | .primary a {
115 | padding: 0 0.5em;
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/dgd7.info:
--------------------------------------------------------------------------------
1 | name = DGD7 Theme
2 | description = A theme written for The Definitive Guide to Drupal 7 book website.
3 | core = 7.x
4 |
5 |
6 | ; REGIONS (pg. 282-292)
7 | ;-------------------------------------------------------------------------------
8 | ; Default
9 | regions[page_top] = Page Top
10 | regions[header] = Header
11 | regions[highlight] = Highlight
12 | regions[help] = Help
13 | regions[content] = Content
14 | regions[sidebar_first] = Sidebar First
15 | regions[sidebar_second] = Sidebar Second
16 | regions[footer] = Footer
17 | regions[page_bottom] = Page Bottom
18 |
19 | ; Custom
20 | regions[banner_ad] = Banner Ad
21 | regions[navigation] = Navigation
22 |
23 |
24 | ; STYLESHEETS (pg. 341-347)
25 | ;-------------------------------------------------------------------------------
26 | ; Stylesheets handling is totally broken in .info files, so I can't recommend
27 | ; using it for most use cases:
28 | ;
29 | ; Files added here:
30 | ; - Load on every page, whether they were supposed to in the first place or not.
31 | ; - Are grouped in a separate