feat: Publish devlog, add media-styled class

_posts/2023-06-12-gemini-exploring-the-cozy-world-of-capsules-and-space.md

@@ -126,7 +126,7 @@ I will use Halftone in this example
 
 This is what we get in the end
 
-![](../assets/posts/2023-06-12/bay-bridge-floyd.png){:.hover}
+![](../assets/posts/2023-06-12/bay-bridge-floyd.png){:.media-styled.hover}
 
 [Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI)
 
@@ -143,7 +143,7 @@ But, we can go even further, by using less colors and different dithering algori
 
 With ordered dithering (Bayer) and 2 colors we get the following result
 
-![](../assets/posts/2023-06-12/bay-bridge-bayer.png){:.hover}
+![](../assets/posts/2023-06-12/bay-bridge-bayer.png){:.media-styled.hover}
 
 [Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI)
 
@@ -250,7 +250,7 @@ Here are simple example of ASCII and Braille images made with ascii-image-conver
 
 But, do you think it has quality of this image?
 
-![](../assets/posts/2023-06-12/grayscale-plane.png){:.hover}
+![](../assets/posts/2023-06-12/grayscale-plane.png){:.media-styled.hover}
 
 [Image on Unsplash](https://unsplash.com/photos/cs4uFYrNZfc)
 

_posts/2023-07-15-migration-from-github-to-codeberg.md

@@ -129,35 +129,35 @@ _Personally I use [VSCodium](https://vscodium.com), fork of VSCode with Microsof
 
 Push all the changes and [Generate an Access Token](https://docs.codeberg.org/advanced/access-token), you need to generate token named `cbtoken` with the `repo` scope selected
 
-![](../assets/posts/2023-07-15/pasted-image-20230715225539.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715225539.png){:.media-styled.hover}
 
 Then copy the resulted token and save it to a safe place, as it won't be shown again.
 
 Go to [Woodpecker](https://ci.codeberg.org) and navigate to _Repositories_ tab and add a new repository (`blog-source`)
 
-![](../assets/posts/2023-07-15/pasted-image-20230715224850.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715224850.png){:.media-styled.hover}
 
 Navigate to _Settings_ and go to _Secrets_ tab
 
-![](../assets/posts/2023-07-15/pasted-image-20230715225826.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715225826.png){:.media-styled.hover}
 
-![](../assets/posts/2023-07-15/pasted-image-20230715225841.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715225841.png){:.media-styled.hover}
 
 Here create two secrets, `cbmail` and `cbtoken`
 
 `cbmail` should contain your Codeberg account email
 
-![](../assets/posts/2023-07-15/pasted-image-20230715230017.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715230017.png){:.media-styled.hover}
 
 And `cbtoken` should contain the secret we saved earlier
 
-![](../assets/posts/2023-07-15/pasted-image-20230715230115.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715230115.png){:.media-styled.hover}
 
 Make sure these two secrets have successfully created and make some changes in `blog-source` to trigger the CI, it should finish successfully.
 
 > If you don't want to trigger the CI (the change doesn't affect content for example) you can add `[CI SKIP]` to your commit message to skip the CI
 
-![](../assets/posts/2023-07-15/pasted-image-20230715231347.png){:.hover}
+![](../assets/posts/2023-07-15/pasted-image-20230715231347.png){:.media-styled.hover}
 
 Now it's up to you to choose Jekyll theme and write something ;)
 

_posts/2023-08-13-site-and-blog-devlog.md

@@ -0,0 +1,128 @@
+---
+layout: post
+title:  "Site and Blog Devlog"
+tags: Devlog
+toc: true
+---
+
+<script>
+  function playAudio(url) {
+    new Audio(url).play();
+  }
+</script>
+
+This blog was born two month ago, and since the first revision a lot- no, that's not enough, **hella lot** of stuff has been changed, tweaked and redone from scratch, so here I will list them and my plans for the future of this blog.
+
+## «The Index»
+
+The Index is not only home page, it's also a showcase, info and screensaver pages, they all live in the same `pages` repository, while blog is a completely separate thing with its own repository.
+
+One important change have happened to the Index, now all its pages use the same base, `style.css`, and only page-specific tweaks are specified in page <abbr title="Cascading Style Sheets">CSS</abbr>, e.g showcase page style has `@import url("style.css");` in the beginning instead of exact copy of `index.css`, not only this makes the file size smaller, but also makes the tweaking process a breeze, since stuff can be changed in one place and be applied to every page.
+
+![](../assets/posts/2023-08-13/pasted-image-20230813115925.png){:.media-styled.hover}
+
+### Home
+
+Home page is a very important page, this page links to all other pages, it gives some basic info about me and some contact links. It didn't change a lot but there are some work been done.
+
+- Proper dark mode have been implemented (well, it were already there but I replaced it with filter hack,more on it in blog section. Now it's enabled back and all the custom stuff have been fixed to support it)
+- Background color are a bit different (taken from Libadwaita)
+- Added shadows to all cards to give them some depth
+
+![](../assets/posts/2023-08-13/pasted-image-20230813120014.png){:.media-styled.hover}
+
+- Added hover effect for cards that act like a button (blog and showcase).
+
+<video class="media-styled" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-00-41.webm" />
+
+- Active state for cards (when you click/press on card) have been removed since it looked weird
+
+And more, these are that I could remember without looking.
+
+### Showcase
+
+Showcase have been updated to include more icons, info overlay closing animation have been fixed (previously it just disappeared without any animation) and assets were optimized.
+
+<video class="media-styled" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-04-04.webm" />
+
+### Info
+
+Info page were completely redesigned, inspired by the design of [Felipe  
+Kinoshita's](https://felipekinoshita.com) site. It is more similar to the blog in terms of typography, has nice animated stripes background and a lot of info about me. Compared to the previous version it has way less links - only ones that I actually use.
+
+<video class="media-styled" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-12-30.webm" />
+
+### Screensaver
+
+Screensaver is a brand-new page, the name is self-explanatory, it's just a pretty screensaver with colorful circles floating around, it is made around [this codepen](https://codepen.io/alvarotrigo/pen/qBMMyxz) by [Álvaro](https://codepen.io/alvarotrigo), from interesting it has «Enter Fulllscreen» button.
+
+![](../assets/posts/2023-08-13/pasted-image-20230813121518.png){:.media-styled.hover}
+
+## «The Blog»
+
+The blog have seen the most of the changes, it all were flipped upside down to be prettier, and as fast as before.
+
+- Proper dark mode have been implemented from scratch, previously <abbr title="Cascading Style Sheets">CSS</abbr> invert filter with hue rotation were used, it worked but had too much issues: images became unsaturated, emojis creepy, shadows glowing and etc.
+- Navigation bar have been added, it has pretty glassy look and shadow. Inspired by the navigation bar of [Micah Ilbery's](https://micahilbery.com) site. I really like how it looks :3
+
+![](../assets/posts/2023-08-13/pasted-image-20230813121727.png){:.media-styled.hover}
+
+- Added <abbr title="American Standard Code for Information Interchange">ASCII</abbr> style, now instead of boring code block it uses pretty gradient fill and has this neon glow on hover
+
+![](../assets/posts/2023-08-13/pasted-image-20230813121756.png){:.media-styled.hover}
+
+![](../assets/posts/2023-08-13/pasted-image-20230813121750.png){:.media-styled.hover}
+
+- Images now scale up on hover and have round corners
+
+<video class="media-styled" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-24-13.webm" />
+
+- Code blocks now have some filters applied in dark mode for better visibility, the code blocks themselves are now more round and have shadows
+
+![](../assets/posts/2023-08-13/снимок-экрана-от-2023-08-13-12-26-07.png){:.media-styled.hover}
+
+![](../assets/posts/2023-08-13/снимок-экрана-от-2023-08-13-12-26-18.png){:.media-styled.hover}
+
+- Some colors have been changed, all in all should be more pleasant to the eye
+- Everything now respects global variables, so e.g you can change accent color, roundness, shadows and maximum content width without going through the whole 1200+ <abbr title="Lines Of Code">LOC</abbr> <abbr title="Cascading Style Sheets">CSS</abbr>, this is made not only to keep myself sane but also for _you_ to make it easier to build upon ;)
+
+<video class="media-styled" class="media-styled" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-11-01-50-55.webm" />
+
+- The structure have been changed, now uses recommended Jekyll structure for posts
+- Posts now have tags, and tags have its own page
+- Posts now have its own page
+- Posts list on index page now generates automatically on build, this allowed to display tags and publication date
+- Table of contents are now generated on build, now I don't have to create it for every page manually
+
+![](../assets/posts/2023-08-13/pasted-image-20230813122050.png){:.media-styled.hover}
+
+- Hovering over `© Daudix's Blog, 2023` in footer now displays last built date
+
+![](../assets/posts/2023-08-13/pasted-image-20230813122106.png){:.media-styled.hover}
+
+- Atom Feed is here!
+
+![](../assets/posts/2023-08-13/pasted-image-20230813122201.png){:.media-styled.hover}
+
+- Added Johnvertisements
+- Probably most exiting addition, Mastodon (and any other ActivityPub/​Fediverse account) powered comments! you can _right now_ scroll down and comment! all thanks goes to Cassidy James for [Mastodon-powered Blog Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon) ❤️
+
+![](../assets/posts/2023-08-13/pasted-image-20230813122238.png){:.media-styled.hover}
+
+## One More Thing™
+
+🥁 _[Drum roll](<javascript:onclick=playAudio('../assets/posts/2023-08-13/drum-roll-gaming-sound-effect-hd.mp3');>)_ I have a new site at Neocities! it will not replace this one, it's just a silly playground that has this old look. You know... Geocities and stuff.
+
+It's empty <abbr title="At The Moment">ATM</abbr>, but it has [AD-HD button](https://mstdn.social/@Daudix/110872543493210479)!
+
+[Visit it here](https://daudix.neocities.org)
+
+![](../assets/posts/2023-08-13/pasted-image-20230813122311.png){:.media-styled.hover}
+
+## The Future
+
+We'll see, I plan to publish more posts, at least I have an idea for the next one, I'm thinking about making the whole blog a Jekyll template (Duck Template, DuckQuill), but this will mean that I'll need to maintain one more site basically, not sure really, I could sync it with this blog once a month so it doesn't annoy much, idk, will see.
+
+## Conclusion
+
+Phew, that's a lot, 2 months of work! truly happy how it all comes up, hope you too, this is most long-lived site thingy yet, I have learned a lot about <abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="HyperText Markup Language">HTML</abbr>, and I really like doing this!

style.css

@@ -223,19 +223,30 @@ img.pixels {
   image-rendering: pixelated;
 }
 
-img.hover {
-  transition: var(--transition-longer);
-  border-radius: var(--rounded-corner);
+video {
+  display: block;
+  margin: 2rem auto;
+  max-width: 100%;
 }
 
-img.hover:hover {
+.media-styled {
+  border-radius: var(--rounded-corner);
+  box-shadow: var(--shadow);
+}
+
+.media-styled.hover {
+  transition: var(--transition-longer);
+}
+
+.media-styled.hover:hover {
   transform: scale(125%);
   border-radius: unset;
+  box-shadow: var(--shadow-raised);
 }
 
 @media only screen and (max-device-width: 480px) {
   /*mobile*/
-  img.hover:hover {
+  .media-styled.hover:hover {
     transform: scale(110%);
   }
 }