mirror of
https://github.com/maciejpedzich/maciejpedzi.ch.git
synced 2024-09-19 17:56:20 +02:00
Design makeover
This commit is contained in:
Maciej Pędzich
parent
74c2e8fa47
commit
e13e6582ac
@ -4,9 +4,9 @@
|
||||
import '../styles/global.css';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
@ -14,28 +14,19 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const { title, description, image = '/placeholder-social.jpg' } = 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} />
|
||||
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
|
||||
@ -3,11 +3,14 @@ const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} YOUR NAME HERE. All rights reserved.
|
||||
© {today.getFullYear()} Maciej Pędzich
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #fff;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
---
|
||||
export interface Props {
|
||||
date: Date;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const { date } = Astro.props;
|
||||
---
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
{date.toISOString().substring(0, 10)}
|
||||
</time>
|
||||
|
||||
@ -1,25 +1,49 @@
|
||||
---
|
||||
import HeaderLink from './HeaderLink.astro';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
---
|
||||
|
||||
<header>
|
||||
<h2>
|
||||
{SITE_TITLE}
|
||||
</h2>
|
||||
<nav>
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
|
||||
<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
|
||||
</nav>
|
||||
<span class="logo cmr2-text">
|
||||
<span>Maciej</span>
|
||||
<span>Pędzich</span>
|
||||
</span>
|
||||
<nav class="cmr2-text" aria-label="Site navigation">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/projects">Projects</HeaderLink>
|
||||
<HeaderLink href="/resume.pdf">Resume</HeaderLink>
|
||||
<HeaderLink href="mailto:contact@maciejpedzi.ch">Email me</HeaderLink>
|
||||
<HeaderLink href="/links">Links</HeaderLink>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin: 0em 0 2em;
|
||||
}
|
||||
h2 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
@media only screen and (max-width: 625px) {
|
||||
nav.cmr2-text {
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0em 0 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,15 +10,17 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.active {
|
||||
color: #fff;
|
||||
}
|
||||
a.active,
|
||||
a.active + a,
|
||||
a:hover + a,
|
||||
a + a:hover {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
@ -7,45 +8,29 @@ import FormattedDate from '../components/FormattedDate.astro';
|
||||
|
||||
type Props = CollectionEntry<'blog'>['data'];
|
||||
|
||||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
const { title, description, pubDate } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
<style>
|
||||
.title {
|
||||
font-size: 2em;
|
||||
margin: 0.25em 0 0;
|
||||
}
|
||||
hr {
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.last-updated-on {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<article>
|
||||
{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
|
||||
<h1 class="title">{title}</h1>
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<hr />
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
<head>
|
||||
<BaseHead title={title + ' - Maciej Pędzich'} description={description} />
|
||||
<style>
|
||||
.title {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<article>
|
||||
<h1 class="title">{title}</h1>
|
||||
<FormattedDate date={pubDate} />
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,21 +1,25 @@
|
||||
---
|
||||
import { CollectionEntry, getCollection } from 'astro:content';
|
||||
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
import TableOfContents from '../../components/TableOfContents.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
const posts = await getCollection('blog');
|
||||
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post
|
||||
}));
|
||||
}
|
||||
|
||||
type Props = CollectionEntry<'blog'>;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
const { Content, headings } = await post.render();
|
||||
---
|
||||
|
||||
<BlogPost {...post.data}>
|
||||
<h1>{post.data.title}</h1>
|
||||
<Content />
|
||||
{headings.length > 0 && <TableOfContents headings={headings} />}
|
||||
<Content />
|
||||
</BlogPost>
|
||||
|
||||
@ -6,49 +6,38 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
);
|
||||
const posts = (
|
||||
await getCollection('blog', (post) => import.meta.env.DEV || !post.data.draft)
|
||||
).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: unset;
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
}
|
||||
ul li :global(time) {
|
||||
flex: 0 0 130px;
|
||||
font-style: italic;
|
||||
color: #595959;
|
||||
}
|
||||
ul li a:visited {
|
||||
color: #8e32dc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
section {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<h2>My blog</h2>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,49 +2,81 @@
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header title={SITE_TITLE} />
|
||||
<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/pages/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>
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header title={SITE_TITLE} />
|
||||
<main>
|
||||
<h2>Welcome to my website!</h2>
|
||||
<p>
|
||||
My name is <strong>Maciej</strong>, but if you don't know how to
|
||||
pronounce it, then you can call me <strong>Mac</strong>. I'm an
|
||||
eighteen-year-old frontend developer from <strong>Poland</strong>.
|
||||
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
|
||||
my projects, I'm also familiar with <strong>Alpine</strong> and <strong
|
||||
>Astro</strong
|
||||
>.
|
||||
</p>
|
||||
<h3>My blog</h3>
|
||||
<p>
|
||||
It serves as a means of documenting the development process and inner
|
||||
workings of <a href="/projects">my applications</a>. Check out my latest
|
||||
posts below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<FormattedDate date={new Date()} />
|
||||
<a href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedDate date={new Date()} />
|
||||
<a href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedDate date={new Date()} />
|
||||
<a href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Enjoy my work?</h3>
|
||||
<p>
|
||||
If so, then make sure to follow me on <a
|
||||
href="https://github.com/maciejpedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>, <a
|
||||
href="https://twitter.com/MaciejPedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Twitter</a
|
||||
>, or <a rel="me" href="https://notacult.social/@macindahaus"
|
||||
>Mastodon</a
|
||||
>.
|
||||
</p>
|
||||
</main>
|
||||
<Footer />
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,64 +4,160 @@
|
||||
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
||||
*/
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
max-width: 65ch;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.5;
|
||||
color: #444;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: min(65ch, 90%);
|
||||
height: 100vh;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
background-color: #485870;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong,
|
||||
b {
|
||||
color: #222;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
a {
|
||||
color: #3273dc;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
nav a {
|
||||
margin-right: 10px;
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 2px solid #ccc;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
ul li time {
|
||||
flex: 0 0 112px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
content {
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 2px 5px;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
all: unset;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
color: #222;
|
||||
padding: 2px 0px 2px 20px;
|
||||
margin: 0px;
|
||||
font-style: italic;
|
||||
border: 1px solid #999;
|
||||
padding: 2px 0px 2px 20px;
|
||||
margin: 0px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
article > time {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cmr2-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
text-transform: lowercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h1.cmr2-text {
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
.cmr2-text > span,
|
||||
.cmr2-text > a {
|
||||
border-left-width: 0.05em;
|
||||
border-left-style: solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cmr2-text > span {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.cmr2-text > a {
|
||||
border-left-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.cmr2-text > span {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.cmr2-text > a {
|
||||
padding: 0.05em 0.7em;
|
||||
}
|
||||
|
||||
.cmr2-text > span:first-of-type,
|
||||
.cmr2-text > a:first-of-type {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.cmr2-text > a:hover,
|
||||
.cmr2-text > a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user