style.css: fix title hover-effect

commit 84ba0605818114faa6cfbadacbc302448e6f9d7a
parent f42ed696c5cc55ba566cbcf7d62202cab71166cc
Author: Katja (ctucx) <git@ctu.cx>
Date: Sun, 26 Jan 2025 22:08:51 +0100

style.css: fix title hover-effect

2 files changed, 13 insertions(+), 9 deletions(-)

src/searchView.js

+++-

static/style.css

++++++++++--------

diff --git a/src/searchView.js b/src/searchView.js
@@ -70,7 +70,9 @@ const iconFor = id => {
 
 const searchTemplate = (journeysHistory) => html`
 	<div class="searchView">
-		<h1 class="title center">TrainSearch</h1>
+		<div class="title center">
+			<h1>TrainSearch</h1>
+		</div>
 		<form class="column" id="form" @submit=${submitForm}>
 			<div class="row nowrap">
 				<input type="text" name="from" id="from" title="${t('from')}" placeholder="${t('from')}" value="${viewState.fromValue}" autocomplete="off"

diff --git a/static/style.css b/static/style.css
@@ -252,15 +252,17 @@ header {
 	}
 
 	.title {
-		color: white;
-		font-weight: normal;
-		margin: .7em .3em .5em .3em;
-	}
+		h1 {
+			color: white;
+			font-weight: normal;
+			margin: .7em .3em .5em .3em;
+		}
 
-	.title:hover {
-		-webkit-text-fill-color: transparent;
-		-webkit-background-clip: text !important;
-		background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%);
+		h1:hover {
+			-webkit-text-fill-color: transparent;
+			-webkit-background-clip: text !important;
+			background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%);
+		}
 	}
 
 	form {