futuro 0.8.9 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
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>