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 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