diff --git a/_includes/comments.html b/_includes/comments.html
index bd1205b..7a2a301 100644
--- a/_includes/comments.html
+++ b/_includes/comments.html
@@ -269,7 +269,7 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
mediaElement = document.createElement("img");
mediaElement.setAttribute("src", attachment.preview_url);
mediaElement.setAttribute("loading", "lazy");
- mediaElement.className = "media-styled hover";
+ mediaElement.className = "media hover";
if(attachment.description != null) {
mediaElement.setAttribute("alt", attachment.description);
@@ -285,7 +285,7 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
mediaElement.setAttribute("autoplay", "");
mediaElement.setAttribute("playsinline", "");
mediaElement.setAttribute("loop", "");
- mediaElement.className = "media-styled hover";
+ mediaElement.className = "media hover";
if(attachment.description != null) {
mediaElement.setAttribute("aria-title", attachment.description);
diff --git a/_posts/2023-06-12-gemini-exploring-the-cozy-world-of-capsules-and-space.md b/_posts/2023-06-12-gemini-exploring-the-cozy-world-of-capsules-and-space.md
index b74e772..999f1dc 100644
--- a/_posts/2023-06-12-gemini-exploring-the-cozy-world-of-capsules-and-space.md
+++ b/_posts/2023-06-12-gemini-exploring-the-cozy-world-of-capsules-and-space.md
@@ -127,7 +127,7 @@ I will use Halftone in this example
This is what we get in the end
-{:.media-styled.hover}
+{:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI)
@@ -144,7 +144,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
-{:.media-styled.hover}
+{:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI)
@@ -251,7 +251,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?
-{:.media-styled.hover}
+{:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/cs4uFYrNZfc)
diff --git a/_posts/2023-07-15-migration-from-github-to-codeberg.md b/_posts/2023-07-15-migration-from-github-to-codeberg.md
index 1db2c51..e2802de 100644
--- a/_posts/2023-07-15-migration-from-github-to-codeberg.md
+++ b/_posts/2023-07-15-migration-from-github-to-codeberg.md
@@ -132,35 +132,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
-{:.media-styled.hover}
+{:.media.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`)
-{:.media-styled.hover}
+{:.media.hover}
Navigate to _Settings_ and go to _Secrets_ tab
-{:.media-styled.hover}
+{:.media.hover}
-{:.media-styled.hover}
+{:.media.hover}
Here create two secrets, `cbmail` and `cbtoken`
`cbmail` should contain your Codeberg account email
-{:.media-styled.hover}
+{:.media.hover}
And `cbtoken` should contain the secret we saved earlier
-{:.media-styled.hover}
+{:.media.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
-{:.media-styled.hover}
+{:.media.hover}
Now it's up to you to choose Jekyll theme and write something ;)
diff --git a/_posts/2023-08-13-site-and-blog-devlog.md b/_posts/2023-08-13-site-and-blog-devlog.md
index 8c02adc..e66d192 100644
--- a/_posts/2023-08-13-site-and-blog-devlog.md
+++ b/_posts/2023-08-13-site-and-blog-devlog.md
@@ -21,7 +21,7 @@ The Index is not only home page, it's also a showcase, info and screensaver page
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 CSS, 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.
-{:.media-styled.hover}
+{:.media.hover}
### Home
@@ -31,11 +31,11 @@ Home page is a very important page, this page links to all other pages, it gives
- Background color are a bit different (taken from Libadwaita)
- Added shadows to all cards to give them some depth
-{:.media-styled.hover}
+{:.media.hover}
- Added hover effect for cards that act like a button (blog and showcase).
-
+
- Active state for cards (when you click/press on card) have been removed since it looked weird
@@ -45,20 +45,20 @@ And more, these are that I could remember.
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.
-
+
### 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.
-
+
### 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.
-{:.media-styled.hover}
+{:.media.hover}
## «The Blog»
@@ -67,50 +67,50 @@ The blog have seen the most of the changes, it all were flipped upside down to b
- Proper dark mode have been implemented from scratch, previously CSS 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
-{:.media-styled.hover}
+{:.media.hover}
- Added ASCII style, now instead of boring code block it uses pretty gradient fill and has this neon glow on hover
-{:.media-styled.hover}
+{:.media.hover}
-{:.media-styled.hover}
+{:.media.hover}
- Images now scale up on hover and have round corners
-
+
- Code blocks now have some filters applied in dark mode for better visibility, the code blocks themselves are now more round and have shadows
-{:.media-styled.hover}
+{:.media.hover}
-{:.media-styled.hover}
+{:.media.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+ LOC CSS, this is made not only to keep myself sane but also for _you_ to make it easier to build upon ;)
-
+
- 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
-{:.media-styled.hover}
+{:.media.hover}
- Table of contents are now generated on build, now I don't have to create it for every page manually
- Hovering over `© Daudix's Blog, 2023` in footer now displays last built date
-{:.media-styled.hover}
+{:.media.hover}
- Atom Feed is here!
-{:.media-styled.hover}
+{:.media.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) ❤️
-{:.media-styled.hover}
+{:.media.hover}
## One More Thing™
@@ -120,7 +120,7 @@ It's empty ATM, but it has [AD-HD button](htt
[Visit it here](https://daudix.neocities.org){:.site-link}
-{:.media-styled.hover}
+{:.media.hover}
## The Future
diff --git a/_sass/main.scss b/_sass/main.scss
index ef8dbd6..41c0e01 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -235,16 +235,16 @@ video {
max-width: 100%;
}
-.media-styled {
+.media {
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
}
-.media-styled.hover {
+.media.hover {
transition: var(--transition-longer);
}
-.media-styled.hover:hover {
+.media.hover:hover {
transform: scale(125%);
border-radius: unset;
box-shadow: var(--shadow-raised);
@@ -252,7 +252,7 @@ video {
@media only screen and (max-device-width: 480px) {
/*mobile*/
- .media-styled.hover:hover {
+ .media.hover:hover {
transform: scale(110%);
}
}
diff --git a/demo.md b/demo.md
index 7803ea5..92ab2ea 100644
--- a/demo.md
+++ b/demo.md
@@ -135,16 +135,34 @@ The final element.
### Extra
-Display pixel-art in full width without filtering.
+Display pixel-art without filtering.
```
-{:.full.pixels}
+{:.pixels}
```
{:.full.pixels}
[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}
+Full-width.
+
+```
+{:.full}
+```
+
+Shadow and round corners.
+
+```
+{:.media}
+```
+
+...With zoom on hover.
+
+```
+{:.media.hover}
+```
+
---
Keyboard shortcuts.
@@ -157,16 +175,20 @@ Keyboard shortcuts.
---
-Link with arrow.
+Link to page (rightwards arrow).
```
-[Link to page](markdown-page.md){:.page-link}
-
-[Link to site](https://example.org){:.site-link}
+{:.page-link}
```
[Link to page](../markdown-page){:.page-link}
+Link to site (up-rightwards arrow).
+
+```
+{:.site-link}
+```
+
[Link to site](https://example.org){:.site-link}
---