diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index cff601b..7209676 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,6 +6,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
+import "../../styles/post-listing.css"
+
const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
@@ -15,48 +17,10 @@ const posts = (await getCollection('blog')).sort(
-
-
+
+
+ {post.data.heroText}
+
{post.data.title}
diff --git a/src/pages/meow.astro b/src/pages/meow.astro
index d606f22..efa9e0d 100644
--- a/src/pages/meow.astro
+++ b/src/pages/meow.astro
@@ -33,7 +33,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
@@ -74,6 +74,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
border-radius: 30px;
grid-row: 1 / -1;
grid-column: 1;
+ animation: float-rev 1s ease-in-out;
}
.meow-image:hover {
box-shadow: 0px 10px 60px -10px;
@@ -83,10 +84,22 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
}
@keyframes float {
0% {
+ box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
100% {
+ box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
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);
+ }
+ }
diff --git a/src/pages/unix/index.astro b/src/pages/unix/index.astro
index 2fccfe3..c643d23 100644
--- a/src/pages/unix/index.astro
+++ b/src/pages/unix/index.astro
@@ -6,6 +6,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
+import "../../styles/post-listing.css"
+
const posts = (await getCollection('unix')).sort(
(a, b) => b.data.updateDate.valueOf() - a.data.updateDate.valueOf()
);
@@ -15,51 +17,10 @@ const posts = (await getCollection('unix')).sort(
-
-
+
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;
+ }
+}