jekyll-theme-open-project 1.0.0.pre3 → 1.0.0.pre4

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,110 @@
1
+ <section class="documentation">
2
+ {% assign product_base_url = page.url | split: "/" | slice: 0, 3 | join: "/" | append: "/" %}
3
+ {% assign docs_base_url = product_base_url | append: "docs/" %}
4
+ {% assign item_docs = include.items | where_exp: "item", "item.url contains docs_base_url" %}
5
+ {% assign nav = item_docs | where_exp: "item", "item.path contains 'docs/navigation'" | first %}
6
+
7
+ {% assign product_data = include.items | where_exp: "item", "item.url == product_base_url" | first %}
8
+
9
+ {% assign num_sections = nav.sections | size %}
10
+ {% if num_sections > 0 %}
11
+ <nav class="nav-sidebar">
12
+ <header class="sidebar-header">
13
+ {% if include.item_type == 'software' and page.url != product_base_url %}
14
+ <div class="logo-container" role="presentation">
15
+ {% include software-symbol.html item_id=page.id %}
16
+ </div>
17
+ <h3 class="title"><a href="{{ product_base_url | relative_url }}">{{ product_data.title }}</a></h3>
18
+ {% else %}
19
+ <h3 class="title">Docs</h3>
20
+ {% endif %}
21
+ </header>
22
+
23
+ {% for section in nav.sections %}
24
+ <h4 class="section-title">{{ section.name }}</h4>
25
+ <ul class="section-items">
26
+ {% for item in section.items %}
27
+ {% assign link = docs_base_url | append: item | append: "/" %}
28
+ {% assign linked_page = include.items | where_exp: "item", "item.url contains link" | first %}
29
+
30
+ {% if page.url != link and linked_page %}
31
+ <li class="item">
32
+ <a href="{{ link | relative_url }}">
33
+ {{ linked_page.title }}
34
+ </a>
35
+ </li>
36
+
37
+ {% else %}
38
+ {% if page.url == link %}
39
+ <li class="item selected">
40
+ <span>
41
+ {{ linked_page.title }}
42
+ </span>
43
+ </li>
44
+
45
+ {% else %}
46
+ <li class="item disabled">
47
+ <span>
48
+ {{ item }}
49
+ </span>
50
+ </li>
51
+
52
+ {% endif %}
53
+ {% endif %}
54
+
55
+ {% assign link = "" %}
56
+ {% endfor %}
57
+ </ul>
58
+ {% endfor %}
59
+ </nav>
60
+ {% endif %}
61
+
62
+ <article>
63
+ <header>
64
+ <div class="title" role="presentation">
65
+ {% if include.item_type == 'software' and page.url == product_base_url %}
66
+ <div class="logo-container" role="presentation">
67
+ {% include software-symbol.html item_id=page.id %}
68
+ </div>
69
+ {% endif %}
70
+
71
+ <h1 class="text">{{ page.title }}</h1>
72
+ </div>
73
+
74
+ <div role="presentation">
75
+ <h3 class="lead">{{ page.description }}</h3>
76
+
77
+ {% if page.repo_url or page.docs_url %}
78
+ <div class="meta">
79
+ <ul>
80
+ {% if page.repo_url %}
81
+ <li>
82
+ <a href="{{ page.repo_url }}">Source code repository</a> {% endif %}
83
+ {% if page.docs_url %}
84
+ <li>
85
+ <a href="{{ page.docs_url }}">Documentation</a> {% endif %}
86
+ </ul>
87
+ </div>
88
+ {% else if page.rfc_id or page.ietf_datatracker_id or page.source_url %}
89
+ <ul>
90
+ {% if page.rfc_id %}
91
+ <li>
92
+ <a href="http://ietf.org/html/rfc{{ page.rfc_id }}">IETF RFC {{ page.rfc_id }}</a> {% endif %}
93
+ {% if page.ietf_datatracker_id %}
94
+ <li>
95
+ <a href="https://datatracker.ietf.org/doc/{{ page.ietf_datatracker_id }}{% if page.ietf_datatracker_ver %}-{{ page.ietf_datatracker_ver }}{% endif %}">IETF document</a> {% endif %}
96
+ {% if page.source_url %}
97
+ <li>
98
+ <a href="{{ page.source_url }}">Source markup</a> {% endif %}
99
+ </ul>
100
+ {% endif %}
101
+ </div>
102
+ </header>
103
+
104
+ <div class="body" role="presentation">
105
+ {{ content }}
106
+ </div>
107
+
108
+ </article>
109
+ </section>
110
+
data/_includes/logo.html CHANGED
@@ -1 +1 @@
1
- {% include symbol.svg %}&nbsp;<span class="title">{% include title.html %}</span>
1
+ {% include _includes/symbol.svg %}&nbsp;<span class="title">{% include title.html %}</span>
@@ -7,9 +7,9 @@
7
7
  {% endif %}
