govuk_template 0.3.8 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +49 -12
- data/app/assets/images/apple-touch-icon-114x114.png +0 -0
- data/app/assets/images/apple-touch-icon-144x144.png +0 -0
- data/app/assets/images/apple-touch-icon-57x57.png +0 -0
- data/app/assets/images/apple-touch-icon-72x72.png +0 -0
- data/app/assets/images/gov.uk_logotype_crown.png +0 -0
- data/app/assets/images/gov.uk_logotype_crown_invert.png +0 -0
- data/app/assets/images/gov.uk_logotype_crown_invert_trans.png +0 -0
- data/app/assets/images/open-government-licence_2x.png +0 -0
- data/app/assets/images/opengraph-image.png +0 -0
- data/app/assets/javascripts/govuk-template.js +29 -0
- data/app/assets/stylesheets/govuk-template-ie6.css.erb +111 -8
- data/app/assets/stylesheets/govuk-template-ie7.css.erb +111 -8
- data/app/assets/stylesheets/govuk-template-ie8.css.erb +109 -6
- data/app/assets/stylesheets/govuk-template.css.erb +121 -6
- data/app/views/layouts/govuk_template.html.erb +3 -3
- data/lib/govuk_template/version.rb +1 -1
- metadata +4 -5
- data/app/assets/images/gov.uk_logotype-2x.png +0 -0
data/README.md
CHANGED
@@ -4,9 +4,18 @@ This provides a template containing the GOV.UK header and footer, and associated
|
|
4
4
|
|
5
5
|
This is versioned following [Semantic Versioning](http://semver.org).
|
6
6
|
|
7
|
+
## Requirements
|
8
|
+
|
9
|
+
The Ruby language (1.9.3+), the build tool [Rake](http://rake.rubyforge.org/) & the dependancy management tool [Bundler](http://bundler.io/)
|
10
|
+
|
7
11
|
## Packaging
|
8
12
|
|
9
|
-
At present this generates
|
13
|
+
At present this generates 4 output formats:
|
14
|
+
|
15
|
+
1. a gem containing a Rails engine
|
16
|
+
2. a tarball containing Play Framework templates
|
17
|
+
3. a folder containing Mustache templates
|
18
|
+
4. a tarball
|
10
19
|
|
11
20
|
### Gem version
|
12
21
|
|
@@ -22,18 +31,30 @@ You can then use the `govuk_template` layout in your app. If you need to extend
|
|
22
31
|
|
23
32
|
### Play version
|
24
33
|
|
25
|
-
To generate the tarball of Play Framework templates run `build:play
|
34
|
+
To generate the tarball of Play Framework templates run `bundle exec rake build:play`. This will produce a tarball in the `pkg` directory.
|
35
|
+
|
36
|
+
### Mustache version
|
37
|
+
|
38
|
+
To generate the folder of Mustache templates run `bundle exec rake build:mustache`. This will produce a folder in the `pkg` directory.
|
26
39
|
|
27
40
|
### Tarball version
|
28
41
|
|
29
|
-
To generate the tarball, run the `build:tar
|
42
|
+
To generate the tarball, run the `bundle exec rake build:tar`. This will produce a tarball in the `pkg` directory.
|
43
|
+
|
44
|
+
## Publishing
|
45
|
+
|
46
|
+
Accepted contributions (pull requests merged into master) will run builds for the Gem, Play and Mustache versions. These will then update the following:
|
47
|
+
|
48
|
+
* RubyGems.org
|
49
|
+
* [alphagov/govuk_template_play](https://github.com/alphagov/govuk_template_play)
|
50
|
+
* [alphagov/govuk_template_mustache](https://github.com/alphagov/govuk_template_mustache) which updates the [npm package](https://npmjs.org/package/govuk_template_mustache)
|
30
51
|
|
31
52
|
## Development
|
32
53
|
|
33
54
|
The source files are in the `/source` directory. The `compile` rake task builds the `/app` contents from these sources. This process involves the following:
|
34
55
|
|
35
|
-
* compiling all stylesheets referenced in `/manifests.yml` to plain
|
36
|
-
* combining all
|
56
|
+
* compiling all stylesheets referenced in `/manifests.yml` to plain CSS (actually css.erb, so the Rails asset pipeline can work in the gem).
|
57
|
+
* combining all JavaScript files referenced in `/manifests.yml` (using Sprockets)
|
37
58
|
* copying the images across (including any needed images from the toolkit)
|
38
59
|
|
39
60
|
This resulting app directory is included in the gem and hooked in as a Rails engine
|
@@ -42,7 +63,7 @@ This resulting app directory is included in the gem and hooked in as a Rails eng
|
|
42
63
|
|
43
64
|
The tarball build process takes the compiled template and assets from the `/app` directory, and performs some extra processing:
|
44
65
|
|
45
|
-
* it compiles the `*.css.erb` files to plain
|
66
|
+
* it compiles the `*.css.erb` files to plain CSS, replacing all calls to `asset_path` with the relative path to the asset.
|
46
67
|
For this reason, all assets referenced in the stylesheets must be stored relative to the stylesheet.
|
47
68
|
* it compiles the erb layout to plain html.
|
48
69
|
* All `asset_path` calls are replaced by the the path to the assets, assuming the assets folder is served from /assets
|
@@ -51,11 +72,27 @@ The tarball build process takes the compiled template and assets from the `/app`
|
|
51
72
|
|
52
73
|
See the `TemplateProcessor` class for details of this implementation.
|
53
74
|
|
75
|
+
## Usage
|
76
|
+
|
77
|
+
### Propositional title and navigation
|
78
|
+
|
79
|
+
You can get a propositional title and navigation by setting the content for `header_class` to `with-proposition` and `proposition_header` in the form:
|
80
|
+
|
81
|
+
<div class="header-proposition">
|
82
|
+
<div class="content">
|
83
|
+
<a href="#proposition-links" class="js-header-toggle menu">Menu</a>
|
84
|
+
<nav id="proposition-menu">
|
85
|
+
<a href="/" id="proposition-name">Service Name</a>
|
86
|
+
<ul id="proposition-links">
|
87
|
+
<li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
|
88
|
+
<li><a href="url-to-page-2">Navigation item #2</a></li>
|
89
|
+
</ul>
|
90
|
+
</nav>
|
91
|
+
</div>
|
92
|
+
</div>
|
93
|
+
|
94
|
+
This will then create a navigation block which is shown on desktop sized devices but collapsed down on smaller screens.
|
95
|
+
|
54
96
|
## Contributing
|
55
97
|
|
56
|
-
|
57
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
58
|
-
3. Commit your changes (`git commit -am 'Add some feature'`)
|
59
|
-
4. Run the tests (`bundle exec rake`)
|
60
|
-
5. Push to the branch (`git push origin my-new-feature`)
|
61
|
-
6. Create new Pull Request
|
98
|
+
Please follow the [contribution guidelines](https://github.com/alphagov/govuk_template/CONTRIBUTING.md).
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -75,6 +75,8 @@
|
|
75
75
|
};
|
76
76
|
}).call(this);
|
77
77
|
(function() {
|
78
|
+
"use strict"
|
79
|
+
|
78
80
|
// fix for printing bug in Windows Safari
|
79
81
|
var windowsSafari = (window.navigator.userAgent.match(/(\(Windows[\s\w\.]+\))[\/\(\s\w\.\,\)]+(Version\/[\d\.]+)\s(Safari\/[\d\.]+)/) !== null),
|
80
82
|
style;
|
@@ -88,9 +90,36 @@
|
|
88
90
|
document.getElementsByTagName('head')[0].appendChild(style);
|
89
91
|
}
|
90
92
|
|
93
|
+
|
94
|
+
// add cookie message
|
91
95
|
if (window.GOVUK && GOVUK.addCookieMessage) {
|
92
96
|
GOVUK.addCookieMessage();
|
93
97
|
}
|
98
|
+
|
99
|
+
// header navigation toggle
|
100
|
+
if (document.querySelectorAll){
|
101
|
+
var els = document.querySelectorAll('.js-header-toggle'),
|
102
|
+
i, _i;
|
103
|
+
for(i=0,_i=els.length; i<_i; i++){
|
104
|
+
els[i].addEventListener('click', function(e){
|
105
|
+
e.preventDefault();
|
106
|
+
var target = document.getElementById(this.getAttribute('href').substr(1)),
|
107
|
+
targetClass = target.getAttribute('class') || '',
|
108
|
+
sourceClass = this.getAttribute('class') || '';
|
109
|
+
|
110
|
+
if(targetClass.indexOf('js-visible') !== -1){
|
111
|
+
target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''));
|
112
|
+
} else {
|
113
|
+
target.setAttribute('class', targetClass + " js-visible");
|
114
|
+
}
|
115
|
+
if(sourceClass.indexOf('js-hidden') !== -1){
|
116
|
+
this.setAttribute('class', sourceClass.replace(/(^|\s)js-hidden(\s|$)/, ''));
|
117
|
+
} else {
|
118
|
+
this.setAttribute('class', sourceClass + " js-hidden");
|
119
|
+
}
|
120
|
+
});
|
121
|
+
}
|
122
|
+
}
|
94
123
|
}).call(this);
|
95
124
|
|
96
125
|
|
@@ -45,9 +45,9 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
*/
|
48
|
-
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo {
|
48
|
+
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
|
49
49
|
zoom: 1; }
|
50
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
50
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
51
51
|
content: "";
|
52
52
|
display: block;
|
53
53
|
clear: both; }
|
@@ -337,9 +337,9 @@ select:focus,
|
|
337
337
|
}
|
338
338
|
|
339
339
|
*/
|
340
|
-
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo {
|
340
|
+
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
|
341
341
|
zoom: 1; }
|
342
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
342
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
343
343
|
content: "";
|
344
344
|
display: block;
|
345
345
|
clear: both; }
|
@@ -364,6 +364,17 @@ select:focus,
|
|
364
364
|
margin: 0 15px; }
|
365
365
|
#global-header .header-wrapper .header-global .header-logo {
|
366
366
|
margin: 5px 0 2px; }
|
367
|
+
#global-header.with-proposition .header-wrapper .header-global {
|
368
|
+
float: left;
|
369
|
+
width: 33.33%; }
|
370
|
+
#global-header.with-proposition .header-wrapper .header-global .header-logo,
|
371
|
+
#global-header.with-proposition .header-wrapper .header-global .site-search {
|
372
|
+
width: 100%; }
|
373
|
+
#global-header.with-proposition .header-wrapper .header-proposition {
|
374
|
+
width: 66.66%;
|
375
|
+
float: left; }
|
376
|
+
#global-header.with-proposition .header-wrapper .header-proposition .content {
|
377
|
+
margin: 0 15px; }
|
367
378
|
#global-header #logo {
|
368
379
|
float: left;
|
369
380
|
position: relative;
|
@@ -376,26 +387,118 @@ select:focus,
|
|
376
387
|
font-size: 30px;
|
377
388
|
line-height: 1em;
|
378
389
|
text-decoration: none;
|
390
|
+
text-rendering: optimizeLegibility;
|
379
391
|
margin-bottom: -1px;
|
380
392
|
padding-bottom: 1px; }
|
381
393
|
#global-header #logo img {
|
382
394
|
position: relative;
|
383
|
-
top: -
|
395
|
+
top: -2px;
|
384
396
|
width: 35px;
|
385
397
|
height: 31px;
|
386
|
-
padding-right:
|
398
|
+
padding-right: 6px;
|
387
399
|
float: left;
|
388
400
|
display: inline;
|
389
401
|
line-height: inherit;
|
390
402
|
border: none; }
|
391
|
-
#global-header #logo span > span {
|
392
|
-
margin: 0 1px 0 -6px; }
|
393
403
|
#global-header #logo:hover, #global-header #logo:focus {
|
394
404
|
text-decoration: none;
|
395
405
|
border-bottom: 1px solid;
|
396
406
|
padding-bottom: 0; }
|
397
407
|
#global-header #logo:active {
|
398
408
|
color: #2b8cc4; }
|
409
|
+
#global-header .header-proposition {
|
410
|
+
padding-top: 10px;
|
411
|
+
padding-top: 0; }
|
412
|
+
#global-header .header-proposition #proposition-name {
|
413
|
+
font-family: "nta", Arial, sans-serif;
|
414
|
+
font-size: 24px;
|
415
|
+
line-height: 1.25;
|
416
|
+
font-weight: 400;
|
417
|
+
text-transform: none;
|
418
|
+
font-weight: bold;
|
419
|
+
color: white;
|
420
|
+
text-decoration: none; }
|
421
|
+
@media (max-width: 640px) {
|
422
|
+
#global-header .header-proposition #proposition-name {
|
423
|
+
font-size: 20px;
|
424
|
+
line-height: 1.2; } }
|
425
|
+
#global-header .header-proposition a.menu {
|
426
|
+
font-family: "nta", Arial, sans-serif;
|
427
|
+
font-size: 16px;
|
428
|
+
line-height: 1.25;
|
429
|
+
font-weight: 300;
|
430
|
+
text-transform: none;
|
431
|
+
color: white;
|
432
|
+
display: block;
|
433
|
+
float: right;
|
434
|
+
text-decoration: none;
|
435
|
+
padding-top: 6px;
|
436
|
+
display: none; }
|
437
|
+
@media (max-width: 640px) {
|
438
|
+
#global-header .header-proposition a.menu {
|
439
|
+
font-size: 14px;
|
440
|
+
line-height: 1.14286; } }
|
441
|
+
#global-header .header-proposition a.menu:hover {
|
442
|
+
text-decoration: underline; }
|
443
|
+
#global-header .header-proposition a.menu:after {
|
444
|
+
display: inline-block;
|
445
|
+
font-size: 8px;
|
446
|
+
height: 8px;
|
447
|
+
padding-left: 5px;
|
448
|
+
vertical-align: middle;
|
449
|
+
content: " \25BC"; }
|
450
|
+
#global-header .header-proposition a.menu.js-hidden:after {
|
451
|
+
content: " \25B2"; }
|
452
|
+
#global-header .header-proposition #proposition-menu {
|
453
|
+
margin-top: 5px; }
|
454
|
+
#global-header .header-proposition #proposition-links {
|
455
|
+
clear: both;
|
456
|
+
margin: 2px 0 0 0;
|
457
|
+
padding: 0; }
|
458
|
+
.js-enabled #global-header .header-proposition #proposition-links {
|
459
|
+
display: none;
|
460
|
+
display: block; }
|
461
|
+
.js-enabled #global-header .header-proposition #proposition-links.js-visible {
|
462
|
+
display: block; }
|
463
|
+
#global-header .header-proposition #proposition-links li {
|
464
|
+
float: left;
|
465
|
+
width: 50%;
|
466
|
+
padding: 3px 0;
|
467
|
+
border-bottom: 1px solid #2e3133;
|
468
|
+
display: block;
|
469
|
+
width: auto;
|
470
|
+
padding: 0 15px 0 0;
|
471
|
+
border-bottom: 0; }
|
472
|
+
#global-header .header-proposition #proposition-links li.clear-child {
|
473
|
+
clear: left; }
|
474
|
+
#global-header .header-proposition #proposition-links li a {
|
475
|
+
color: white;
|
476
|
+
text-decoration: none;
|
477
|
+
font-family: "nta", Arial, sans-serif;
|
478
|
+
font-size: 14px;
|
479
|
+
line-height: 1.42857;
|
480
|
+
font-weight: 400;
|
481
|
+
text-transform: none;
|
482
|
+
font-weight: 700;
|
483
|
+
font-family: "nta", Arial, sans-serif;
|
484
|
+
font-size: 16px;
|
485
|
+
line-height: 1.25;
|
486
|
+
font-weight: 300;
|
487
|
+
text-transform: none;
|
488
|
+
font-weight: 700;
|
489
|
+
line-height: 23px; }
|
490
|
+
@media (max-width: 640px) {
|
491
|
+
#global-header .header-proposition #proposition-links li a {
|
492
|
+
font-size: 12px;
|
493
|
+
line-height: 1.25; } }
|
494
|
+
@media (max-width: 640px) {
|
495
|
+
#global-header .header-proposition #proposition-links li a {
|
496
|
+
font-size: 14px;
|
497
|
+
line-height: 1.14286; } }
|
498
|
+
#global-header .header-proposition #proposition-links li a:hover {
|
499
|
+
text-decoration: underline; }
|
500
|
+
#global-header .header-proposition #proposition-links li a.active {
|
501
|
+
color: #28a197; }
|
399
502
|
|
400
503
|
/* Global cookie message */
|
401
504
|
.js-enabled #global-cookie-message {
|
@@ -45,9 +45,9 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
*/
|
48
|
-
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo {
|
48
|
+
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
|
49
49
|
zoom: 1; }
|
50
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
50
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
51
51
|
content: "";
|
52
52
|
display: block;
|
53
53
|
clear: both; }
|
@@ -337,9 +337,9 @@ select:focus,
|
|
337
337
|
}
|
338
338
|
|
339
339
|
*/
|
340
|
-
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo {
|
340
|
+
#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
|
341
341
|
zoom: 1; }
|
342
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
342
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
343
343
|
content: "";
|
344
344
|
display: block;
|
345
345
|
clear: both; }
|
@@ -363,6 +363,17 @@ select:focus,
|
|
363
363
|
margin: 0 15px; }
|
364
364
|
#global-header .header-wrapper .header-global .header-logo {
|
365
365
|
margin: 5px 0 2px; }
|
366
|
+
#global-header.with-proposition .header-wrapper .header-global {
|
367
|
+
float: left;
|
368
|
+
width: 33.33%; }
|
369
|
+
#global-header.with-proposition .header-wrapper .header-global .header-logo,
|
370
|
+
#global-header.with-proposition .header-wrapper .header-global .site-search {
|
371
|
+
width: 100%; }
|
372
|
+
#global-header.with-proposition .header-wrapper .header-proposition {
|
373
|
+
width: 66.66%;
|
374
|
+
float: left; }
|
375
|
+
#global-header.with-proposition .header-wrapper .header-proposition .content {
|
376
|
+
margin: 0 15px; }
|
366
377
|
#global-header #logo {
|
367
378
|
float: left;
|
368
379
|
position: relative;
|
@@ -375,26 +386,118 @@ select:focus,
|
|
375
386
|
font-size: 30px;
|
376
387
|
line-height: 1em;
|
377
388
|
text-decoration: none;
|
389
|
+
text-rendering: optimizeLegibility;
|
378
390
|
margin-bottom: -1px;
|
379
391
|
padding-bottom: 1px; }
|
380
392
|
#global-header #logo img {
|
381
393
|
position: relative;
|
382
|
-
top: -
|
394
|
+
top: -2px;
|
383
395
|
width: 35px;
|
384
396
|
height: 31px;
|
385
|
-
padding-right:
|
397
|
+
padding-right: 6px;
|
386
398
|
float: left;
|
387
399
|
display: inline;
|
388
400
|
line-height: inherit;
|
389
401
|
border: none; }
|
390
|
-
#global-header #logo span > span {
|
391
|
-
margin: 0 1px 0 -6px; }
|
392
402
|
#global-header #logo:hover, #global-header #logo:focus {
|
393
403
|
text-decoration: none;
|
394
404
|
border-bottom: 1px solid;
|
395
405
|
padding-bottom: 0; }
|
396
406
|
#global-header #logo:active {
|
397
407
|
color: #2b8cc4; }
|
408
|
+
#global-header .header-proposition {
|
409
|
+
padding-top: 10px;
|
410
|
+
padding-top: 0; }
|
411
|
+
#global-header .header-proposition #proposition-name {
|
412
|
+
font-family: "nta", Arial, sans-serif;
|
413
|
+
font-size: 24px;
|
414
|
+
line-height: 1.25;
|
415
|
+
font-weight: 400;
|
416
|
+
text-transform: none;
|
417
|
+
font-weight: bold;
|
418
|
+
color: white;
|
419
|
+
text-decoration: none; }
|
420
|
+
@media (max-width: 640px) {
|
421
|
+
#global-header .header-proposition #proposition-name {
|
422
|
+
font-size: 20px;
|
423
|
+
line-height: 1.2; } }
|
424
|
+
#global-header .header-proposition a.menu {
|
425
|
+
font-family: "nta", Arial, sans-serif;
|
426
|
+
font-size: 16px;
|
427
|
+
line-height: 1.25;
|
428
|
+
font-weight: 300;
|
429
|
+
text-transform: none;
|
430
|
+
color: white;
|
431
|
+
display: block;
|
432
|
+
float: right;
|
433
|
+
text-decoration: none;
|
434
|
+
padding-top: 6px;
|
435
|
+
display: none; }
|
436
|
+
@media (max-width: 640px) {
|
437
|
+
#global-header .header-proposition a.menu {
|
438
|
+
font-size: 14px;
|
439
|
+
line-height: 1.14286; } }
|
440
|
+
#global-header .header-proposition a.menu:hover {
|
441
|
+
text-decoration: underline; }
|
442
|
+
#global-header .header-proposition a.menu:after {
|
443
|
+
display: inline-block;
|
444
|
+
font-size: 8px;
|
445
|
+
height: 8px;
|
446
|
+
padding-left: 5px;
|
447
|
+
vertical-align: middle;
|
448
|
+
content: " \25BC"; }
|
449
|
+
#global-header .header-proposition a.menu.js-hidden:after {
|
450
|
+
content: " \25B2"; }
|
451
|
+
#global-header .header-proposition #proposition-menu {
|
452
|
+
margin-top: 5px; }
|
453
|
+
#global-header .header-proposition #proposition-links {
|
454
|
+
clear: both;
|
455
|
+
margin: 2px 0 0 0;
|
456
|
+
padding: 0; }
|
457
|
+
.js-enabled #global-header .header-proposition #proposition-links {
|
458
|
+
display: none;
|
459
|
+
display: block; }
|
460
|
+
.js-enabled #global-header .header-proposition #proposition-links.js-visible {
|
461
|
+
display: block; }
|
462
|
+
#global-header .header-proposition #proposition-links li {
|
463
|
+
float: left;
|
464
|
+
width: 50%;
|
465
|
+
padding: 3px 0;
|
466
|
+
border-bottom: 1px solid #2e3133;
|
467
|
+
display: block;
|
468
|
+
width: auto;
|
469
|
+
padding: 0 15px 0 0;
|
470
|
+
border-bottom: 0; }
|
471
|
+
#global-header .header-proposition #proposition-links li.clear-child {
|
472
|
+
clear: left; }
|
473
|
+
#global-header .header-proposition #proposition-links li a {
|
474
|
+
color: white;
|
475
|
+
text-decoration: none;
|
476
|
+
font-family: "nta", Arial, sans-serif;
|
477
|
+
font-size: 14px;
|
478
|
+
line-height: 1.42857;
|
479
|
+
font-weight: 400;
|
480
|
+
text-transform: none;
|
481
|
+
font-weight: 700;
|
482
|
+
font-family: "nta", Arial, sans-serif;
|
483
|
+
font-size: 16px;
|
484
|
+
line-height: 1.25;
|
485
|
+
font-weight: 300;
|
486
|
+
text-transform: none;
|
487
|
+
font-weight: 700;
|
488
|
+
line-height: 23px; }
|
489
|
+
@media (max-width: 640px) {
|
490
|
+
#global-header .header-proposition #proposition-links li a {
|
491
|
+
font-size: 12px;
|
492
|
+
line-height: 1.25; } }
|
493
|
+
@media (max-width: 640px) {
|
494
|
+
#global-header .header-proposition #proposition-links li a {
|
495
|
+
font-size: 14px;
|
496
|
+
line-height: 1.14286; } }
|
497
|
+
#global-header .header-proposition #proposition-links li a:hover {
|
498
|
+
text-decoration: underline; }
|
499
|
+
#global-header .header-proposition #proposition-links li a.active {
|
500
|
+
color: #28a197; }
|
398
501
|
|
399
502
|
/* Global cookie message */
|
400
503
|
.js-enabled #global-cookie-message {
|
@@ -45,7 +45,7 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
*/
|
48
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
48
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
49
49
|
content: "";
|
50
50
|
display: block;
|
51
51
|
clear: both; }
|
@@ -333,7 +333,7 @@ select:focus,
|
|
333
333
|
}
|
334
334
|
|
335
335
|
*/
|
336
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
336
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
337
337
|
content: "";
|
338
338
|
display: block;
|
339
339
|
clear: both; }
|
@@ -357,6 +357,17 @@ select:focus,
|
|
357
357
|
margin: 0 15px; }
|
358
358
|
#global-header .header-wrapper .header-global .header-logo {
|
359
359
|
margin: 5px 0 2px; }
|
360
|
+
#global-header.with-proposition .header-wrapper .header-global {
|
361
|
+
float: left;
|
362
|
+
width: 33.33%; }
|
363
|
+
#global-header.with-proposition .header-wrapper .header-global .header-logo,
|
364
|
+
#global-header.with-proposition .header-wrapper .header-global .site-search {
|
365
|
+
width: 100%; }
|
366
|
+
#global-header.with-proposition .header-wrapper .header-proposition {
|
367
|
+
width: 66.66%;
|
368
|
+
float: left; }
|
369
|
+
#global-header.with-proposition .header-wrapper .header-proposition .content {
|
370
|
+
margin: 0 15px; }
|
360
371
|
#global-header #logo {
|
361
372
|
float: left;
|
362
373
|
position: relative;
|
@@ -369,26 +380,118 @@ select:focus,
|
|
369
380
|
font-size: 30px;
|
370
381
|
line-height: 1em;
|
371
382
|
text-decoration: none;
|
383
|
+
text-rendering: optimizeLegibility;
|
372
384
|
margin-bottom: -1px;
|
373
385
|
padding-bottom: 1px; }
|
374
386
|
#global-header #logo img {
|
375
387
|
position: relative;
|
376
|
-
top: -
|
388
|
+
top: -2px;
|
377
389
|
width: 35px;
|
378
390
|
height: 31px;
|
379
|
-
padding-right:
|
391
|
+
padding-right: 6px;
|
380
392
|
float: left;
|
381
393
|
display: inline;
|
382
394
|
line-height: inherit;
|
383
395
|
border: none; }
|
384
|
-
#global-header #logo span > span {
|
385
|
-
margin: 0 1px 0 -6px; }
|
386
396
|
#global-header #logo:hover, #global-header #logo:focus {
|
387
397
|
text-decoration: none;
|
388
398
|
border-bottom: 1px solid;
|
389
399
|
padding-bottom: 0; }
|
390
400
|
#global-header #logo:active {
|
391
401
|
color: #2b8cc4; }
|
402
|
+
#global-header .header-proposition {
|
403
|
+
padding-top: 10px;
|
404
|
+
padding-top: 0; }
|
405
|
+
#global-header .header-proposition #proposition-name {
|
406
|
+
font-family: "nta", Arial, sans-serif;
|
407
|
+
font-size: 24px;
|
408
|
+
line-height: 1.25;
|
409
|
+
font-weight: 400;
|
410
|
+
text-transform: none;
|
411
|
+
font-weight: bold;
|
412
|
+
color: white;
|
413
|
+
text-decoration: none; }
|
414
|
+
@media (max-width: 640px) {
|
415
|
+
#global-header .header-proposition #proposition-name {
|
416
|
+
font-size: 20px;
|
417
|
+
line-height: 1.2; } }
|
418
|
+
#global-header .header-proposition a.menu {
|
419
|
+
font-family: "nta", Arial, sans-serif;
|
420
|
+
font-size: 16px;
|
421
|
+
line-height: 1.25;
|
422
|
+
font-weight: 300;
|
423
|
+
text-transform: none;
|
424
|
+
color: white;
|
425
|
+
display: block;
|
426
|
+
float: right;
|
427
|
+
text-decoration: none;
|
428
|
+
padding-top: 6px;
|
429
|
+
display: none; }
|
430
|
+
@media (max-width: 640px) {
|
431
|
+
#global-header .header-proposition a.menu {
|
432
|
+
font-size: 14px;
|
433
|
+
line-height: 1.14286; } }
|
434
|
+
#global-header .header-proposition a.menu:hover {
|
435
|
+
text-decoration: underline; }
|
436
|
+
#global-header .header-proposition a.menu:after {
|
437
|
+
display: inline-block;
|
438
|
+
font-size: 8px;
|
439
|
+
height: 8px;
|
440
|
+
padding-left: 5px;
|
441
|
+
vertical-align: middle;
|
442
|
+
content: " \25BC"; }
|
443
|
+
#global-header .header-proposition a.menu.js-hidden:after {
|
444
|
+
content: " \25B2"; }
|
445
|
+
#global-header .header-proposition #proposition-menu {
|
446
|
+
margin-top: 5px; }
|
447
|
+
#global-header .header-proposition #proposition-links {
|
448
|
+
clear: both;
|
449
|
+
margin: 2px 0 0 0;
|
450
|
+
padding: 0; }
|
451
|
+
.js-enabled #global-header .header-proposition #proposition-links {
|
452
|
+
display: none;
|
453
|
+
display: block; }
|
454
|
+
.js-enabled #global-header .header-proposition #proposition-links.js-visible {
|
455
|
+
display: block; }
|
456
|
+
#global-header .header-proposition #proposition-links li {
|
457
|
+
float: left;
|
458
|
+
width: 50%;
|
459
|
+
padding: 3px 0;
|
460
|
+
border-bottom: 1px solid #2e3133;
|
461
|
+
display: block;
|
462
|
+
width: auto;
|
463
|
+
padding: 0 15px 0 0;
|
464
|
+
border-bottom: 0; }
|
465
|
+
#global-header .header-proposition #proposition-links li.clear-child {
|
466
|
+
clear: left; }
|
467
|
+
#global-header .header-proposition #proposition-links li a {
|
468
|
+
color: white;
|
469
|
+
text-decoration: none;
|
470
|
+
font-family: "nta", Arial, sans-serif;
|
471
|
+
font-size: 14px;
|
472
|
+
line-height: 1.42857;
|
473
|
+
font-weight: 400;
|
474
|
+
text-transform: none;
|
475
|
+
font-weight: 700;
|
476
|
+
font-family: "nta", Arial, sans-serif;
|
477
|
+
font-size: 16px;
|
478
|
+
line-height: 1.25;
|
479
|
+
font-weight: 300;
|
480
|
+
text-transform: none;
|
481
|
+
font-weight: 700;
|
482
|
+
line-height: 23px; }
|
483
|
+
@media (max-width: 640px) {
|
484
|
+
#global-header .header-proposition #proposition-links li a {
|
485
|
+
font-size: 12px;
|
486
|
+
line-height: 1.25; } }
|
487
|
+
@media (max-width: 640px) {
|
488
|
+
#global-header .header-proposition #proposition-links li a {
|
489
|
+
font-size: 14px;
|
490
|
+
line-height: 1.14286; } }
|
491
|
+
#global-header .header-proposition #proposition-links li a:hover {
|
492
|
+
text-decoration: underline; }
|
493
|
+
#global-header .header-proposition #proposition-links li a.active {
|
494
|
+
color: #28a197; }
|
392
495
|
|
393
496
|
/* Global cookie message */
|
394
497
|
.js-enabled #global-cookie-message {
|
@@ -45,7 +45,7 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
*/
|
48
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
48
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
49
49
|
content: "";
|
50
50
|
display: block;
|
51
51
|
clear: both; }
|
@@ -339,7 +339,7 @@ select:focus,
|
|
339
339
|
}
|
340
340
|
|
341
341
|
*/
|
342
|
-
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after {
|
342
|
+
#global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
|
343
343
|
content: "";
|
344
344
|
display: block;
|
345
345
|
clear: both; }
|
@@ -368,6 +368,19 @@ select:focus,
|
|
368
368
|
margin: 0 15px; }
|
369
369
|
#global-header .header-wrapper .header-global .header-logo {
|
370
370
|
margin: 5px 0 2px; }
|
371
|
+
@media (min-width: 769px) {
|
372
|
+
#global-header.with-proposition .header-wrapper .header-global {
|
373
|
+
float: left;
|
374
|
+
width: 33.33%; }
|
375
|
+
#global-header.with-proposition .header-wrapper .header-global .header-logo,
|
376
|
+
#global-header.with-proposition .header-wrapper .header-global .site-search {
|
377
|
+
width: 100%; } }
|
378
|
+
@media (min-width: 769px) {
|
379
|
+
#global-header.with-proposition .header-wrapper .header-proposition {
|
380
|
+
width: 66.66%;
|
381
|
+
float: left; } }
|
382
|
+
#global-header.with-proposition .header-wrapper .header-proposition .content {
|
383
|
+
margin: 0 15px; }
|
371
384
|
#global-header #logo {
|
372
385
|
float: left;
|
373
386
|
position: relative;
|
@@ -380,26 +393,128 @@ select:focus,
|
|
380
393
|
font-size: 30px;
|
381
394
|
line-height: 1em;
|
382
395
|
text-decoration: none;
|
396
|
+
text-rendering: optimizeLegibility;
|
383
397
|
margin-bottom: -1px;
|
384
398
|
padding-bottom: 1px; }
|
385
399
|
#global-header #logo img {
|
386
400
|
position: relative;
|
387
|
-
top: -
|
401
|
+
top: -2px;
|
388
402
|
width: 35px;
|
389
403
|
height: 31px;
|
390
|
-
padding-right:
|
404
|
+
padding-right: 6px;
|
391
405
|
float: left;
|
392
406
|
display: inline;
|
393
407
|
line-height: inherit;
|
394
408
|
border: none; }
|
395
|
-
#global-header #logo span > span {
|
396
|
-
margin: 0 1px 0 -6px; }
|
397
409
|
#global-header #logo:hover, #global-header #logo:focus {
|
398
410
|
text-decoration: none;
|
399
411
|
border-bottom: 1px solid;
|
400
412
|
padding-bottom: 0; }
|
401
413
|
#global-header #logo:active {
|
402
414
|
color: #2b8cc4; }
|
415
|
+
#global-header .header-proposition {
|
416
|
+
padding-top: 10px; }
|
417
|
+
@media (min-width: 769px) {
|
418
|
+
#global-header .header-proposition {
|
419
|
+
padding-top: 0; } }
|
420
|
+
#global-header .header-proposition #proposition-name {
|
421
|
+
font-family: "nta", Arial, sans-serif;
|
422
|
+
font-size: 24px;
|
423
|
+
line-height: 1.25;
|
424
|
+
font-weight: 400;
|
425
|
+
text-transform: none;
|
426
|
+
font-weight: bold;
|
427
|
+
color: white;
|
428
|
+
text-decoration: none; }
|
429
|
+
@media (max-width: 640px) {
|
430
|
+
#global-header .header-proposition #proposition-name {
|
431
|
+
font-size: 20px;
|
432
|
+
line-height: 1.2; } }
|
433
|
+
#global-header .header-proposition a.menu {
|
434
|
+
font-family: "nta", Arial, sans-serif;
|
435
|
+
font-size: 16px;
|
436
|
+
line-height: 1.25;
|
437
|
+
font-weight: 300;
|
438
|
+
text-transform: none;
|
439
|
+
color: white;
|
440
|
+
display: block;
|
441
|
+
float: right;
|
442
|
+
text-decoration: none;
|
443
|
+
padding-top: 6px; }
|
444
|
+
@media (max-width: 640px) {
|
445
|
+
#global-header .header-proposition a.menu {
|
446
|
+
font-size: 14px;
|
447
|
+
line-height: 1.14286; } }
|
448
|
+
@media (min-width: 769px) {
|
449
|
+
#global-header .header-proposition a.menu {
|
450
|
+
display: none; } }
|
451
|
+
#global-header .header-proposition a.menu:hover {
|
452
|
+
text-decoration: underline; }
|
453
|
+
#global-header .header-proposition a.menu:after {
|
454
|
+
display: inline-block;
|
455
|
+
font-size: 8px;
|
456
|
+
height: 8px;
|
457
|
+
padding-left: 5px;
|
458
|
+
vertical-align: middle;
|
459
|
+
content: " \25BC"; }
|
460
|
+
#global-header .header-proposition a.menu.js-hidden:after {
|
461
|
+
content: " \25B2"; }
|
462
|
+
#global-header .header-proposition #proposition-menu {
|
463
|
+
margin-top: 5px; }
|
464
|
+
#global-header .header-proposition #proposition-links {
|
465
|
+
clear: both;
|
466
|
+
margin: 2px 0 0 0;
|
467
|
+
padding: 0; }
|
468
|
+
.js-enabled #global-header .header-proposition #proposition-links {
|
469
|
+
display: none; }
|
470
|
+
@media (min-width: 769px) {
|
471
|
+
.js-enabled #global-header .header-proposition #proposition-links {
|
472
|
+
display: block; } }
|
473
|
+
.js-enabled #global-header .header-proposition #proposition-links.js-visible {
|
474
|
+
display: block; }
|
475
|
+
#global-header .header-proposition #proposition-links li {
|
476
|
+
float: left;
|
477
|
+
width: 50%;
|
478
|
+
padding: 3px 0;
|
479
|
+
border-bottom: 1px solid #2e3133; }
|
480
|
+
@media (min-width: 769px) {
|
481
|
+
#global-header .header-proposition #proposition-links li {
|
482
|
+
display: block;
|
483
|
+
width: auto;
|
484
|
+
padding: 0 15px 0 0;
|
485
|
+
border-bottom: 0; }
|
486
|
+
#global-header .header-proposition #proposition-links li.clear-child {
|
487
|
+
clear: left; } }
|
488
|
+
#global-header .header-proposition #proposition-links li a {
|
489
|
+
color: white;
|
490
|
+
text-decoration: none;
|
491
|
+
font-family: "nta", Arial, sans-serif;
|
492
|
+
font-size: 14px;
|
493
|
+
line-height: 1.42857;
|
494
|
+
font-weight: 400;
|
495
|
+
text-transform: none;
|
496
|
+
font-weight: 700; }
|
497
|
+
@media (max-width: 640px) {
|
498
|
+
#global-header .header-proposition #proposition-links li a {
|
499
|
+
font-size: 12px;
|
500
|
+
line-height: 1.25; } }
|
501
|
+
@media (min-width: 769px) {
|
502
|
+
#global-header .header-proposition #proposition-links li a {
|
503
|
+
font-family: "nta", Arial, sans-serif;
|
504
|
+
font-size: 16px;
|
505
|
+
line-height: 1.25;
|
506
|
+
font-weight: 300;
|
507
|
+
text-transform: none;
|
508
|
+
font-weight: 700;
|
509
|
+
line-height: 23px; } }
|
510
|
+
@media (min-width: 769px) and (max-width: 640px) {
|
511
|
+
#global-header .header-proposition #proposition-links li a {
|
512
|
+
font-size: 14px;
|
513
|
+
line-height: 1.14286; } }
|
514
|
+
#global-header .header-proposition #proposition-links li a:hover {
|
515
|
+
text-decoration: underline; }
|
516
|
+
#global-header .header-proposition #proposition-links li a.active {
|
517
|
+
color: #28a197; }
|
403
518
|
|
404
519
|
/* Global cookie message */
|
405
520
|
.js-enabled #global-cookie-message {
|
@@ -66,17 +66,17 @@
|
|
66
66
|
</div>
|
67
67
|
|
68
68
|
<% unless @omit_header %>
|
69
|
-
<header role="banner" id="global-header">
|
69
|
+
<header role="banner" id="global-header" class="<%= yield(:header_class) %>">
|
70
70
|
<div class="header-wrapper">
|
71
71
|
<div class="header-global">
|
72
72
|
<div class="header-logo">
|
73
73
|
<a href="https://www.gov.uk/" title="Go to the GOV.UK homepage" id="logo" class="content">
|
74
|
-
<img src="<%= asset_path 'gov.uk_logotype_crown.png' %>" alt="">
|
74
|
+
<img src="<%= asset_path 'gov.uk_logotype_crown.png' %>" alt=""> GOV.UK
|
75
75
|
</a>
|
76
76
|
</div>
|
77
|
-
|
78
77
|
<%= yield :inside_header %>
|
79
78
|
</div>
|
79
|
+
<%= yield :proposition_header %>
|
80
80
|
</div>
|
81
81
|
</header>
|
82
82
|
<!--end header-->
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_template
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2014-01-
|
12
|
+
date: 2014-01-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -166,7 +166,6 @@ files:
|
|
166
166
|
- app/assets/images/gov.uk_logotype_crown_invert.png
|
167
167
|
- app/assets/images/favicon.ico
|
168
168
|
- app/assets/images/gov.uk_logotype_crown_invert_trans.png
|
169
|
-
- app/assets/images/gov.uk_logotype-2x.png
|
170
169
|
- app/assets/javascripts/vendor/goog/webfont-debug.js
|
171
170
|
- app/assets/javascripts/ie.js
|
172
171
|
- app/assets/javascripts/govuk-template.js
|
@@ -190,7 +189,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
190
189
|
version: '0'
|
191
190
|
segments:
|
192
191
|
- 0
|
193
|
-
hash:
|
192
|
+
hash: 1066855837514674060
|
194
193
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
195
194
|
none: false
|
196
195
|
requirements:
|
@@ -199,7 +198,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
199
198
|
version: '0'
|
200
199
|
segments:
|
201
200
|
- 0
|
202
|
-
hash:
|
201
|
+
hash: 1066855837514674060
|
203
202
|
requirements: []
|
204
203
|
rubyforge_project:
|
205
204
|
rubygems_version: 1.8.23
|
Binary file
|