Readme: add mobile design images

README.md

@@ -7,15 +7,8 @@ Written using [Astro.js](https://astro.build/) as the main framework, with
 [Tailwind CSS](https://tailwindcss.com/). MDX rendering and syntax highlighting
 provided by [remark.js](https://github.com/remarkjs).
 
-![Front page of
+![Desktop view of home page of
-noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191201280933245108/screenshot_shm.png)
+noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191572285971255387/nowaymoe_desktop_full.jpeg)
-
-### Licence
-
-Feel free to fork this code and use it for your website! No need to credit me.
-
-This code is licensed under AGPL, meaning that you must open source any forks of
-this code. That way everyone can benefit from our collective efforts!
 
 ### Building
 
@@ -39,3 +32,42 @@ for static sites, but there are many other options to consider including
 [Vercel](https://vercel.com/), [Github](https://pages.github.com), and
 [Netlify](https://www.netlify.com) all of which are also free and fast for
 static webpages! Live on the edge, pick one you haven't tried!
+
+### Licence
+
+Feel free to fork this code and use it for your website! No need to credit me.
+
+This code is licensed under AGPL, meaning that you must open source any forks of
+this code. That way everyone can benefit from our collective efforts!
+
+## Design
+
+This site is designed to reuse pages as much as possible. There are only 4
+particularly different page types:
+
+ 1. Home page
+ 2. Posts listing (blog listing, unix listing...)
+ 3. Markdown posts (blogs, contact page)
+ 4. Pinterest-style masonry (cat pics page)
+
+In general, only 4 style sheets are necessary to cover all the pages, but each
+individual page makes adjustments on top of the base.
+
+
+This makes it easy to make the website very mobile-responsive. The home page has
+the most complex responsive design. Images are attached below!
+
+#### Desktop Windowed
+
+![Window desktop view of home page of
+noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191572285648285767/nowaymoe_desktop_windowed.jpeg)
+
+#### iPad Vertical
+
+![Vertical iPad view of home page of
+noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191572285329514576/nowaymoe_ipad_air.jpeg)
+
+#### iPhone 12
+
+![iPhone view of home page of
+noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191572284977205378/nowaymoe_iphone_12_pro.jpeg)

src/components/BaseHead.astro

@@ -22,7 +22,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta property="og:title" content="noway.moe" />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="https://dev.noway.moe" />
-<meta property="og:image" content="https://dev.noway.moe/favicon.avif" />
+<meta property="og:image" content="https://dev.noway.moe/favicon.png" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->