8
8
  " role="article">
9
9
 
10
- {% if include.post.parent_project == nil %}
10
+ {% if include.post.parent_project == nil and site.is_hub == true %}
11
11
  <div class="hub-symbol" role="presentation">
12
- {% include symbol.svg %}
12
+ {% include _includes/symbol.svg %}
13
13
  </div>
14
14
  {% endif %}
15
15
 
@@ -1,14 +1,30 @@
1
- {% assign project_symbol_path = "_projects/" | append: include.project_name | append: "/_includes/symbol.svg" %}
2
- {% assign relative_symbol_path = "/" | append: project_symbol_path %}
3
- {% assign item_slug = include.item.title | slugify %}
4
- {% assign product_home_url = include.project_data.home_url | append: item_slug | append: "/" %}
1
+ {% if include.project_data != nil and include.project_name != nil %}
2
+ {% if include.item.slug == 'index' %}
3
+ {% assign item_slug = include.item.id | split: "/" | reverse | slice: 1 | first %}
4
+ {% else %}
5
+ {% assign item_slug = include.item.id | split: "/" | reverse | first %}
6
+ {% endif %}
7
+ {% assign product_home_url = include.project_data.home_url | append: include.item_type | append: "/" | append: item_slug | append: "/" %}
8
+ {% else %}
9
+ {% assign product_home_url = include.item.url | relative_url %}
10
+ {% endif %}
5
11
 
6
12
  <a class="item" href="{{ product_home_url }}" role="article">
7
- <header>
8
- <div class="parent-project">
9
- <div class="project-logo">{% include {{ relative_symbol_path }} %}</div>
10
- <h4 class="project-title">{{ include.project_data.title }}</h4>
13
+ {% if include.item_type == 'software' and site.is_hub != true %}
14
+ <div role="presentation" class="logo-container">
15
+ {% include software-symbol.html item_id=include.item.id %}
11
16
  </div>
17
+ {% endif %}
18
+
19
+ <header>
20
+ {% if include.project_data != nil and include.project_name != nil %}
21
+ {% assign project_symbol_path = "_projects/" | append: include.project_name | append: "/_includes/symbol.svg" %}
22
+ {% assign relative_symbol_path = "/" | append: project_symbol_path %}
23
+ <div class="parent-project">
24
+ <div class="project-logo">{% include {{ relative_symbol_path }} %}</div>
25
+ <h4 class="project-title">{{ include.project_data.title }}</h4>
26
+ </div>
27
+ {% endif %}
12
28
  <h3 class="title">{{ include.item.title }}</h3>
13
29
  </header>
14
30
 
@@ -17,14 +33,7 @@
17
33
  </p>
18
34
 
19
35
  <footer class="meta">
20
- {% assign num_tags = include.item.tags | size %}
21
- {% if num_tags > 0 %}
22
- <ul class="tags">
23
- {% for tag in include.item.tags %}
24
- <li>{{ tag }}</li>
25
- {% endfor %}
26
- </ul>
27
- {% endif %}
36
+ {% include tag-list.html tags=include.item.tags %}
28
37
 
29
38
  {% if include.item.last_update %}
30
39
  <div class="last-update">
@@ -0,0 +1,3 @@
1
+ {% assign symbol_path = include.item_id | split: "/" | slice: 2, 1 | join: "/" | append: "/_includes/symbol.svg" %}
2
+ {% assign relative_symbol_path = "/_software/" | append: symbol_path %}
3
+ <div class="logo">{% include {{ relative_symbol_path }} %}</div>
@@ -0,0 +1,10 @@
1
+ {% assign num_tags = include.tags | size %}
2
+ {% if num_tags > 0 %}
3
+ <footer class="meta">
4
+ <ul class="tags">
5
+ {% for tag in include.tags %}
6
+ <li>{{ tag }}</li>
7
+ {% endfor %}
8
+ </ul>
9
+ </footer>
10
+ {% endif %}
@@ -3,7 +3,7 @@ layout: default
3
3
  ---
4
4
 
5
5
  <section class="items">
6
- {% include symbol.svg %}
6
+ {% include _includes/symbol.svg %}
7
7
 
8
8
  {% for item in page.posts_combined %}
9
9
  {% include post-card.html post=item %}
