akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Markdown: unify stylesheet for blog and unix listings

Browse source
This commit is contained in:
Akemi Izuko 2023-12-30 03:13:05 -07:00
parent 311010aef9
commit 066952ae0b
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
4 changed files with 68 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/pages/blog/index.astro
View file

@ -6,6 +6,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro'; import FormattedDate from '../../components/FormattedDate.astro';
import "../../styles/post-listing.css"
const posts = (await getCollection('blog')).sort( const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf() (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
); );
@ -15,48 +17,10 @@ const posts = (await getCollection('blog')).sort(
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
margin: auto;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
img {
height: 232px;
width: 464px;
object-fit: contain;
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
}
</style>
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main class="post-listing">
<section> <section>
<h1 <h1
class="text-center mt-8 mb-4 text-6xl" class="text-center mt-8 mb-4 text-6xl"
@ -80,6 +44,9 @@ const posts = (await getCollection('blog')).sort(
class="rounded-2xl grayscale" class="rounded-2xl grayscale"
src={post.data.heroImage} src={post.data.heroImage}
alt="" /> alt="" />
<div class="hero-text">
{post.data.heroText}
</div>
<h4 <h4
class="title text-xl"> class="title text-xl">
{post.data.title} {post.data.title}

15
src/pages/meow.astro
View file

@ -33,7 +33,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
<Image <Image
src={img.default} src={img.default}
width="600" width="600"
alt="Photo of a pizza" alt="Photo of a grey cat with yellow eyes"
class="meow-image" class="meow-image"
/> />
</a> </a>
@ -74,6 +74,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
border-radius: 30px; border-radius: 30px;
grid-row: 1 / -1; grid-row: 1 / -1;
grid-column: 1; grid-column: 1;
animation: float-rev 1s ease-in-out;
} }
.meow-image:hover { .meow-image:hover {
box-shadow: 0px 10px 60px -10px; box-shadow: 0px 10px 60px -10px;
@ -83,10 +84,22 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
} }
@keyframes float { @keyframes float {
0% { 0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px); transform: translatey(0px);
} }
100% { 100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px); transform: translatey(-10px);
} }
} }
@keyframes float-rev {
0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px);
}
100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
}
</style> </style>

45
src/pages/unix/index.astro
View file

@ -6,6 +6,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro'; import FormattedDate from '../../components/FormattedDate.astro';
import "../../styles/post-listing.css"
const posts = (await getCollection('unix')).sort( const posts = (await getCollection('unix')).sort(
(a, b) => b.data.updateDate.valueOf() - a.data.updateDate.valueOf() (a, b) => b.data.updateDate.valueOf() - a.data.updateDate.valueOf()
); );
@ -15,51 +17,10 @@ const posts = (await getCollection('unix')).sort(
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
margin: auto;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
img {
height: 232px;
width: 464px;
object-fit: contain;
}
a.highlight-this {
color: var(--accent-color);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
}
</style>
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main class="post-listing">
<section> <section>
<h1 <h1
class="text-center mt-8 mb-4 text-6xl" class="text-center mt-8 mb-4 text-6xl"

45
src/styles/post-listing.css Normal file
View file

@ -0,0 +1,45 @@
/*
* This stylesheet is meant for the blog and unix notes listing pages. This is
* where a collection of posts are shown all at once.
*
* The parent <main> must have a class called ".post-listing"
*
*/
main.post-listing {
width: 960px;
margin: auto;
}
main.post-listing ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
main.post-listing ul li {
width: calc(50% - 1rem);
}
main.post-listing img {
height: 232px;
width: 464px;
object-fit: contain;
}
main.post-listing img:hover {
filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
}
@media (max-width: 720px) {
main.post-listing ul {
gap: 0.5em;
}
main.post-listing ul li {
width: 100%;
text-align: center;
}
main.post-listing ul li:first-child {
margin-bottom: 0;
}
main.post-listing ul li:first-child .title {
font-size: 1.563em;
}
}