betterplace-content 0.7.75 → 0.7.76

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: 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