Streamline navbar and index page about me
This commit is contained in:
parent
be1b0d608e
commit
b4c8c5170b
SSH key fingerprint:
SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
4 changed files with 67 additions and 58 deletions
|
|
@ -1,34 +1,31 @@
|
|||
<script>
|
||||
import { page } from "$app/state";
|
||||
import links from "../../data/links.json";
|
||||
</script>
|
||||
|
||||
<a href="#main-content" class="skip-to-main">Skip to main content</a>
|
||||
<nav>
|
||||
<span class="brand icon-link">
|
||||
<img src="/favicon.png" alt="a black cat with large eyes" />
|
||||
<img src="/favicon.png" alt="a black cat with large eyes"/>
|
||||
<a href="/">pancakes</a>
|
||||
</span>
|
||||
{#if page.url.pathname !== "/"}
|
||||
<ul class="links">
|
||||
{#each links as link}
|
||||
{#if link.href && !link.mainOnly}
|
||||
<li>
|
||||
<div class="icon-link">
|
||||
<img
|
||||
<ul class="links">
|
||||
{#each links as link}
|
||||
{#if link.href && !link.mainOnly}
|
||||
<li>
|
||||
<div class="icon-link">
|
||||
<img
|
||||
class={link.iconInvert ? "invert" : ""}
|
||||
src={"/assets/icons/" + link.icon}
|
||||
alt={link.name}
|
||||
/>
|
||||
<a href={link.href} target="_blank">
|
||||
{link.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
/>
|
||||
<a href={link.href} target="_blank">
|
||||
{link.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
|
|
@ -64,8 +61,17 @@
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text);
|
||||
.icon-link > a {
|
||||
padding-left: 0.15rem;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.icon-link > img {
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
max-height: 2em;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { page } from "$app/state";
|
||||
import {page} from "$app/state";
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import "./inter.css";
|
||||
|
|
@ -10,31 +10,33 @@
|
|||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { children } = $props();
|
||||
let {children} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{page.data.title ? page.data.title + " | pancakes" : "pancakes"}
|
||||
</title>
|
||||
<meta name="description" content={page.data.description || "🐈⬛"} />
|
||||
<meta property="og:site_name" content="pancakes" />
|
||||
<meta name="description" content={page.data.description || "🐈⬛"}/>
|
||||
<meta property="og:site_name" content="pancakes"/>
|
||||
<meta
|
||||
property="og:url"
|
||||
content={"https://pancakes.gay" + page.url.pathname}
|
||||
property="og:url"
|
||||
content={"https://pancakes.gay" + page.url.pathname}
|
||||
/>
|
||||
<meta property="og:title" content={page.data.title || "pancakes"} />
|
||||
<meta property="og:title" content={page.data.title || "pancakes"}/>
|
||||
{#if page.data.header}
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:type" content="article"/>
|
||||
{:else}
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/favicon.png" />
|
||||
<meta property="og:image:alt" content="a black cat with large eyes" />
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:image" content="/favicon.png"/>
|
||||
<meta property="og:image:alt" content="a black cat with large eyes"/>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<Navbar />
|
||||
{#if page.url.pathname !== "/"}
|
||||
<Navbar/>
|
||||
{/if}
|
||||
|
||||
{@render children?.()}
|
||||
|
||||
<Footer />
|
||||
<Footer/>
|
||||
|
|
|
|||
|
|
@ -45,17 +45,18 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<img src="/favicon.png" alt="a black cat with large eyes"/>
|
||||
<h1>pancakes</h1>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<header>
|
||||
<h1 id="about-me">About Me</h1>
|
||||
<p>
|
||||
I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
|
||||
<DateTime display="time" timeZone="Australia/Brisbane"/>
|
||||
). I like
|
||||
cats, Linux, and programming in C# and Python (for now). You can
|
||||
find my links, projects, and other pages here.
|
||||
</p>
|
||||
</header>
|
||||
<p>
|
||||
I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
|
||||
title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
|
||||
that likes cats, Linux, and programming. You can find my
|
||||
links, projects, and other pages here.
|
||||
</p>
|
||||
|
||||
<h2 id="accounts">Accounts</h2>
|
||||
|
||||
|
|
@ -500,6 +501,16 @@
|
|||
</main>
|
||||
|
||||
<style>
|
||||
header {
|
||||
padding-top: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 8rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.account-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -176,6 +176,10 @@ a.button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 0.5em;
|
||||
|
||||
|
|
@ -210,20 +214,6 @@ table.rows tbody tr:nth-child(2n) {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.icon-link > a,
|
||||
.icon-link > span {
|
||||
padding-left: 0.15rem;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.icon-link > img {
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
max-height: 2em;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue