Periodic/blazestar.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basically finishes styling

Browse Source
This commit is contained in:
Drew Haven
2025-06-21 21:40:40 -07:00
parent 2ad5e29cad
commit 0daac5bba4
33 changed files with 412 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/BaseHead.astro
View File

@@ -3,7 +3,6 @@
// all pages through the use of the <BaseHead /> component.
import '../styles/global.css';
import { SITE_TITLE } from '../consts';
import FallbackImage from '../assets/blog-placeholder-1.jpg';
import type { ImageMetadata } from 'astro';
interface Props {
@@ -14,7 +13,7 @@ interface Props {
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description, image = FallbackImage } = Astro.props;
const { title, description, image } = Astro.props;
---
<!-- Global Metadata -->
@@ -47,11 +46,15 @@ const { title, description, image = FallbackImage } = Astro.props;
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{ image &&
<meta property="og:image" content={new URL(image.src, Astro.url)} />
}
<!-- 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} />
{ image &&
<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
}

41
src/components/Footer.astro
View File

@@ -4,50 +4,11 @@ const today = new Date();
<footer>
&copy; {today.getFullYear()} Periodic. All rights reserved.
<div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank">
<span class="sr-only">Follow Periodic on Mastodon</span>
<svg
viewBox="0 0 16 16"
aria-hidden="true"
width="32"
height="32"
astro-icon="social/mastodon"
><path
fill="currentColor"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
></path></svg
>
</a>
<a href="https://github.com/periodic" target="_blank">
<span class="sr-only">Go to Periodic's GitHub repo</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div>
</footer>
<style>
footer {
padding: 2em 1em 6em 1em;
background: linear-gradient(var(--gray-gradient)) no-repeat;
color: rgb(var(--gray));
text-align: center;
}
.social-links {
display: flex;
justify-content: center;
gap: 1em;
margin-top: 1em;
}
.social-links a {
text-decoration: none;
color: rgb(var(--gray));
}
.social-links a:hover {
color: rgb(var(--gray-dark));
color: var(--color-gray);
}
</style>

19
src/components/Header.astro
View File

@@ -1,11 +1,11 @@
---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
import Logo from './Logo.astro';
---
<header>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<h2><Logo /></h2>
<div class="internal-links">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
@@ -38,7 +38,6 @@ import { SITE_TITLE } from '../consts';
color: var(--color-light-text);
margin: 0;
padding: 0;
box-shadow: 0 2px 8px rgba(var(--black), 5%);
}
h2 {
margin: 0;
@@ -56,13 +55,17 @@ import { SITE_TITLE } from '../consts';
}
nav a {
padding: 1em 0.5em;
color: var(--black);
color: var(--color-light-text);
border-bottom: 4px solid transparent;
text-decoration: none;
}
nav a.active {
text-decoration: none;
border-bottom-color: var(--accent);
&:hover {
color: var(--color-accent);
}
&.active {
text-decoration: none;
border-bottom-color: var(--color-accent);
}
}
.social-links,
.social-links a {

39
src/components/Logo.astro Normal file
View File

@@ -0,0 +1,39 @@
---
---
<div class="logo">
<span class="blazestar">Blazestar</span>
<span class="dot">.</span>
<span class="net">net</span>
</div>
<style>
.logo {
color: var(--color-light-text);
font-family: 'Fira Code', monospace;
/* display: grid; */
/* grid-template-columns: max-content 1fr; */
/* grid-template-areas: */
/* "dot blazestar" */
/* "dot net"; */
/* align-items: last baseline; */
display: flex;
flex-direction: row;
align-items: baseline;
.blazestar {
grid-area: blazestar;
font-size: 150%;
}
.dot {
color: var(--color-red);
grid-area: dot;
font-size: 150%;
margin-right: -0.1em;
}
.net {
grid-area: net;
color: var(--color-red);
}
}
</style>

1
src/components/NotchedBox.astro
View File

@@ -56,7 +56,6 @@ const { fillNotches = "none" } = Astro.props;
height: calc(100% - 16px);
width: calc(100% - 40px);
background-color: var(--color-space-blue);
color: var(--light-gray);
padding: 8px 20px;
clip-path: polygon(
0 16px,

24
src/components/NotchedBox.module.css
View File

@@ -1,24 +0,0 @@
.container {
padding: 1px;
background-color: var(--color-gold);
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}
.content {
background-color: var(--color-space-blue);
color: var(--light-gray);
padding: 16px 20px;
clip-path: polygon(
0 16px,
16px 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}

27
src/components/Sidebar.astro
View File

@@ -1,11 +1,11 @@
---
import SidebarLink from './SidebarLink.astro';
import { SITE_TITLE } from '../consts';
import Logo from './Logo.astro';
---
<header>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<h2><Logo></Logo></h2>
<div class="internal-links">
<SidebarLink href="/">Home</SidebarLink>
<SidebarLink href="/blog">Blog</SidebarLink>
@@ -54,15 +54,20 @@ import { SITE_TITLE } from '../consts';
align-items: stretch;
justify-content: space-between;
gap: 16px;
}
nav a {
color: var(--black);
border-bottom: 4px solid transparent;
text-decoration: none;
}
nav a.active {
text-decoration: none;
}
a {
color: var(--color-light-text);
border-bottom: 4px solid transparent;
text-decoration: none;
&:hover {
color: var(--color-accent);
border-bottom: 4px solid transparent;
text-decoration: none;
}
&.active {
text-decoration: none;
}
}
}
.internal-links {
display: flex;
flex-direction: column;

14
src/components/SidebarLink.astro
View File

@@ -10,16 +10,22 @@ const subpath = pathname.match(/[^\/]+/g);
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
---
<NotchedBox fillNotches={ isActive ? "right" : "none" }>
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<NotchedBox fillNotches={ isActive ? "right" : "none" }>
<slot />
</a>
</NotchedBox>
</NotchedBox>
</a>
<style>
a {
display: inline-block;
text-decoration: none;
color: var(--color-light-text);
}
a.hover {
color: var(--color-gold);
}
a.active {
font-weight: bolder;
text-decoration: underline;