<script lang="ts">
	import './style-entries.css';
	import type { BlogEntry } from './+page.server.ts';

	let { data } = $props();
	let blogs = data.blogs as BlogEntry[];
</script>

<svelte:head>
	<title>Home - Amys Blog</title>
	<meta property="og:title" content="Home - Amys Blog" />
</svelte:head>

<main>
	<div class="media-margin">
		<h1>Hi, I'm Amy</h1>
		<p>
			This is a collection of things I've set up and created that I think might interest others.
		</p>
	</div>
	{#each blogs as blog (blog.src)}
		<a href={blog.src} target={blog.src_target} class="blog-entry">
			<div class="blog-text">
				<h4>{blog.title}</h4>
				<p>{blog.desc}</p>
				<p class="date">{blog.date}</p>
			</div>
			<div class="blog-img" style={'background-color:' + blog.img_bg}>
				<span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img
					src={'/blog-covers/' + blog.img}
					alt="Preview of the described article"
					style={blog.scale}
				/>
				<!---->
			</div>
		</a>
		<!-- svelte:component this={page.default} /-->
	{/each}
</main>

<style>
	.blog-entry {
		display: block;
		margin: var(--d3) 0;
		background: var(--rp-moon-surface);
		border-radius: var(--border-round);
		width: 100%;
		color: var(--rp-moon-text);
		display: flex;
		flex-flow: row wrap;
		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
		transition: 0.2s;
	}

	.blog-entry:hover {
		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
		background: var(--rp-moon-overlay);
		transition: 0.2s;
	}

	.blog-text {
		width: calc(100% - 15rem - var(--d3) * 2);
		padding: var(--d3);
	}

	.blog-img {
		width: 15rem;
		margin: 0;
		padding: 0;
		background-color: var(--rp-moon-text);
		border-radius: 0 calc(var(--border-round) + 3px) calc(var(--border-round) + 3px) 0;
	}

	.blog-entry img {
		width: 15rem;
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		object-fit: cover;
		border-radius: 0 var(--border-round) var(--border-round) 0;
	}

	@media only screen and (max-width: 700px) {
		.blog-text {
			width: calc(100% - var(--d1) * 2);
			padding: var(--d1);
		}

		.blog-img {
			border-radius: 0 0rem var(--border-round) var(--border-round);
			max-height: 10rem;
		}

		.blog-img {
			width: 100%;
		}

		.blog-entry img {
			width: 100%;
			border-radius: 0 0rem var(--border-round) var(--border-round);
		}
	}

	.blog-entry h4 {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
</style>
