Qalculate · SerjSX · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# qalculate.github.io Redesign
+This redesign is made by SerjSX volunteerily 
+
+### These are the changes done:
+
+1. Background color changed to a dark one (I can easily add a dark mode toggle instead with the option to toggle the theme, if needed)
+2. Changed the theme of the "Sections" AKA "Table of Content"
+3. Change the design of the normal information part (news, versions, description...)
+4. Changed the background color of the Manual page so it would match with the normal pages
+5. Added a "Back" button at the top of the first Manual page so you would go back to the main page of the normal website
+6. Cleaned the code, removed W3school stuff (I think that was being used) and made a separate folder for CSS files. HTML and CSS are separate, easier to edit and navigate.
+7. Buttons and clickable images (the logo) have effects, as in on hover.
+8. Very small, with a light font and color, watermark that I re-designed the website. OF COURSE this is optional and you can remove it.
+9. Organized the HTML files with divs and so on, they were normal with
+10. which makes the HTML file messy. Now everything is organized.
+
+### What I didn't do:
+
+1. I didn't touch to any of the other files, as in media and etc.
+2. I didn't touch to the API Reference websites since they are important, so I kept it the same way.
+3. I didn't change the texts of any of the contents inside the sites other than the news versions, I removed the repetitive "Qalculate!". Of course you can add it anytime.
+
+### Why I Did This
+Sometimes on my free time I volunteer in doing things like this, re-designing websites to a more modern UI, if the website needs it. 100% free, no need for any payment, and the watermark is optional. But you know why I add the watermarks ;)
diff --git a/contact.html b/contact.html
@@ -1,48 +1,65 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html>
+
 <head>
-  <title>Qalculate! - the ultimate desktop calculator</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="GENERATOR" content="Quanta Plus">
+	<title>Qalculate! - the ultimate desktop calculator</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta name="GENERATOR" content="Quanta Plus">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="css/main.css">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
 </head>
-<body text="Black" bgcolor="#ccccdd" style="margin: auto">
-<div align="center">
-<table cellspacing="0" bgcolor="White" style="height: 100vh"><tr>
-<td width="150" bgcolor="#666677" align="center" valign="top">
-<br>
-<a href="index.html"><IMG src="images/qalculate-icon.png" width="128" height="128" border="0"></a>
-<br><br><br>
-<table cellspacing="25" width="100%"><tr><td align="left">
-<font size="+1" color="White" face="serif">
-Sections:<br>
-<hr color="White" size="1" noshade>
-<a href="news.html" style="text-decoration: none"><font color="White" face="serif">News</font></a><br>
-<a href="features.html" style="text-decoration: none"><font color="White" face="serif">Features</font></a><br>
-<a href="screenshots.html" style="text-decoration: none"><font color="White" face="serif">Screenshots</font></a><br>
-<a href="downloads.html" style="text-decoration: none"><font color="White" face="serif">Downloads</font></a><br>
-<a href="manual/index.html" style="text-decoration: none"><font color="White" face="serif"><nobr>Manual</nobr></font></a><br>
-<a href="reference/index.html" style="text-decoration: none"><font color="White" face="serif"><nobr>API Reference&nbsp;&nbsp;&nbsp;&nbsp;</nobr></font></a><br>
-<a href="contact.html" style="text-decoration: none"><font color="White" face="serif">Contact</font></a><br>
-</font>
-<hr color="White" size="1" noshade>
-</td></tr></table>
-<br><br>
-</td><td width="50">&nbsp;</td>
-<td valign="top" width="900">
-<br>
-<div align="left">
-<h1><font color="#cc4499"><strong>Q</strong></font>alculate! contact</h1>
-<hr>
-</div>
-<br>
-	Submit bugs and feature requests, or ask questions, here:
-	<ul>
-	<li><a href="https://github.com/Qalculate/libqalculate/issues">libqalculate and qalc</a></li>
-	<li><a href="https://github.com/Qalculate/qalculate-gtk/issues">qalculate-gtk</a></li>
-	</ul>
-<br><br>
-</td><td width="50px">&nbsp;</td></tr>
-</table>
-</div>
+
+<body>
+	<div class="middle">
+		<div class="table-of-content">
+			<!--table of content / sections-->
+
+			<div class="main-brand">
+				<a href="index.html"><IMG class="logo" src="images/qalculate-icon.png" width="128" height="128" border="0"></a>
+				<div class="main-title"><span class="main-title-1letter">Q</span>alculate!</div>
+				<div class="main-title-2part">- the ultimate desktop calculator</div>
+			</div>
+
+			<div class="table-of-content-contents">
+				<p class="table-of-content-title">Sections</p>
+
+				<div class="table-of-content-texts">
+					<a href="news.html" class="toc-texts-unique">News</a><br>
+					<a href="features.html" class="toc-texts-unique">Features</a><br>
+					<a href="screenshots.html" class="toc-texts-unique">Screenshots</a><br>
+					<a href="downloads.html" class="toc-texts-unique">Downloads</a><br>
+					<a href="manual/index.html" class="toc-texts-unique">
+						<nobr>Manual</nobr>
+					</a><br>
+					<a href="reference/index.html" class="toc-texts-unique">
+						<nobr>API Reference</nobr>
+					</a><br>
+					<a href="contact.html" class="toc-texts-unique">Contact</a><br>
+				</div>
+
+			</div>
+
+		</div>
+	</div>
+
+	<div class="middle">
+		<div class="brand-info">
+			<div class="main-title main-title-news-conf"><span class="main-title-1letter">Q</span>alculate! contact
+			</div>
+
+			<hr>
+			<br>
+			Submit bugs and feature requests, or ask questions, here:
+			<ul>
+				<li><a href="https://github.com/Qalculate/libqalculate/issues">libqalculate and qalc</a></li>
+				<li><a href="https://github.com/Qalculate/qalculate-gtk/issues">qalculate-gtk</a></li>
+			</ul>
+		</div>
+	</div>
 </body>
-</html>
+
+</html>
diff --git a/css/features.css b/css/features.css
@@ -0,0 +1,59 @@
+    .features-box {
+        margin: 10px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        border-bottom: #8c8c8c 1px solid;
+    }
+
+    .features-title {
+        text-align: center;
+        font-weight: bolder;
+        margin: 5px;
+        padding-top: 10px;
+        font-size: 20px;
+    }
+
+    .features-info {
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+
+   /* XXX Small screens (320px and up) */
+   @media only screen and (min-width: 320px) {
+
+   }
+
+   /* X Small screens (425px and up) */
+   @media only screen and (min-width: 425px) {
+
+   }
+
+   /* Small screens (640px and up) */
+   @media only screen and (min-width: 640px) {
+
+   }
+
+   /* Medium screens (768px and up) */
+   @media only screen and (min-width: 768px) {
+
+   }
+
+   /* Large screens (1024px and up) */
+   @media only screen and (min-width: 1024px) {
+
+   }
+
+   /* X Large screens (1280px and up) */
+   @media only screen and (min-width: 1280px) {
+
+   }
+
+   /* XX Large screens (1536px and up) */
+   @media only screen and (min-width: 1536px) {
+
+   }
+
+   /* XXX Large screens (2560px and up) */
+   @media only screen and (min-width: 2560px) {
+
+   }