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 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 3 output formats, a gem containing a Rails engine, a tarball containing Play Framework templates and a tarball.
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` rake task. This will produce a tarball in the `pkg` directory.
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` rake task. This will produce a tarball in the `pkg` directory.
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 css (actually css.erb, so the Rails asset pipeline can work in the gem).
36
- * combining all javascripts referenced in `/manifests.yml` (using Sprockets)
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 css, replacing all calls to `asset_path` with the relative path to the asset.
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
- 1. Fork it
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
@@ -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: -3px;
395
+ top: -2px;
384
396
  width: 35px;
385
397
  height: 31px;
386
- padding-right: 8px;
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: -3px;
394
+ top: -2px;
383
395
  width: 35px;
384
396
  height: 31px;
385
- padding-right: 8px;
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: -3px;
388
+ top: -2px;
377
389
  width: 35px;
378
390
  height: 31px;
379
- padding-right: 8px;
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: -3px;
401
+ top: -2px;
388
402
  width: 35px;
389
403
  height: 31px;
390
- padding-right: 8px;
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=""> <span>GOV&nbsp;<span>.</span>UK</span>
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-->
@@ -1,3 +1,3 @@
1
1
  module GovukTemplate
2
- VERSION = "0.3.8"
2
+ VERSION = "0.4.0"
3
3
  end
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.3.8
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-03 00:00:00.000000000 Z
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: -4011492137946760384
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: -4011492137946760384
201
+ hash: 1066855837514674060
203
202
  requirements: []
204
203
  rubyforge_project:
205
204
  rubygems_version: 1.8.23