use logo #52

Merged
jakob.scheid merged 8 commits from feature/use-logo into main 2026-05-15 18:53:04 +02:00
Showing only changes of commit ae639dbe71 - Show all commits
+9 -20
View File
@@ -31,12 +31,12 @@ const submitSearch = function () {
<template> <template>
<div class="search-content"> <div class="search-content">
<header class="global-header"> <header class="global-header">
<h1>Seekra</h1> <img src="@/assets/logo.svg" alt="Seekra" class="header-logo" />
jakob.scheid marked this conversation as resolved Outdated
Outdated
Review

Using an alias in an <img> src usually works. But there is no guarantee that it will actually work 100% of the time. That is why I would ask you to import the image in the <script> (such as import logo from '@/assets/logo.svg';) and using it dynamically with :src (such as :src="logo").

Using an alias in an `<img>` `src` usually works. But there is no guarantee that it will actually work 100% of the time. That is why I would ask you to import the image in the `<script>` (such as `import logo from '@/assets/logo.svg';`) and using it dynamically with `:src` (such as `:src="logo"`).
Outdated
Review

Is done!

Is done!
<span class="slogan"> <span class="slogan">
Built to search. Built to search.
</span> </span>
</header> </header>
<div class="search-container"> <div class="search-container">
<Searchbar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit /> <Searchbar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit />
@@ -60,20 +60,9 @@ const submitSearch = function () {
padding-top: 40px; padding-top: 40px;
} }
.global-header h1 { .header-logo {
display: inline-block; width: 320px;
margin: 0; max-width: 100%;
line-height: 1;
background: linear-gradient(
to right,
var(--primary-color-l-4),
var(--primary-color),
var(--primary-color-d-4)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 6rem;
} }
.slogan{ .slogan{