generated from Seekra/repository-template
use logo #52
@@ -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
|
|||||||
<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{
|
||||||
|
|||||||
Reference in New Issue
Block a user
Using an alias in an
<img>srcusually 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 asimport logo from '@/assets/logo.svg';) and using it dynamically with:src(such as:src="logo").Is done!