Firq/fgo-ta-com-website
Firq/fgo-ta-com-website
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 70 Packages Wiki Activity Actions

Navbar improvements
All checks were successful
/ build-site (push) Successful in 1m0s
Details
/ checking (push) Successful in 15s
Details
/ publish (push) Successful in 1m16s
Details

Browse source
This commit is contained in:
Firq 2024-07-16 21:11:28 +02:00
parent 034d769e7e
commit 57cf29e71c
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "fgo-ta-com-website", "name": "fgo-ta-com-website",
"type": "module", "type": "module",
"version": "0.2.2-pre.9", "version": "0.2.2-pre.10",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",

14
src/components/navbar.astro
View file

@ -33,12 +33,13 @@ const hamburger_src_url = `url("${hamburger.src}")`
z-index: 1000; z-index: 1000;
position: sticky; position: sticky;
top: 0px; top: 0px;
background-color: var(--c-darkgray); background-color: var(--c-darkergray);
display: flex; display: flex;
height: auto; height: auto;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
line-height: 1.5em; line-height: 1.5em;
border-bottom: 2px solid var(--c-darkpurple) ;
} }
header > a { header > a {
margin-left: 16px; margin-left: 16px;
@ -67,7 +68,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
line-height: 1.5em; line-height: 1.5em;
} }
.mobile > ul { .mobile > ul {
background-color: var(--c-darkgray); background-color: var(--c-darkergray);
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@ -84,7 +85,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
.mobile { .mobile {
display: flex; display: flex;
background-color: var(--c-darkgray); background-color: var(--c-darkergray);
border: 0px; border: 0px;
width: 100%; width: 100%;
height: 64px; height: 64px;
@ -114,13 +115,14 @@ const hamburger_src_url = `url("${hamburger.src}")`
.hamburger-menu { .hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center; mask: var(--hamburger_src_url) no-repeat center;
mask-size: cover;
background-color: white; background-color: white;
width: 2rem; width: 2.25rem;
height: 2rem; height: 2.25rem;
position: static; position: static;
align-self: flex-start; align-self: flex-start;
margin-right: 1rem; margin-right: 1rem;
margin-top: 1rem; margin-top: 0.825rem;
} }
@media (min-width: 1140px) { @media (min-width: 1140px) {