betterplace-content 0.7.75 → 0.7.76

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: 971f20b6a88fd3b74e7710acf9b28c12ed0a32880287e8049bbe0157ebd10b39
4
- data.tar.gz: 873dcc87fb8c2e11fd09cc5d5c21ad3a4bbede5302f2892f7914d0d3866aa39f
3
+ metadata.gz: 1e71dcab6a361b3d5364eb7eda65f336e367d382e68a832d252bd2a3a6c25100
4
+ data.tar.gz: dc7e6f4d31422ea07058594aa4d00124fa24968f49d65bb30c1a7de730543162
5
5
  SHA512:
6
- metadata.gz: 844f3206f269cc8029479022106e3aa122d694eb9ca2c06abc1d943320174774d2c105035e6a8f86829931d6bdd3d0b5c21a1a2008bc3b7e2d378e6d6186f01c
7
- data.tar.gz: abeee16014c95b813ef23447981db42cbb41131f5333a50a501f4a126446bf69141bf962bc1315df548ca6d7c1317c497421bb7d84e7d8383068fa62236e6eee
6
+ metadata.gz: 1c6c75027f01981819ba70e9c79b1a30d9997ea4129f80815c9ee6786658155d8f01968e245123978dcc5112b0cb436f3402b945c789aacc4e3d7aa5c864b800
7
+ data.tar.gz: 984b4395aa25f1c7011ae4a4e2afa0bdee05633c464dcf28f551b43bd6696b72ee03e42c06e86cc451abaee6c0927089d2c074e1083ffc72190e3ab01a0bb1ef
@@ -1,8 +1,8 @@
1
1
  .generic-team-list {
2
- font-size: 0;
3
2
  padding: 0;
4
3
  margin-left: 0;
5
4
  margin-right: 0;
5
+ list-style: none;
6
6
  display: flex;
7
7
  flex-wrap: wrap;
8
8
 
@@ -10,9 +10,7 @@
10
10
  position: relative;
11
11
  z-index: 10;
12
12
  display: block;
13
- vertical-align: top;
14
13
  font-size: 14px;
15
- font-size: 0;
16
14
 
17
15
  @include desktop {
18
16
  width: 20%;
@@ -23,21 +21,15 @@
23
21
 
24
22
  .user-image {
25
23
  display: block;
26
- vertical-align: top;
27
24
  cursor: pointer;
28
25
 
29
- .generic-admin-box {
30
- font-size: 12px;
31
- position: absolute;
32
- top: 0;
33
- left: 0;
34
- }
35
26
  img {
36
- image-rendering:-webkit-optimize-contrast;
37
27
  cursor: default;
38
28
  }
39
29
 
40
- &:hover +.name-and-meta { display: block; }
30
+ &:hover + .name-and-meta {
31
+ display: block;
32
+ }
41
33
  }
42
34
 
43
35
  .name-and-meta {
@@ -47,13 +39,17 @@
47
39
  width: 100%;
48
40
  text-align: center;
49
41
  background: white;
50
- background: rgba(255,255,255,0.9);
42
+ background: rgba(255, 255, 255, 0.9);
51
43
  display: none;
52
44
  padding: 10px;
53
- box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
54
- -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
55
- & { display: none;}
56
- &:hover { display: block; }
45
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
46
+ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
47
+ & {
48
+ display: none;
49
+ }
50
+ &:hover {
51
+ display: block;
52
+ }
57
53
 
58
54
  p {
59
55
  color: $dark-grey;
@@ -73,8 +69,9 @@
73
69
  height: 0;
74
70
  border-style: solid;
75
71
  border-width: 0 10px 10px 10px;
76
- border-color: transparent transparent white transparent;
77
- border-color: transparent transparent rgba(255,255,255,0.9) transparent;
72
+ border-color: transparent transparent white transparent;
73
+ border-color: transparent transparent rgba(255, 255, 255, 0.9)
74
+ transparent;
78
75
  }
79
76
  }
80
77
 
@@ -93,12 +90,20 @@
93
90
  }
94
91
 
95
92
  &.has-speech-bubble {
96
- @include desktop { width: 40%; }
97
- @include phone { width: 100%; }
93
+ @include desktop {
94
+ width: 40%;
95
+ }
96
+ @include phone {
97
+ width: 100%;
98
+ }
98
99
  .user-image {
99
100
  float: left;
100
- @include desktop { width: 50%; }
101
- @include phone { width: 50%; }
101
+ @include desktop {
102
+ width: 50%;
103
+ }
104
+ @include phone {
105
+ width: 50%;
106
+ }
102
107
  }
103
108
  .name-and-meta {
104
109
  width: 50%;
@@ -111,7 +116,6 @@
111
116
  position: relative;
112
117
  display: block;
113
118
  width: 50%;
114
- vertical-align: top;
115
119
  font-weight: normal;
116
120
  font-size: 14px;
117
121
  float: left;
@@ -124,11 +128,6 @@
124
128
  padding: 10px 10px 0px 10px;
125
129
  }
126
130
 
127
- table {
128
- height: 100%;
129
- min-height: 135px;
130
- }
131
-
132
131
  &:before {
133
132
  content: '';
134
133
  position: absolute;
@@ -0,0 +1,222 @@
1
+
2
+ .generic-team-list-interlaced {
3
+ margin: 0 -0.5%;
4
+ padding: 0;
5
+ list-style: none;
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+
9
+ @include phone {
10
+ font-size: 4.25vw;
11
+ }
12
+
13
+ li {
14
+ $tile-aspect-ratio: percentage(600/365);
15
+
16
+ position: relative;
17
+ display: block;
18
+ z-index: 10;
19
+
20
+ @include desktop {
21
+ $columns: 5;
22
+ $column-width: 100%/$columns;
23
+ $gutter: 1%;
24
+ $gutter-per-column: percentage($gutter/($column-width - $gutter));
25
+
26
+ width: $column-width;
27
+ padding: $gutter/2;
28
+
29
+ &:nth-child(5n+1) .tile,
30
+ &:nth-child(5n+3) .tile,
31
+ &:nth-child(5n) .tile {
32
+ margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column);
33
+ .speech-bubble {
34
+ top: 50%;
35
+ bottom: auto;
36
+ }
37
+ }
38
+
39
+ &.halfling {
40
+ .tile {
41
+ padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column);
42
+ }
43
+ }
44
+
45
+ .speech-bubble {
46
+ margin: $gutter-per-column/2 $gutter-per-column;
47
+ }
48
+ }
49
+
50
+ @include phone {
51
+ $columns: 2;
52
+ $column-width: 100%/$columns;
53
+ $gutter: 2%;
54
+ $gutter-per-column: percentage($gutter/($column-width - $gutter));
55
+
56
+ width: $column-width;
57
+ padding: $gutter/2;
58
+
59
+ &.desktop-only {
60
+ display: none;
61
+ }
62
+
63
+ &:nth-child(2n+1) .tile {
64
+ margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column);
65
+ .speech-bubble {
66
+ top: 50%;
67
+ bottom: auto;
68
+ }
69
+ }
70
+
71
+ &.halfling {
72
+ article {
73
+ padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column);
74
+ }
75
+ }
76
+
77
+ .speech-bubble {
78
+ margin: $gutter-per-column/2 $gutter-per-column;
79
+ }
80
+ }
81
+
82
+ &.spacer {
83
+ z-index: 0;
84
+ }
85
+
86
+ &:nth-child(7n) .tile {
87
+ background: #4597a2;
88
+ }
89
+ &:nth-child(7n+1) .tile {
90
+ background: #f5cd47;
91
+ }
92
+ &:nth-child(7n+2) .tile {
93
+ background: #ff6f6c;
94
+ }
95
+ &:nth-child(7n+3) .tile {
96
+ background: #60b2a4;
97
+ }
98
+ &:nth-child(7n+4) .tile {
99
+ background: #6d2c64;
100
+ }
101
+ &:nth-child(7n+5) .tile {
102
+ background: #f5cd47;
103
+ }
104
+ &:nth-child(7n+6) .tile {
105
+ background: #60b2a4;
106
+ }
107
+
108
+ .tile {
109
+ position: relative;
110
+ width: 100%;
111
+ padding-top: $tile-aspect-ratio; // See https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169
112
+ }
113
+
114
+ .filler {
115
+ position: absolute;
116
+ top: 0;
117
+ left: 0;
118
+ bottom: 0;
119
+ right: 0;
120
+ }
121
+
122
+ .user-image {
123
+ display: block;
124
+ cursor: pointer;
125
+
126
+ img {
127
+ cursor: default;
128
+ }
129
+
130
+ &:hover + .name-and-meta {
131
+ display: block;
132
+ }
133
+ }
134
+
135
+ .name-and-meta {
136
+ hyphens: auto;
137
+ -webkit-hyphens: auto;
138
+ position: absolute;
139
+ bottom: 0;
140
+ left: 0;
141
+ width: 100%;
142
+ text-align: center;
143
+ background: rgba(255, 255, 255, 0.9);
144
+ padding: .5em;
145
+ opacity: 0;
146
+ transition: opacity 0.3s;
147
+
148
+ p {
149
+ color: $dark-grey;
150
+ font-weight: 300;
151
+ font-size: 0.875em;
152
+ line-height: 1.25;
153
+ margin-bottom: 0;
154
+ }
155
+ }
156
+
157
+ &:hover .name-and-meta {
158
+ opacity: 1;
159
+ }
160
+
161
+ img {
162
+ width: 100%;
163
+ height: auto;
164
+ display: block;
165
+ }
166
+
167
+ .speech-bubble {
168
+ hyphens: auto;
169
+ -webkit-hyphens: auto;
170
+ position: absolute;
171
+ left: 100%;
172
+ top: auto;
173
+ bottom: 50%;
174
+ display: block;
175
+ width: 100%;
176
+ min-height: 50%;
177
+ font-weight: normal;
178
+ background-color: white;
179
+ padding: 0.5em;
180
+
181
+ &:before {
182
+ content: '';
183
+ position: absolute;
184
+ left: -2em;
185
+ width: 0;
186
+ height: 0;
187
+ border-style: solid;
188
+ border-width: 1em 2em 1em 0;
189
+ border-color: transparent white transparent transparent;
190
+ top: 50%;
191
+ margin-top: -1em;
192
+ }
193
+
194
+ h2 {
195
+ font-weight: 300;
196
+ margin-top: 0;
197
+ font-size: 1em;
198
+ line-height: 1.5;
199
+ }
200
+ p {
201
+ font-weight: 300;
202
+ margin-bottom: 0;
203
+ font-size: 0.66667em;
204
+ line-height: 1.25;
205
+ a {
206
+ font-weight: 300;
207
+ color: inherit;
208
+ }
209
+ }
210
+ }
211
+ }
212
+
213
+ // Additional text styles
214
+ .claim {
215
+ padding: .5em;
216
+ margin: 0;
217
+ color: rgba(255, 255, 255, 0.9);
218
+ font-weight: bold;
219
+ font-size: 1.5em;
220
+ text-align: center;
221
+ }
222
+ }
@@ -1,63 +1,15 @@
1
1
  body.team