@@ -2,29 +2,4 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <article>
6
-
7
- <header>
8
- <h1 class="title">{{ page.title }}</h1>
9
-
10
- <p class="desc">{{ page.description }}</p>
11
-
12
- <div class="meta">
13
- {% if page.repo_url or page.docs_url %}
14
- <ul>
15
- {% if page.repo_url %}
16
- <li>
17
- <a href="{{ page.repo_url }}">Source code repository</a> {% endif %}
18
- {% if page.docs_url %}
19
- <li>
20
- <a href="{{ page.docs_url }}">Documentation</a> {% endif %}
21
- </ul>
22
- {% endif %}
23
- </div>
24
- </header>
25
-
26
- <div class="body" role="presentation">
27
- {{ content }}
28
- </div>
29
-
30
- </article>
5
+ {% include item-doc-page.html items=site.software item_type='software' %}
@@ -6,7 +6,7 @@ layout: default
6
6
 
7
7
  {% if num_projects > 0 %}
8
8
  <section class="items">
9
- {% include symbol.svg %}
9
+ {% include _includes/symbol.svg %}
10
10
 
11
11
  {% for project in projects %}
12
12
  {% assign symbol_path = project.path | split: "/" | slice: 0, 2 | join: "/" | append: "/_includes/symbol.svg" %}
@@ -2,16 +2,24 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- {% include index-page-item-filter.html url_tag_prefix="/software/" items=page.items tag=page.tag %}
5
+ {% if site.is_hub %}
6
+ {% include index-page-item-filter.html url_tag_prefix="/software/" items=page.items tag=page.tag %}
7
+ {% endif %}
6
8
 
7
9
  <section class="items">
8
- {% include symbol.svg %}
10
+ {% if site.is_hub %}
11
+ {% include _includes/symbol.svg %}
12
+ {% endif %}
9
13
 
10
14
  {% for product in page.items %}
