grassrootseconomics/pelican-website-ge
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cycle ofimages complete

Browse Source
This commit is contained in:
Idaapayo 2021-06-22 19:22:02 +03:00
parent 2723d83d3c
commit d25eb2acdd
5 changed files with 304 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
ge-theme/static/css/howitworks.css
View File

@ -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;
}
}

59
ge-theme/templates/howit-works.html
View File

@ -19,32 +19,51 @@
</div>
</div>
<!-- <div class="d-flex many-imgs">-->
<!--&lt;!&ndash; <div class="flex-column">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="flex-lg-shrink-0 flex-md-shrink-0 flex-sm-shrink-1">&ndash;&gt;-->
<!-- <img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="flex-lg-grow-1 flex-md-grow-1 flex-sm-grow-0">-->
<!-- <p class="text1-beside">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p>-->
<!-- </div>-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="align-self-end">-->
<!-- <div class="arrow-container">-->
<!-- <img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">-->
<!-- </div>-->
<!-- </div>-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<div class="many-imgs">
<div class="row">
<div class="col-6">
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">
<img class="img-fluid img-extend" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">
</div>
<div class="col-6 mt-auto">
<p class="text-beside1 word-wrap">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
<div class=" arrow-container">
<div class="bottom">
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp"></div>
</div>
</div>
</div>
<div class="row d-inline-flex flex-row-reverse">
<!-- first item is left most item on the page order has been reversed with flex-row-reverse-->
<div class="col-6">
<div class="center-this">
<img class="img-fluid handmaid-img" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-3.webp">
<p class="word-wrap2" >Due to economic instability, people often lack money with which to purchase from each other</p>
</div>
</div>
<div class="col-6">
<p class="text-beside1">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
<div class="arrow-container">
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp"></div>
<img class="img-fluid rotate-up" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
<img class="img-fluid tree-img" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-8.webp">
<p class="word-wrap2">Thriving communities build their own prospering economies</p>
</div>
</div>
<div class="row d-flex ">
<div class="col-6 center-this">
<img class="img-fluid rotate-up-side" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
</div>
<div class="col-6 ">
<img class="img-fluid rotate-down-side" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
</div>
</div>
<div class="row">
<div class="col-12 center-this">
<div class="last-content-box">
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-5.webp">
<p class="word-wrap">Community currencies create a stable medium of exchange tied to local development</p>
</div>
</div>
</div>
</div>

59
output/pages/how-it-works.html
View File

@ -80,32 +80,51 @@
</div>
</div>
<!-- <div class="d-flex many-imgs">-->
<!--&lt;!&ndash; <div class="flex-column">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="flex-lg-shrink-0 flex-md-shrink-0 flex-sm-shrink-1">&ndash;&gt;-->
<!-- <img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="flex-lg-grow-1 flex-md-grow-1 flex-sm-grow-0">-->
<!-- <p class="text1-beside">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p>-->
<!-- </div>-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="align-self-end">-->
<!-- <div class="arrow-container">-->
<!-- <img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp">-->
<!-- </div>-->
<!-- </div>-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<div class="many-imgs">
<div class="row">
<div class="col-6">
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">
<img class="img-fluid img-extend" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">
</div>
<div class="col-6 mt-auto">
<p class="text-beside1 word-wrap">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
<div class=" arrow-container">
<div class="bottom">
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp"></div>
</div>
</div>
</div>
<div class="row d-inline-flex flex-row-reverse">
<!-- first item is left most item on the page order has been reversed with flex-row-reverse-->
<div class="col-6">
<div class="center-this">
<img class="img-fluid handmaid-img" src="../theme/images/howitworks-imgs/manyimgs-3.webp">
<p class="word-wrap2" >Due to economic instability, people often lack money with which to purchase from each other</p>
</div>
</div>
<div class="col-6">
<p class="text-beside1">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
<div class="arrow-container">
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp"></div>
<img class="img-fluid rotate-up" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
<img class="img-fluid tree-img" src="../theme/images/howitworks-imgs/manyimgs-8.webp">
<p class="word-wrap2">Thriving communities build their own prospering economies</p>
</div>
</div>
<div class="row d-flex ">
<div class="col-6 center-this">
<img class="img-fluid rotate-up-side" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
</div>
<div class="col-6 ">
<img class="img-fluid rotate-down-side" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
</div>
</div>
<div class="row">
<div class="col-12 center-this">
<div class="last-content-box">
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-5.webp">
<p class="word-wrap">Community currencies create a stable medium of exchange tied to local development</p>
</div>
</div>
</div>
</div>

77
output/theme/css/howitworks.css
View File

@ -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;
}
}

90
output/theme/css/howitworks.css~
View File

@ -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;
}
}