From 5a61dbb4d85f1dc17abc3482013662ce1397898b Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Sat, 10 Feb 2024 13:09:49 +0100
Subject: [PATCH] Make mobile more bearable for blogs.

---
 src/lib/blog/+post.svelte             |  8 +++++---
 src/routes/blog/[slug]/+page.svelte   | 10 +++++++---
 src/routes/blog/posts/mds/hyprland.md |  6 +++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/lib/blog/+post.svelte b/src/lib/blog/+post.svelte
index de2c60a..338cf3b 100644
--- a/src/lib/blog/+post.svelte
+++ b/src/lib/blog/+post.svelte
@@ -3,7 +3,9 @@
 	export { Components };
 </script>
 
-<div class="blog mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300">
+<div
+	class="blog pl-50 w-70% md:pl-30 md:w-80% lg:pl-0 lg:w-100% beak-normal mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300"
+>
 	<slot />
 </div>
 
@@ -78,7 +80,7 @@
 		background-color: #282a36;
 	}
 	.blog :global(code) {
-		@apply rounded-1 p-2;
+		@apply rounded-1 'md:p-2' p-0 text-left;
 	}
 	.blog :global(kbd) {
 		@apply rounded-1 p-2;
@@ -87,7 +89,7 @@
 		@apply rounded-1 p-2;
 	}
 	.blog :global(pre) {
-		@apply rounded-1 p-2;
+		@apply rounded-1 'md:p-2' text-left p-0 'w-100%' overflow-x-auto;
 	}
 	.blog :global(.prose) {
 		@apply prose;
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 760bf9c..9f2966e 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -26,11 +26,15 @@
 					out:fly={{ duration: 300, y: -50, easing: quintOut }}
 					class="flex flex-col pr-3"
 				>
-					<div class="flex flex-col md:flex-row">
+					<div class="flex flex-col md:flex-col">
 						<div
-							class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+							class="i-ph-book-bold dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
 						/>
-						<h1 class="text-black dark:text-white font-bold text-4xl md:px-2">{data.meta.title}</h1>
+						<h1
+							class="text-black dark:text-white md:break-normal md:w-60 md:text-center font-bold text-4xl md:px-2"
+						>
+							{data.meta.title}
+						</h1>
 					</div>
 					<p class="block text-gray-600 dark:text-gray-500 p-3 py-1">
 						Tags:
diff --git a/src/routes/blog/posts/mds/hyprland.md b/src/routes/blog/posts/mds/hyprland.md
index ed12034..0c7c495 100644
--- a/src/routes/blog/posts/mds/hyprland.md
+++ b/src/routes/blog/posts/mds/hyprland.md
@@ -20,7 +20,7 @@ to work on Hyprland.
 so you might want to actually be a little bit careful as it could crash or have breaking changes at some point. But it's recently stabilized a bit so there is little to no crashes
 if you don't do anything _stupid_
 
-![Image of an Hyprland ricing taken from the github repo.](https://camo.githubusercontent.com/b40ca85d8d3b15b50b35e55806149a8591e387ebf977d989ddc98f18cc79fdbf/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f313039313536393837323533353831343138352f313130373637353836363130313732333237372f73637265656e73686f742d73756d6d65722e706e67)
+[![Image of an Hyprland ricing taken from the github repo.](https://camo.githubusercontent.com/b40ca85d8d3b15b50b35e55806149a8591e387ebf977d989ddc98f18cc79fdbf/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f313039313536393837323533353831343138352f313130373637353836363130313732333237372f73637265656e73686f742d73756d6d65722e706e67)](https://camo.githubusercontent.com/b40ca85d8d3b15b50b35e55806149a8591e387ebf977d989ddc98f18cc79fdbf/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f313039313536393837323533353831343138352f313130373637353836363130313732333237372f73637265656e73686f742d73756d6d65722e706e67)
 
 ## And sway?
 
@@ -38,7 +38,7 @@ sudo pacman -S hyprland -y
 ```
 
 And now, time to open it from the terminal!
-![First experience](/blog/images/hyprland/firstexperience.png)
+[![First experience](/blog/images/hyprland/firstexperience.png)](https://midou.dev/blog/images/hyprland/firstexperience.png)
 ...Great. Some anime weaboo made this thing.
 
 So what would be the first thing that anyone should do?
@@ -230,6 +230,6 @@ Congratulations, you now know how to (roughly) setup hyprland!
 Now what?
 Well you can start ricing your TWM like a madman in [r/unixporn](https://lr.psf.lt/r/unixporn) or snatch the dotfiles and adapt it to your liking. But i'm not that type of guy, my desktop is simple.
 
-![My desktop](/blog/images/hyprland/desktop.png)
+[![My desktop](/blog/images/hyprland/desktop.png)](https://midou.dev/blog/images/hyprland/desktop.png)
 
 Have fun, and see you later!