Compare commits
No commits in common. "76c723d516f6cfeb2092d6f4ab4fd407ba7c67c6" and "719a9ff3ded36e06493e8ed080bba634844100c5" have entirely different histories.
76c723d516
...
719a9ff3de
5 changed files with 24 additions and 68 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@firq/fgosite",
|
||||
"type": "module",
|
||||
"version": "0.1.17",
|
||||
"version": "0.1.16",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
---
|
||||
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>
|
||||
|
|
@ -17,11 +15,11 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
|||
<slot />
|
||||
</ul>
|
||||
<div class="placeholder"></div>
|
||||
<div class="icon"></div>
|
||||
<i class="iconoir-menu"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<style define:vars={{ hamburger_src_url }}>
|
||||
<style>
|
||||
header {
|
||||
z-index: 1000;
|
||||
position: sticky;
|
||||
|
|
@ -83,6 +81,16 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
|||
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;
|
||||
|
|
@ -105,17 +113,6 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
|||
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: ImageMetadata
|
||||
icon: string
|
||||
}
|
||||
|
||||
const { icon, text, link, currentPage } = Astro.props
|
||||
|
|
@ -17,7 +17,6 @@ if (currentPage === slug) {
|
|||
currPage = 'current'
|
||||
}
|
||||
|
||||
const icon_src_url = `url("${icon.src}")`;
|
||||
const fulllink = `/${slug}`
|
||||
---
|
||||
|
||||
|
|
@ -29,12 +28,12 @@ const fulllink = `/${slug}`
|
|||
class={currPage}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="icon"></div>
|
||||
<i class={icon}></i>
|
||||
{text}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style define:vars={{ icon_src_url }}>
|
||||
<style>
|
||||
li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -42,7 +41,6 @@ const fulllink = `/${slug}`
|
|||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
|
|
@ -54,27 +52,10 @@ 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,12 +3,7 @@ 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 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'
|
||||
import "iconoir/css/iconoir.css"
|
||||
|
||||
export interface Props {
|
||||
title: string
|
||||
|
|
@ -16,18 +11,6 @@ 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
|
||||
|
||||
|
|
@ -41,14 +24,9 @@ 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>
|
||||
|
|
@ -76,7 +54,7 @@ const mapped_navdata = navdata.map((item) => ({
|
|||
<body>
|
||||
<Navbar>
|
||||
{
|
||||
mapped_navdata.map((item) => (
|
||||
navdata.map((item) => (
|
||||
<NavbarEntry currentPage={currentpage} {...item} />
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@
|
|||
{
|
||||
"link": "/",
|
||||
"text": "Home",
|
||||
"icon": "home"
|
||||
"icon": "iconoir-home"
|
||||
},
|
||||
{
|
||||
"link": "/servants",
|
||||
"text": "Servants",
|
||||
"icon": "servants"
|
||||
"icon": "iconoir-task-list"
|
||||
},
|
||||
{
|
||||
"link": "/ta-collection",
|
||||
"text": "TA Collection",
|
||||
"icon": "ta_collection"
|
||||
"icon": "iconoir-database"
|
||||
},
|
||||
{
|
||||
"link": "/blog",
|
||||
"text": "Blog",
|
||||
"icon": "blog"
|
||||
"icon": "iconoir-bookmark-book"
|
||||
},
|
||||
{
|
||||
"link": "/about",
|
||||
"text": "About",
|
||||
"icon": "about"
|
||||
"icon": "iconoir-mail"
|
||||
}
|
||||
]
|
||||
Loading…
Reference in a new issue