11
- {% assign project_name = product.url | split: "/" | slice: 2 | first %}
12
- {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
13
- {% assign project = site.projects | where: "path", project_index_path | first %}
15
+ {% if site.is_hub %}
16
+ {% assign project_name = product.url | split: "/" | slice: 2 | first %}
17
+ {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
18
+ {% assign project = site.projects | where: "path", project_index_path | first %}
14
19
 
15
- {% include software-card-hub.html item=product project_name=project_name project_data=project %}
20
+ {% include software-card-hub.html item=product item_type='software' project_name=project_name project_data=project %}
21
+ {% else %}
22
+ {% include software-card-hub.html item=product item_type='software' %}
23
+ {% endif %}
16
24
  {% endfor %}
17
25
  </section>
@@ -2,16 +2,24 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- {% include index-page-item-filter.html url_tag_prefix="/specs/" items=page.items tag=page.tag %}
5
+ {% if site.is_hub %}
6
+ {% include index-page-item-filter.html url_tag_prefix="/specs/" items=page.items tag=page.tag %}
7
+ {% endif %}
6
8
 
7
9
  <section class="items">
8
- {% include symbol.svg %}
10
+ {% if site.is_hub %}
11
+ {% include _includes/symbol.svg %}
12
+ {% endif %}
9
13
 
10
14
  {% for spec in page.items %}
11
- {% assign project_name = spec.url | split: "/" | slice: 2 | first %}
12
- {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
13
- {% assign project = site.projects | where: "path", project_index_path | first %}
15
+ {% if site.is_hub %}
16
+ {% assign project_name = spec.url | split: "/" | slice: 2 | first %}
17
+ {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
18
+ {% assign project = site.projects | where: "path", project_index_path | first %}
14
19
 
15
- {% include software-card-hub.html item=spec project_name=project_name project_data=project %}
20
+ {% include software-card-hub.html item=spec item_type='specs' project_name=project_name project_data=project %}
21
+ {% else %}
22
+ {% include software-card-hub.html item=spec item_type='specs' %}
23
+ {% endif %}
16
24
  {% endfor %}
17
25
  </section>
data/_layouts/spec.html CHANGED
@@ -2,28 +2,4 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <article>
6
- <header>
7
- <h1 class="title">{{ page.title }}</h1>
8
-
9
- <div class="meta">
10
- {% if page.rfc_id or page.ietf_datatracker_id or page.source_url %}
11
- <ul>
12
- {% if page.rfc_id %}
13
- <li>
14
- <a href="http://ietf.org/html/rfc{{ page.rfc_id }}">IETF RFC {{ page.rfc_id }}</a> {% endif %}
15
- {% if page.ietf_datatracker_id %}
16
- <li>
17
- <a href="https://datatracker.ietf.org/doc/{{ page.ietf_datatracker_id }}{% if page.ietf_datatracker_ver %}-{{ page.ietf_datatracker_ver }}{% endif %}">IETF document</a> {% endif %}
18
- {% if page.source_url %}
19
- <li>
20
- <a href="{{ page.source_url }}">Source markup</a> {% endif %}
21
- </ul>
22
- {% endif %}
23
- </div>
24
- </header>
25
-
26
- <div class="body" role="presentation">
27
- {{ content }}
28
- </div>
29
- </article>
5
+ {% include item-doc-page.html items=site.specs item_type='specs' %}
@@ -1,3 +1,5 @@
1
+ $font-family: Helvetica, Arial, sans-serif !default;
2
+
1
3
  $primary-color: lightblue !default;
2
4
  $primary-dark-color: navy !default;
3
5
  $accent-color: red !default;
@@ -65,6 +67,7 @@ main {
65
67
  @extend .main-section;
66
68
 
67
69
  .items {
70
+ @extend .item-grid;
68
71
  justify-content: center;
69
72
  }
70
73
 
@@ -112,7 +115,7 @@ main {
112
115
  padding: 0;
113
116
 
114
117
  > * {
115
- font-weight: 800;
118
+ font-weight: 700;
116
119
  margin: 0 4px;
117
120
  padding: 3px 10px 3px 10px;
118
121
  white-space: nowrap;
@@ -123,35 +126,6 @@ main {
123
126
  }
124
127
  }
125
128
  }
126
-
127
- > .items {
128
- @extend .item-grid;
129
- @extend .index-item-grid;
130
-
131
- .items.one-row {
132
- justify-content: center;
133
- }
134
-
135
- .item {
136
- @extend .item-card;
137
- @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
138
-
139
- padding: 16px 30px 22px 30px;
140
-
141
- .header {
142
- font-size: 18px;
143
- }
144
- .body {
145
- font-size: 15px;
146
- }
147
-
148
- @media screen and (min-width: $bigscreen-breakpoint) {
149
- box-sizing: border-box;
150
- flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
151
- margin-bottom: $gutter;
152
- }
153
- }
154
- }
155
129
  }
156
130
  // Item filter: color override for selected tags
157
131
  > .item-filter ul.tags li > span {
@@ -263,6 +237,7 @@ body.hub {
263
237
  }
264
238
 
265
239
  .items {
240
+ @extend .item-grid;
266
241
  justify-content: center;
267
242
  }
268
243
 
@@ -299,7 +274,7 @@ body.hub {
299
274
  padding: 8px 18px;
300
275
  border-radius: 4px;
301
276
  font-size: 16px;
302
- font-weight: 800;
277
+ font-weight: 700;
303
278
  color: white;
304
279
  background-color: $accent-color;
305
280
  }
@@ -315,12 +290,44 @@ body.hub {
315
290
  @extend .main-section;
316
291
  @extend .with-symbol-background;
317
292
 
293
+ .items {
294
+ @extend .item-grid;
295
+ }
296
+
318
297
  > .title:after {
319
298
  border-bottom-color: rgba($primary-color, 0.12);
320
299
  }
321
300
  }
322
301
  }
323
302
 
303
+ &.layout-software-index > main,
304
+ &.layout-spec-index > main {
305
+ > .items {
306
+ @extend .item-grid;
307
+ @extend .index-item-grid;
308
+
309
+ .item {
310
+ @extend .item-card;
311
+ @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
312
+
313
+ padding: 16px 30px 22px 30px;
314
+
315
+ .header {
316
+ font-size: 18px;
317
+ }
318
+ .body {
319
+ font-size: 15px;
320
+ }
321
+
322
+ @media screen and (min-width: $bigscreen-breakpoint) {
323
+ box-sizing: border-box;
324
+ flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
325
+ margin-bottom: $gutter;
326
+ }
327
+ }
328
+ }
329
+ }
330
+
324
331
  &.layout-project-index > main {
325
332
  .items {
326
333
  @extend .item-grid;
@@ -377,47 +384,179 @@ body.hub {
377
384
  /* Project */
378
385
 
379
386
  body.project {
380
-
381
- &.layout-home > main {
382
- > .software,
383
- > .specs {
384
- @extend .main-section;
385
-
386
- .items {
387
- justify-content: center;
388
- }
389
-
387
+ &.layout-home > main > .underlay > .software,
388
+ &.layout-home > main > .specs,
389
+ &.layout-software-index > main,
390
+ &.layout-spec-index > main {
391
+ > .items {
390
392
  .item {
391
393
  @extend .item-card;
392
- @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));
394
+ @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
393
395
 
394
- padding: 40px 32px;
395
- text-align: center;
396
+ padding: 30px 32px;
397
+ text-align: left;
398
+ margin-bottom: 20px;
396
399
 
397
- .logo {
398
- display: inline-block;
399
- height: 80px;
400
- width: 80px;
401
- }
402
- .header {
403
- font-size: 24px;
400
+ header > .title {
401
+ margin: 0;
402
+ font-size: 20px;
404
403
  }
405
404
  .body {
406
405
  font-size: 16px;
407
406
  }
407
+ }
408
+ }
409
+ }
408
410
 
409
- @media screen and (min-width: $bigscreen-breakpoint) {
410
- box-sizing: border-box;
411
- flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
411
+ &.layout-home > main > .underlay > .software,
412
+ &.layout-software-index > main {
413
+ > .items {
414
+ .item {
415
+ $logo-space: 132px;
416
+ $logo-side: 48px;
417
+ padding-left: $logo-space;
418
+ .logo-container {
419
+ float: left;
420
+ margin-left: -$logo-space;
421
+ padding: 8px (($logo-space - $logo-side) / 2);
422
+ .logo svg {
423
+ width: $logo-side;
424
+ height: $logo-side;
425
+ }
412
426
  }
413
427
  }
414
428
  }
415
429
  }
416
430
 
431
+ &.layout-home > main > .underlay > .software,
432
+ &.layout-home > main > .specs {
433
+ @extend .main-section;
434
+ }
435
+
436
+ &.layout-software-index > main,
437
+ &.layout-spec-index > main {
438
+ > .items {
439
+ @extend .index-item-grid;
440
+ }
441
+ }
442
+
417
443
  &.layout-spec > main > article {
418
444
  @extend .main-article;
419
445
  }
420
- &.layout-product > main > article {
421
- @extend .main-article;
446
+ &.layout-spec > main,
447
+ &.layout-product > main {
448
+ > .documentation:only-child {
449
+ flex: 1;
450
+ display: flex;
451
+ flex-flow: row nowrap;
452
+
453
+ > .nav-sidebar {
454
+ width: 320px;
455
+ border-right: #F7F7F7 2px solid;
456
+ margin-right: 60px;
457
+ padding-top: 70px;
458
+
459
+ > .sidebar-header {
460
+ display: flex;
461
+ flex-flow: row nowrap;
462
+ align-items: center;
463
+
464
+ .title {
465
+ flex: 1;
466
+ line-height: 1;
467
+ a:link, a:visited {
468
+ color: #444;
469
+ }
470
+ }
471
+ .logo-container {
472
+ margin-right: 10px;
473
+
474
+ .logo svg {
475
+ width: 32px;
476
+ height: 32px;
477
+ }
478
+ }
479
+ }
480
+
481
+ > .section-title {
482
+ font-size: 20px;
483
+ font-weight: bold;
484
+ margin: 0;
485
+ line-height: 1.8;
486
+ }
487
+
488
+ > .section-items {
489
+ list-style: none;
490
+ margin: 0 0 15px 0;
491
+ padding: 0;
492
+ line-height: 2;
493
+
494
+ > .item {
495
+ font-size: 15px;
496
+ font-weight: normal;
497
+
498
+ &.disabled {
499
+ span {
500
+ $disabled-label-width: 50px;
501
+ opacity: 0.5;
502
+ position: relative;
503
+
504
+ &:before {
505
+ opacity: 0.4;
506
+ position: absolute;
507
+ width: $disabled-label-width;
508
+ left: -$disabled-label-width;;
509
+ content: "TBD";
510
+ font-weight: bold;
511
+ }
512
+ }
513
+ }
514
+ &.selected {
515
+ span {
516
+ font-weight: bold;
517
+ color: $primary-dark-color;
518
+ }
519
+ }
520
+ a {
521
+ &:link, &:hover, &:visited {
522
+ color: #444;
523
+ }
524
+ }
525
+ }
526
+ }
527
+ }
528
+
529
+ > article {
530
+ @extend .main-article;
531
+ flex: 1;
532
+
533
+ > header {
534
+ > .title {
535
+ display: flex;
536
+ flex-flow: row nowrap;
537
+
538
+ border-bottom: 2px solid $primary-dark-color;
539
+ padding-top: 70px;
540
+ padding-bottom: 10px;
541
+
542
+ > .logo-container {
543
+ margin-right: 22px;
544
+ }
545
+
546
+ .text {
547
+ flex: 1;
548
+ font-size: 36px;
549
+
550
+ margin: 0;
551
+ font-weight: 500;
552
+ }
553
+ }
554
+ .lead {
555
+ font-weight: normal;
556
+ font-size: 20px;
557
+ }
558
+ }
559
+ }
560
+ }
422
561
  }
423
562
  }