fixed custom.css, added custom.js + restyled cryptocurrency section

config.toml

@@ -23,6 +23,8 @@ link = "plugins/slick/slick.css"
 link = "plugins/fonts/fonts.css"
 [[params.plugins.css]]
 link = "plugins/particles/particles.css"
+[[params.plugins.css]]
+link = "/css/custom.css"
 
 # js plugins
 [[params.plugins.js]]
@@ -41,6 +43,8 @@ link = "plugins/lazy-load/lozad.min.js"
 link = "plugins/particles/particles.min.js"
 [[params.plugins.js]]
 link = "plugins/particles/init.min.js"
+[[params.plugins.js]]
+link = "/js/custom.js"
 
 ############################# Navigation ##################################
 

data/en/donate.yml

@@ -3,7 +3,7 @@ introduction: Economical contribution is fundamental to the Parrot Project, as t
 
 store:
   title: Go to the store
-  url: https://parrot-security.spreadshirt.net
+  url: https://shop.spreadshirt.net/parrot-security/
   image: ../images/about/gadgets.png
 
 patreon:

layouts/_default/donate.html

@@ -47,14 +47,17 @@
         <div class="row">
             <div class="col-md-12 col-sm-12 col-lg-12">
                 <div style="background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.5));padding:2em;margin-top:5em">
-                    <h1 class="text-center">{{ $data.donate.crypto.title }}</h1>
+                    <h1 class="style text-center">{{ $data.donate.crypto.title }}</h1>
                     <p>{{ $data.donate.crypto.text }}</p>
-                    <p>BTC: <b>{{ $data.donate.crypto.btc }}</b></p>
-                    <p>BTC Bech32: <b>{{ $data.donate.crypto.btcb32 }}</b></p>
-                    <p>LTC: <b>{{ $data.donate.crypto.ltc }}</b></p>
-                    <p>LTC Bech32: <b>{{ $data.donate.crypto.ltcb32 }}</b></p>
-                    <p>XLM: <b>{{ $data.donate.crypto.xlm }}</b></p>
-                    <p>ETH: <b>{{ $data.donate.crypto.eth }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.btc }}">BTC</button><b class="b-style">{{ $data.donate.crypto.btc }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.btcb32 }}">BTC Bech32</button><b class="b-style">{{ $data.donate.crypto.btcb32 }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.ltc }}">LTC</button><b class="b-style">{{ $data.donate.crypto.ltc }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.ltcb32 }}">LTC Bech32</button><b class="b-style">{{ $data.donate.crypto.ltcb32 }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.xlm }}">XLM</button><b class="b-style">{{ $data.donate.crypto.xlm }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.eth }}">ETH</button><b class="b-style">{{ $data.donate.crypto.eth }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.doge }}">DOGE</button><b class="b-style">{{ $data.donate.crypto.doge }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.dash }}">DASH</button><b class="b-style">{{ $data.donate.crypto.dash }}</b></p>
+                    <p><button class="btn btn-copy" data-clipboard="{{ $data.donate.crypto.zcash }}">ZCASH</button><b class="b-style">{{ $data.donate.crypto.zcash }}</b></p>
                     <p>ETH ERC20: {{ $data.donate.crypto.erc20 }}</p>
                 </div>
             </div>
@@ -81,4 +84,4 @@
     </div>
 </section>
 
-{{ end }}
+{{ end }}
\ No newline at end of file

static/css/custom.css

@@ -6,3 +6,142 @@
   color:#222;
   background:#9fef00;
 }
+
+/* btn style for cryptocurrency div */
+.btn-copy.btn {
+  background: #57cbcc;
+  color: #fff;
+  display: inline-block;
+  font-size: 14px;
+  letter-spacing: 1px;
+  padding: 10px 35px;
+  text-transform: uppercase;
+}
+
+.btn-copy:hover {
+  background: #2c9091;
+  color: #fff;
+}
+
+.b-style {
+  background: none;
+  display: inline-block;
+  font-size: 14px;
+  letter-spacing: 1px;
+  padding: 10px 35px;
+  border: 1px solid #57cbcc;
+}
+
+@media only screen 
+  and (max-width: 991px) {
+
+  h1.style {
+      font-size: 2rem;
+  }
+
+  .b-style {
+      width: 60%; 
+      overflow-y: auto;
+      overflow-x: scroll;
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+  }
+
+  .btn-copy.btn {
+      width: 40%;
+      padding-left: 1px;
+      padding-right: 1px;
+  }
+}
+
+
+/* style for new documentaton section */
+/*
+#docs {
+  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
+              url("../../images/backgrounds/doc-background.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.border-meghna.docs {
+  border-top: none;
+}
+
+.border-meghna.docs::before {
+  margin-left: -150px;
+  width: 50%;
+}
+
+.searchFieldDocs {
+  min-height: 70px;
+  width: 50%;
+  border: 0;
+  background: #fff;
+  display: block;
+  padding: 10px 70px 10px 32px;
+  font-size: 18px;
+  color: #666;
+  border-radius: 20px;
+  margin: auto;
+}
+
+.btn-faqs.btn {
+  text-transform: none;
+  border-radius: 10px;
+}
+
+.btn-faqs.btn-main {
+  background: cyan;
+  font-size: 18px;
+}
+
+.btn-faqs.btn-main:hover {
+  background: #57cbcc;
+}
+
+.card {
+  border-radius: 20px;
+  display: block;
+
+}
+
+.card-body {
+  padding: 2px;
+}
+
+.help-box {
+  filter: invert(100%) sepia(3%) saturate(0%) hue-rotate(134deg) brightness(103%) contrast(103%);
+}
+
+.card:hover .help-box {
+  filter: invert(82%) sepia(92%) saturate(1025%) hue-rotate(104deg) brightness(101%) contrast(102%);
+}
+
+hr {
+  padding: 0;
+  margin: 0 auto;
+  width: 90%;
+}
+
+@media only screen 
+  and (max-width: 991px) {
+  
+  .searchFieldDocs {
+      width: 80%;
+  }
+
+  .border-meghna.docs::before {
+      margin-left: -50px;
+      width: 100%;
+  }
+  
+  .card {
+      margin-bottom: 40px;
+  }
+
+  .btn-jump-aboard {
+      margin-bottom: 20px;
+  }
+}*/
\ No newline at end of file

static/js/custom.js

+	/* ========================================================================= */
+	/*	copy function
+	/* ========================================================================= */
+	$(document).ready(
+		function() {
+			$('.btn-copy').on("click", 
+			function() {
+				value = $(this).data('clipboard');
+				let $tmp = $("<input>");
+				$("body").append($tmp);
+				$tmp.val(value).select();
+				document.execCommand("copy");
+				$(this).text('copied!');
+				$tmp.remove();
+			})
+		})
\ No newline at end of file