betterplace-content 0.4.18 → 0.5.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
  SHA1:
3
- metadata.gz: d8d1ba1c5228e25e4011f1f09f45aa41e9f4c237
4
- data.tar.gz: d61620120349c334ad1f715445b37257571f11db
3
+ metadata.gz: b801b86eb42d2be851e943b37be09c9710e90e93
4
+ data.tar.gz: a9e86be230410ef9e0cf5d38c2f6fe12b68a69ed
5
5
  SHA512:
6
- metadata.gz: 96f5ef4ec19b8f49cb2659cb5fa01787a598e9c526f81baba2075d54e2311435a0ccdec4fb70f84eca767aca87683ab33ff89faba3d0a382ac0ec7b5c1187627
7
- data.tar.gz: b040055e62eaa9c4e43433927cd5fd9d4ba45ee6371aa9a98ec6a06085116a746a81668cfc16b62165bc363b0e681a1a3e26c98f5a53248d53936ebbfcfca508
6
+ metadata.gz: 77dd4c084a91c6ef9ebdb94f73e723a37cbf75dbc59b3a1db1b6c137784cd7366c3c36bc670c2192249f00d859fbcbbe952a332202e4e5f7a2e38533a8b2eabb
7
+ data.tar.gz: 179fee844814166f193edea79cfb7b34df2eeb7bd8a933cda937cc582efca3be285b39900452d705f85bd4c98fbbc691cfb6a1dba3dcd4fb0cf9b675207dae7a
@@ -30,11 +30,19 @@
30
30
 
31
31
  <script src="{{ style_host }}/de/layouts/current_javascript/application"></script>
32
32
  <script src="{{ style_host }}/de/layouts/current_pack/cookies_banner"></script>
33
+
33
34
  {% comment %}Das content--theme legt die default.css für jedes repo ab. Nicht geil, aber OK.{% endcomment %}
34
35
  <link rel="stylesheet" href="{{ style_host }}{{ site.baseurl }}/assets/css/default.css" />
36
+
37
+ {% comment %}Für das Layout "landingpage" haben wir eine zusätzliche Datei {% endcomment %}
38
+ {% if page.layout == 'landingpage' or page.layout == 'lpm-styleguide' %}
39
+ <link rel="stylesheet" href="{{ style_host }}{{ site.baseurl }}/assets/css/landingpage_modules.css" />
40
+ {% endif %}
41
+
35
42
  {% if site._options.content.styles %}
36
43
  <link rel="stylesheet" href="{{ style_host }}{{ site.baseurl }}{{ site._options.content.styles }}" />
37
44
  {% endif %}
45
+
38
46
  <link rel="stylesheet" href="{{ style_host }}/de/layouts/current_stylesheet/generics_bootstrap" />
39
47
  <link rel="stylesheet" href="{{ style_host }}/de/layouts/current_stylesheet/generics" />
40
48
  <link rel="stylesheet" href="{{ style_host }}/de/layouts/current_stylesheet/application" />
@@ -0,0 +1,6 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% include hero_image.html %}
5
+
6
+ {{ content }}
@@ -1,6 +1,6 @@
1
1
  .hero-search
2
2
 
3
- background: $very-light-green
3
+ background: $light-green
4
4
  display: flex
5
5
  justify-content: center
6
6
  align-items: center
@@ -1,8 +1,4 @@
1
- // TODO: Diese beiden Farben sind noch übrige aus dem Redesign-Prozess
2
- $very-light-green: #d8e89e
3
- // $very-dark-grey: #3f3f3f
4
-
5
- // Farben aus app/assets/stylesheets/initialize/_colors.sass
1
+ // Farben aus ORG app/assets/stylesheets/initialize/_colors.sass
6
2
 
7
3
  $light-green: #CEE57D
8
4
  $medium-green: #9ECB0A
