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/*')); Photo of a pizza @@ -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; + } +}