style(website): apply suitable wcag colours
includes some subjective spacing, and stylistic improvements with the aim to improve readability and brand quality
MODIFY
WalletWasabi.Backend/wwwroot/css/style.css
WalletWasabi.Backend/wwwroot/css/style.css
body {
- padding: 5% 15% 5% 15%;
+ padding: 3rem 15% 5% 15%;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(155deg, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
- font-family: 'Open Sans Condensed', sans-serif;
+}
+
+a {
+ color: #1d8e43;
+}
+
+a:hover {
+ color: #125829;
+ border-bottom: 1px solid;
+ text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+ border-bottom: none;
}
.segments-1 {
@@ -12,15 +25,27 @@ body {
}
.segments-2 {
- color: #ffffff;
- padding: 2% 5% 0% 5%;
+ color: #1A3F35;
+ padding: 2rem 5% 3rem 5%;
+}
+
+ .segments-2 h1 {
+ font-size: 2rem;
}
.segments-2 p {
- font-size: 1vw;
+ font-size: 0.9rem;
}
- .segments-2 .btn-outline-light {
+ .segments-2 a {
+ color: #1A3F35;
+ border-bottom: 1px solid;
+ }
+
+ .segments-2 .btn {
+ background-color: #1A3F51;
+ color: #FFF;
+ border: none;
bottom: 0px;
margin-top: 1%;
}
@@ -31,13 +56,15 @@ body {
-webkit-box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
+ border-radius: 1rem;
+ overflow: hidden;
}
header {
- background-color: #5cdb95;
+ background-color: #CFF6B7;
}
- header h5 {
+ reader h5 {
color: #000000;
}
@@ -99,6 +126,38 @@ header {
padding: 0px;
}
+.main-content {
+ background-color: #ffffff;
+ position: relative;
+ -webkit-box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
+ -moz-box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
+ box-shadow: 0px 12px 32px -7px rgba(0,0,0,0.41);
+ border-radius: 1rem 1rem 0 0;
+ overflow: hidden;
+ margin-top: -1rem;
+ padding: 1rem 0 2rem;
+}
+
+.banner {
+ background-color: #182628;
+ border-bottom: 1px solid #253739;
+ line-height: 3rem;
+ padding: 1rem;
+}
+ .banner p {
+ margin: 0;
+ }
+.text-wrap {
+ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
+ white-space: -pre-wrap; /* Opera 4-6 */
+ white-space: -o-pre-wrap; /* Opera 7 */
+ white-space: pre-wrap; /* css-3 */
+ word-wrap: break-word; /* Internet Explorer 5.5+ */
+ white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
+ word-break: break-all;
+ white-space: normal;
+ }
+
.carousel-1 {
background-color: #182628;
padding-bottom: 2%;
@@ -115,19 +174,24 @@ h1, h2 {
footer {
background-color: #182628;
text-align: center;
- padding: 5px 20px 5px 20px;
+ padding: 1rem 20px;
}
footer a {
color: #ffffff;
- padding: 5px 20px 5px 20px;
+ padding: 0 1.5rem 0 1.5rem;
transition: 1s;
+ line-height: 3rem;
+ border-radius: 3px;
+ display: inline-block;
}
footer a:hover {
+ background-color: rgba(255,255,255,0.12);
color: #5cdb95;
text-decoration: none;
transition: 1s;
+ border: none;
}
footer {
@@ -183,18 +247,6 @@ footer {
display: block;
}
- .segments-2 {
- color: #ffffff;
- padding: 2% 5% 0% 5%;
- }
-
- .segments-2 h1 {
- font-size: 50px;
- text-align: center;
- padding-top: 10px;
- padding-bottom: 1px;
- }
-
.segments-2 p {
font-size: 20px;
text-align: justify;
@@ -247,7 +299,6 @@ footer {
}
.columns-2 p {
- text-align: justify;
font-size: 20px;
font-weight: normal;
margin-bottom: 0px;

MODIFY
WalletWasabi.Backend/wwwroot/index.html
WalletWasabi.Backend/wwwroot/index.html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
- <link rel="stylesheet" href="css/OpenSansCondensed300700.css">
+ <!-- <link rel="stylesheet" href="css/OpenSansCondensed300700.css">-->
<link rel="shortcut icon" href="images/favicon.ico" />
- <title>Wasabi Wallet</title>
+ <title>Wasabi Wallet - Reclaim your privacy</title>
</head>
<body>
<div class="body-card">
<div class="col-12 col-lg-5 segments-1">
<img src="images/wasabi_wallet_logo_2-1.png" alt="wasai_logo">
</div>
- <div class="text-justify col-12 col-lg-7 segments-2">
- <h1>Call To Action</h1>
+ <div class="col-12 col-lg-7 segments-2">
+ <h1>Reclaim your privacy now!</h1>
<p>As Bitcoin is becoming more and more mainstream, its fungibility is being threatened. Powerful interests are spending immeasurable resources on mass surveillance, and Blockchain analysis companies are rapidly gaining traction. Meanwhile, privacy work on Bitcoin is also gaining momentum, but it is up to You who wins this battle.</p>
- <p>Wasabi is an open-source, non-custodial, privacy focused Bitcoin wallet, that implements trustless coin shuffling with mathematically provable anonymity: <a href="https://github.com/nopara73/ZeroLink/">Chaumian CoinJoin,</a> it is the first of its kind. However, <a href="https://www.freehaven.net/anonbib/cache/usability:weis2006.pdf">"anonymity loves company,"</a> the more users there are, the better your privacy, and the faster the CoinJoin rounds will be. Whether you are looking for state of the art operational security or you are philosophically aligned with the principles of freedom and privacy, now it is YOUR time to contribute. Fire up your Wasabi and start providing liquidity for CoinJoins to bootstrap the system!</p>
- <a class="btn btn-lg btn-outline-light font-weight-bold" href="#download">Reclaim your privacy now!</a>
+ <p>Wasabi is an open-source, non-custodial, privacy focused Bitcoin wallet, that implements trustless coin shuffling with mathematically provable anonymity: <a href="https://github.com/nopara73/ZeroLink/">Chaumian CoinJoin</a>, it is the first of its kind. However, <a href="https://www.freehaven.net/anonbib/cache/usability:weis2006.pdf">"anonymity loves company"</a>, the more users there are, the better your privacy, and the faster the CoinJoin rounds will be. Whether you are looking for state of the art operational security or you are philosophically aligned with the principles of freedom and privacy, now it is YOUR time to contribute. Fire up your Wasabi and start providing liquidity for CoinJoins to bootstrap the system!</p>
+ <a class="btn btn-lg font-weight-bold" href="#download">Download Wasabi Wallet</a>
</div>
</div>
</div>
</header>
- <section>
- <div class="bg-dark text-lg-center text-white font-weight-bold">
- <p>
- <img src="images/tor-browser.png" width="17" height="17" alt="open_source">&nbsp;
- http://wasabiukrxmkdgve5kynjztuovbg43uxcbcxn6y2okcrsg7gb6jdmbad.onion
- </p>
- </div>
+ <section class="main-content">
<div class="container columns-2">
<div class="row">
<div class="container">
- <iframe src="unversioned/mixed-text.html" frameborder=0 width=1000 height="60"></iframe>
- <iframe src="unversioned/coinjoins-table.html" frameborder=0 width=700 height="170"></iframe>
- </div>
+ <iframe src="unversioned/mixed-text.html" frameborder="0" width="100%" height="60"></iframe>
+ <iframe src="unversioned/coinjoins-table.html" frameborder="0" width="100%" height="170"></iframe>
</div>
</div>
- <div class="bg-dark text-lg-center text-white font-weight-bold">
- <p>
- <img src="images/tor-browser.png" width="17" height="17" alt="open_source">&nbsp;
- http://wasabiukrxmkdgve5kynjztuovbg43uxcbcxn6y2okcrsg7gb6jdmbad.onion
- </p>
</div>
<a name="download" />
<div class="container columns-2">
<div class="container">
<div class="row">
<div class="container">
- <iframe src="unversioned/download-text-with-version.html" frameborder=0 width=600 height="60"></iframe>
+ <iframe src="unversioned/download-text-with-version.html" frameborder="0" width="100%" height="60"></iframe>
<p class="lead text-center">
Free and open source. Integrated <a href="https://www.torproject.org/">Tor</a>, <a href="https://github.com/nopara73/ZeroLink/">CoinJoin</a> and <a href="https://medium.com/@nopara73/coin-control-is-must-learn-if-you-care-about-your-privacy-in-bitcoin-33b9a5f224a2">coin control</a> features.<br />
... or build it from <a href="https://github.com/zkSNACKs/WalletWasabi">source code.</a><br />
<div class="col-lg-4 col-12 box-3">
<img src="images/apple.png" height="100" alt="open_source">
<br /><br />
- <a class="btn-block btn-lg btn-dark" href="https://github.com/zkSNACKs/WalletWasabi#how-to-run">
+ <a class="btn-block btn btn-lg btn-dark" href="https://github.com/zkSNACKs/WalletWasabi#how-to-run">
<img class="download-icon" src="/images/download.svg" width="18" height="18" alt="Download Wasabi">
Mac (Alpha)
<br />
</div>
</div>
</section>
+ <div class="banner text-wrap text-monospace text-lg-center text-white font-weight-bold">
+ <p>
+ <img src="images/tor-browser.png" width="17" height="17" alt="open_source">&nbsp;
+ https://wasabiukrxmkdgve5kynjztuovbg43uxcbcxn6y2okcrsg7gb6jdmbad.onion
+ </p>
+ </div>
<footer>
<a href="https://www.reddit.com/r/WasabiWallet/" target="_blank">Support</a>
<a href="https://github.com/zkSNACKs/WalletWasabi" target="_blank">GitHub</a>

style(website): apply suitable wcag colours (#713)

includes some subjective spacing, and stylistic improvements with the aim to improve readability and brand quality