Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

New Style #20

Merged
jakob.scheid merged 15 commits from feature/reworked-style into main 2026-05-06 14:22:47 +02:00
Conversation 1 Commits 15 Files Changed 3
+17 -24
2 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 123bd22d07 - Show all commits
src/index.html
+7 -7
View File
@@ -27,15 +27,15 @@ limitations under the License.
<nav class="global-nav"> <nav class="global-nav">
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
seekra <a href="#">Seekra</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="hero"> <div class="content-background">
<header> <header class="global-header">
<h1>seekra</h1> <h1>Seekra</h1>
<p> <p class="slogan">
Built to search. Built to search.
</p> </p>
</header> </header>
@@ -43,12 +43,12 @@ limitations under the License.
<form id="search-form"> <form id="search-form">
<div class="search-wrapper"> <div class="search-wrapper">
<input type="search" name="search" placeholder="Search..." required /> <input type="search" name="search" placeholder="Search..." required />
<button type="submit">Search</button> <button type="submit" class="search-button">Search</button>
</div> </div>
</form> </form>
</div> </div>
<footer> <footer>
<p>&copy; 2026 seekra.</p> <p>&copy; 2026 Seekra.</p>
</footer> </footer>
</body> </body>
</html> </html>
src/static/css/main.css
+10 -17
View File
@@ -1,9 +1,8 @@
body { body {
margin: 0; margin: 0;
background-color: #ffffff; background-color: #ffffff;
font-size: 16px;
} }
.hero { .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%),
linear-gradient(160deg, #c8d8f0, #7aa0d8, #5077C7, #dce8f8); linear-gradient(160deg, #c8d8f0, #7aa0d8, #5077C7, #dce8f8);
@@ -12,11 +11,11 @@ body {
flex-direction: column; flex-direction: column;
} }
header { .global-header {
text-align: center; text-align: center;
} }
header h1 { .global-header h1 {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F); background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
@@ -25,7 +24,7 @@ header h1 {
background-clip: text; background-clip: text;
} }
header p { .slogan{
margin-top: 0; margin-top: 0;
font-size: small; font-size: small;
} }
@@ -38,16 +37,12 @@ form {
} }
.search-wrapper { .search-wrapper {
--submit-button-padding-y: 8px;
--submit-button-content-height: 18px;
--padding: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 80%; width: 80%;
border: 1.5px solid #ccc; border: 1.5px solid #ccc;
border-radius: calc(var(--submit-button-content-height) + var(--padding)); border-radius: 999px;
padding: var(--padding); padding: 4px 4px 4px 16px;
padding-left: calc(var(--submit-button-content-height) + var(--padding));
} }
.search-wrapper input { .search-wrapper input {
@@ -58,19 +53,17 @@ form {
background: transparent; background: transparent;
} }
.search-wrapper button { .search-button {
font-size: 1rem; border-radius: 999px;
height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
border: none; border: none;
padding: var(--submit-button-padding-y) 20px; padding: 8px 20px;
background: #4562BE; background: #4562BE;
color: white; color: white;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.search-wrapper button:hover { .search-button:hover {
background: #374FA5; background: #374FA5;
} }