govuk_template 0.3.8 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|