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

lots of styling

Browse Source
This commit is contained in:
Drew Haven
2025-06-10 23:50:27 -07:00
parent e2c68b39b4
commit b53c2ee80a
12 changed files with 412 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
astro.config.mjs
View File

@@ -1,17 +1,17 @@
// @ts-check // @ts-check
import { defineConfig } from 'astro/config'; import { defineConfig } from "astro/config";
import mdx from '@astrojs/mdx'; import mdx from "@astrojs/mdx";
import sitemap from '@astrojs/sitemap'; import sitemap from "@astrojs/sitemap";
import react from '@astrojs/react'; import react from "@astrojs/react";
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://example.com', site: "https://example.com",
integrations: [mdx(), sitemap(), react()], integrations: [mdx(), sitemap(), react()],
vite: { vite: {
plugins: [tailwindcss()], plugins: [],
}, },
}); });

19
src/components/Footer.astro
View File

@@ -3,10 +3,10 @@ const today = new Date();
--- ---
<footer> <footer>
&copy; {today.getFullYear()} Your name here. All rights reserved. &copy; {today.getFullYear()} Periodic. All rights reserved.
<div class="social-links"> <div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank"> <a href="https://m.webtoo.ls/@astro" target="_blank">
<span class="sr-only">Follow Astro on Mastodon</span> <span class="sr-only">Follow Periodic on Mastodon</span>
<svg <svg
viewBox="0 0 16 16" viewBox="0 0 16 16"
aria-hidden="true" aria-hidden="true"
@@ -19,17 +19,8 @@ const today = new Date();
></path></svg ></path></svg
> >
</a> </a>
<a href="https://twitter.com/astrodotbuild" target="_blank"> <a href="https://github.com/periodic" target="_blank">
<span class="sr-only">Follow Astro on Twitter</span> <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/twitter"
><path
fill="currentColor"
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
></path></svg
>
</a>
<a href="https://github.com/withastro/astro" target="_blank">
<span class="sr-only">Go to Astro's GitHub repo</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github" <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
><path ><path
fill="currentColor" fill="currentColor"

4
src/components/Header.astro
View File

@@ -35,9 +35,9 @@ import { SITE_TITLE } from '../consts';
</header> </header>
<style> <style>
header { header {
color: var(--color-light-text);
margin: 0; margin: 0;
padding: 0 1em; padding: 0;
background: white;
box-shadow: 0 2px 8px rgba(var(--black), 5%); box-shadow: 0 2px 8px rgba(var(--black), 5%);
} }
h2 { h2 {

70
src/components/NotchedBox.astro Normal file
View File

@@ -0,0 +1,70 @@
---
interface Props {
fillNotches: "left" | "right" | "both" | "none";
}
const { fillNotches = "none" } = Astro.props;
---
<div class={`container notch-${fillNotches}`}>
<div class="content">
<slot />
</div>
</div>
<style>
.container {
height: 100%;
width: 100%;
padding: 1px;
background-color: var(--color-gold);
}
.notch-left {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}
.notch-right {
clip-path: polygon(
0 16px,
16px 0,
100% 0,
100% 100%,
0 100%
);
}
.notch-none {
clip-path: polygon(
0 16px,
16px 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}
.content {
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,
16px 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%
);
}
</style>

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

@@ -0,0 +1,24 @@
.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%
);
}

82
src/components/Sidebar.astro Normal file
View File

@@ -0,0 +1,82 @@
---
import SidebarLink from './SidebarLink.astro';
import { SITE_TITLE } from '../consts';
---
<header>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<div class="internal-links">
<SidebarLink href="/">Home</SidebarLink>
<SidebarLink href="/blog">Blog</SidebarLink>
<SidebarLink href="/about">About</SidebarLink>
</div>
<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"
><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"
><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>
</nav>
</header>
<style>
header {
margin: 0;
padding: 0 1em;
}
h2 {
margin-bottom: 0.5em;
font-size: 1em;
}
h2 a,
h2 a.active {
text-decoration: none;
}
nav {
display: flex;
flex-direction: column;
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;
}
.internal-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.social-links,
.social-links a {
display: flex;
gap: 16px;
justify-content: center;
}
@media (max-width: 720px) {
.social-links {
display: none;
}
}
</style>