2
- .generic-content-header
3
- +phone
4
- display: none
5
- +desktop
6
- height: 560px
7
- z-index: 0
8
- background: url('#{$site_baseurl}/assets/theme_images/team/generic-content-header_desktop.jpg') no-repeat 50% 50% $very-light-grey
9
- size: cover
10
-
11
- &:before
12
- display: none
13
-
14
- h1
15
- position: relative
16
- +desktop
17
- margin-bottom: 10px
18
- +phone
19
- margin-top: 30px
20
-
21
- h1,
22
- .unit-descriptions,
23
- .unit-descriptions p
24
- +desktop
25
- text-shadow: 1px 1px 0 #444
26
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5)
27
- color: white
28
-
29
- .content-wrapper
30
- padding-bottom: 80px
31
- +desktop
32
- padding-top: 40px
33
-
34
- .content-wrapper > .container
35
- +desktop
36
- margin-top: -422px
37
-
38
- .tax-receipt-hint .container
39
- +desktop
40
- margin-top: 0
41
2
 
42
3
  .unit-select
43
- padding: 10px 20px 10px 0px
44
- +desktop
45
- color: white
4
+ padding: 0.5rem 0
5
+ display: flex
6
+ position: relative
7
+ z-index: 10 // Stay on top of targetable sheet’s padding.
46
8
 
