Updates

- Updated Donate page and CSS for subaddresses
- Fixed bugs in Funding Required and Work in Progress

_layouts/ffs-fr.html

@@ -59,7 +59,7 @@ layout: base
                                 <p class="bar-fund-status">Raised <span class="progress-number-funded">{{proposal.amount-funded}}</span> of <span class="progress-number-goal">{{proposal.amount}}</span> XMR</p>
                             </div>
                             <div class="progress-bar">
-                                <span class="fund-progress" style="width: {{proposal-percentage}}%"></span>
+                                <span class="fund-progress" style="width: {{proposal.percentage}}%"></span>
                             </div>
                            <p><a href="{{proposal.donate-url}}" class="btn btn-primary">Contribute</a></p>
                            {%endif%}
@@ -72,40 +72,34 @@ layout: base
         </section>
                    
         <section class="container full">
-                <div class="">
-                    <div class="row between-xs">
+                    <div class="row">
                        <div class="col-xs-12">
-                            <div class="tabs">
+                           <div class="tabs con-how">
                                   <input class="input" name="tabs" type="radio" id="tab-1" checked="checked"/>
-                                  <label class="label" for="tab-1">Proposal</label>
+                                  <label class="label" for="tab-1">QR Code</label>
                                   <div class="panel col-xs-12">
                                        <div class="panel-segment">
-                                           {{content}}
+                                            <h3>Contribute with a QR code</h3>
+                                            <p>1. Choose the amount of XMR you wish to contribute to this proposal</p>
+                                            <p>2. Scan this QR code or tap to open in your Monero wallet app:</p>
+                                            <p>
+                                                <a href="monero:45ttEikQEZWN1m7VxaVN9rjQkpSdmpGZ82GwUps66neQ1PqbQMno4wMY8F5jiDt2GoHzCtMwa7PDPJUJYb1GYrMP4CwAwNp" class="qr"><img src="/img/qrcode.png"/></a>
+                                            </p>
+                                            <p>3. Send! Thank you! You are amazing!</p>
                                        </div>
                                   </div>
                                   <input class="input" name="tabs" type="radio" id="tab-2"/>
-                                  <label class="label" for="tab-2">Milestones</label>
+                                  <label class="label" for="tab-2">Address</label>
                                   <div class="panel col-xs-12">
-                                    {% if page.milestones != nil %}
-                                        {% for milestones in page.milestones %}
-                                           <div class="milestone panel-segment">
-                                                <span class="{{milestones.status}} ms-{{milestones.status}}"></span>
-                                                <h3>{{milestones.name}}</h3>
-                                                <p><span class="bold">To be paid:</span> {{milestones.funds}}</p>
-                                                {% if milestones.done != nil %}
-                                                <p><span class="bold">Completion date:</span> {{milestones.done}}</p>
-                                           </div>
-                                            {%endif%}
-                                        {%endfor%}
-                                        {%else%}
-                                            <div class="panel-segment">
-                                                <p>No milestones</p>
-                                            </div>
-                                    {%endif%}
+                                      <div class="panel-segment">
+                                            <h3>Contribute using an address</h3>
+                                            <p>1. Choose the amount of XMR you wish to contribute to this proposal</p>
+                                            <p>2. Enter the following XMR address:</p>   <p class="string">45ttEikQEZWN1m7VxaVN9rjQkpSdmpGZ82GwUps66neQ1PqbQMno4wMY8F5jiDt2GoHzCtMwa7PDPJUJYb1GYrMP4CwAwNp</p>
+                                            <p>3. Send! Thank you! You are amazing!</p>
+                                      </div>
                                   </div>
-                                </div>
+                              </div>
                        </div>
                     </div>
-                </div>
         </section>
     </div>

_layouts/ffs-wip.html

@@ -88,7 +88,7 @@ layout: base
                                             </div>
                                     {%endif%}
                                   </div>
-                                </div>
+                             </div>
                        </div>
                     </div>
                 </div>

