jekyll-theme-open-project 0.1.6 → 1.0.0.pre.pre

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.
@@ -41,11 +41,16 @@ a {
41
41
  .main-section {
42
42
  margin-top: 50px;
43
43
 
44
+ display: flex;
45
+ flex-flow: column nowrap;
46
+
44
47
  @media screen and (min-width: $bigscreen-breakpoint) {
45
48
  margin-top: 100px;
46
49
  }
47
50
 
48
51
  > .puny-label {
52
+ align-self: center;
53
+
49
54
  text-align: center;
50
55
  margin: 0;
51
56
  font-size: 18px;
@@ -54,19 +59,59 @@ a {
54
59
  }
55
60
 
56
61
  > .title {
62
+ align-self: center;
63
+
57
64
  text-align: center;
58
65
  font-weight: 600;
59
66
 
60
67
  margin-top: 0;
61
68
  margin-bottom: 1em;
62
69
  font-size: 32px;
70
+
71
+ position: relative;
72
+
73
+ &:after {
74
+ // Underlaying border feature can be turned on
75
+ // in extending sections by providing border-bottom-color
76
+ // on this :after element.
77
+ content: " ";
78
+ border-bottom-width: 12px;
79
+ border-bottom-style: solid;
80
+ border-bottom-color: transparent;
81
+ position: absolute;
82
+ bottom: 8px;
83
+ left: -5px;
84
+ right: -5px;
85
+ z-index: -1;
86
+ }
63
87
  }
64
88
 
65
89
  > .items {
90
+ align-self: stretch;
91
+
66
92
  @extend .item-grid;
67
93
  }
68
94
  }
69
95
 
96
+ .with-symbol-background {
97
+ position: relative;
98
+
99
+ > * {
100
+ z-index: 1;
101
+ }
102
+ > svg {
103
+ z-index: 0;
104
+ position: absolute;
105
+ top: -38px;
106
+ right: -60px;
107
+ height: 525px;
108
+ width: 525px;
109
+ path {
110
+ fill: rgba($primary-color, 0.08);
111
+ }
112
+ }
113
+ }
114
+
70
115
  @mixin hoverable-card($base-y, $base-blur, $color) {
71
116
  $hovered-y: $base-y * 2;
72
117
  $hovered-blur: $base-blur * 2;
@@ -88,19 +133,150 @@ a {
88
133
  text-decoration: none;
89
134
  }
90
135
 
91
- .header {
92
- font-weight: 600;
93
- margin: 0 0 .5em 0;
136
+ header {
137
+ > .parent-project {
138
+ display: flex;
139
+ flex-flow: row nowrap;
140
+ align-items: center;
141
+ justify-content: space-between;
142
+
143
+ .project-logo {
144
+ width: 32px;
145
+ height: 32px;
146
+ vertical-align: middle;
147
+ margin-right: 10px;
148
+ }
149
+ .project-title {
150
+ font-size: 14px;
151
+ font-weight: 600;
152
+ flex: 1;
153
+
154
+ color: $primary-color;
155
+ body.layout-software-index & {
156
+ color: $hub-software--primary-color;
157
+ }
158
+ body.layout-spec-index & {
159
+ color: $hub-specs--primary-color;
160
+ }
161
+ }
162
+ }
163
+ > .title {
164
+ font-weight: 600;
165
+ margin: 0 0 .5em 0;
166
+ }
94
167
  }
168
+
95
169
  .body {
96
170
  margin: 0;
97
171
  }
172
+
173
+ footer {
174
+ color: grey;
175
+ font-size: 14px;
176
+
177
+ .last-update, .tags {
178
+ margin: 6px 0 0 0;
179
+ }
180
+
181
+ .last-update {
182
+ padding: 0;
183
+ }
184
+
185
+ .tags {
186
+ list-style: none;
187
+ padding: 0;
188
+
189
+ > li {
190
+ display: inline;
191
+ font-weight: 600;
192
+ margin: 0;
193
+ padding: 0;
194
+
195
+ &::after {
196
+ content: ", ";
197
+ color: grey;
198
+ font-weight: normal;
199
+ }
200
+ &:last-child::after {
201
+ content: "";
202
+ }
203
+
204
+ color: $primary-color;
205
+
206
+ body.layout-software-index & {
207
+ color: $hub-software--primary-color;
208
+ }
209
+ body.layout-spec-index & {
210
+ color: $hub-specs--primary-color;
211
+ }
212
+ }
213
+ }
214
+ }
215
+ }
216
+
217
+ .post-meta-row {
218
+ display: flex;
219
+ flex-flow: row wrap;
220
+ align-items: center;
221
+
222
+ color: grey;
223
+ font-size: 14px;
224
+
225
+ .author-name {
226
+ margin-right: 10px;
227
+ white-space: nowrap;
228
+
229
+ font-weight: 600;
230
+ color: $primary-color;
231
+ }
232
+
233
+ .author-avatar {
234
+ margin-right: 10px;
235
+ width: 32px;
236
+ height: 32px;
237
+ border-radius: 50%;
238
+ overflow: hidden;
239
+
240
+ display: inline-block;
241
+ vertical-align: middle;
242
+ img {
243
+ vertical-align: middle;
244
+ }
245
+ }
98
246
  }
99
247
 
100
248
  .post-card {
101
- .meta {
102
- margin-top: 8px;
103
- color: grey;
249
+ position: relative;
250
+
251
+ &.has-parent-project {
252
+ padding-top: 20px;
253
+ }
254
+ .hub-symbol {
255
+ position: absolute;
256
+ top: 10px;
257
+ right: 10px;
258
+ width: 28px;
259
+ height: 28px;
260
+
261
+ svg path {
262
+ fill: lighten(desaturate($primary-color, 30), 45);
263
+ }
264
+ }
265
+ header {
266
+ .title {
267
+ font-weight: 600;
268
+ font-size: 22px;
269
+ }
270
+ .external-link-icon {
271
+ img {
272
+ width: 16px;
273
+ height: 16px;
274
+ }
275
+ }
276
+ }
277
+ footer {
278
+ @extend .post-meta-row;
279
+ margin-top: 14px;
104
280
  }
105
281
  }
106
282
 
@@ -111,11 +287,16 @@ a {
111
287
  .title {
112
288
  font-size: 36px;
113
289
  font-weight: 600;
290
+ margin-bottom: 14px;
114
291
  }
115
292
  }
116
293
  .body {
117
294
  font-size: 18px;
118
295
  line-height: 1.65;
296
+
297
+ > p:first-child {
298
+ margin-top: 0;
299
+ }
119
300
  }
120
301
  }
121
302
 
@@ -147,6 +328,11 @@ body {
147
328
 
148
329
  > main {
149
330
  flex: 1;
331
+ overflow: hidden;
332
+ padding-bottom: 50px;
333
+ @media screen and (min-width: $bigscreen-breakpoint) {
334
+ padding-bottom: 100px;
335
+ }
150
336
  }
151
337
  }
152
338
  @media screen and (min-width: $bigscreen-breakpoint) {
@@ -165,6 +351,7 @@ body {
165
351
  header,
166
352
  footer,
167
353
  section,
354
+ .hero,
168
355
  article {
169
356
  body > &,
170
357
  body > .underlay > &,
@@ -40,68 +40,128 @@ body > .underlay > footer {
40
40
  }
41
41
  }
42
42
 
43
- body > .underlay.header {
44
- background: $header-background;
43
+ .underlay.header {
44
+ body > & {
45
+ background: $header-background;
45
46
 
46
- > .hero {
47
- padding-top: 20px;
48
- padding-bottom: 40px;
47
+ > .hero {
48
+ padding-top: 20px;
49
+ padding-bottom: 60px;
50
+
51
+ @media screen and (min-width: $widescreen-breakpoint) {
52
+ padding-top: 65px;
53
+ padding-bottom: 110px;
54
+ }
55
+
56
+ text-align: center;
57
+ color: white;
58
+
59
+ > .text {
60
+ > .title {
61
+ font-size: 44px;
62
+ font-weight: bold;
63
+ margin: 0 0 20px 0;
64
+ line-height: 1.2;
65
+ }
66
+ > .desc {
67
+ font-size: 20px;
68
+ margin: 0;
69
+ }
70
+ > .cta { // Call to action.
71
+ margin-top: 50px;
72
+
73
+ .button {
74
+ font-weight: 800;
75
+ font-size: 18px;
76
+ padding: 12px 18px;
77
+ border-radius: 4px;
78
+
79
+ .icon {
80
+ margin-right: 10px;
81
+ font-weight: 400;
82
+ position: relative;
83
+ top: 2px;
84
+ font-size: 120%;
85
+ }
86
+
87
+ &, &:link, &:hover, &:visited {
88
+ color: $primary-dark-color;
89
+ background-color: white;
90
+ }
91
+ }
92
+ }
93
+ }
94
+ }
95
+ }
96
+ body.layout-software-index > & {
97
+ background: $hub-software--hero-background;
98
+ }
99
+ body.layout-spec-index > & {
100
+ background: $hub-specs--hero-background;
101
+ }
102
+ body.layout-home > & {
103
+ background: $superhero-background;
49
104
 
50
105
  @media screen and (min-width: $widescreen-breakpoint) {
51
- padding-top: 45px;
52
- padding-bottom: 110px;
106
+ background:
107
+ repeat-x bottom center/auto 30px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'><polygon fill='white' points='0,0 28,0 35,10 45,10 52,0 80,0 80,10 0,10'/></svg>"),
108
+ $superhero-background;
53
109
  }
54
110
 
55
- text-align: center;
56
- color: white;
111
+ > .hero {
112
+ text-align: left;
57
113
 
58
- > h1 {
59
- font-size: 44px;
60
- font-weight: bold;
61
- margin: 0;
62
- }
63
- > .desc {
64
- font-size: 20px;
65
- margin: 0;
114
+ .illustration {
115
+ display: none;
116
+ }
117
+
118
+ @media screen and (min-width: $bigscreen-breakpoint) {
119
+ display: flex;
120
+ flex-flow: row nowrap;
121
+
122
+ .text {
123
+ width: 550px;
124
+ }
125
+ .illustration {
126
+ flex: 1;
127
+ display: flex;
128
+ flex-flow: column nowrap;
129
+ align-items: center;
130
+ }
131
+ }
66
132
  }
67
133
  }
68
134
  }
69
- body.layout-index-page > .underlay.header {
70
- background: $hero-background;
71
- }
72
- body.layout-home > .underlay.header {
73
- background: $superhero-background;
74
- > .hero {
75
- text-align: left;
76
- }
77
- }
78
135
 
79
136
  body > .underlay.footer {
80
137
  background: #2E333B;
81
- margin-top: 50px;
82
- @media screen and (min-width: $bigscreen-breakpoint) {
83
- margin-top: 100px;
84
- }
85
138
  }
86
139
 
87
140
  body > .underlay > header {
88
- padding-top: 32px;
89
- padding-bottom: 32px;
141
+ padding-top: 26px;
142
+ padding-bottom: 26px;
90
143
 
91
144
  color: white;
92
145
 
93
146
  > nav {
94
147
  flex: 1;
148
+
95
149
  > * {
96
150
  font-weight: 600;
97
- margin-right: 40px;
151
+ margin-right: 20px;
152
+ padding: 6px 10px 6px 10px;
153
+ white-space: nowrap;
98
154
  }
99
155
  }
100
156
 
101
157
  > nav, > .social-links {
102
- color: $primary-color;
158
+ color: white;
159
+
160
+ span {
161
+ background-color: rgba(black, 0.1);
162
+ }
103
163
  a:link, a:hover, a:visited {
104
- color: white;
164
+ color: white;
105
165
  }
106
166
  }
107
167
  }
@@ -0,0 +1,4 @@
1
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.7 0H1.7V2H6.3L0 8.3L1.4 9.7L7.7 3.4V8H9.7V1C9.7 0.4 9.3 0 8.7 0Z" transform="translate(12.6001) scale(2)" fill="#FF6357"/>
3
+ <path d="M14 15H1C0.4 15 0 14.6 0 14V1C0 0.4 0.4 0 1 0H5V2H2V13H13V10H15V14C15 14.6 14.6 15 14 15Z" transform="translate(0 2) scale(2)" fill="#FF6357"/>
4
+ </svg>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-open-project
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.6
4
+ version: 1.0.0.pre.pre
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ribose Inc.
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-05-29 00:00:00.000000000 Z
11
+ date: 2018-06-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -121,20 +121,23 @@ files:
121
121
  - _includes/home-hub.html
122
122
  - _includes/home-project.html
123
123
  - _includes/index-page-hero.html
124
+ - _includes/index-page-item-filter.html
124
125
  - _includes/legal.html
125
126
  - _includes/logo.html
126
127
  - _includes/nav-page-link.html
127
128
  - _includes/post-card.html
129
+ - _includes/project-nav.html
128
130
  - _includes/social-links.html
131
+ - _includes/software-card-hub.html
129
132
  - _includes/symbol.svg
130
133
  - _includes/title.html
131
134
  - _layouts/blog-index.html
132
135
  - _layouts/default.html
133
136
  - _layouts/home.html
134
- - _layouts/index-page.html
135
137
  - _layouts/page.html
136
138
  - _layouts/post.html
137
139
  - _layouts/product.html
140
+ - _layouts/project-index.html
138
141
  - _layouts/software-index.html
139
142
  - _layouts/spec-index.html
140
143
  - _layouts/spec.html
@@ -149,6 +152,7 @@ files:
149
152
  - assets/fa/fa-brands.js
150
153
  - assets/fa/fa-solid.js
151
154
  - assets/fa/fontawesome.js
155
+ - assets/img/external-link.svg
152
156
  homepage: https://github.com/riboseinc/jekyll-theme-open-project/
153
157
  licenses:
154
158
  - MIT
@@ -164,9 +168,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
164
168
  version: '0'
165
169
  required_rubygems_version: !ruby/object:Gem::Requirement
166
170
  requirements:
167
- - - ">="
171
+ - - ">"
168
172
  - !ruby/object:Gem::Version
169
- version: '0'
173
+ version: 1.3.1
170
174
  requirements: []
171
175
  rubyforge_project:
172
176
  rubygems_version: 2.6.14.1