Restyle About

Author: ThomasFarstrike

src/index.css

@@ -98,6 +98,10 @@ input:focus{
     display: flex; /* content0 is the first menu item and visible by default */
 }
 
+#content5 {
+    text-align: center;
+}
+
 .column {
     box-sizing: border-box;
     flex: 1;
@@ -183,7 +187,6 @@ header .logo {
 
 .bigbutton {
     display: inline-block;
-    float: left;
     padding: 1.2em;
     background-color: #18222E;
     color: #CAE2E9;
@@ -223,12 +226,16 @@ header .logo {
     width: 6em;
 }
 
-img.headericon {
+img.featureheadericon {
     float: left;
     padding-right: 0.75em;
     width: 1.3em;
 }
 
+img.headericon {
+    margin-bottom: 1em;
+}
+
 .featuredetail {
     margin-left: 0.8em;
 }
@@ -290,13 +297,15 @@ img.donate {
 }
 
 .threecolumns {
+    font-size: 15px;
     float: left;
-    margin-top: 3em;
-    width: 33%;
+    padding: 1em;
+    width: 30%;
 }
 
-.threecolumns p {
-    padding: 0.5em 1em 0em 0;
+.threecolumns div {
+    padding: 0.5em 1em 0em 1em;
+    text-align: left;
 }
 
 #content4 {

src/index.html

@@ -96,7 +96,8 @@ <h3>You'll be able to add a comment to your donation, so use that to reach out i
         <div class="main-content" id="content5">
 	     <div class="onecolumn">
 	        <h1>PeerViewer is a remote desktop and support solution, completely free for unlimited personal and commercial use.</h1>
-		Under the hood, it uses direct (peer-to-peer) connections between the participants. This was recently made possible by the power of the <a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg" alt="Pear Runtime Logo"/>Pear Runtime</a>.
+		<p>
+		Under the hood, it uses direct (peer-to-peer) connections between the participants. This was recently made possible by the power of the <a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg" alt="Pear Runtime Logo"/>Pear Runtime</a>.</p>
 		<!--
 		<h3>Why build an alternative to TeamViewer?</h3>
 		<p>TeamViewer works well and is very popular as a remote desktop and support program, but it's not free for commercial use.<p>
@@ -106,21 +107,28 @@ <h3>Why build an alternative to TeamViewer?</h3>
 		<div class="threecolumns column1">
 		<img class="headericon" src="../images/lightbulb.svg" alt="Lightbulb"/>
 		<h3>Why Peer-to-Peer?</h3>
-		<p>Traditionally, when you use network apps such as TeamViewer, place audio and video calls or share files, your data is going through intermediate servers which are expensive to host, can harm your privacy, increase latency and consume additional bandwidth.</p>
+		<div>
+		<p>
+		Traditionally, when you use network apps such as TeamViewer, place audio and video calls or share files, your data is going through intermediate servers which are expensive to host, can harm your privacy, increase latency and consume additional bandwidth.
+		</p>
+		</div>
 		</div>
 		<div class="threecolumns column2">
 		<img class="headericon" src="../images/lightning.svg" alt="Lightning"/>
 		<h3>Advantages</h3>
+		<div>
 		<ul>
 			<li>Being the highest bandwidth AND lowest latency way of establishing a network connection.</li>
 			<li>Ensuring maximum privacy for all participants.</li>
 			<li>Being low cost, making it possible to survive on a pay-what-you-can/voluntary/donation basis.</li>
 			<li>Minimizing time-to-market and allowing for quick MVP's without a lot of server-side datacenter setup work.</li>
 		</ul>
 		</div>
+		</div>
 		<div class="threecolumns column3">
 		<img class="headericon" src="../images/wall.svg" alt="Wall"/>
 		<h3>Building blocks</h3>
+		<div>
 		<p>We're lucky to be standing on the shoulders of giants to pull this off.<br/>Here's a list of some key, free and open-source technologies that make this possible:</p>
 		<ul>
 			<li>HolePunch, for establishing direct peer-to-peer connections.</li>
@@ -129,6 +137,7 @@ <h3>Building blocks</h3>
 			<li>Bitcoin and Lightning, for accepting payments without needing anyone's permission or approval.</li>
 		</ul>
 		</div>
+		</div>
 		<button class="bigbutton" onClick="menuChange(event,4)">Any suggestions? Let us know!</button>
 	    </div>
 	</div>
@@ -181,7 +190,7 @@ <h3>Building blocks</h3>
                         ["View-Only Mode", "A View-Only mode might be nice to be able to share your desktop, without having the other party control it.", "LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7CFKDFUXXSGUDGTFU","viewonly-logo"]];
       let featuresHTML = "";
       for (let featurenr=0; featurenr<features.length; featurenr++) {
-        featuresHTML += '<div class="feature" id="feature' + featurenr + '"><a href="lightning:' + features[featurenr][2] + '"><img class="qrcode" src="../images/' + features[featurenr][2] + '.png" alt="QR code that can be paid with bitcoin lightning wallet"/></a><div class="featuredetail"><img class="headericon" src="../images/' + features[featurenr][3] + '.svg" alt="' + features[featurenr][3] + '"/><h3>' + features[featurenr][0] + '</h3><p>' + features[featurenr][1] + '</p></div></div>';
+        featuresHTML += '<div class="feature" id="feature' + featurenr + '"><a href="lightning:' + features[featurenr][2] + '"><img class="qrcode" src="../images/' + features[featurenr][2] + '.png" alt="QR code that can be paid with bitcoin lightning wallet"/></a><div class="featuredetail"><img class="featureheadericon" src="../images/' + features[featurenr][3] + '.svg" alt="' + features[featurenr][3] + '"/><h3>' + features[featurenr][0] + '</h3><p>' + features[featurenr][1] + '</p></div></div>';
       }
       document.getElementById("featuregallery").innerHTML = featuresHTML;
     }