Fonts and more styling

Author: ThomasFarstrike

src/fonts/GothamRnd-Bold.otf

@@ -1,8 +1,25 @@
+@font-face {
+  font-family: GothamRndLight;
+  src: url(fonts/GothamRnd-Light.otf);
+}
+
+@font-face {
+  font-family: GothamRndMedium;
+  src: url(fonts/GothamRnd-Medium.otf);
+}
+
+/* Not used for now:
+@font-face {
+  font-family: GothamRndBold;
+  src: url(fonts/GothamRnd-Bold.otf);
+}
+*/
+
 body {
-    background: #f2f2f2;
+    background-color: #CAE2E9;
     color: #424242;
     margin: 0;
-    font-family: Arial, sans-serif;
+    font-family: GothamRndLight, sans-serif;
 }
 
 header {
@@ -41,8 +58,14 @@ header .logo {
     width: 25%;
 }
 
-header h1 {
-    display: inline;
+h2 {
+    margin-top: 0;
+    text-align: center;
+    font-family: GothamRndMedium;
+}
+
+label {
+    font-weight: bold;
 }
 
 .main-content {
@@ -57,10 +80,10 @@ header h1 {
 }
 
 .column {
-    flex: 1;
-    padding: 1em;
     box-sizing: border-box;
-    border: 1px solid #ddd;
+    flex: 1;
+    margin-top: 2em;
+    padding: 2em;
     position: relative;
 }
 
@@ -86,19 +109,24 @@ header h1 {
     padding: 1em 2em 1em 2em;
 }
 
+#column1 {
+    border-right: solid;
+}
+
+/* why?
 #column1, #column2 {
     flex: 3;
 }
+*/
 
 #pubkey {
     margin-bottom: 1em;
-    font-weight: bold;
     font-size: 18px;
 }
 
 #serverhelptext {
+    font-size: 14px;
     margin-bottom: 1em;
-    font-style: italic;
 }
 
 #serverstatus, #clientstatus {
@@ -111,22 +139,27 @@ header h1 {
 	left: 1em;
 }
 
-.bluebutton {
+.connectcontainer {
+    text-align: center;
+}
+
+.bigbutton {
     display: inline-block;
-    padding: 10px 20px;
-    background-color: #44aaff;
+    padding: 1.2em;
+    background-color: #18222E;
     color: #fff;
     text-align: center;
     text-decoration: none;
     font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.5em;
     margin: 1em 0;
 }
 
-.bluebutton:hover {
-  background-color: #0060a0;
+.bigbutton:hover {
+  background-color: #000;
 }
 
 .feature {
@@ -159,10 +192,6 @@ header h1 {
     height: 2em;
 }
 
-#content1 .bluebutton {
-    font-size: 1.2em;
-}
-
 .pearslogo {
     position: relative;
     width: 3em;
@@ -187,7 +216,7 @@ header h1 {
     left: 10em;
 }
 
-.bluebutton.downloadbutton {
+.bigbutton.downloadbutton {
     border-radius: 35px;
     font-size: 32px;
     font-weight: bold;
@@ -197,7 +226,7 @@ header h1 {
     width: 70%;
     position: relative;
 }
-.bluebutton.downloadbutton:hover {
+.bigbutton.downloadbutton:hover {
     background-color: #0060a0;
     box-shadow: 0 0 60px #44aaff;
 }

src/fonts/GothamRnd-Light.otf

@@ -33,24 +33,26 @@
         </header>
         <div class="main-content" id="content0">
             <div class="coverremotecontrol">
-                <a href="https://github.com/PeerViewer/codebase/releases/" class="bluebutton downloadbutton"><div>Download PeerViewer to get started</div></a>
+                <a href="https://github.com/PeerViewer/codebase/releases/" class="bigbutton downloadbutton"><div>Download PeerViewer to get started</div></a>
             </div>
             <div class="column" id="column1">
                 <h2>Allow Remote Control</h2>
-                <label for="pubkey">YOUR ID:</label>
+                <label for="pubkey">Your ID</label>
                 <input type="text" name="pubkey" id="pubkey" disabled size="43">
                 <a href="#copy" onclick="javascript:copyYourId();"><img width="26" src="../images/copy-icon.png" class="copyicon"></a>
 		<div id="serverhelptext">When you give your ID to someone running PeerViewer, they can operate your computer until you close this window.</div>
-		<!-- <button class="bluebutton" onclick="runServer()">Run Server</button> -->
+		<!-- <button class="bigbutton" onclick="runServer()">Run Server</button> -->
 		<div id="serverstatus">Initializing...</div>
             </div>
             <div class="column" id="column2">
                 <h2>Control Remote Computer</h2>
 		<p>
-                <label for="connectto">Partner ID:</label>
+                <label for="connectto">Partner ID</label>
                 <input type="text" id="connectto" name="connectto" size="43" onKeyPress="javascript:checkSubmit(event)"/>
 		</p>
-                <button class="bluebutton connectbutton" onclick="runClient()">CONNECT</button>
+		<div class="connectcontainer">
+			<button class="bigbutton" onclick="runClient()">Connect</button>
+		</div>
 		<div id="clientstatus">Ready to connect.</div>
             </div>
         </div>
@@ -63,7 +65,7 @@ <h2>Control Remote Computer</h2>
 		<div id="featuregallery">
 		<!-- This gets filled up by JavaScript. -->
 		</div>
-		<button class="bluebutton" onClick="menuChange(event,3)">Feel free to request a different feature using the contact form</button>
+		<button class="bigbutton" onClick="menuChange(event,3)">Feel free to request a different feature using the contact form</button>
             </div>
 	</div>
         <div class="main-content" id="content2">
@@ -113,7 +115,7 @@ <h3>Building blocks</h3>
 			<li>Electron, for building standalone applications using open web standards.</li>
 			<li>Bitcoin and Lightning, for accepting payments without needing anyone's permission or approval.</li>
 		</ul>
-		<button class="bluebutton" onClick="menuChange(event,2)">If you like this project, or have suggestions, let us know!</button>
+		<button class="bigbutton" onClick="menuChange(event,2)">If you like this project, or have suggestions, let us know!</button>
 	    </div>
 	</div>
         <footer><span><a href="https://peerviewer.org" target="_blank">PeerViewer</a> © 2023 Built with<a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg"></a></span></footer>