futuro 0.8.9 → 0.9.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ca622b34e6dbbce1cebc8aef984ecb343379323d460328628ac95c927d0aaf0c
4
- data.tar.gz: 29cde57c9159e3fea5cd34101568417c0d90fc3d0a4d71390ff0ef3795f739cd
3
+ metadata.gz: 0241ac8c29b8cf9cc29061783d8dae8da2f23daa374820b0f273fc3e417356ea
4
+ data.tar.gz: 83ee8dfaa27b6598b0a624aa2b8453ee9a7f3aff3d43729f4ddebd61fbe9fb8f
5
5
  SHA512:
6
- metadata.gz: 1956752b0a5032d0db24e82fd71d53114753844bdd6104ba790c54e381e3ada1be32151869d4cbe3bf82dd26c796d2766709cda7660b10d744cfcf74b43a0a5e
7
- data.tar.gz: a27cbc00e7401f2f9055c8c4444eb121b980bd5f81c5875ccdc1bd66b3893725f93f5d3f8c258b7a3f11f00f062837ab36014b23a02596689bacc9881cd21aa8
6
+ metadata.gz: 62db41cd0e9d342ddcce419a55fcb7965df80ada4b2908872dd3c14bfbc76a8b26046657e5854864eca5bd1e428fe9aa21583543c2ca82ca67fba1a34d12b044
7
+ data.tar.gz: af3263fbea64d3217c96dd61d4dc4c6390086350ddf526286903188a0234e0952f1df130b4ebda85a7b9f46f4db1376e8bc6dbc012cfe5ce0f1efe6edd3d22b8
@@ -12,7 +12,11 @@
12
12
 
13
13
  {% else %}
14
14
 
15
- {%- include {{ SitePage | append : 'subtitle.liquid' }} -%}
15
+ {%- unless SiteIsDoc -%}
16
+
17
+ {%- include {{ SitePage | append : 'subtitle.liquid' }} -%}
18
+
19
+ {%- endunless -%}
16
20
 
17
21
  <div class="area {{ PageTitle | prepend : 'title-' }} {{ PageType }}
18
22
  {% if site.setup.style %}{{ SiteStyle }}{% endif %}
@@ -74,7 +78,7 @@
74
78
 
75
79
  {%- if page.artwork -%}
76
80
 
77
- {%- include {{ SiteContent | append : 'loop.liquid' }} type="artwork" -%}
81
+ {%- include {{ SiteContent | append : 'artwork.liquid' }} -%}
78
82
 
79
83
  {%- endif -%}
80
84
 
@@ -138,7 +142,7 @@
138
142
 
139
143
  {%- if page.button -%}
140
144
 
141
- {%- include {{ SiteContent | append : 'loop.liquid' }} type="button" -%}
145
+ {%- include {{ LoopButton | append : 'example.liquid' }} -%}
142
146
 
143
147
  {%- endif -%}
144
148
 
@@ -1,21 +1,23 @@
1
1
 
2
- {%- if item.html -%}
2
+ {% assign format = page.artwork %}
3
+
4
+ {%- if format == 'html' -%}
3
5
 
4
6
  {%- include {{ PageArtwork | append : '.html' }} -%}
5
7
 
6
- {%- elsif item.liquid -%}
8
+ {%- elsif format == 'liquid' -%}
7
9
 
8
10
  {%- include {{ PageArtwork | append : '.liquid' }} -%}
9
11
 
10
- {%- elsif item.svg -%}
12
+ {%- elsif format == 'svg' -%}
11
13
 
12
14
  {%- include {{ PageArtwork | append : '.svg' }} -%}
13
15
 
14
- {%- elsif item.image -%}
16
+ {%- elsif format == 'image' -%}
15
17
 
16
18
  {%- include {{ LoopArtwork | append : 'image.liquid' }} -%}
17
19
 
18
- {%- elsif item.video -%}
20
+ {%- elsif format == 'video' -%}
19
21
 
20
22
  {%- include {{ LoopArtwork | append : 'video.liquid' }} -%}
21
23
 