@@ -0,0 +1,36 @@
1
+ // backgroundcolor
2
+ .bg-color-silver-delight
3
+ background-color: $very-light-grey
4
+ .bg-color-happy-give
5
+ background-color: $happy-give
6
+ .bg-color-good-choice
7
+ background-color: $good-choice
8
+ .bg-color-light-sky
9
+ background-color: $light-sky
10
+ .bg-color-mindful-way
11
+ background-color: $mindful-way
12
+ .bg-color-peaceful-step
13
+ background-color: $peaceful-step
14
+ .bg-color-tolerant-turn
15
+ background-color: $tolerant-turn
16
+ .bg-color-open-mind
17
+ background-color: $open-mind
18
+ .bg-color-sunny-day
19
+ background-color: $sunny-day
20
+
21
+ .lpm-happy-give-stripe
22
+ background-image: linear-gradient(white 0%, white 120px, $happy-give 120px, $happy-give 100%)
23
+ .lpm-good-choice-stripe
24
+ background-image: linear-gradient(white 0%, white 120px, $good-choice 120px, $good-choice 100%)
25
+ .lpm-light-sky-stripe
26
+ background-image: linear-gradient(white 0%, white 120px, $light-sky 120px, $light-sky 100%)
27
+ .lpm-mindful-way-stripe
28
+ background-image: linear-gradient(white 0%, white 120px, $mindful-way 120px, $mindful-way 100%)
29
+ .lpm-peaceful-step-stripe
30
+ background-image: linear-gradient(white 0%, white 120px, $peaceful-step 120px, $peaceful-step 100%)
31
+ .lpm-tolerant-turn-stripe
32
+ background-image: linear-gradient(white 0%, white 120px, $tolerant-turn 120px, $tolerant-turn 100%)
33
+ .lpm-open-mind-stripe
34
+ background-image: linear-gradient(white 0%, white 120px, $open-mind 120px, $open-mind 100%)
35
+ .lpm-sunny-day-stripe
36
+ background-image: linear-gradient(white 0%, white 120px, $sunny-day 120px, $sunny-day 100%)
@@ -0,0 +1,11 @@
1
+ // This magic makes the styles visible for the cloudcannon editor.
2
+ // This way we can edit them in cloudcannon but they show up correctly for our users.
3
+ // Docs: https://docs.cloudcannon.com/editing/visual-editor/#editor-content
4
+
5
+ .cms-editor-active .hidden-xs,
6
+ .cms-editor-active .visible-xs
7
+ display: initial !important
8
+ border: 2px dotted #6e147d
9
+ max-height: 400px
10
+ .img-responsive.img-center
11
+ margin: 0 auto
@@ -0,0 +1,35 @@
1
+ .lpm-col2-col
2
+ padding: 0 20px
3
+ .lpm-col2-image
4
+ margin-left: -20px
5
+ margin-right: -20px
6
+
7
+ // Desktop:
8
+ @media (min-width: $breakpoint-sm)
9
+ .lpm-col2-row
10
+ display: -webkit-box
11
+ display: -ms-flexbox
12
+ display: flex
13
+ -ms-flex-wrap: wrap
14
+ flex-wrap: wrap
15
+
16
+ .lpm-col2-col
17
+ -ms-flex-preferred-size: 0
18
+ flex-basis: 0
19
+ -webkit-box-flex: 1
20
+ -ms-flex-positive: 1
21
+ display: flex
22
+ flex-grow: 1
23
+ flex-direction: column
24
+ justify-content: space-between
25
+ max-width: 100%
26
+ padding: 0 15px
27
+
28
+ .lpm-col2-text
29
+ flex: 1 0 auto
30
+ p:last-child
31
+ margin-bottom: 0
32
+
33
+ .lpm-col2-image
34
+ flex: 0 2 auto
35
+ margin: 0
@@ -0,0 +1,71 @@
1
+ .lpm-col3-row
2
+ display: flex
3
+ justify-content: space-between
4
+ flex-wrap: wrap
5
+ margin-left: -10px
6
+ margin-right: -10px
7
+ // Desktop:
8
+ @media (min-width: $breakpoint-sm)
9
+ margin-left: 0
10
+ margin-right: 0
11
+
12
+ .lpm-col3-col
13
+ display: flex
14
+ width: 100%
15
+ display: flex
16
+ flex-direction: column
17
+ background-color: white
18
+ width: 100%
19
+ justify-content: space-between
20
+
21
+ // Desktop:
22
+ @media (min-width: $breakpoint-sm)
23
+ width: calc(100% / 3 - 40px / 3)
24
+
25
+ .lpm-col3-headline
26
+ margin: 20px 0
27
+
28
+ .lpm-col3-content-text
29
+ flex: 1 0 auto
30
+ margin: 15px
31
+ padding: 0 0 $gutter-width 0
32
+ > h2,
33
+ > h3
34
+ margin-top: 0
35
+
36
+ .lpm-col3-content-avatar
37
+ flex: 0 2 auto
38
+ margin: 0 15px 15px 15px
39
+
40
+ .lpm-col3-content-text,
41
+ .lpm-col3-content-avatar
42
+ p:last-child
43
+ margin-bottom: 0
44
+
45
+ // Desktop:
46
+ @media (min-width: $breakpoint-sm)
47
+ .lpm-col3
48
+ margin-bottom: 30px
49
+
50
+ // Target those tripple boxes that are non-white
51
+ .lpm-col3.with-background
52
+ margin-bottom: 30px
53
+
54
+ .lpm-col3-row
55
+ margin-left: 0
56
+ margin-right: 0
57
+ margin-top: 20px
58
+ &.with-headline
59
+ margin-top: 0
60
+
61
+ .lpm-col3-col
62
+ margin-bottom: 20px
63
+ // Desktop:
64
+ @media (max-width: $breakpoint-sm)
65
+ margin-bottom: 15px
66
+
67
+ .lpm-col3-content
68
+ margin: 0px 10px
69
+ // Desktop:
70
+ @media (max-width: $breakpoint-sm)
71
+ margin: 0px 15px
@@ -0,0 +1,14 @@
1
+ .lpm-contact-box
2
+ text-align: center
3
+ margin-top: 30px
4
+ margin-bottom: 30px
5
+
6
+ // Desktop:
7
+ @media (min-width: $breakpoint-xs)
8
+ .lpm-contact-box
9
+ display: flex
10
+ align-items: center
11
+ justify-content: center
12
+ text-align: left
13
+ img
14
+ margin-right: $gutter-width
@@ -0,0 +1,18 @@
1
+ .lpm-font-and-image-headline
2
+ background-color: white
3
+ margin: -8rem 1rem 0 0
4
+ z-index: 2
5
+ padding: 1rem 1rem 1.3rem 1rem
6
+
7
+ .lpm-font-and-image-subline
8
+ padding: 0 1rem
9
+
10
+ @media (min-width: $breakpoint-sm)
11
+ .lpm-font-and-image
12
+ display: flex
13
+ align-items: center
14
+ .lpm-font-and-image-headline
15
+ margin: 0 -16rem 0 0
16
+ padding: 1rem 1rem 1.3rem 0
17
+ .lpm-font-and-image-subline
18
+ padding: 0
@@ -0,0 +1,24 @@
1
+ .lpm-hero-element
2
+ background-color: $sunny-day
3
+ display: flex
4
+
5
+ h1,
6
+ h2,
7
+ p
8
+ color: white
9
+
10
+ h1
11
+ line-height: 125%
12
+ margin-bottom: 0
13
+
14
+ @media (min-width: $breakpoint-sm)
15
+ align-items: center
16
+ height: 486px
17
+
18
+ @media (max-width: $breakpoint-sm)
19
+ height: 420px
20
+ flex-direction: column
21
+ justify-content: flex-end
22
+ padding-bottom: 20px
23
+ background-position: 50% 50%
24
+ background-size: cover
@@ -0,0 +1,104 @@
1
+ // Hierarchie
2
+ // Erst .lpm-list prüfen. Die Defaultliste.
3
+ // Dann .lpm-list.in-three-columns prüfen. Die Default-Liste in Spalten.
4
+ // Dann zusätzlich .size-large und .with-bullets und .with-checkmarks
5
+
6
+ // Mobile- und Base-Styles
7
+ // Modifikationen für Desktop via Media-Queries reingeschachtelt
8
+
9
+ .lpm-list
10
+ list-style: none
11
+ counter-reset: li
12
+ padding-left: 0
13
+ margin-bottom: 0
14
+
15
+ li
16
+ position: relative
17
+ counter-increment: li
18
+ padding: 0 0 0 30px
19
+ @media (min-width: $breakpoint-xs)
20
+ // Desktop:
21
+ padding: 0 30px 0 30px
22
+ &:before
23
+ content: "."counter(li)
24
+ font-weight: bold
25
+ direction: rtl
26
+ color: $medium-green
27
+ display: inline-block
28
+ position: absolute
29
+ top: 0
30
+ left: 5px
31
+ // Desktop:
32
+ @media (min-width: $breakpoint-xs)
33
+ left: 0
34
+
35
+ p:last-child
36
+ margin-bottom: 0
37
+
38
+ &.size-large
39
+ li
40
+ font-size: 18px
41
+ line-height: 24px
42
+ margin-bottom: 20px
43
+ padding-left: 35px
44
+ &:last-child
45
+ margin-bottom: 30px
46
+ // Desktop:
47
+ @media (min-width: $breakpoint-xs)
48
+ padding-left: 30px
49
+
50
+ &.size-large.in-three-columns
51
+ // Desktop:
52
+ @media (min-width: $breakpoint-xs)
53
+ li
54
+ padding-left: 25px
55
+
56
+ &.with-bullets
57
+ li:before
58
+ font-family: FontAwesome
59
+ content: "\f111"
60
+ padding-left: 0
61
+ font-size: 7px
62
+ top: 6px
63
+ left: 3px
64
+
65
+ &.size-large
66
+ li
67
+ padding-left: 25px
68
+ &:before
69
+ font-size: 10px
70
+ top: 0
71
+ left: 0
72
+
73
+ &.with-checkmarks
74
+ li
75
+ padding-left: 25px
76
+ li:before
77
+ font-family: FontAwesome
78
+ content: "\f00c"
79
+ top: 0
80
+ left: 0
81
+
82
+ &.size-large
83
+ li
84
+ line-height: 24px
85
+ padding-left: 33px
86
+ &:before
87
+ font-size: 22px
88
+
89
+ &.in-three-columns
90
+ li
91
+ margin-bottom: 15px
92
+ // Desktop:
93
+ @media (min-width: $breakpoint-xs)
94
+ margin-bottom: 30px
95
+ li:last-child
96
+ margin-bottom: 30px
97
+
98
+ // Desktop:
99
+ @media (min-width: $breakpoint-xs)
100
+ display: flex
101
+ flex-wrap: wrap
102
+ li
103
+ width: 33.333333333%
104
+ flex: 0 0 auto
@@ -0,0 +1,7 @@
1
+ hr.lpm-separator
2
+ height: 0
3
+ border-top: 1px solid $medium-green
4
+ margin: 30px auto
5
+ width: 5rem
6
+ &.lpm-separator-long
7
+ width: 13rem
@@ -0,0 +1,21 @@
1
+ // TODO: Diese Datei sollten wir später loswerden, damit alles über theme/colors.sass läuft.
2
+
3
+ $light-green: #CEE57D
4
+ $very-light-grey: #eeeeee
5
+ $medium-green: #9ECB0A
6
+
7
+ $happy-give: #FF6F6C
8
+ $good-choice: #AECFD1
9
+ $light-sky: #4597A2
10
+ $mindful-way: #4E414B
11
+ $peaceful-step: #EDEED0
12
+ $tolerant-turn: #6D2C64
13
+ $open-mind: #FFB38C
14
+ $sunny-day: #F6CE46
15
+
16
+ $spacer: 3rem
17
+ $gutter-width: 20px
18
+
19
+ $breakpoint-xs: 600px
20
+ $breakpoint-sm: 769px
21
+ $breakpoint-md: 1024px
@@ -0,0 +1,17 @@
1
+ ---
2
+ ---
3
+ @import initialize/colors
4
+ @import lpm/variables
5
+ @import lpm/background_colors
6
+
7
+ // Modules
8
+ @import lpm/list
9
+ @import lpm/seperator
10
+ @import lpm/headline_and_image
11
+ @import lpm/contact_box
12
+ @import lpm/hero_element
13
+ @import lpm/col2
14
+ @import lpm/col3
15
+
16
+ // Just for the Cloudcannon-Editor-UI
17
+ @import lpm/cloudcannon_editor
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.4.18
4
+ version: 0.5.0
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: 2018-08-14 00:00:00.000000000 Z
11
+ date: 2018-08-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -77,6 +77,7 @@ files:
77
77
  - _layouts/default.html
