daudix/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: More stuff

Browse source
This commit is contained in:
David Lapshin 2023-08-31 07:06:02 +03:00
parent a2f38a72b2
commit 49714aa19c
Signed by: daudix
GPG key ID: 93ECF15D3053D81C
6 changed files with 62 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/comments.html
View file

@ -269,7 +269,7 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
mediaElement = document.createElement("img"); mediaElement = document.createElement("img");
mediaElement.setAttribute("src", attachment.preview_url); mediaElement.setAttribute("src", attachment.preview_url);
mediaElement.setAttribute("loading", "lazy"); mediaElement.setAttribute("loading", "lazy");
mediaElement.className = "media-styled hover"; mediaElement.className = "media hover";
if(attachment.description != null) { if(attachment.description != null) {
mediaElement.setAttribute("alt", attachment.description); 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("autoplay", "");
mediaElement.setAttribute("playsinline", ""); mediaElement.setAttribute("playsinline", "");
mediaElement.setAttribute("loop", ""); mediaElement.setAttribute("loop", "");
mediaElement.className = "media-styled hover"; mediaElement.className = "media hover";
if(attachment.description != null) { if(attachment.description != null) {
mediaElement.setAttribute("aria-title", attachment.description); mediaElement.setAttribute("aria-title", attachment.description);

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

@ -127,7 +127,7 @@ I will use Halftone in this example
This is what we get in the end This is what we get in the end
![](../assets/posts/2023-06-12/bay-bridge-floyd.png){:.media-styled.hover} ![](../assets/posts/2023-06-12/bay-bridge-floyd.png){:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI) [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 With ordered dithering (Bayer) and 2 colors we get the following result
![](../assets/posts/2023-06-12/bay-bridge-bayer.png){:.media-styled.hover} ![](../assets/posts/2023-06-12/bay-bridge-bayer.png){:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/raNGlrn5JRI) [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? But, do you think it has quality of this image?
![](../assets/posts/2023-06-12/grayscale-plane.png){:.media-styled.hover} ![](../assets/posts/2023-06-12/grayscale-plane.png){:.media.hover}
[Image on Unsplash](https://unsplash.com/photos/cs4uFYrNZfc) [Image on Unsplash](https://unsplash.com/photos/cs4uFYrNZfc)

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

@ -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 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){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715225539.png){:.media.hover}
Then copy the resulted token and save it to a safe place, as it won't be shown again. 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`) 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){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715224850.png){:.media.hover}
Navigate to _Settings_ and go to _Secrets_ tab Navigate to _Settings_ and go to _Secrets_ tab
![](../assets/posts/2023-07-15/pasted-image-20230715225826.png){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715225826.png){:.media.hover}
![](../assets/posts/2023-07-15/pasted-image-20230715225841.png){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715225841.png){:.media.hover}
Here create two secrets, `cbmail` and `cbtoken` Here create two secrets, `cbmail` and `cbtoken`
`cbmail` should contain your Codeberg account email `cbmail` should contain your Codeberg account email
![](../assets/posts/2023-07-15/pasted-image-20230715230017.png){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715230017.png){:.media.hover}
And `cbtoken` should contain the secret we saved earlier And `cbtoken` should contain the secret we saved earlier
![](../assets/posts/2023-07-15/pasted-image-20230715230115.png){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715230115.png){:.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. 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 > 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){:.media-styled.hover} ![](../assets/posts/2023-07-15/pasted-image-20230715231347.png){:.media.hover}
Now it's up to you to choose Jekyll theme and write something ;) Now it's up to you to choose Jekyll theme and write something ;)

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

@ -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 <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. 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} ![](../assets/posts/2023-08-13/pasted-image-20230813115925.png){:.media.hover}
### Home ### 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) - Background color are a bit different (taken from Libadwaita)
- Added shadows to all cards to give them some depth - Added shadows to all cards to give them some depth
![](../assets/posts/2023-08-13/pasted-image-20230813120014.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/pasted-image-20230813120014.png){:.media.hover}
- Added hover effect for cards that act like a button (blog and showcase). - 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"></video> <video class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-00-41.webm"></video>
- Active state for cards (when you click/press on card) have been removed since it looked weird - 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. 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"></video> <video class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-04-04.webm"></video>
### Info ### Info
Info page were completely redesigned, inspired by the design of [Felipe 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. 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"></video> <video class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-12-30.webm"></video>
### Screensaver ### 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. 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} ![](../assets/posts/2023-08-13/pasted-image-20230813121518.png){:.media.hover}
## «The Blog» ## «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 <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. - 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 - 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} ![](../assets/posts/2023-08-13/pasted-image-20230813121727.png){:.media.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 - 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-20230813121756.png){:.media.hover}
![](../assets/posts/2023-08-13/pasted-image-20230813121750.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/pasted-image-20230813121750.png){:.media.hover}
- Images now scale up on hover and have round corners - 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"></video> <video class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-24-13.webm"></video>
- Code blocks now have some filters applied in dark mode for better visibility, the code blocks themselves are now more round and have shadows - 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-07.png){:.media.hover}
![](../assets/posts/2023-08-13/снимок-экрана-от-2023-08-13-12-26-18.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/снимок-экрана-от-2023-08-13-12-26-18.png){:.media.hover}
- Some colors have been changed, all in all should be more pleasant to the eye - 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 ;) - 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"></video> <video class="media" class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-11-01-50-55.webm"></video>
- The structure have been changed, now uses recommended Jekyll structure for posts - 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 tags, and tags have its own page
- Posts now 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 - Posts list on index page now generates automatically on build, this allowed to display tags and publication date
![](../assets/posts/2023-08-13/pasted-image-20230813122050.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/pasted-image-20230813122050.png){:.media.hover}
- Table of contents are now generated on build, now I don't have to create it for every page manually - 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 - 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} ![](../assets/posts/2023-08-13/pasted-image-20230813122106.png){:.media.hover}
- Atom Feed is here! - Atom Feed is here!
![](../assets/posts/2023-08-13/pasted-image-20230813122201.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/pasted-image-20230813122201.png){:.media.hover}
- Added Johnvertisements - 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) ❤️ - 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} ![](../assets/posts/2023-08-13/pasted-image-20230813122238.png){:.media.hover}
## One More Thing™ ## One More Thing™
@ -120,7 +120,7 @@ It's empty <abbr title="At The Moment">ATM</abbr>, but it has [AD-HD button](htt
[Visit it here](https://daudix.neocities.org){:.site-link} [Visit it here](https://daudix.neocities.org){:.site-link}
![](../assets/posts/2023-08-13/pasted-image-20230813122311.png){:.media-styled.hover} ![](../assets/posts/2023-08-13/pasted-image-20230813122311.png){:.media.hover}
## The Future ## The Future

8
_sass/main.scss
View file

@ -235,16 +235,16 @@ video {
max-width: 100%; max-width: 100%;
} }
.media-styled { .media {
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.media-styled.hover { .media.hover {
transition: var(--transition-longer); transition: var(--transition-longer);
} }
.media-styled.hover:hover { .media.hover:hover {
transform: scale(125%); transform: scale(125%);
border-radius: unset; border-radius: unset;
box-shadow: var(--shadow-raised); box-shadow: var(--shadow-raised);
@ -252,7 +252,7 @@ video {
@media only screen and (max-device-width: 480px) { @media only screen and (max-device-width: 480px) {
/*mobile*/ /*mobile*/
.media-styled.hover:hover { .media.hover:hover {
transform: scale(110%); transform: scale(110%);
} }
} }

34
demo.md
View file

@ -135,16 +135,34 @@ The final element.
### Extra ### Extra
Display pixel-art in full width without filtering. Display pixel-art without filtering.
``` ```
![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels} {:.pixels}
``` ```
![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels} ![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}
[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link} [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. Keyboard shortcuts.
@ -157,16 +175,20 @@ Keyboard shortcuts.
--- ---
Link with arrow. Link to page (rightwards arrow).
``` ```
[Link to page](markdown-page.md){:.page-link} {:.page-link}
[Link to site](https://example.org){:.site-link}
``` ```
[Link to page](../markdown-page){:.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} [Link to site](https://example.org){:.site-link}
--- ---