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",
|
"name": "@firq/fgosite",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.1.17",
|
"version": "0.1.16",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
---
|
---
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
import logo from '../assets/logo.svg'
|
import logo from '../assets/logo.svg'
|
||||||
import hamburger from 'iconoir/icons/menu.svg'
|
|
||||||
const hamburger_src_url = `url("${hamburger.src}")`;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -17,11 +15,11 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
<div class="placeholder"></div>
|
<div class="placeholder"></div>
|
||||||
<div class="icon"></div>
|
<i class="iconoir-menu"></i>
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<style define:vars={{ hamburger_src_url }}>
|
<style>
|
||||||
header {
|
header {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
@ -83,6 +81,16 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
||||||
height: 64px;
|
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 {
|
.mobile > ul {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
@ -105,17 +113,6 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
||||||
justify-self: top;
|
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) {
|
@media (min-width: 1140px) {
|
||||||
.mobile {
|
.mobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ export interface Props {
|
||||||
currentPage?: string
|
currentPage?: string
|
||||||
link: string
|
link: string
|
||||||
text: string
|
text: string
|
||||||
icon: ImageMetadata
|
icon: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const { icon, text, link, currentPage } = Astro.props
|
const { icon, text, link, currentPage } = Astro.props
|
||||||
|
|
@ -17,7 +17,6 @@ if (currentPage === slug) {
|
||||||
currPage = 'current'
|
currPage = 'current'
|
||||||
}
|
}
|
||||||
|
|
||||||
const icon_src_url = `url("${icon.src}")`;
|
|
||||||
const fulllink = `/${slug}`
|
const fulllink = `/${slug}`
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -29,12 +28,12 @@ const fulllink = `/${slug}`
|
||||||
class={currPage}
|
class={currPage}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<div class="icon"></div>
|
<i class={icon}></i>
|
||||||
{text}
|
{text}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<style define:vars={{ icon_src_url }}>
|
<style>
|
||||||
li {
|
li {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -42,7 +41,6 @@ const fulllink = `/${slug}`
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a {
|
li > a {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -54,27 +52,10 @@ const fulllink = `/${slug}`
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
gap: 0.2em;
|
gap: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a:hover {
|
li > a:hover {
|
||||||
color: var(--c-purplepink);
|
color: var(--c-purplepink);
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a:hover > .icon {
|
|
||||||
background-color: var(--c-purplepink);
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
.current {
|
||||||
color: var(--c-darkpurple) !important;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,7 @@ import Navbar from '../components/navbar.astro'
|
||||||
import NavbarEntry from '../components/navbarEntry.astro'
|
import NavbarEntry from '../components/navbarEntry.astro'
|
||||||
import navdata from '../../static/data/_navdata.json'
|
import navdata from '../../static/data/_navdata.json'
|
||||||
import embed from '../assets/embed.png'
|
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 {
|
export interface Props {
|
||||||
title: string
|
title: string
|
||||||
|
|
@ -16,18 +11,6 @@ export interface Props {
|
||||||
descriptionOverride?: string
|
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
|
const { descriptionOverride, currentpage, title } = Astro.props
|
||||||
let description
|
let description
|
||||||
|
|
||||||
|
|
@ -41,14 +24,9 @@ let currPage = 'https://firq.dev/'
|
||||||
if (currentpage !== 'home') {
|
if (currentpage !== 'home') {
|
||||||
currPage += currentpage
|
currPage += currentpage
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapped_navdata = navdata.map((item) => ({
|
|
||||||
...item,
|
|
||||||
...{ icon: icons[item.icon] },
|
|
||||||
}))
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
@ -76,7 +54,7 @@ const mapped_navdata = navdata.map((item) => ({
|
||||||
<body>
|
<body>
|
||||||
<Navbar>
|
<Navbar>
|
||||||
{
|
{
|
||||||
mapped_navdata.map((item) => (
|
navdata.map((item) => (
|
||||||
<NavbarEntry currentPage={currentpage} {...item} />
|
<NavbarEntry currentPage={currentpage} {...item} />
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,26 +2,26 @@
|
||||||
{
|
{
|
||||||
"link": "/",
|
"link": "/",
|
||||||
"text": "Home",
|
"text": "Home",
|
||||||
"icon": "home"
|
"icon": "iconoir-home"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"link": "/servants",
|
"link": "/servants",
|
||||||
"text": "Servants",
|
"text": "Servants",
|
||||||
"icon": "servants"
|
"icon": "iconoir-task-list"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"link": "/ta-collection",
|
"link": "/ta-collection",
|
||||||
"text": "TA Collection",
|
"text": "TA Collection",
|
||||||
"icon": "ta_collection"
|
"icon": "iconoir-database"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"link": "/blog",
|
"link": "/blog",
|
||||||
"text": "Blog",
|
"text": "Blog",
|
||||||
"icon": "blog"
|
"icon": "iconoir-bookmark-book"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"link": "/about",
|
"link": "/about",
|
||||||
"text": "About",
|
"text": "About",
|
||||||
"icon": "about"
|
"icon": "iconoir-mail"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
Loading…
Reference in a new issue