My personal website.
entomoviscera.online
1---
2import { getCollection } from "astro:content";
3import Base from "/components/Base.astro";
4import BlogPost from "/components/BlogPost.astro";
5import "/styles/main.css";
6
7const post = await getCollection("blog").then((x) =>
8 x.sort(
9 (a, b) =>
10 (b.data.pub as unknown as number) - (a.data.pub as unknown as number),
11 ),
12);
13---
14
15<Base
16 title="HOME"
17 graph={{
18 description: "WARNING: Bug inside.",
19 }}
20>
21 <div class="bwcontainer wrapper">
22 <header class="bwbox center flex">
23 <h1 class="barcodetext">ENTOMOVISCERA.ONLINE</h1>
24 <a href="/" class="glow">
25 <img src="/img/icons/poweroff.png" alt="return to landing page" />
26 </a>
27 </header>
28 <nav class="bwbox flex flexcenter center">
29 <a href="/bookmarks" class="button">::BOOKMARKS::</a>
30 </nav>
31 <main class="grid">
32 <div class="bwbox flex flexcenter hidedeco">
33 <img src="/img/sprites/sunfl1.png" alt="" />
34 </div>
35 <div id="blog" class="bwbox">
36 <h2 class="center">Latest blog post</h2>
37 <BlogPost
38 url={`/blog/${post[0].id}`}
39 title={post[0].data.title}
40 time={`${post[0].data.pub.getFullYear()}-${post[0].data.pub.getMonth() + 1}-${post[0].data.pub.getDate()}`}
41 />
42 <div class="blogbuttons center flex flexcenter">
43 <a href="/blog" class="button">::ALL_POSTS::</a>
44 <a href="/rss.xml" class="button">::RSS_FEED::</a>
45 </div>
46 </div>
47 </main>
48 </div>
49</Base>
50
51<style>
52 header {
53 justify-content: space-between;
54 align-items: center;
55 gap: 8px;
56 }
57
58 nav {
59 gap: 13px 15px;
60 }
61
62 nav a,
63 .blogbuttons a {
64 flex: 1 1;
65 }
66
67 #blog {
68 grid-column: span 3;
69 }
70
71 .blogbuttons {
72 gap: 8px;
73 }
74
75 .wrapper {
76 max-width: 100ch;
77 margin: 0 auto;
78 }
79
80 .grid {
81 display: grid;
82 grid-template-columns: repeat(4, 1fr);
83 }
84
85 .glow {
86 filter: 0;
87 }
88
89 .glow:hover {
90 filter: drop-shadow(0 0 4px var(--white));
91 }
92
93 @media (max-width: 86ch) {
94 header {
95 justify-content: center;
96 }
97
98 header h1 {
99 flex: 1 1 100%;
100 }
101
102 .grid {
103 grid-template-columns: 1fr;
104 }
105
106 .hidedeco {
107 display: none;
108 }
109 }
110</style>