homepage fixes
This commit is contained in:
@@ -10,8 +10,8 @@ const { title, date } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="blog-header">
|
||||
<h4>{title}</h4>
|
||||
<h5>
|
||||
<h2>{title}</h2>
|
||||
<h4>
|
||||
{`🗓️ ${formatInTimeZone(new Date(date), "America/New_York", "MMM do, y")}`}
|
||||
</h5>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer>
|
||||
<p style={{ fontSize: "0.8rem" }}>
|
||||
Built with <a href="https://astro.build">Astro</a> and <a
|
||||
href="https://picocss.com">Pico.css</a
|
||||
<p>
|
||||
Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
|
||||
>Astro</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
---
|
||||
|
||||
<div>
|
||||
<header>
|
||||
<h1>Graham's Blog</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<span style={{ fontSize: "1.6rem" }}>Graham Hall</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">📝 Blog</a>
|
||||
@@ -17,4 +13,4 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import "@picocss/pico";
|
||||
import "../styles/global.css";
|
||||
|
||||
import Header from "../components/Header.astro";
|
||||
@@ -25,7 +24,9 @@ const title = Astro.props.frontmatter
|
||||
</head>
|
||||
<body class="container">
|
||||
<Header />
|
||||
<slot />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -18,12 +18,7 @@ const posts = await response.json();
|
||||
<Layout title="Home">
|
||||
{
|
||||
posts.objects.map((post) => (
|
||||
<article>
|
||||
{post.thumbnail ? (
|
||||
<div style={{ marginBottom: "25px" }}>
|
||||
<img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
|
||||
</div>
|
||||
) : null}
|
||||
<article class="post-preview">
|
||||
<div>
|
||||
<BlogHeader title={post.title} date={post.published_at} />
|
||||
<Markup content={`<p>${post.content.split("</p>")[0]}`} />
|
||||
@@ -32,7 +27,7 @@ const posts = await response.json();
|
||||
</article>
|
||||
))
|
||||
}
|
||||
{posts.objects.length < 5 ? null : <a href="/archive">All Posts</a>}
|
||||
{posts.objects.length < 5 ? null : <a href="/posts">All Posts</a>}
|
||||
</Layout>
|
||||
|
||||
<!-- <style>
|
||||
|
||||
@@ -22,13 +22,6 @@ const post = posts.objects[0];
|
||||
|
||||
<Layout title={post.title}>
|
||||
<article>
|
||||
{
|
||||
post.thumbnail ? (
|
||||
<div style={{ marginBottom: "25px" }}>
|
||||
<img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<div>
|
||||
<BlogHeader title={post.title} date={post.published_at} />
|
||||
<Markup content={post.content} />
|
||||
|
||||
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
+213
-24
@@ -1,35 +1,224 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
src: url(./fonts/Manrope-Regular.ttf) format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
src: url(./fonts/Manrope-Bold.ttf) format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root {
|
||||
--blue: #3274ce;
|
||||
--red: #ce3446;
|
||||
--orange: #e56045;
|
||||
--text: #757575;
|
||||
--background: white;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--blue: #5996e9;
|
||||
--red: #e75969;
|
||||
--orange: #e87c66;
|
||||
--text: white;
|
||||
--background: #2d2d2d;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Lora", serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem 3rem;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Lora", serif;
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
blockquote {
|
||||
border-left: 3px solid;
|
||||
border-color: var(--text);
|
||||
margin-left: 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--text);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* List Styles */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol li {
|
||||
counter-increment: li;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: "‣";
|
||||
color: var(--orange);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: "." counter(li);
|
||||
color: var(--orange);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-right: 0.5em;
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
button,
|
||||
.link-button {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.link-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
button:active,
|
||||
.link-button:active {
|
||||
opacity: 0.9;
|
||||
scale: 0.98;
|
||||
}
|
||||
|
||||
/* Text Inputs */
|
||||
|
||||
input,
|
||||
textarea {
|
||||
appearance: none;
|
||||
outline: none;
|
||||
background-color: #e6e6e6;
|
||||
color: --text;
|
||||
border: 2px solid #dadada;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 5px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background-color: #eaeaea;
|
||||
box-shadow: 0px 0px 2px 1px var(--blue);
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
padding: 1.4rem;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
|
||||
.width-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blue-btn {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
background: #f9f9f9;
|
||||
padding: 0.1rem 1rem 1.5rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.blog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.blog-header h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-header {
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user