47
9
  a
48
- padding: 4px 12px 4px 0
49
- display: inline-block
10
+ display: block
11
+ padding: 0.25rem 0.75rem
50
12
  border-right: 1px solid #4c4b4a
51
- color: $medium-green
52
- font-weight: normal
53
- font-size: 16px
54
- margin-right: 12px
55
- +desktop
56
- text-shadow: 1px 1px 0 #444
57
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5)
58
-
59
- +phone
60
- margin-bottom: 5px
61
13
 
62
14
  &:first-child
63
15
  padding-left: 0
@@ -65,38 +17,21 @@ body.team
65
17
  &:last-child
66
18
  border-right-width: 0
67
19
 
68
- &.active
69
- +desktop
70
- color: white
71
-
72
- &:hover
73
- text-decoration: none
74
-
75
- +phone
76
- text-decoration: underline
77
-
78
20
  .unit-descriptions
79
- font-size: 14px
80
- line-height: 22px
81
- padding: 0 20px 17px 0px
21
+ font-size: 0.875rem
22
+ line-height: 1.5
82
23
  font-weight: 300
83
- p
84
- margin-bottom: 0
85
-
86
- a
87
- color: $medium-green
88
- white-space: nowrap
89
-
90
- .jobs-row
91
- text-align: center
92
- +desktop
93
- margin-top: 74px
94
- +phone
95
- margin-top: 50px
96
-
97
- h2
98
- margin-bottom: 25px
99
24
 
