design tweaks
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_287_24406)" fill="currentColor"><path d="M18.4 3a1 1 0 1 0-2 0h2zm-2 3.6a1 1 0 1 0 2 0h-2zM7.6 3a1 1 0 0 0-2 0h2zm-2 3.6a1 1 0 0 0 2 0h-2zM3.586 20.414l-.707.707.707-.707zm16.828 0l-.707-.707.707.707zm0-15.028l.707-.707-.707.707zm-16.828 0l-.707-.707.707.707zM20 8.8V17h2V8.8h-2zM17 20H7v2h10v-2zM4 17V8.8H2V17h2zM7.001 5.8H16.998v-2H7.003v2zM21 9H3v2h18V9zm-4.6-6v3.6h2V3h-2zM5.6 3v3.6h2V3h-2zM7 20c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C5.3 22.002 6.085 22 7 22v-2zm-5-3c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C4.002 18.6 4 17.971 4 17H2zm18 0c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C22.002 18.7 22 17.915 22 17h-2zm-3 5c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064v2zm5-13.2c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061h2zm-5.001-3c.971 0 1.6.002 2.062.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.794-.797C18.7 3.798 17.914 3.8 17 3.8v2zM4 8.8c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L2.879 4.679c-.51.51-.709 1.138-.797 1.793C1.998 7.1 2 7.885 2 8.8h2zm3.001-5c-.915 0-1.701-.002-2.328.082-.656.088-1.285.287-1.794.797l1.414 1.414c.076-.076.212-.17.646-.229.463-.062 1.09-.064 2.062-.064v-2zM8.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-9-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></g><defs><clipPath id="clip0_287_24406"><path fill="currentColor" d="M0 0H24V24H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 21v-1.45c0-.977 0-1.465-.113-1.864a3 3 0 0 0-2.073-2.073c-.399-.113-.887-.113-1.864-.113h-6.9c-.977 0-1.465 0-1.864.113a3 3 0 0 0-2.073 2.073C4 18.085 4 18.573 4 19.55V21M16.2 7.06c0 2.245-1.88 4.065-4.2 4.065S7.8 9.305 7.8 7.06 9.68 2.996 12 2.996s4.2 1.82 4.2 4.064z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
|
||||
|
After Width: | Height: | Size: 451 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="18" rx="2" width="18" x="3" y="3"/><path d="M3 7h18M7 11.5h10M7 16h6"/></g></svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -12,7 +12,17 @@ const { title, date } = Astro.props;
|
||||
|
||||
<div class="blog-header">
|
||||
<h2>{title}</h2>
|
||||
<h3 style={{ fontSize: "1.1rem" }}>
|
||||
🗓️ <FormattedDate date={date} />
|
||||
<h3>
|
||||
<img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
|
||||
<FormattedDate date={date} />
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,30 @@
|
||||
---
|
||||
const { pathname } = Astro.url;
|
||||
console.log(pathname);
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Blog", icon: "website-with-texticonImage24px", path: "/" },
|
||||
{ label: "About", icon: "usericonImage24px", path: "/about" },
|
||||
];
|
||||
---
|
||||
|
||||
<header>
|
||||
<h1>Graham's Blog</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<li>
|
||||
<a href="/">📝 Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">👨💻 About</a>
|
||||
<a
|
||||
class={pathname === link.path ? "active-nav" : null}
|
||||
href={link.path}
|
||||
>
|
||||
<img src={`/media/icons/${link.icon}.svg`} />
|
||||
<span>{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
+15
-1
@@ -14,5 +14,19 @@ const posts = await getCollection("blog");
|
||||
.slice(0, 5)
|
||||
.map((post) => <PostPreview post={post} />)
|
||||
}
|
||||
{posts.length < 5 ? null : <a href="/archive">All Posts</a>}
|
||||
{
|
||||
posts.length < 5 ? null : (
|
||||
<div class="more-posts">
|
||||
<a class="link-button blue-btn" href="/archive">
|
||||
All Posts
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.more-posts {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,7 @@ const { Content } = await post.render();
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
<style>
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
+34
-4
@@ -20,6 +20,8 @@
|
||||
--orange: #e56045;
|
||||
--text: #444444;
|
||||
--background: white;
|
||||
--radius: 5px;
|
||||
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -43,6 +45,12 @@ body {
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
@@ -52,12 +60,33 @@ header h1 {
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
position: relative;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active-nav::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
@@ -112,7 +141,7 @@ code {
|
||||
color: var(--orange);
|
||||
border: lightgray solid 1px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* List Styles */
|
||||
@@ -223,8 +252,9 @@ dialog {
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
background: #f9f9f9;
|
||||
background: white;
|
||||
padding: 0.1rem 1rem 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0 0 1.5rem 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgb(237, 237, 237);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user