New Style #24

Merged
jakob.scheid merged 19 commits from feature/reworked-style into main 2026-05-06 15:51:57 +02:00
3 changed files with 35 additions and 10 deletions
+4 -6
View File
@@ -25,19 +25,17 @@ limitations under the License.
</head> </head>
<body> <body>
<nav class="global-nav"> <nav class="global-nav">
<span id="logo">Seekra</span>
<ul> <ul>
<li class="nav-item">
<a href="#">Seekra</a>
</li>
</ul> </ul>
jakob.scheid marked this conversation as resolved Outdated
Outdated
Review

Please no example links.

Please no example links.
</nav> </nav>
<div class="content-background"> <div>
<header class="global-header"> <header class="global-header">
<h1>Seekra</h1> <h1>Seekra</h1>
<p class="slogan"> <span class="slogan">
Built to search. Built to search.
</p> </span>
</header> </header>
<form id="search-form"> <form id="search-form">
+11 -2
View File
@@ -1,8 +1,10 @@
body { body {
margin: 0; margin: 0;
min-height: 100vh;
background-color: #ffffff; background-color: #ffffff;
font-size: 16px; font-size: 16px;
} }
jakob.scheid marked this conversation as resolved Outdated
Outdated
Review

Not necessary due to line 3 (min-height: 100vh;).

Not necessary due to line 3 (`min-height: 100vh;`).
.content-background { .content-background {
background: background:
radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 75%), radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 75%),
@@ -14,19 +16,25 @@ body {
.global-header { .global-header {
text-align: center; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
} }
.global-header h1 { .global-header h1 {
display: inline-block; display: inline-block;
margin-bottom: 0; margin: 0;
line-height: 1;
background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F); background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
font-size: 6rem;
} }
.slogan{ .slogan{
margin-top: 0; margin: 0;
font-size: small; font-size: small;
} }
@@ -45,6 +53,7 @@ form {
align-items: center; align-items: center;
width: 80%; width: 80%;
border: 1.5px solid #ccc; border: 1.5px solid #ccc;
box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding)); border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
padding: var(--padding); padding: var(--padding);
padding-left: calc(var(--submit-button-content-height) + var(--padding)); padding-left: calc(var(--submit-button-content-height) + var(--padding));
+20 -2
View File
@@ -1,7 +1,25 @@
.global-nav { .global-nav {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding: 10px 0; align-items: center;
padding: 10px 40px;
}
.global-nav ul {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.global-nav ul a{
text-decoration: none;
color: black;
}
.global-nav ul a:hover{
text-decoration: underline;
} }
.global-nav ul { .global-nav ul {