diff --git a/ge-theme/static/css/howitworks.css b/ge-theme/static/css/howitworks.css index 9f64f3f..3861e87 100644 --- a/ge-theme/static/css/howitworks.css +++ b/ge-theme/static/css/howitworks.css @@ -22,14 +22,56 @@ margin-left: 400px; margin-right: 400px; } -.arrow-container{ - /*margin-left: -100px;*/ - width: 200px; - height: 120px; +/*.img-center{*/ +/* margin: auto;*/ +/*}*/ +.center-this{ + text-align: center; } -.arrow-container img{ - width: 100%; - height: auto; +.word-wrap{ + text-align: center; + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + max-width: 250px; + max-height: 300px; + padding: 10px; + +} + +.word-wrap2{ + /*margin-top: 10px;*/ + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + padding: 10px; + max-width: 60%; + margin: auto; + overflow: hidden; + + /*position: absolute;*/ + /*max-width: 300px;*/ +} + +.last-content-box{ + display: inline-block; +} +.rotate-up{ + transform: rotate(250deg); +} +.tree-img{ + margin-left: -60px; +} +.rotate-up-side{ + transform: rotate(180deg); +} +.rotate-down-side{ + transform: rotate(120deg); + overflow: hidden; + /*margin-left: -30px;*/ +} +.handmaid-img{ + padding-top: 20px; } @media only screen and (max-width: 480px){ .text-img{ @@ -55,6 +97,19 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } + .img-extend{ + height: 300px; + } + .rotate-up-side{ + transform: rotate(200deg); + } + .rotate-down-side{ + transform: rotate(90deg); + overflow: hidden; + } } @media (min-width: 600px) and (max-width: 1024px){ @@ -81,4 +136,12 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } + .rotate-down-side{ + transform: rotate(100deg); + overflow: hidden; + + } } \ No newline at end of file diff --git a/ge-theme/templates/howit-works.html b/ge-theme/templates/howit-works.html index 50a2e8a..084a218 100644 --- a/ge-theme/templates/howit-works.html +++ b/ge-theme/templates/howit-works.html @@ -19,32 +19,51 @@ - - - - - - - - - - - - - - - -
- + +
+
+

Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.


+
+
+
+
+
+
+
+ +
+
+ + +

Due to economic instability, people often lack money with which to purchase from each other

+ +
-

Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.


-
-
+ + +

Thriving communities build their own prospering economies

+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ +

Community currencies create a stable medium of exchange tied to local development

+
diff --git a/output/pages/how-it-works.html b/output/pages/how-it-works.html index 0afb2df..d3e89ee 100644 --- a/output/pages/how-it-works.html +++ b/output/pages/how-it-works.html @@ -80,32 +80,51 @@ - - - - - - - - - - - - - - - -
- + +
+
+

Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.


+
+
+
+
+
+
+
+ +
+
+ + +

Due to economic instability, people often lack money with which to purchase from each other

+ +
-

Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.


-
-
+ + +

Thriving communities build their own prospering economies

+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ +

Community currencies create a stable medium of exchange tied to local development

+
diff --git a/output/theme/css/howitworks.css b/output/theme/css/howitworks.css index 9f64f3f..3861e87 100644 --- a/output/theme/css/howitworks.css +++ b/output/theme/css/howitworks.css @@ -22,14 +22,56 @@ margin-left: 400px; margin-right: 400px; } -.arrow-container{ - /*margin-left: -100px;*/ - width: 200px; - height: 120px; +/*.img-center{*/ +/* margin: auto;*/ +/*}*/ +.center-this{ + text-align: center; } -.arrow-container img{ - width: 100%; - height: auto; +.word-wrap{ + text-align: center; + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + max-width: 250px; + max-height: 300px; + padding: 10px; + +} + +.word-wrap2{ + /*margin-top: 10px;*/ + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + padding: 10px; + max-width: 60%; + margin: auto; + overflow: hidden; + + /*position: absolute;*/ + /*max-width: 300px;*/ +} + +.last-content-box{ + display: inline-block; +} +.rotate-up{ + transform: rotate(250deg); +} +.tree-img{ + margin-left: -60px; +} +.rotate-up-side{ + transform: rotate(180deg); +} +.rotate-down-side{ + transform: rotate(120deg); + overflow: hidden; + /*margin-left: -30px;*/ +} +.handmaid-img{ + padding-top: 20px; } @media only screen and (max-width: 480px){ .text-img{ @@ -55,6 +97,19 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } + .img-extend{ + height: 300px; + } + .rotate-up-side{ + transform: rotate(200deg); + } + .rotate-down-side{ + transform: rotate(90deg); + overflow: hidden; + } } @media (min-width: 600px) and (max-width: 1024px){ @@ -81,4 +136,12 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } + .rotate-down-side{ + transform: rotate(100deg); + overflow: hidden; + + } } \ No newline at end of file diff --git a/output/theme/css/howitworks.css~ b/output/theme/css/howitworks.css~ index 96f1a45..9ed6010 100644 --- a/output/theme/css/howitworks.css~ +++ b/output/theme/css/howitworks.css~ @@ -19,12 +19,85 @@ } .many-imgs{ padding-top: 100px; - margin-left: 500px; - margin-right: 500px; + margin-left: 400px; + margin-right: 400px; } -.arrow-container{ - +/*.img-center{*/ +/* margin: auto;*/ +/*}*/ +.center-this{ + text-align: center; } +.word-wrap{ + text-align: center; + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + max-width: 250px; + max-height: 300px; + padding: 10px; + +} + +.word-wrap2{ + /*margin-top: 10px;*/ + box-sizing: border-box; + border-top: solid 2px #e6e6e6; + border-bottom: solid 2px #e6e6e6; + padding: 10px; + max-width: 60%; + margin: auto; + overflow: hidden; + + /*position: absolute;*/ + /*max-width: 300px;*/ +} + +.last-content-box{ + display: inline-block; +} +/*.right-this{*/ +/* text-align: right;*/ +/*}*/ +/*.reduce-gap{*/ +/* display: inline;*/ +/*}*/ +/*.arrow-container{*/ +/* !*margin-left: -100px;*!*/ +/* !*display: flex;*!*/ +/* width: 200px;*/ +/* height: 120px;*/ +/*}*/ +/*.arrow-container img{*/ +/* width: 100%;*/ +/* height: auto;*/ +/*}*/ +.rotate-up{ + transform: rotate(250deg); +} +.tree-img{ + margin-left: -60px; +} +.rotate-up-side{ + transform: rotate(180deg); +} +.rotate-down-side{ + transform: rotate(120deg); + overflow: hidden; + /*margin-left: -30px;*/ +} +/*.vertical-center{*/ +/* vertical-align: center;*/ +/*}*/ +.handmaid-img{ + padding-top: 20px; +} +/*.last-content-box{*/ +/* display: inline;*/ +/*}*/ +/*.bottom{*/ +/* align-self: flex-end;*/ +/*}*/ @media only screen and (max-width: 480px){ .text-img{ font-size: 30px; @@ -49,6 +122,12 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } + .img-extend{ + height: 300px; + } } @media (min-width: 600px) and (max-width: 1024px){ @@ -75,4 +154,7 @@ margin-left: 10px; margin-right: 10px; } + .tree-img{ + margin-left: auto; + } } \ No newline at end of file