feat: More stuff
This commit is contained in:
parent
a2f38a72b2
commit
49714aa19c
GPG key ID:
93ECF15D3053D81C
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ;)
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
{:.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).
|
||||
|
||||
<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
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
<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 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"></video>
|
||||
<video class="media" controls src="../assets/posts/2023-08-13/запись-экрана-от-2023-08-13-12-12-30.webm"></video>
|
||||
|
||||
### 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 <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
|
||||
|
||||
{:.media-styled.hover}
|
||||
{:.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
|
||||
|
||||
{:.media-styled.hover}
|
||||
{:.media.hover}
|
||||
|
||||
{:.media-styled.hover}
|
||||
{:.media.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"></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
|
||||
|
||||
{:.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+ <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
|
||||
- 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 <abbr title="At The Moment">ATM</abbr>, but it has [AD-HD button](htt
|
|||
|
||||
[Visit it here](https://daudix.neocities.org){:.site-link}
|
||||
|
||||
{:.media-styled.hover}
|
||||
{:.media.hover}
|
||||
|
||||
## The Future
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
demo.md
34
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}
|
||||
|
||||
---
|
||||
|
|
|
|||
Loading…
Reference in a new issue