Adding logo and styles for it.

This commit is contained in:
Bradley Shellnut 2023-01-29 23:48:55 -08:00
parent c7f8d7e6d0
commit a7b992d2ac
4 changed files with 81 additions and 10 deletions

View file

@ -1,20 +1,13 @@
<!-- import React from 'react';
import styled from 'styled-components';
import Logo from './Logo';
import Nav from './Nav'; -->
<script lang="ts">
import Logo from '$lib/components/logo/index.svelte';
import Nav from '$lib/components/nav/index.svelte';
</script>
<header>
<!-- <Logo /> -->
<h1>Test</h1>
<Logo />
<Nav />
</header>
<style lang="postcss">
header {
display: flex;

View file

@ -0,0 +1,78 @@
<script lang="ts">
import beeIcon from '$lib/assets/images/bee.svg';
import shellIcon from '$lib/assets/images/shell.svg';
import nutIcon from '$lib/assets/images/hazelnut.svg';
</script>
<div>
<a href="/" class="center">
<img src={beeIcon} alt="Bee Icon" width="30" height="30"/>
<p>Bradley</p>
</a>
<a href="/" class="center">
<img src={shellIcon} alt="Shell Icon" width="30" height="30"/>
<p>Shell</p>
</a>
<a href="/" class="center">
<img src={nutIcon} alt="Nut Icon" width="30" height="30"/>
<p>Nut</p>
</a>
</div>
<style lang="postcss">
div {
text-transform: uppercase;
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
align-items: center;
grid-gap: 1rem;
padding: 0rem;
font-size: 2rem;
--scale: 0;
p::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -0.5px;
left: 0px;
background: var(--linkHover);
transition: transform 0.3s ease 0s;
transform: scale(var(--scale));
}
a {
display: grid;
justify-items: center;
text-decoration: none;
font-weight: bold;
margin-right: 0;
padding: 0;
padding-right: 0.3rem;
&:hover {
--scale: 1;
}
p {
position: relative;
font-size: 0.5em;
/* padding-top: 0.3rem; */
margin: 0.5rem 0 0 0;
&:hover {
--scale: 1;
}
&:after {
transform: scale(var(--scale));
}
}
img {
width: 3rem;
}
}
}
</style>

View file

@ -0,0 +1 @@
export const prerender = true;

View file

@ -1,5 +1,4 @@
<script lang="ts">
export const prerender = true;
import SEO from "$root/lib/components/SEO.svelte";
import Graphql from '@iconify-icons/simple-icons/graphql';
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';