Merge pull request 'Fixed Iconoir Icons' (#19) from dev into main
All checks were successful
/ build-site (push) Successful in 2m13s
/ checking (push) Successful in 36s
/ release (push) Successful in 7s

Reviewed-on: #19
This commit is contained in:
Firq 2023-12-29 22:11:08 +00:00
commit 76c723d516
5 changed files with 68 additions and 24 deletions

View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.1.16",
"version": "0.1.17",
"private": true,
"scripts": {
"dev": "astro dev",

View file

@ -1,6 +1,8 @@
---
import { Image } from 'astro:assets';
import logo from '../assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`;
---
<header>
@ -15,11 +17,11 @@ import logo from '../assets/logo.svg'
<slot />
</ul>
<div class="placeholder"></div>
<i class="iconoir-menu"></i>
<div class="icon"></div>
</button>
</header>
<style>
<style define:vars={{ hamburger_src_url }}>
header {
z-index: 1000;
position: sticky;
@ -81,16 +83,6 @@ import logo from '../assets/logo.svg'
height: 64px;
}
.mobile > i {
position: static;
color: white;
font-weight: bold;
font-size: 2em;
align-self: flex-start;
padding-right: 1em;
padding-top: 1.15rem;
}
.mobile > ul {
display: none;
padding: 0px;
@ -113,6 +105,17 @@ import logo from '../assets/logo.svg'
justify-self: top;
}
.icon {
mask: var(--hamburger_src_url) no-repeat center;
background-color: white;
width: 2em;
height: 2em;
position: static;
align-self: flex-start;
padding-right: 1em;
padding-top: 2.5em;
}
@media (min-width: 1140px) {
.mobile {
display: none;

View file

@ -3,7 +3,7 @@ export interface Props {
currentPage?: string
link: string
text: string
icon: string
icon: ImageMetadata
}
const { icon, text, link, currentPage } = Astro.props
@ -17,6 +17,7 @@ if (currentPage === slug) {
currPage = 'current'
}
const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}`
---
@ -28,12 +29,12 @@ const fulllink = `/${slug}`
class={currPage}
tabindex="0"
>
<i class={icon}></i>
<div class="icon"></div>
{text}
</a>
</li>
<style>
<style define:vars={{ icon_src_url }}>
li {
align-items: center;
justify-content: center;
@ -41,6 +42,7 @@ const fulllink = `/${slug}`
display: flex;
width: 200px;
}
li > a {
display: inline-flex;
color: white;
@ -52,10 +54,27 @@ const fulllink = `/${slug}`
font-weight: bold;
gap: 0.2em;
}
li > a:hover {
color: var(--c-purplepink);
}
li > a:hover > .icon {
background-color: var(--c-purplepink);
}
.current {
color: var(--c-darkpurple) !important;
}
.current > .icon {
background-color: var(--c-darkpurple) !important;
}
.icon {
mask: var(--icon_src_url) no-repeat center;
background-color: white;
width: 1.4em;
height: 1.4em;
}
</style>

View file

@ -3,7 +3,12 @@ import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro'
import navdata from '../../static/data/_navdata.json'
import embed from '../assets/embed.png'
import "iconoir/css/iconoir.css"
import home from 'iconoir/icons/home.svg'
import servants from 'iconoir/icons/task-list.svg'
import ta_collection from 'iconoir/icons/database.svg'
import blog from 'iconoir/icons/bookmark-book.svg'
import about from 'iconoir/icons/mail.svg'
export interface Props {
title: string
@ -11,6 +16,18 @@ export interface Props {
descriptionOverride?: string
}
interface IconsLookup {
[key: string]: ImageMetadata
}
const icons: IconsLookup = {
home: home,
servants: servants,
ta_collection: ta_collection,
blog: blog,
about: about,
}
const { descriptionOverride, currentpage, title } = Astro.props
let description
@ -24,9 +41,14 @@ let currPage = 'https://firq.dev/'
if (currentpage !== 'home') {
currPage += currentpage
}
const mapped_navdata = navdata.map((item) => ({
...item,
...{ icon: icons[item.icon] },
}))
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>{title}</title>
@ -54,7 +76,7 @@ if (currentpage !== 'home') {
<body>
<Navbar>
{
navdata.map((item) => (
mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} />
))
}

View file

@ -2,26 +2,26 @@
{
"link": "/",
"text": "Home",
"icon": "iconoir-home"
"icon": "home"
},
{
"link": "/servants",
"text": "Servants",
"icon": "iconoir-task-list"
"icon": "servants"
},
{
"link": "/ta-collection",
"text": "TA Collection",
"icon": "iconoir-database"
"icon": "ta_collection"
},
{
"link": "/blog",
"text": "Blog",
"icon": "iconoir-bookmark-book"
"icon": "blog"
},
{
"link": "/about",
"text": "About",
"icon": "iconoir-mail"
"icon": "about"
}
]