27
src/components/SidebarLink.astro Normal file
View File

@@ -0,0 +1,27 @@
---
import type { HTMLAttributes } from 'astro/types';
import NotchedBox from './NotchedBox.astro';
type Props = HTMLAttributes<'a'>;
const { href, class: className, ...props } = Astro.props;
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
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}>
<slot />
</a>
</NotchedBox>
<style>
a {
display: inline-block;
text-decoration: none;
}
a.active {
font-weight: bolder;
text-decoration: underline;
}
</style>

4
src/consts.ts
View File

@@ -1,5 +1,5 @@
// Place any global data in this file. // Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword. // You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = 'Astro Blog'; export const SITE_TITLE = "Blazestar.net";
export const SITE_DESCRIPTION = 'Welcome to my website!'; export const SITE_DESCRIPTION = "Welcome to Blazestar.net";

91
src/layouts/RootLayout.astro Normal file
View File

@@ -0,0 +1,91 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import NotchedBox from '../components/NotchedBox.tsx';
import Sidebar from '../components/Sidebar.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
interface Props {
}
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<div class="header">
<Header />
</div>
<div class="sidebar">
<Sidebar />
</div>
<main>
<slot>
</main>
<div class="footer">
<Footer />
</div>
</body>
<style>
@media (max-width: 720px) {
body {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
}
.header {
display: block;
}
.sidebar {
display: none;
}
}
@media (min-width: 720px) {
body {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 20rem 1fr;
}
.header {
display: none;
}
.sidebar {
display: block;
}
}
body {
display: grid;
margin: 2rem 3rem;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
main {
grid-area: main;
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
}
.footer {
grid-area: footer;
}
</style>
</html>

15
src/pages/about.astro
View File

@@ -1,14 +1,10 @@
--- ---
import Layout from '../layouts/BlogPost.astro'; import RootLayout from '../layouts/RootLayout.astro';
import AboutHeroImage from '../assets/blog-placeholder-about.jpg'; import NotchedBox from '../components/NotchedBox.astro';
--- ---
<Layout <RootLayout>
title="About Me" <NotchedBox>
description="Lorem ipsum dolor sit amet"
pubDate={new Date('August 08 2021')}
heroImage={AboutHeroImage}
>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
@@ -60,4 +56,5 @@ import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
</p> </p>
</Layout> </NotchedBox>
</RootLayout>

49
src/pages/index.astro
View File

@@ -2,48 +2,13 @@
import BaseHead from '../components/BaseHead.astro'; import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import NotchedBox from '../components/NotchedBox.astro';
import RootLayout from '../layouts/RootLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
--- ---
<!doctype html> <RootLayout>
<html lang="en"> <NotchedBox>
<head> Test content
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> </NotchedBox>
</head> </RootLayout>
<body>
<Header />
<main>
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build
a personal website, blog, or portfolio with Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
<li>Edit this page in <code>src/pages/index.astro</code></li>
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
<li>Check out the included blog posts in <code>src/content/blog/</code></li>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
</ul>
<p>
Have fun! If you get stuck, remember to
<a href="https://docs.astro.build/">read the docs</a>
or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
</p>
<p>
Looking for a blog template with a bit more personality? Check out
<a href="https://github.com/Charca/astro-blog-template">astro-blog-template</a>
by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
</p>
</main>
<Footer />
</body>
</html>

176
src/styles/global.css
View File

@@ -5,151 +5,151 @@
*/ */
:root { :root {
--accent: #2337ff; --color-gold: #ffd700;
--accent-dark: #000d8a; --color-space-blue: #0b0f1a;
--black: 15, 18, 25; --color-gray: #7f8c8d;
--gray: 96, 115, 159; --color-light-text: rgb(229, 233, 240);
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57; --accent: #2337ff;
--gray-gradient: rgba(var(--gray-light), 50%), #fff; --accent-dark: #000d8a;
--box-shadow: --black: 15, 18, 25;
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), --gray: 96, 115, 159;
0 16px 32px rgba(var(--gray), 33%); --gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
} }
@font-face { @font-face {
font-family: 'Atkinson'; font-family: "Atkinson";
src: url('/fonts/atkinson-regular.woff') format('woff'); src: url("/fonts/atkinson-regular.woff") format("woff");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Atkinson'; font-family: "Atkinson";
src: url('/fonts/atkinson-bold.woff') format('woff'); src: url("/fonts/atkinson-bold.woff") format("woff");
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
body { body {
font-family: 'Atkinson', sans-serif; font-family: "Atkinson", sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
background: linear-gradient(var(--gray-gradient)) no-repeat; word-wrap: break-word;
background-size: 100% 600px; overflow-wrap: break-word;
word-wrap: break-word; color: var(--color-light-text);
overflow-wrap: break-word; font-size: 20px;
color: rgb(var(--gray-dark)); line-height: 1.7;
font-size: 20px; background-color: var(--color-space-blue);
line-height: 1.7;
} }
main { main {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
color: rgb(var(--black)); line-height: 1.2;
line-height: 1.2;
} }
h1 { h1 {
font-size: 3.052em; font-size: 3.052em;
} }
h2 { h2 {
font-size: 2.441em; font-size: 2.441em;
} }
h3 { h3 {
font-size: 1.953em; font-size: 1.953em;
} }
h4 { h4 {
font-size: 1.563em; font-size: 1.563em;
} }
h5 { h5 {
font-size: 1.25em; font-size: 1.25em;
} }
strong, strong,
b { b {
font-weight: 700; font-weight: 700;
} }
a { a {
color: var(--accent); color: var(--accent);
} }
a:hover { a:hover {
color: var(--accent); color: var(--accent);
} }
p { p {
margin-bottom: 1em; margin-bottom: 1em;
} }
.prose p { .prose p {
margin-bottom: 2em; margin-bottom: 2em;
} }
textarea { textarea {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
} }
input { input {
font-size: 16px; font-size: 16px;
} }
table { table {
width: 100%; width: 100%;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
} }
code { code {
padding: 2px 5px; padding: 2px 5px;
background-color: rgb(var(--gray-light)); background-color: rgb(var(--gray-light));
border-radius: 2px; border-radius: 2px;
} }
pre { pre {
padding: 1.5em; padding: 1.5em;
border-radius: 8px; border-radius: 8px;
} }
pre > code { pre > code {
all: unset; all: unset;
} }
blockquote { blockquote {
border-left: 4px solid var(--accent); border-left: 4px solid var(--accent);
padding: 0 0 0 20px; padding: 0 0 0 20px;
margin: 0px; margin: 0px;
font-size: 1.333em; font-size: 1.333em;
} }
hr { hr {
border: none; border: none;
border-top: 1px solid rgb(var(--gray-light)); border-top: 1px solid rgb(var(--gray-light));
} }
@media (max-width: 720px) { @media (max-width: 720px) {
body { body {
font-size: 18px; font-size: 18px;
} }
main { main {
padding: 1em; padding: 1em;
} }
} }
.sr-only { .sr-only {
border: 0; border: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute !important; position: absolute !important;
height: 1px; height: 1px;
width: 1px; width: 1px;
overflow: hidden; overflow: hidden;
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px 1px 1px 1px); clip: rect(1px 1px 1px 1px);
/* maybe deprecated but we need to support legacy browsers */ /* maybe deprecated but we need to support legacy browsers */
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
/* modern browsers, clip-path works inwards from each corner */ /* modern browsers, clip-path works inwards from each corner */
clip-path: inset(50%); clip-path: inset(50%);
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */ /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap; white-space: nowrap;
} }