100
- p
101
- text-align: center
102
- margin-bottom: 20px
25
+ section.targetable
26
+ padding-top: 3rem // Have some space between target anchor an content.
27
+ margin-top: -3rem // Reset position.
28
+ // Hide not targeted section.
29
+ height: 0
30
+ overflow: hidden
31
+ opacity: 0
32
+ transition: opacity 0.3s ease
33
+
34
+ &:target
35
+ height: auto
36
+ overflow: initial
37
+ opacity: 1
@@ -16,6 +16,7 @@ $site_baseurl: "{{ site.baseurl }}"
16
16
  @import generics/search-form
17
17
  @import generics/sidebar-menu
18
18
  @import generics/team_list
19
+ @import generics/team_list_interlaced
19
20
  @import generics/topicblock
20
21
  @import generics/hero_image
21
22
  @import generics/hero_search
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: betterplace-content
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.7.75
4
+ version: 0.7.76
5
5
  platform: ruby
6
6
  authors:
7
7
  - betterplace.org Developers
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-01-29 00:00:00.000000000 Z
11
+ date: 2021-02-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -134,6 +134,7 @@ files:
134
134
  - _sass/generics/search-form.scss
135
135
  - _sass/generics/sidebar-menu.scss
136
136
  - _sass/generics/team_list.scss
137
+ - _sass/generics/team_list_interlaced.scss
137
138
  - _sass/generics/topicblock.sass
138
139
  - _sass/initialize/colors.sass
139
140
  - _sass/initialize/media_queries.sass
@@ -217,7 +218,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
217
218
  - !ruby/object:Gem::Version
218
219
  version: '0'
219
220
  requirements: []
220
- rubygems_version: 3.2.4
221
+ rubygems_version: 3.1.4
221
222
  signing_key:
222
223
  specification_version: 4
223
224
  summary: betterplace.org's Jekyll Content Theme