From 73a219fbffda5b8a680cdbd65a9bd664951f3249 Mon Sep 17 00:00:00 2001 From: Akemi Izuko Date: Mon, 1 Jan 2024 19:51:42 -0700 Subject: [PATCH] Readme: add mobile design images --- README.md | 50 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 41 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index fcb88cf..d6a09d3 100644 --- a/README.md +++ b/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 -noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191201280933245108/screenshot_shm.png) - -### 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! +![Desktop view of home page of +noway.moe](https://cdn.discordapp.com/attachments/436012664003624970/1191572285971255387/nowaymoe_desktop_full.jpeg) ### 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)