78
78
  - _layouts/error404.html
79
79
  - _layouts/help.html
80
+ - _layouts/landingpage.html
80
81
  - _layouts/news.html
81
82
  - _layouts/post.html
82
83
  - _layouts/redirect.html
@@ -106,6 +107,16 @@ files:
106
107
  - _sass/generics/topicblock.sass
107
108
  - _sass/initialize/colors.sass
108
109
  - _sass/initialize/media_queries.sass
110
+ - _sass/lpm/_background_colors.sass
111
+ - _sass/lpm/_cloudcannon_editor.sass
112
+ - _sass/lpm/_col2.sass
113
+ - _sass/lpm/_col3.sass
114
+ - _sass/lpm/_contact_box.sass
115
+ - _sass/lpm/_headline_and_image.sass
116
+ - _sass/lpm/_hero_element.sass
117
+ - _sass/lpm/_list.sass
118
+ - _sass/lpm/_seperator.sass
119
+ - _sass/lpm/_variables.sass
109
120
  - _sass/pages/freundeskreis.sass
110
121
  - _sass/pages/help.sass
111
122
  - _sass/pages/jobs.sass
@@ -113,6 +124,7 @@ files:
113
124
  - _sass/pages/team.sass
114
125
  - _sass/post.sass
115
126
  - assets/css/default.sass
127
+ - assets/css/landingpage_modules.sass
116
128
  - assets/js/ga-autotrack.js
117
129
  - assets/js/lunr.js
118
130
  - assets/js/search.js