Make mobile more bearable for blogs.

This commit is contained in:
Midou36O 2024-02-10 13:09:49 +01:00
parent dfc9c8e4fa
commit 5a61dbb4d8
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
3 changed files with 15 additions and 9 deletions

View File

@ -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;

View File

@ -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:

View File

@ -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!