From: Malte Bublitz <malte@rolltreppe3.de>
Date: Fri, 2 May 2025 19:26:09 +0000 (+0200)
Subject: Zahlreiche Design-Verbesserungen
X-Git-Url: https://git.rt3x.de/?a=commitdiff_plain;h=abe3875e57c6962c0c701fe184d85f5d1685b392;p=startseite.malte70.de.git

Zahlreiche Design-Verbesserungen
---

diff --git a/css/dialog.css b/css/dialog.css
index 5f61878..2ee058b 100644
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -1,9 +1,10 @@
+@charset "UTF-8";
 /**
  * dialog.css
  */
 
 
-/* <dialog> for GnuPG key details
+/* <dialog> for settings
    https://github.com/GoogleChrome/dialog-polyfill */
 dialog {
 	border:               .1em solid #ff8000;
@@ -11,30 +12,29 @@ dialog {
 	background:           /*#2e3436*/  #444;
 	color:                #eee;
 	
-	position:             fixed;
+	/*position:             fixed;
 	top:                  50%;
-	transform:            translate(0, -50%);
+	transform:            translate(0, -50%);*/
 	
-	width:                18em;
+	width:                25em;
 	max-width:            100%;
 	
-	height:               14em;
+	height:               18em;
 	max-height:           100%;
 	
-	position:             fixed;
-	
 	z-index:              100;
 	
-	left:                 50%;
-	top:                  50%;
+	/*left:                 50%;
+	top:                  50%;*/
 	
-	/* Use this for centering if unknown width/height */
+	/* Use this for centering if unknown width/height *
 	transform:            translate(-50%, -50%);
 	
 	/* If known, negative margins are probably better (less chance of blurry text). */
 	/* margin: -200px 0 0 -200px; */
 	
 	box-shadow:           0 0 60px 10px rgba(0, 0, 0, 0.9);
+	
 }
 
 dialog h3 {
@@ -53,6 +53,9 @@ dialog button.close {
 	cursor:               pointer;
 	color:                #d3d7cf;
 	line-height:          .75em;
+
+
+	display: none;
 }
 
 dialog button.close:focus {
@@ -93,7 +96,7 @@ dialog + .backdrop { /* polyfill */
 dialog {
 	/* Fade on */
 	visibility:           visible;
-	opacity:              1
+	opacity:              1;
 	/*transition:         opacity 0.5s linear;*/
 	animation:            appear .5s ease-in-out;
 }
diff --git a/css/style.css b/css/style.css
index a2def10..910d4d6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,15 +9,22 @@
  *    #ff8000  Orange
  */
 
+:root {
+	--color-light-grey: #eee;
+	--color-grey: #888;
+	--color-dark-grey: #444;
+	--color-orange: #ff8000;
+}
+
 body {
-	background: #eee;
+	background: var(--color-light-grey);
 	font: 26px "Source Code Pro", monospace;
 }
 main {
 	/*width: 30em;*/
 	width: 40em;
 	margin: 3em auto 1em;
-	color: #444;
+	color: var(--color-dark-grey);
 	
 	/* ALT: zentriert
 	text-align: center;
@@ -31,14 +38,14 @@ main {
 	margin: 100px auto;*/
 }
 a:link, a:visited {
-	color: #888;
+	color: var(--color-grey);
 	text-decoration: none;
 }
 a:hover, a:active {
-	color: #444;
+	color: var(--color-dark-grey);
 }
 .red {
-	color: #ff8000;
+	color: var(--color-orange);
 }
 
 /**
@@ -60,43 +67,62 @@ a:hover, a:active {
 	font:         1em "Source Code Pro", monospace;
 	display:      inline-block;
 	padding:      6px;
-	background:   #eee;
-	color:        #888;
-	border:        0;
-	border-bottom: 2px solid #888;
+	border:       0;
 }
-/*#google-search input[type=text]:active {
-	color: #ff8000;
-}*/
 #google-search input[type=text]:focus {
-    outline: 0;
-    /*border-bottom-color: #ff8000;*/
+	outline: 0;
 }
+/*#google-search input[type=text]:active {
+	color: var(--color-orange);
+}*/
 #google-search input[type=text]:hover {
-    border-bottom-color: #ff8000;
+	border-bottom-color: var(--color-orange);
 }
+@media (prefers-color-scheme: light) {
+	#google-search input[type=text] {
+		background:   var(--color-light-grey);
+		color:        var(--color-grey);
+		border-bottom: 2px solid var(--color-grey);
+	}
+	#google-search input[type=text]:focus {
+		color: var(--color-dark-grey);
+		border-bottom-color: var(--color-orange);
+	}
+}
+@media (prefers-color-scheme: dark) {
+	#google-search input[type=text] {
+		background:   var(--color-dark-grey);
+		color:        var(--color-grey);
+		border-bottom: 2px solid var(--color-grey);
+	}
+	#google-search input[type=text]:focus {
+		color: var(--color-light-grey);
+		border-bottom-color: var(--color-orange);
+	}
+}
+
 
 /**
  * Notepad
  */
 #notepad p {
 	margin: 0;
-	color: #888;
+	color: var(--color-grey);
 }
 #notepadContent {
-	border-left: 2px solid #888;
+	border-left: 2px solid var(--color-grey);
 	font: 1em "Source Code Pro", monospace;
 	padding: .3em .8em;
-	color: #888;
+	color: var(--color-grey);
 	margin: .5em 0;
 }
 #notepadContent:focus {
 	outline: 0;
-	border-left-color: #444;
-	color: #444;
+	border-left-color: var(--color-dark-grey);
+	color: var(--color-dark-grey);
 }
 #notepadContent:hover {