@@ -0,0 +1,41 @@
1
+
2
+ {% assign IncludeFunc = include.func | prepend : 'func-' %}
3
+ {% assign IncludeTitle = include.title | prepend : 'title-' | downcase %}
4
+
5
+ <span class="button-wrap
6
+ {% if include.func %}{{ IncludeFunc }}{% endif %}
7
+ {% if include.title %}{{ IncludeTitle }}{% endif %}
8
+ {% if include.type %}{{ include.type | prepend : 'type-' }}{% endif %}
9
+ {% if include.style %}{{ include.style | prepend : 'style-' }}{% endif %}">
10
+
11
+ <button type="button" {% if include.slim %}class="modify-slim"{% endif %}>
12
+
13
+ <span class="block button-icon-wrap">
14
+
15
+ <span class="block button-icon">
16
+
17
+ {%- if include.type == "inactive" -%}
18
+
19
+ {%- include {{ SvgIcon }} type="info" -%}
20
+
21
+ {%- else -%}
22
+
23
+ {%- include {{ SvgIcon }} type="cta" -%}
24
+
25
+ {%- endif -%}
26
+
27
+ </span>
28
+
29
+ <span class="block button-title">
30
+
31
+ {{ include.title | capitalize }}
32
+
33
+ </span>
34
+
35
+ </span>
36
+
37
+ </button>
38
+
39
+ <span class="button-bg {% if include.func %}{{ IncludeFunc }}{% endif %}"></span>
40
+
41
+ </span>
@@ -0,0 +1,31 @@
1
+
2
+ <div class="button-container">
3
+
4
+ <div class="button-version">
5
+
6
+ <div class="title button-version">Heavy</div>
7
+
8
+ {%- include {{ LoopButton | append : 'build.liquid' }}
9
+ context = "example"
10
+ type = page.button.type
11
+ style = page.button.style
12
+ func = page.button.func
13
+ title = page.button.title -%}
14
+
15
+ </div>
16
+
17
+ <div class="button-version">
18
+
19
+ <div class="title button-version">Slim</div>
20
+
21
+ {%- include {{ LoopButton | append : 'build.liquid' }}
22
+ context = "example"
23
+ type = page.button.type
24
+ style = page.button.style
25
+ func = page.button.func
26
+ title = page.button.title
27
+ slim = true -%}
28
+
29
+ </div>
30
+
31
+ </div>
@@ -5,63 +5,25 @@
5
5
 
6
6
  <span class="block button-row legend-row">
7
7
 
8
- <span class="button-wrap legend-wrap">
9
-
10
- <button type="button">{{ item.button }}</button>
11
-
12
- </span>
8
+ {%- include {{ LoopButton | append : 'build.liquid' }}
9
+ type = item.button.type
10
+ style = item.button.style
11
+ func = item.button.func
12
+ title = item.button.title -%}
13
13
 
14
14
  </span>
15
15
 
16
16
  </p>
17
17
 
18
- {%- elsif include.context == "example" -%}
19
-
20
- {% assign IncludeFunc = include.func | append : '-button' %}
21
-
22
- {% assign IncludeContent = include.content | prepend : 'title-' | downcase %}
23
-
24
- <div class="button-wrap {{ IncludeFunc }} {{ IncludeContent }} {{ include.version | prepend : 'modify-' }}">
25
-
26
- <button type="button" {% if include.slim %}class="modify-slim"{% endif %}>
27
-
28
- <div class="block button-icon-wrap">
29
-
30
- <div class="block button-icon">
31
-
32
- {%- if include.func == "inactive" -%}
33
-
34
- {%- include {{ SvgIcon }} type="info" -%}
35
-
36
- {%- else -%}
37
-
38
- {%- include {{ SvgIcon }} type="cta" -%}
39
-
40
- {%- endif -%}
41
-
42
- </div>
43
-
44
- <div class="block button-title">
45
- {{ include.content }}
46
- </div>
47
-
48
- </div>
49
-
50
- </button>
51
-
52
- <span class="button-bg {{ IncludeFunc }}"></span>
53
-
54
- </div>
55
-
56
18
  {%- else -%}
57
19
 
58
20
  <p class="block form-row button-row">
59
21
 
60
- <span class="button-wrap">
61
-
62
- <button type="button">{{ item.button }}</button>
63
-
64
- </span>
22
+ {%- include {{ LoopButton | append : 'build.liquid' }}
23
+ type = item.button.type
24
+ style = item.button.style
25
+ func = item.button.func
26
+ title = item.button.title -%}
65
27
 
66
28
  </p>
67
29
 
@@ -1,9 +1,18 @@
1
1
 
2
2
  {% if page.subtitle %}
3
3
 
