Fixed Iconoir Icons #19
5 changed files with 68 additions and 24 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@firq/fgosite",
|
||||
"type": "module",
|
||||
"version": "0.1.16",
|
||||
"version": "0.1.17",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
Loading…
Reference in a new issue