-	border-left-color: #ff8000;
+	border-left-color: var(--color-orange);
 }
 
 /**
@@ -111,17 +137,64 @@ footer {
 	text-align: right;
 }
 footer p {
-	margin: 0;
+	margin: 0 0 .5em;
 	padding: .1em;
 	font-size: 0.6em;
-	color: #444;
+	color: var(--color-dark-grey);
+}
+footer p:last-child {
+	margin: 0;
 }
 footer p a:link, footer p a:visited {
-	color: #444;
+	color: var(--color-dark-grey);
 	text-decoration: underline;
 }
 footer p a:hover, footer p a:active {
-	color: #888;
+	color: var(--color-grey);
+}
+footer button {
+	display: inline-block;
+	border: 1px solid var(--color-grey);
+	border-radius: .4em;
+	padding: .4em .6em;
+}
+
+
+/**
+ * Form elements
+ */
+dialog {
+	input[type=text] {
+		border: 0;
+		border-bottom: 1px solid var(--color-light-grey);
+		background-color: var(--color-dark-grey);
+		color: var(--color-light-grey);
+		height: 32px;
+		vertical-align: middle;
+		width: 400px;
+		max-width: 100%;
+		font-size: 20px;
+		padding: .3em .5em;
+	}
+	h4 {
+		margin-bottom: .5em;
+	}
+	button {
+		border: 1px solid var(--color-light-grey);
+		border-radius: .2em;
+		padding: .1em .3em;
+		font-size: 26px;
+		display: inline-block;
+		margin-top: 1.5em;
+	}
+}
+#whoami_user:active, #whoami_host:active {
+	outline: 0;
+}
+
+
+.small-caps {
+	font-variant: small-caps;
 }
 
 
@@ -130,44 +203,56 @@ footer p a:hover, footer p a:active {
  */
 @media (prefers-color-scheme: dark) {
 	body {
-		background: #444;
+		background: var(--color-dark-grey);
 	}
 	main {
-		color: #eee;
+		color: var(--color-light-grey);
 	}
 	a:link, a:visited {
-		color: #eee;
+		color: var(--color-light-grey);
 	}
 	a:hover, a:active {
-		color: #eee;
+		color: var(--color-light-grey);
 		text-decoration: underline;
 	}
-	#google-search input[type=text] {
-		color: #eee;
-		background: #444;
-		border-bottom: 1px solid #ff8000;
-	}
+	/*#google-search input[type=text] {
+		color: var(--color-light-grey);
+		background-color: var(--color-dark-grey);
+		border-bottom: 1px solid var(--color-orange);
+	}*/
 	#notepad p {
-		color: #eee;
+		color: var(--color-light-grey);
 	}
 	footer p {
-		color: #888;
+		color: var(--color-grey);
 	}
 	footer p a:link, footer p a:visited {
-		color: #888;
+		color: var(--color-grey);
 	}
 	footer p a:hover, footer p a:active {
-		color: #eee;
+		color: var(--color-light-grey);
 	}
-	button#settings {
-		background:    #888;
-		color:         #eee;
-		border-color:  #eee;
+	footer button {
+		/*background:    var(--color-grey);
+		color:         var(--color-light-grey);
+		border-color:  var(--color-light-grey);
 		padding:       .2em.4em;
-		border-radius: 8%;
+		border-radius: 8%;*/
+		
+		border: 1px solid var(--color-light-grey);
+		border-radius: .2em;
+		padding: .1em .3em;
+		/*font-size: 22px;*/
+		
+		display: inline-block;
+		margin-top: 1.5em;
+	}
+	section#google-search input[type=text] {
+		background: var(--color-dark-grey);
+		color: var(--color-light-grey);
 	}
 	#notepadContent:focus {
-		color: #eee;
-		border-left-color: #eee;
+		color: var(--color-light-grey);
+		border-left-color: var(--color-light-grey);
 	}
 }
diff --git a/template.inc.php b/template.inc.php
index faca40b..6a949fb 100644
--- a/template.inc.php
+++ b/template.inc.php
@@ -5,12 +5,14 @@
  * Used by index.php and tty/index.php.
  */
 
+
 /**
  * Correct Content-Type header for HTML5 including
  * the charset
  */
 header("Content-Type: text/html; charset=".$Data["Meta"]["Charset"]);
 
+
 /**
  * The placeholder of the search input gets chosen from
  * this array using `array_rand()`
@@ -72,18 +74,19 @@ unset($i);
 					<input type="text" id="whoami_host">
 				</div>
 
+				<h4><span class="small-caps">WhoAmI</span> Format</h4>
 				<div>
 					<input type="radio" id="whoami_format_unix" name="whoami_format" value="unix" checked>
-					<label for="whoami_format_unix">Unix-Format</label>
+					<label for="whoami_format_unix">Unix (<tt>username@hostname</tt>)</label>
 				</div>
 
 				<div>
 					<input type="radio" id="whoami_format_windows" name="whoami_format" value="windows">
-					<label for="whoami_format_windows">Windows-Format</label>
+					<label for="whoami_format_windows">Windows (<tt>\\hostname\username</pttre>)</label>
 				</div>
 
 				<div>
-					<button id="whoami_reset" type="button">Zurücksetzen</button>
+					<button id="whoami_reset" type="button">Reset settings</button>
 				</div>
 			</form>
 		</dialog>
@@ -208,5 +211,6 @@ foreach ($Data["JS"] as $js) {
 ?>
 		</script>
 <?php endif; ?>
+
 	</body>
 </html>