Skip to content

Commit

Permalink
feat: Add Navbar + partial MoltenObsidian branding
Browse files Browse the repository at this point in the history
  • Loading branch information
SakuraIsayeki committed Aug 4, 2023
1 parent 1794328 commit b569ed4
Show file tree
Hide file tree
Showing 17 changed files with 408 additions and 191 deletions.
4 changes: 3 additions & 1 deletion nodsoft_moltenobsidian_web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"astro": "astro"
},
"dependencies": {
"astro": "^2.10.1"
"astro": "^2.10.1",
"bootstrap-icons": "^1.10.5",
"sass": "^1.64.2"
}
}
37 changes: 31 additions & 6 deletions nodsoft_moltenobsidian_web/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 37 additions & 0 deletions nodsoft_moltenobsidian_web/src/components/BaseHead.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
interface Props {
title: string;
description: string;
image?: string;
}
// const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description} = Astro.props;
---

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />

<!-- Canonical URL -->
<!--<link rel="canonical" href={canonicalURL} />-->

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
51 changes: 4 additions & 47 deletions nodsoft_moltenobsidian_web/src/components/Card.astro
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
---
import "./Card.astro.scss"
interface Props {
title: string;
body: string;
Expand All @@ -10,52 +12,7 @@ const { href, title, body } = Astro.props;

<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
<h2>{title}<span>&rarr;</span></h2>
<p>{body}</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>
45 changes: 45 additions & 0 deletions nodsoft_moltenobsidian_web/src/components/Card.astro.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
@use "../styles/variables" as *;

.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(white, 0.1);

a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}

h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

p {
margin-top: 0.5rem;
margin-bottom: 0;
}

&:is(:hover, :focus-within) {
background-position: 0;
background-image: $accent-gradient;

& h2 {
color: $accent-light;
}
}
}
24 changes: 24 additions & 0 deletions nodsoft_moltenobsidian_web/src/components/NavLink.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
import type { HTMLAttributes } from 'astro/types';
type Props = HTMLAttributes<'a'>;
const { href, class: className, ...props } = Astro.props;
const { pathname } = Astro.url;
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---

<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>
<style>
a {
display: inline-block;
text-decoration: none;
}
a.active {
font-weight: bolder;
text-decoration: underline;
}
</style>
27 changes: 27 additions & 0 deletions nodsoft_moltenobsidian_web/src/components/Navbar.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
import "./Navbar.astro.scss"
import NavLink from './NavLink.astro';
import { SITE_TITLE } from '../consts';
---

<header>
<nav>
<div style="display: flex; align-items: center;">
<h2 class="navbar-brand">
<a href="/">{SITE_TITLE}</a>
</h2>

<div class="internal-links">
<NavLink href="/">Home</NavLink>
<NavLink href="/vault">Vault</NavLink>
</div>
</div>

<!--<div class="social-links">-->
<!-- -->
<!--</div>-->
</nav>
</header>
<style>

</style>
48 changes: 48 additions & 0 deletions nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
header {
margin: 0;
padding: 0 1em;
//background: white;
box-shadow: 0 2px 8px rgba(var(--black), 5%);
}


//h2 a,
//h2 a.active {
// text-decoration: none;
//}
nav {
display: flex;
align-items: center;
justify-content: space-between;

& a {
padding: 1rem 0.5rem;
//color: var(--black);
border-bottom: 4px solid transparent;
text-decoration: none;

border-radius: 8px;
color: white;
opacity: 0.8;

&.active {
text-decoration: none;
//border-bottom-color: var(--accent);
}
}
}

.navbar-brand {
font-size: 1.5rem;
margin-right: 1.5rem;
}

.social-links {
&, a {
display: flex;
}

@media (max-width: 720px) {
display: none;
}
}
5 changes: 5 additions & 0 deletions nodsoft_moltenobsidian_web/src/consts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.

export const SITE_TITLE = 'MoltenObsidian';
// export const SITE_DESCRIPTION = 'Welcome to my website!';
1 change: 1 addition & 0 deletions nodsoft_moltenobsidian_web/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
Loading

0 comments on commit b569ed4

Please sign in to comment.