4
- <h1 class="subtitle {{ PageType }}
5
- {% if page.wide %}wide{% endif %}">
6
- {{ page.subtitle }}
7
- </h1>
4
+ {%- if include.type == "docs" -%}
5
+
6
+ <div class="title docs-subtitle">
7
+ {{ page.subtitle | prepend : '[' | append : ']' }}
8
+ </div>
9
+
10
+ {%- else -%}
11
+
12
+ <h1 class="subtitle {{ PageType }} {% if page.wide %}wide{% endif %}">
13
+ {{ page.subtitle }}
14
+ </h1>
15
+
16
+ {%- endif -%}
8
17
 
9
18
  {% endif %}
@@ -12,7 +12,19 @@
12
12
  {% else %}
13
13
 
14
14
  <h5 class="title {{ PageType }} {{ SiteStyle }}">
15
- {{ page.title }}
15
+
16
+ <div class="title docs-title">{{ page.title }}</div>
17
+
18
+ {%- if page.button -%}
19
+
20
+ <div class="block access-wrap">
21
+ <div class="block access-small">small</div>
22
+ <div class="block access-large">large</div>
23
+ <div class="block access-ratio">ratio</div>
24
+ </div>
25
+
26
+ {%- endif -%}
27
+
16
28
  </h5>
17
29
 
18
30
  {% endif %}
@@ -138,7 +138,7 @@ button {
138
138
  background: none;
139
139
  border-width: 0;
140
140
  cursor: pointer;
141
- color: white;
141
+ color: inherit;
142
142
  width: 100%;
143
143
  z-index: 2;
144
144
  }
@@ -1,7 +1,6 @@
1
1
 
2
2
  .button-wrap {
3
3
  @include borderRad($radius);
4
- @include bg($tint:100%);
5
4
  @include ib;
6
5
  -webkit-tap-highlight-color: transparent;
7
6
  position: relative;
@@ -21,23 +20,36 @@
21
20
  }
22
21
  }
23
22
 
23
+ .button-wrap.type-solid {
24
+ @include bg($tint:100%);
25
+ color: white;
26
+ fill: white;
27
+ }
28
+
29
+ .button-wrap.type-outline {
30
+ border: 1px solid map-get($color, slate);
31
+ color: map-get($color, slate);
32
+ fill: map-get($color, slate);
33
+ background-color: white;
34
+ }
35
+
24
36
  .button-bg {
25
37
  @include zeros(absolute);
26
38
  z-index: 1;
27
39
  }
28
40
 