css/custom.css

 /*FONTS*/
 
 @font-face {
-    font-family: 'Hind';
-    font-weight: 500;
-    font-style: normal;
-    src: url('../fonts/Hind-500.eot');
-    src: url('../fonts/Hind-500.eot?#iefix') format('embedded-opentype'),
-        local('Hind Medium'),
-        local('Hind-500'),
-        url('../fonts/Hind-500.woff2') format('woff2'),
-        url('../fonts/Hind-500.woff') format('woff'),
-        url('../fonts/Hind-500.ttf') format('truetype'),
-        url('../fonts/Hind-500.svg#Hind') format('svg');
+  font-family: 'Hind';
+  font-weight: 500;
+  font-style: normal;
+  src: url('../fonts/Hind-500.eot');
+  src: url('../fonts/Hind-500.eot?#iefix') format('embedded-opentype'),
+       local('Hind Medium'),
+       local('Hind-500'),
+       url('../fonts/Hind-500.woff2') format('woff2'),
+       url('../fonts/Hind-500.woff') format('woff'),
+       url('../fonts/Hind-500.ttf') format('truetype'),
+       url('../fonts/Hind-500.svg#Hind') format('svg');
 }
 
 /* hind-600 - latin */
 @font-face {
-    font-family: 'Hind';
-    font-style: normal;
-    font-weight: 600;
-    src: url('..../fonts/Hind-600.eot');
-    src: local('Hind SemiBold'), local('Hind-600'),
-        url('..../fonts/Hind-600.eot?#iefix') format('embedded-opentype'),
-        url('../fonts/Hind-600.woff2') format('woff2'),
-        url('../fonts/Hind-600.woff') format('woff'),
-        url('../fonts/Hind-600.ttf') format('truetype'),
-        url('../fonts/Hind-600.svg#Hind') format('svg');
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 600;
+  src: url('..../fonts/Hind-600.eot');
+  src: local('Hind SemiBold'), local('Hind-600'),
+       url('..../fonts/Hind-600.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/Hind-600.woff2') format('woff2'),
+       url('../fonts/Hind-600.woff') format('woff'),
+       url('../fonts/Hind-600.ttf') format('truetype'),
+       url('../fonts/Hind-600.svg#Hind') format('svg'); 
 }
 
 @font-face {
-    font-family: 'Hind';
-    font-weight: 700;
-    font-style: normal;
-    src: url('../fonts/Hind-700.eot');
-    src: url('../fonts/Hind-700.eot?#iefix') format('embedded-opentype'),
-        local('Hind Bold'),
-        local('Hind-700'),
-        url('../fonts/Hind-700.woff2') format('woff2'),
-        url('../fonts/Hind-700.woff') format('woff'),
-        url('../fonts/Hind-700.ttf') format('truetype'),
-        url('../fonts/Hind-700.svg#Hind') format('svg');
+  font-family: 'Hind';
+  font-weight: 700;
+  font-style: normal;
+  src: url('../fonts/Hind-700.eot');
+  src: url('../fonts/Hind-700.eot?#iefix') format('embedded-opentype'),
+       local('Hind Bold'),
+       local('Hind-700'),
+       url('../fonts/Hind-700.woff2') format('woff2'),
+       url('../fonts/Hind-700.woff') format('woff'),
+       url('../fonts/Hind-700.ttf') format('truetype'),
+       url('../fonts/Hind-700.svg#Hind') format('svg');
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    font-weight: 400;
-    font-style: normal;
-    src: url('../fonts/Open-Sans-regular.eot');
-    src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
-        local('Open Sans'),
-        local('Open-Sans-regular'),
-        url('../fonts/Open-Sans-regular.woff2') format('woff2'),
-        url('../fonts/Open-Sans-regular.woff') format('woff'),
-        url('../fonts/Open-Sans-regular.ttf') format('truetype'),
-        url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: normal;
+  src: url('../fonts/Open-Sans-regular.eot');
+  src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
+       local('Open Sans'),
+       local('Open-Sans-regular'),
+       url('../fonts/Open-Sans-regular.woff2') format('woff2'),
+       url('../fonts/Open-Sans-regular.woff') format('woff'),
+       url('../fonts/Open-Sans-regular.ttf') format('truetype'),
+       url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    font-weight: 700;
-    font-style: normal;
-    src: url('../fonts/Open-Sans-700.eot');
-    src: url('../fonts/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
-        local('Open Sans Extrabold'),
-        local('Open-Sans-700'),
-        url('../fonts/Open-Sans-700.woff2') format('woff2'),
-        url('../fonts/Open-Sans-700.woff') format('woff'),
-        url('../fonts/Open-Sans-700.ttf') format('truetype'),
-        url('../fonts/Open-Sans-700.svg#OpenSans') format('svg');
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: normal;
+  src: url('../fonts/Open-Sans-700.eot');
+  src: url('../fonts/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
+       local('Open Sans Extrabold'),
+       local('Open-Sans-700'),
+       url('../fonts/Open-Sans-700.woff2') format('woff2'),
+       url('../fonts/Open-Sans-700.woff') format('woff'),
+       url('../fonts/Open-Sans-700.ttf') format('truetype'),
+       url('../fonts/Open-Sans-700.svg#OpenSans') format('svg');
 }
 
 @font-face {
-    font-family: 'icons';
-    src: url('../fonts/icons.eot?58817762');
-    src: url('../fonts/icons.eot?58817762#iefix') format('embedded-opentype'),
-        url('../fonts/icons.woff2?58817762') format('woff2'),
-        url('../fonts/icons.woff?58817762') format('woff'),
-        url('../fonts/icons.ttf?58817762') format('truetype'),
-        url('../fonts/icons.svg?58817762#icons') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'icons';
+  src: url('../fonts/icons.eot?58817762');
+  src: url('../fonts/icons.eot?58817762#iefix') format('embedded-opentype'),
+       url('../fonts/icons.woff2?58817762') format('woff2'),
+       url('../fonts/icons.woff?58817762') format('woff'),
+       url('../fonts/icons.ttf?58817762') format('truetype'),
+       url('../fonts/icons.svg?58817762#icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 /*FLEXBOX*/
 
-.container,
-.container-fluid {
+.container, .container-fluid {
     margin-left: auto;
     margin-right: auto;
 }
@@ -96,19 +95,33 @@
 }
 
 .row {
-    box-sizing: border-box;
-    display: -ms-flexbox;
-    display: -webkit-box;
-    display: flex;
-    -ms-flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    flex: 0 1 auto;
-    -ms-flex-direction: row;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    flex-direction: row;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex: 0 1 auto;
+  -webkit-box-flex: 0;
+  flex: 0 1 auto;
+  -ms-flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.row.reverse {
+  -ms-flex-direction: row-reverse;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  flex-direction: row-reverse;
+}
+
+.col.reverse {
+  -ms-flex-direction: column-reverse;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  flex-direction: column-reverse;
 }
 
 .col-xs,
@@ -124,15 +137,225 @@
 .col-xs-10,
 .col-xs-11,
 .col-xs-12 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  flex: 0 0 auto;
+  /*padding-right: 1rem;
+  padding-left: 1rem;*/
+}
+
+.col-xs {
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  max-width: 100%;
+}
+
+.col-xs-1 {
+  -ms-flex-preferred-size: 8.333%;
+  flex-basis: 8.333%;
+  max-width: 8.333%;
+}
+
+.col-xs-2 {
+  -ms-flex-preferred-size: 16.667%;
+  flex-basis: 16.667%;
+  max-width: 16.667%;
+}
+
+.col-xs-3 {
+  -ms-flex-preferred-size: 25%;
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.col-xs-4 {
+  -ms-flex-preferred-size: 33.333%;
+  flex-basis: 33.333%;
+  max-width: 33.333%;
+}
+
+.col-xs-5 {
+  -ms-flex-preferred-size: 41.667%;
+  flex-basis: 41.667%;
+  max-width: 41.667%;
+}
+
+.col-xs-6 {
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.col-xs-7 {
+  -ms-flex-preferred-size: 58.333%;
+  flex-basis: 58.333%;
+  max-width: 58.333%;
+}
+
+.col-xs-8 {
+  -ms-flex-preferred-size: 66.667%;
+  flex-basis: 66.667%;
+  max-width: 66.667%;
+}
+
+.col-xs-9 {
+  -ms-flex-preferred-size: 75%;
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.col-xs-10 {
+  -ms-flex-preferred-size: 83.333%;
+  flex-basis: 83.333%;
+  max-width: 83.333%;
+}
+
+.col-xs-11 {
+  -ms-flex-preferred-size: 91.667%;
+  flex-basis: 91.667%;
+  max-width: 91.667%;
+}
+
+.col-xs-12 {
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.col-xs-offset-1 {
+  margin-left: 8.333%;
+}
+
+.col-xs-offset-2 {
+  margin-left: 16.667%;
+}
+
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+
+.col-xs-offset-4 {
+  margin-left: 33.333%;
+}
+
+.col-xs-offset-5 {
+  margin-left: 41.667%;
+}
+
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+
+.col-xs-offset-7 {
+  margin-left: 58.333%;
+}
+
+.col-xs-offset-8 {
+  margin-left: 66.667%;
+}
+
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+
+.col-xs-offset-10 {
+  margin-left: 83.333%;
+}
+
+.col-xs-offset-11 {
+  margin-left: 91.667%;
+}
+
+.start-xs {
+  -ms-flex-pack: start;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.center-xs {
+  -ms-flex-pack: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.end-xs {
+  -ms-flex-pack: end;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.top-xs {
+  -ms-flex-align: start;
+  -webkit-box-align: start;
+  align-items: flex-start;
+}
+
+.middle-xs {
+  -ms-flex-align: center;
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.bottom-xs {
+  -ms-flex-align: end;
+  -webkit-box-align: end;
+  align-items: flex-end;
+}
+
+.around-xs {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.between-xs {
+  -ms-flex-pack: justify;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+}
+
+.first-xs {
+  -ms-flex-order: -1;
+  -webkit-box-ordinal-group: 0;
+  order: -1;
+}
+
+.last-xs {
+  -ms-flex-order: 1;
+  -webkit-box-ordinal-group: 2;
+  order: 1;
+}
+
+@media only screen and (min-width: 48em) {
+  .col-sm,
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11,
+  .col-sm-12 {
     box-sizing: border-box;
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
     /*padding-right: 1rem;
-  padding-left: 1rem;*/
-}
+    padding-left: 1rem;*/
+  }
 
-.col-xs {
+  .col-sm {
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
     -webkit-box-flex: 1;
@@ -140,431 +363,613 @@
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
     max-width: 100%;
-}
+  }
 
-.col-xs-3 {
+  .col-sm-1 {
+    -ms-flex-preferred-size: 8.333%;
+    flex-basis: 8.333%;
+    max-width: 8.333%;
+  }
+
+  .col-sm-2 {
+    -ms-flex-preferred-size: 16.667%;
+    flex-basis: 16.667%;
+    max-width: 16.667%;
+  }
+
+  .col-sm-3 {
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
     max-width: 25%;
-}
+  }
 
-.col-xs-4 {
+  .col-sm-4 {
     -ms-flex-preferred-size: 33.333%;
     flex-basis: 33.333%;
     max-width: 33.333%;
-}
+  }
 
-.col-xs-5 {
+  .col-sm-5 {
     -ms-flex-preferred-size: 41.667%;
     flex-basis: 41.667%;
     max-width: 41.667%;
-}
+  }
 
-.col-xs-6 {
+  .col-sm-6 {
     -ms-flex-preferred-size: 50%;
     flex-basis: 50%;
     max-width: 50%;
-}
+  }
 
-.col-xs-7 {
+  .col-sm-7 {
     -ms-flex-preferred-size: 58.333%;
     flex-basis: 58.333%;
     max-width: 58.333%;
-}
+  }
 
-.col-xs-8 {
+  .col-sm-8 {
     -ms-flex-preferred-size: 66.667%;
     flex-basis: 66.667%;
     max-width: 66.667%;
-}
+  }
 
-.col-xs-9 {
+  .col-sm-9 {
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
     max-width: 75%;
-}
+  }
 
-.col-xs-12 {
+  .col-sm-10 {
+    -ms-flex-preferred-size: 83.333%;
+    flex-basis: 83.333%;
+    max-width: 83.333%;
+  }
+
+  .col-sm-11 {
+    -ms-flex-preferred-size: 91.667%;
+    flex-basis: 91.667%;
+    max-width: 91.667%;
+  }
+
+  .col-sm-12 {
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
     max-width: 100%;
-}
+  }
 
-.start-xs {
+  .col-sm-offset-1 {
+    margin-left: 8.333%;
+  }
+
+  .col-sm-offset-2 {
+    margin-left: 16.667%;
+  }
+
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-sm-offset-4 {
+    margin-left: 33.333%;
+  }
+
+  .col-sm-offset-5 {
+    margin-left: 41.667%;
+  }
+
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-sm-offset-7 {
+    margin-left: 58.333%;
+  }
+
+  .col-sm-offset-8 {
+    margin-left: 66.667%;
+  }
+