Update design

css/app.css

@@ -172,26 +172,34 @@ table {
 html, body {
     font-family: "Open Sans", sans-serif;
     font-size: 20px;
-    background: #BB32FF;
+    background: #800080;
     color: #EFDFFF;
+    text-shadow: 1px 1px 3px black;
 }
 
 h1, h2, p {padding: 10px;}
-h1 {font-size: 2em;}
-h2 {font-size: 1.5em;}
-a {color: #800080; text-decoration: none;}
-a:hover {color: #A020B0;}
+h1 {font-size: 3em;}
+h2 {font-size: 2em;}
+a {color: gold; text-decoration: none;}
+a:hover {color: lightgrey;}
 
 .container {text-align: center;}
-.header {padding: 40px; height: calc(100vh - 80px); background: #800080;}
-.align-center { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
-.header .align-center { width: 80%; }
+.header {
+    padding: 40px;
+    background: url('../images/bg.jpg') no-repeat center center fixed;
+    background-size: cover;
+    border-bottom: 1px #EFDFFF solid;
+}
 .download {margin-top: 20px;}
 
 #dl-btn {
     font-size: 1.5em;
     background: #C145FF; display: inline-block;
     padding: 25px; margin: 10px;
+    text-shadow: none;
+}
+#dl-btn:hover {
+    background: #C859FF;
 }
 
 .header a { padding: 15px; color: #EFDFFF;}
@@ -199,12 +207,15 @@ a:hover {color: #A020B0;}
 
 .content {
     padding: 40px;
-    border-top: 1px #EFDFFF solid;
-}
-.content p {
-    max-width: 800px;
+    max-width: 600px;
     margin: auto;
     font-size: 0.8em;
+    line-height: 150%;
+    text-align: justify;
+}
+
+@media only screen and (max-device-width: 600px) {
+    .content { text-align: left; }
 }
 
 #donations {display: none;}
@@ -217,4 +228,6 @@ a:hover {color: #A020B0;}
     margin-bottom: 30px;
 }
 
+.links { text-align: center; }
 .links a {font-size: 1.2em; padding: 10px;}
+.links img {max-height: 50px;}

index.html

@@ -33,7 +33,7 @@
                 </div>
             </div>
             <div class="content">
-                <p style="font-size: 1.2em;" data-l10n-id="content-how-title">i2pd (I2P Daemon) is a full-featured C++ implementation of I2P client</p>
+                <p style="font-weight: bold;" data-l10n-id="content-how-title">i2pd (I2P Daemon) is a full-featured C++ implementation of I2P client</p>
                 <p data-l10n-id="content-how-p1">I2P (Invisible Internet Protocol) is a universal anonymous network layer. All communications over I2P are anonymous and end-to-end encrypted, participants don't reveal their real IP addresses.</p>
                 <p data-l10n-id="content-how-p2">I2P client is a software used for building and using anonymous I2P networks. Such networks are commonly used for anonymous peer-to-peer applications (filesharing, cryptocurrencies) and anonymous client-server applications (websites, instant messengers, chat-servers).</p>
                 <p data-l10n-id="content-how-p3">I2P allows people from all around the world to communicate and share information without restrictions.</p>
@@ -48,7 +48,7 @@
                 <p data-l10n-id="content-support-p2">You can help to protect our civil rights online, just run I2P node 24/7 and spread the word!</p>
                 <p><a data-l10n-id="content-support-donate-link" href="#donations">Support with coins</a></p>
                 <div id="donations">
-                    <h2 data-l10n-id="content-support-donate-text">Donations for Purple I2P developing:</h2>
+                    <p style="font-weight: bold;" data-l10n-id="content-support-donate-text">Donations for Purple I2P developing:</p>
                     <p>E-Mail: i2porignal at yandex.ru</p>
                     <p>BTC: 1K7Ds6KUeR8ya287UC4rYTjvC96vXyZbDY</p>
                     <p>DASH: Xw8YUrQpYzP9tZBmbjqxS3M97Q7v3vJKUF</p>
@@ -58,8 +58,9 @@
                 </div>
                 <div class="p-hr"></div>
                 <p class="links">
-                    <a href="https://github.com/PurpleI2P/i2pd" target="_blank">@GitHub</a>
-                    <a href="https://en.wikipedia.org/wiki/I2P" target="_blank">@Wikipedia</a>
+                    <a href="https://github.com/PurpleI2P/i2pd" target="_blank"><img alt="@GitHub" src="images/github.png"></a>
+                    <a href="https://en.wikipedia.org/wiki/I2P" target="_blank"><img alt="@Wikipedia" src="images/wikipedia.png"></a>
+                    <a href="https://twitter.com/hashtag/i2pd" target="_blank"><img alt="@Twitter" src="images/twitter.png"></a>
                     <a href="https://geti2p.net/" target="_blank">Vanilla I2P</a>
                 </p>
             </div>