Welcome Page Revision

usr/share/doc/homepage/whonix-welcome-page/stylesheet.css

@@ -5,107 +5,156 @@
 ## See the file COPYING for copying conditions.
 */
 
+/* 1. General */
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('Roboto-Regular-webfont.woff');
+}
+
+/* 2. Elements */
+
 body {
-	margin: 50px 0px 0px 0px;
-	background-image: -moz-linear-gradient(top, #ffffff, #ffffff 20%, #d5ffd5 100%, #d5ffd5);
-	background-repeat: no-repeat;
-	background-color: #d5ffd5;
-	font-family: "Liberation Serif", "Times New Roman", Times, serif;
+	background: #f6f3f4;
+	font-family: "Roboto", "Helvetica", "Verdana", "Tahoma", "Liberation Sans", sans-serif;
+	color: #333;
+	padding: 40px 10px 0;
 }
 
-#logo {
+/* 3. Named elements */
+
+.page-wrapper {
+  max-width: 960px;
+  margin: auto;
+}
+
+.logo {
 	text-align: center;
+	width: 100%;
+	max-width: 600px;
+	margin: auto;
+	display: block;
 }
 
-#logo a {
-	cursor: default;
+.logo img {
+  width: 100%;
 }
 
-#logo img {
-	width: 400px;
-	height: 147px;
+.claim {
+  font-size: 28px;
+  text-align: center;
+  margin: 40px 0;
 }
 
-#resources {
-	width: 750px;
-	margin: 70px auto 0px auto;
+/* 4. Section Main Links */
+
+.main-links {
+  text-align: center;
+  font-size: 0;
 }
 
-#resources > ul {
-	margin: 0px;
-	padding: 0px;
-	list-style: none;
-	text-align: center;
+.main-links > a {
+  margin: 10px;
+  display: inline-block;
+  text-decoration: none;
+  transition: transform .1s;
 }
 
-#resources > ul > li {
-	display: inline-block;
-	position: relative;
-	margin: 0px auto;
-	padding: 0px 15px;
+.main-links > a:hover {
+  transform: scale(1.1);
 }
 
-#resources > ul > li:first-child {
-	padding-left: 0px;
+.main-links > a img {
+  height: 100px;
 }
 
-#resources > ul > li:last-child {
-	padding-right: 0px;
+.main-links > a span {
+  font-size: 20px;
+  margin-top: 10px;
+  display: block;
+  color: #333;
 }
 
-#resources > ul > li > a {
-	font-size: 12px;
-	font-weight: bold;
-	text-align: center;
-	text-transform: uppercase;
-	text-decoration: none;
-	color: #777;
+/* 5. Section News Links */
+
+.news-links {
+  margin: 45px auto;
+  width: max-content;
 }
 
-#resources > ul > li > a:hover {
-	color: #333;
+.news-links a {
+  display: block;
+  font-size: 20px;
+  text-decoration: none;
+  color: #333;
+  margin: 20px 0;
+  transition: transform .1s;
 }
 
-#resources > ul > li > div {
-	display: none;
-	position: absolute;
-	color: #333;
+.news-links > a:hover {
+  transform: scale(1.1);
 }
 
-#resources > ul > li:hover > div, #resources > ul > li:target > div {
-	display: block;
+.news-links a i {
+  display: inline-block;
+  width: 35px;
+  text-align: center;
+  margin-right: 5px;
 }
 
-#resources > ul > li > a:nth-child(2) {
-	display: none;
+.news-links a img {
+  height: 24px;
+  vertical-align: middle;
 }
 
-#resources > ul > li:target > a:first-child {
-	display: none;
+.news-links a span {
+  vertical-align: middle;
 }
 
-#resources > ul > li:target > a:nth-child(2) {
-	display: inline;
+/* 6. Section Search Links */
+
+.search-links {
+  text-align: center;
 }
 
-#resources > ul > li:last-child > div {
-	left: -646px;
+.search-links a {
+  display: inline-block;;
+  color: #333;
+  text-decoration: none;
+  font-size: 20px;
+  margin: 15px;
+  transition: transform .1s;
+}
+
+.search-links > a:hover {
+  transform: scale(1.1);
+}
+
+.search-links img {
+  height: 60px;
+}
+
+.search-links span {
+  display: block;
+  margin-top: 10px;
+  text-align: center;
+}
+
+/* 7. Section Legal */
+
+.legal {
+  max-width: 280px;
+  text-align: justify;
+  margin: 45px auto 85px;
+  color: #888;
+  font-size: 14px;
 }
 
-#resources > ul > li > div > div {
-	width: 710px;
-	margin: 20px 0px;
-	padding: 5px 20px;
-	border: 2px solid #ccc;
-	border-radius: 20px;
-	line-height: 19px;
-	font-size: 17px;
-	background-color: #fff;
+.legal a {
+  text-decoration: none;
+  color: #008CBA;
 }
 
-#resources > ul > li > div > div a {
-	padding-bottom: 2px;
-	border-bottom: 1px dotted #ccc;
-	text-decoration: none;
-	color: #3366ff;
+.legal a:hover {
+  text-decoration: underline;
 }

usr/share/doc/homepage/whonix-welcome-page/whonix.html

@@ -2,6 +2,7 @@
      ## Copyright (C) 2015 WhonixQubes
      ## Copyright (C) 2018 - 2021 ENCRYPTED SUPPORT LP <adrelanos@whonix.org>
      ## Copyright (C) 2018 Iry Koon <iry@riseup.net>
+     ## Copyright (C) 2022 Hans (Whonix dev team)
      ## See the file COPYING for copying conditions.
 -->
 <!DOCTYPE html>
@@ -10,50 +11,93 @@
     <meta charset="UTF-8" />
     <title>Whonix Welcome Page</title>
     <link href="stylesheet.css" type="text/css" rel="stylesheet" media="all" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
+
   <body>
+    <div class="page-wrapper">
+      <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion" class="logo" target="_blank" rel="noreferrer">
+	      <img src="img/whonix-logo-text.png" />
+      </a>
+
+      <div class="claim">
+        Welcome to privacy!
+      </div>
+
+      <div class="main-links">
+        <a href="https://check.torproject.org" target="_blank" rel="noreferrer">
+          <img src="img/symbol-ipcheck.png" />
+          <span>IP Check</span>
+        </a>
+        <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Documentation" target="_blank" rel="noreferrer">
+          <img src="img/symbol-doc.png" />
+          <span>Docs</span>
+        </a>
+        <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Support" target="_blank" rel="noreferrer">
+          <img src="img/symbol-support.png" />
+          <span>Support</span>
+        </a>
+        <a href="http://forums.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion" target="_blank" rel="noreferrer">
+          <img src="img/symbol-forum.png" />
+          <span>Forum</span>
+        </a>
+        <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Contribute" target="_blank" rel="noreferrer">
+          <img src="img/symbol-contribute.png" />
+          <span>Contribute</span>
+        </a>
+        <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Donate" target="_blank" rel="noreferrer">
+          <img src="img/symbol-donate.png" />
+          <span>Donate</span>
+        </a>
+      </div>
+
+      <div class="news-links">
+        <a href="http://forums.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/c/news">
+          <i><img src="img/symbol-newspaper.png" /></i>
+          <span>Whonix News Web</span>
+        </a>
+        <a href="https://t.me/s/Whonix_All_News">
+          <i><img src="img/symbol-telegram.png" /></i>
+          <span>Whonix News Telegram</span>
+        </a>
+        <a href="https://web.archive.org/https://t.me/s/Whonix_All_News">
+          <i><img src="img/symbol-archive.png" /></i>
+          <span>Archived News</span>
+        </a>
+      </div>
 
-<div id="logo">
-	<img src="file:///usr/share/doc/homepage/whonix-welcome-page/logo.png" />
-</div>
-
-    <table>
-      <table align="center" style="margin: 0px auto;" cellspacing="20">
-      <tr>
-         <th><a href="https://check.torproject.org" target="_blank" rel="noreferrer"><font size="6" color="green">IP Check</font></a></th>
-         <th><a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Documentation" target="_blank" rel="noreferrer"><font size="6" color="green">Docs</font></a></th>
-         <th><a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Support" target="_blank" rel="noreferrer"><font size="6" color="green">Support</font></a></th>
-         <th><a href="http://forums.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion" target="_blank" rel="noreferrer"><font size="6" color="green">Forum</font></a></th>
-         <th><a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Contribute" target="_blank" rel="noreferrer"><font size="6" color="green">Contribute</font></a></th>
-         <th><a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Donate" target="_blank" rel="noreferrer"><font size="6" color="green">Donate</font></a></th>
-      </tr>
-      </table>
-
-      <table align="center" style="margin: 0px auto;" cellspacing="20">
-      <tr>
-         <th><a href="http://forums.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/c/news" target="_blank" rel="noreferrer"><font size="6" color="green">News (Web)</font></a></th>
-         <th>
-            <a href="https://t.me/s/Whonix_All_News" target="_blank" rel="noreferrer"><font size="6" color="green">News (Telegram)</font></a>
-            <sup>[<a href="https://web.archive.org/https://t.me/s/Whonix_All_News" target="_blank" rel="noreferrer"><font size="6" color="green">archive</font></a>]</sup>
-         </th>
-      </tr>
-      </table>
-
-      <table align="center" style="margin: 0px auto;" cellspacing="20">
-      <tr>
-         <th><a href="https://search.yacy.net" target="_blank" rel="noreferrer"><font size="6" color="green">YaCy</font></a></th>
-         <th><a href="https://www.qwant.com" target="_blank" rel="noreferrer"><font size="6" color="green">Qwant</font></a></th>
-         <th><a href="https://www.ecosia.org" target="_blank" rel="noreferrer"><font size="6" color="green">ecosia</font></a></th>
-         <th><a href="https://metager.org" target="_blank" rel="noreferrer"><font size="6" color="green">MetaGer</font></a></th>
-         <th><a href="https://peekier.com" target="_blank" rel="noreferrer"><font size="6" color="green">peekier</font></a></th>
-      </tr>
-      </table>
-
-      <Br></Br>
-
-      <p style="margin-left: 80px"><font size="5">Whonix <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Whonix_Trademark_Policy" target="_blank" rel="noopener">&trade;</a> is a research project.</font></p>
-      <p style="margin-left: 80px"><font size="5">The official Whonix &trade; website is located at: <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion" target="_blank" rel="noreferrer">Whonix.org</a></font></p>
-      <p style="margin-left: 80px"><font size="5">Whonix &trade; is produced independently of, with no guarantee from, <a href="https://www.torproject.org" target="_blank" rel="noreferrer">The Tor&reg; Project</a>.</font></p>
+      <div class="search-links">
+        <a href="https://search.yacy.net" target="_blank" rel="noreferrer">
+          <img src="img/search-yacy.png" />
+          <span>YaCy</span>
+        </a>
+        <a href="https://www.qwant.com" target="_blank" rel="noreferrer">
+          <img src="img/search-qwant.png" />
+          <span>Qwant</span>
+        </a>
+        <a href="https://www.ecosia.org" target="_blank" rel="noreferrer">
+          <img src="img/search-ecosia.png" />
+          <span>ecosia</span>
+        </a>
+        <a href="https://metager.org" target="_blank" rel="noreferrer">
+          <img src="img/search-metager.png" />
+          <span>MetaGer</span>
+        </a>
+        <a href="https://peekier.com" target="_blank" rel="noreferrer">
+          <img src="img/search-peekier.png" />
+          <span>peekier</span>
+        </a>
+        <a href="https://duckduckgo.com" target="_blank" rel="noreferrer">
+          <img src="img/search-duck.png" />
+          <span>DuckDuckGo</span>
+        </a>
+      </div>
 
+      <div class="legal">
+        Whonix&nbsp;<a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion/wiki/Whonix_Trademark_Policy" target="_blank" rel="noopener">&trade;</a> is a research project.
+        The official Whonix&nbsp;&trade; website is located at: <a href="http://www.dds6qkxpwdeubwucdiaord2xgbbeyds25rbsgr73tbfpqpt4a6vjwsyd.onion" target="_blank" rel="noreferrer">Whonix.org</a>
+        Whonix&nbsp;&trade; is produced independently of and with no guarantee from <a href="https://www.torproject.org" target="_blank" rel="noreferrer">The Tor&nbsp;&reg; Project</a>.
+      </div>
+    </div>
   </body>
 </html>