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

use logo #52

Merged
jakob.scheid merged 8 commits from feature/use-logo into main 2026-05-15 18:53:04 +02:00
Conversation 4 Commits 8 Files Changed 3
+20 -22
3 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/logo.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="758.75" height="192.5">
<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#4ba8eb"/><stop offset="100%" style="stop-color:#043485"/></linearGradient></defs>
<path stroke="url(#gradient)" stroke-width="15" fill="none" d=" M94 51 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 1 43.75 43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 M138.75 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75 M270 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75 M401.25 0 v192.5 m0 -96.125 l87.5 -87.5 m-87.5 87.5 l87.5 87.5 M532.5 192.5 v-192.5 m0 51.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 M663.75 50.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v43.75 v43.75 v43.75 m0 -43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v50"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/features/nav/components/Navbar.vue
+7 -1
View File
@@ -15,12 +15,14 @@ limitations under the License.
-->
<script setup>
import { inject } from 'vue';
import logo from '@/assets/logo.svg';
const isDark = inject('isDark');
</script>
<template>
<nav class="global-nav">
jakob.scheid marked this conversation as resolved Outdated
jakob.scheid commented 2026-05-15 18:02:29 +02:00
Outdated
Review
Copy Link
Copy Source

Please see my comment in src/views/SearchView.vue.

Please see my comment in `src/views/SearchView.vue`.
johannes.vos commented 2026-05-15 18:23:49 +02:00
Outdated
Review
Copy Link
Copy Source

Is done!

Is done!
<RouterLink to="/" class="link button link">
<span id="logo">Seekra</span>
<img :src="logo" alt="Seekra" class="nav-logo" />
</RouterLink>
<ul class="right-links">
<li>
@@ -75,4 +77,8 @@ const isDark = inject('isDark');
.dark-mode-toggle:hover {
background: var(--light-d-2);
}
.nav-logo {
height: 24px;
width: auto;
}
</style>
src/views/SearchView.vue
+5 -16
View File
@@ -16,9 +16,9 @@ limitations under the License.
<script setup>
import Searchbar from '../features/search/components/Searchbar.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import logo from '@/assets/logo.svg';
const router = useRouter();
@@ -32,7 +32,7 @@ const submitSearch = function () {
<template>
<div class="search-content">
<header class="global-header">
<h1>Seekra</h1>
<img :src="logo" alt="Seekra" class="header-logo" />
jakob.scheid marked this conversation as resolved Outdated
jakob.scheid commented 2026-05-15 18:01:31 +02:00
Outdated
Review
Copy Link
Copy Source

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"`).
johannes.vos commented 2026-05-15 18:23:58 +02:00
Outdated
Review
Copy Link
Copy Source

Is done!

Is done!
<span class="slogan">
Built to search.
</span>
@@ -60,20 +60,9 @@ const submitSearch = function () {
padding-top: 40px;
}
.global-header h1 {
display: inline-block;
margin: 0;
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;
.header-logo {
width: 320px;
max-width: 100%;
}
.slogan{