New version; Dark color scheme support; Design tweaks

Author: hanna-kn

contact.html

@@ -40,15 +40,17 @@
 <div class="main">
 <div style="float: right; text-align: right;"><a href="https://github.com/Qalculate" class="githubbutton">GitHub project</a></div>
 <div class="pagetitle"><span class="qcolor">Q</span>alculate! contact</div>
-<hr><br>
+<hr>
+<div class="content">
+<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>
 <li><a href="https://github.com/Qalculate/qalculate-qt/issues">qalculate-qt</a></li>
 </ul>
 </div>
+</div>
 </body>
 <script src="scripts/mobile.js"></script>
 </html>
-

css/qalculate.css

@@ -21,21 +21,19 @@
 	font-size: 0.95em;
 	font-family: sans-serif;
 	color: #fafcfd;
-	padding: 0.4em 0.7em 0.7em;
 	text-decoration: none;
 	text-transform: uppercase;
-	margin: 0.4em 0 0 0;
-	border-radius: 0.35em 0.35em 0 0;
-}
-
-.navleave {
 	padding: 0.4em 0.7em 0.3em;
 	margin: 0.4em 0 0.4em 0;
 	border-radius: 0.35em;
 }
 
+.navleave {
+}
+
 .navitem:hover {
 	background-color: #333A40;
+	transition: 0.3s;
 }
 
 .navq {
@@ -64,6 +62,9 @@
 .navcurrent {
 	background-color: #fafcfd;
 	color: #000000;
+	padding: 0.4em 0.7em 0.7em;
+	margin: 0.4em 0 0 0;
+	border-radius: 0.35em 0.35em 0 0;
 }
 
 .navcurrent:hover {
@@ -118,7 +119,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 1em 0 0.3em;
+	padding: 0 0.5em 0 0.3em;
 }
 
 .bar {
@@ -137,6 +138,7 @@
 
 .nav-item:hover{
 	background-color: #333A40;
+	transition: 0.3s;
 }
 
 .nav-logo {
@@ -150,6 +152,7 @@
 
 .nav-logo:hover {
 	background-color: #333A40;
+	transition: 0.3s;
 }
 
 .nav-menu {
@@ -179,6 +182,13 @@
 .hamburger {
 	display: block;
 	cursor: pointer;
+	padding: 0.2em 0.5em 0.2em;
+	border-radius: 0.35em;
+}
+
+.hamburger:hover {
+	background-color: #333A40;
+	transition: 0.3s;
 }
 
 .hamburger.active .bar:nth-child(2) {
@@ -196,11 +206,9 @@
 }
 
 @media only screen and (max-width: 750px) {
-
 	.navbar {
 		display: none;
 	}
-
 	.header {
 		position: fixed;
 		top: 0;
@@ -210,45 +218,48 @@
 		font-family: sans-serif;
 		text-transform: uppercase;
 	}
-
 }
 
 @media only screen and (min-width: 750px) {
 	.main {
 		padding: 5em 5% 5em 5%;
-		background-color: #fafcfd;
-		color: #000000;
 	}
 }
 
 @media only screen and (min-width: 900px) {
 	.main {
 		margin-left: auto;
 		margin-right: auto;
-		max-width: 1100px;
+		max-width: 1150px;
 		padding: 5em 7% 5em 7%;
-		background-color: #fafcfd;
-		color: #000000;
 	}
 }
 
+.content {
+	text-align: left;
+	clear: left;
+}
+
+.lncontent {
+	text-align: left;
+	clear: left;
+}
+
+.description {
+	font-size: 1.15em;
+	text-align: justify;
+}
+
 @media only screen and (min-width: 1200px) {
-	.subtitle {
-		font-size: 1.35em;
-		font-weight: bold;
-		margin-bottom: 1.5em;
-		text-align: center;
-	}
 	.mainscreenshot {
 		float: left;
-		margin-right: 1em;
-		margin-bottom: 2em;
+		margin: -4px 1.2em 2em -9px;
 	}
 	.subtitle {
-		font-size: 1.35em;
-		font-weight: bold;
 		margin-bottom: 1.75em;
-		text-align: center;
+	}
+	.lncontent {
+		width: 70%;
 	}
 }
 
@@ -267,21 +278,11 @@
 	text-align: left;
 }
 
-.description {
-	font-size: 1.15em;
-	text-align: left;
-}
-
 .qcolor {
 	font-weight: bold;
 	color: #cc4499;
 }
 
-.content {
-	text-align: left;
-	clear: left;
-}
-
 .latestnews {
 	font-size: 1em;
 	text-transform: uppercase;
@@ -302,7 +303,7 @@
 	text-align: center;
 	background-color: #994477;
 	border-radius: 1.25em;
-	padding: 0.3em 1.5em;
+	padding: 0.3em 1.5em 0.3em;
 	color: #fafcfd;
 	text-transform: uppercase;
 	font-size: 1.5em;
@@ -327,3 +328,35 @@
 	transition: background-color 0.5s;
 }
 
+.whiteimage {
+}
+
+@media (prefers-color-scheme: dark) {
+	.qbody, .main, .navcurrent, .navcurrent:hover {
+		background-color: #202124;
+		color: #e8eaed;
+	}
+	.navitem:hover, .nav-logo:hover, .nav-item:hover, .hamburger:hover {
+		background-color: #202124;
+	}
+	.content a, .lncontent a, .description a {
+		color: #8ab4f8;
+	}
+	.content a:visited, .lncontent a:visited, .description a:visited {
+		color: #c58af9;
+	}
+	.qcolor {
+		color: #ff77cc;
+	}
+	.newsdate {
+		color: #9aa0a6;
+		
+	}
+	.title, .subtitle, .pagetitle {
+		color: white;
+	}
+	.whiteimage {
+		filter: invert(95%);
+	}
+}
+