29
- .button-bg.submit-button {
41
+ .button-bg.func-submit {
30
42
  @include borderRad($radius);
31
43
  }
32
44
 
33
- .button-wrap.update-button {
45
+ .button-wrap.func-update {
34
46
  overflow: hidden;
35
47
  }
36
48
 
37
- .button-wrap.switch-button {
38
- min-width: 9rem;
49
+ .button-bg.func-update {
50
+ right: 100%;
39
51
  }
40
52
 
41
- .button-bg.update-button {
42
- right: 100%;
53
+ .button-wrap.switch-button {
54
+ min-width: 9rem;
43
55
  }
@@ -0,0 +1,42 @@
1
+
2
+ .block.access-wrap {
3
+ grid-template-columns: repeat(3,1fr);
4
+ grid-column-gap: 10px;
5
+ align-items: center;
6
+ text-align: center;
7
+ font-size: 1.6rem;
8
+ display: grid;
9
+ }
10
+
11
+ %AccessBlock {
12
+ border: 1px solid rgba(gray,40%);
13
+ background-color: rgba(gray,10%);
14
+ color: gray;
15
+ padding-bottom: 9px;
16
+ padding-top: 11px;
17
+ border-radius: 2px;
18
+
19
+ &.pass {
20
+ border-color: rgba(green,40%);
21
+ background-color: rgba(green,10%);
22
+ color: green;
23
+ }
24
+
25
+ &.fail {
26
+ border-color: rgba(red,40%);
27
+ background-color: rgba(red,10%);
28
+ color: red;
29
+ }
30
+ }
31
+
32
+ .block.access-small {
33
+ @extend %AccessBlock;
34
+ }
35
+
36
+ .block.access-large {
37
+ @extend %AccessBlock;
38
+ }
39
+
40
+ .block.access-ratio {
41
+ @extend %AccessBlock;
42
+ }
@@ -29,6 +29,7 @@
29
29
 
30
30
  @import
31
31
  "block",
32
+ "block/access",
32
33
  "block/button",
33
34
  "block/clipper",
34
35
  "block/custom",
@@ -97,8 +98,21 @@
97
98
  "title",
98
99
  "title/overlay";
99
100
 
100
- .placeholder {
101
- width: 340px;
102
- height: 380px;
103
- background: #eee;
101
+ .title.type-page.style-docs {
102
+ grid-template-columns: auto 210px;
103
+ align-items: center;
104
+ display: grid;
105
+ }
106
+
107
+ .wrap.docs-title-wrap {
108
+ justify-content: flex-start;
109
+ grid-auto-flow: column;
110
+ grid-column-gap: 10px;
111
+ align-items: baseline;
112
+ display: grid;
113
+ }
114
+
115
+ .title.docs-subtitle {
116
+ color: map-get($color, gray);
117
+ font-size: 1.8rem;
104
118
  }
@@ -1,64 +1,64 @@
1
-
2
- @mixin background($col) {
3
- svg#background {
4
- fill: $col;
5
- }
6
-
7
- svg#tickets {
8
- g.number path {
9
- fill: $col;
10
- }
11
- path.bar {
12
- stroke: $col !important;
13
- }
14
- }
15
-
16
- .title._animate {
17
- opacity: 0.4;
18
- color: $col;
19
- }
20
- }
21
-
22
-
23
- @mixin chunk($col) {
24
- path {
25
- fill: $col;
26
- }
27
- .title {
28
- color: $col;
29
- }
30
- }
31
-
32
- @mixin rollover($type) {
33
-
34
- .list {
35
- &._text {
36
- &-roller {
37
- border-color: white;
38
- }
39
- &-output {
40
- border-color: rgba($type,0.2);
41
- }
42
- }
43
- }
44
-
45
- .item {
46
- &._text {
47
- &-roller {
48
- background-color: rgba($type,0.1);
49
- border-color: white;
50
- color: $type;
51
-
52
- &.active {
53
- background-color: $type;
54
- color: white;
55
- }
56
- }
57
- &-output {
58
- background-color: rgba($type,0.1);
59
- border-color: rgba($type,0.2);
60
- color: $type;
61
- }
62
- }
63
- }
64
- }
1
+ //
2
+ // @mixin background($col) {
3
+ // svg#background {
4
+ // fill: $col;
5
+ // }
6
+ //
7
+ // svg#tickets {
8
+ // g.number path {
9
+ // fill: $col;
10
+ // }
11
+ // path.bar {
12
+ // stroke: $col !important;
13
+ // }
14
+ // }
15
+ //
16
+ // .title._animate {
17
+ // opacity: 0.4;
18
+ // color: $col;
19
+ // }
20
+ // }
21
+ //
22
+ //
23
+ // @mixin chunk($col) {
24
+ // path {
25
+ // fill: $col;
26
+ // }
27
+ // .title {
28
+ // color: $col;
29
+ // }
30
+ // }
31
+ //
32
+ // @mixin rollover($type) {
33
+ //
34
+ // .list {
35
+ // &._text {
36
+ // &-roller {
37
+ // border-color: white;
38
+ // }
39
+ // &-output {
40
+ // border-color: rgba($type,0.2);
41
+ // }
42
+ // }
43
+ // }
44
+ //
45
+ // .item {
46
+ // &._text {
47
+ // &-roller {
48
+ // background-color: rgba($type,0.1);
49
+ // border-color: white;
50
+ // color: $type;
51
+ //
52
+ // &.active {
53
+ // background-color: $type;
54
+ // color: white;
55
+ // }
56
+ // }
57
+ // &-output {
58
+ // background-color: rgba($type,0.1);
59
+ // border-color: rgba($type,0.2);
60
+ // color: $type;
61
+ // }
62
+ // }
63
+ // }
64
+ // }
@@ -1,4 +1,10 @@
1
1
 
2
+ @mixin ThemeMorph($name,$color) {
3
+
4
+ svg#morph path#output.#{$name} {
5
+ stroke: $color;
6
+ }
7
+ }
2
8
 
3
9
  @mixin ThemeArtformHeader($name,$col) {
4
10
 
@@ -190,11 +196,16 @@
190
196
  }
191
197
  }
192
198
 
193
- @mixin ThemeButton($name,$col) {
199
+ @mixin ThemeButton($name,$color) {
200
+
194
201
  .area.title-#{$name} {
202
+
195
203
  .button-wrap {
196
- border-color: $col;
197
- background: $col;
204
+ background: $color;
205
+
206
+ &:hover {
207
+ background: darken($color,3%);
208
+ }
198
209
  }
199
210
  }
200
211
  }
@@ -38,7 +38,7 @@ $color : (
38
38
  green : #259d31,
39
39
  smoke : darken(white,7%),
40
40
  gray : darken(white,25%),
41
- gun : darken(white,50%),
41
+ gun : darken(white,60%),
42
42
  slate : lighten(black,20%),
43
43
  carbon : lighten(black,10%),
44
44
  coal : lighten(black,5%)
@@ -26,7 +26,7 @@ let Color = {
26
26
  park : '#009640',
27
27
  news : '#009fe3',
28
28
  dodgers : '#0092FF',
29
- green : '#259d31'
29
+ green : '#259d31',
30
30
  };
31
31
 
32
32
  let Artforms = {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: futuro
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.8.9
4
+ version: 0.9.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Paul Heading
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-04-21 00:00:00.000000000 Z
11
+ date: 2020-04-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -113,14 +113,14 @@ files:
113
113
  - _includes/html/overlay/wrap.liquid
114
114
  - _includes/html/page/clippies.liquid
115
115
  - _includes/html/page/content.liquid
116
+ - _includes/html/page/content/artwork.liquid
116
117
  - _includes/html/page/content/chart.liquid
117
118
  - _includes/html/page/content/header.liquid
118
119
  - _includes/html/page/content/loop.liquid
119
- - _includes/html/page/content/loop/artwork.liquid
120
120
  - _includes/html/page/content/loop/artwork/image.liquid
121
121
  - _includes/html/page/content/loop/artwork/video.liquid
122
- - _includes/html/page/content/loop/button.liquid
123
- - _includes/html/page/content/loop/button/container.liquid
122
+ - _includes/html/page/content/loop/button/build.liquid
123
+ - _includes/html/page/content/loop/button/example.liquid
124
124
  - _includes/html/page/content/loop/chart.liquid
125
125
  - _includes/html/page/content/loop/chart/assign.liquid
126
126
  - _includes/html/page/content/loop/form.liquid
@@ -219,6 +219,7 @@ files:
219
219
  - _sass/area/overlay.scss
220
220
  - _sass/area/page.scss
221
221
  - _sass/area/topbar.scss
222
+ - _sass/block/access.scss
222
223
  - _sass/block/button.scss
223
224
  - _sass/block/chart.scss
224
225
  - _sass/block/clipper.scss
@@ -1,18 +0,0 @@
1
-
2
- {%- if item.submit -%}
3
-
4
- {%- include {{ LoopButton | append : 'container.liquid' }} func="submit" content=item.submit -%}
5
-
6
- {%- elsif item.update -%}
7
-
8
- {%- include {{ LoopButton | append : 'container.liquid' }} func="update" content=item.update -%}
9
-
10
- {%- elsif item.option -%}
11
-
12
- {%- include {{ LoopButton | append : 'container.liquid' }} func="option" content=item.option -%}
13
-
14
- {%- elsif item.inactive -%}
15
-
16
- {%- include {{ LoopButton | append : 'container.liquid' }} func="inactive" content=item.inactive -%}
17
-
18
- {%- endif -%}
@@ -1,58 +0,0 @@
1
-
2
- <div class="button-container">
3
-
4
- <div class="button-version">
5
-
6
- <div class="title button-version">Primary</div>
7
-
8
- {%- include {{ LoopForm | append : 'button.liquid' }}
9
- context = "example"
10
- version = "primary"
11
- func = include.func
12
- content = include.content -%}
13
-
14
- </div>
15
-
16
- <div class="button-version">
17
-
18
- <div class="title button-version">Pri. Slim</div>
19
-
20
- {%- include {{ LoopForm | append : 'button.liquid' }}
21
- context = "example"
22
- version = "primary"
23
- func = include.func
24
- content = include.content
25
- slim = true -%}
26
-
27
- </div>
28
-
29
- {%- unless include.func == "inactive" -%}
30
-
31
- <div class="button-version">
32
-
33
- <div class="title button-version">Secondary</div>
34
-
35
- {%- include {{ LoopForm | append : 'button.liquid' }}
36
- context = "example"
37
- version = "secondary"
38
- func = include.func
39
- content = include.content -%}
40
-
41
- </div>
42
-
43
- <div class="button-version">
44
-
45
- <div class="title button-version">Sec. Slim</div>
46
-
47
- {%- include {{ LoopForm | append : 'button.liquid' }}
48
- context = "example"
49
- version = "secondary"
50
- func = include.func
51
- content = include.content
52
- slim = true -%}
53
-
54
- </div>
55
-
56
- {%- endunless -%}
57
-
58
- </div>