hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Demo updates

Browse Source 
I guess it's ready to be shown to Masto folks!
This commit is contained in:
daudix-UFO
2023-09-02 06:30:33 +03:00
parent c5f0d0280c
commit 86193ce7e5
6 changed files with 118 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/footer.html
View File

@ -4,6 +4,6 @@
<p><a href="{{ site.sourceurl }}">Website source</a></p>
<small>
Powered by <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://codeberg.org/daudix-UFO/duckquill-source">Duckquill</a>
Powered by <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://daudix-ufo.codeberg.page/duckquill">Duckquill</a>
</small>
</footer>

17
_posts/2023-08-30-the-quill-of-duck.md
View File

@ -3,6 +3,7 @@ layout: post
title: "The Quill of Duck"
tags: Demo Test
toc: true
disclaimer: "See [demo](../demo) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments."
comments:
id:
---
@ -11,7 +12,19 @@ comments:
## The what?
This is a Duckquill post example, this post has nothing but a bunch of text and random formattings, acting like a demo.
This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo.
## Some info for ya
Since you are here, lemme tell ya some nice tricks about creating posts
First, the naming. The URLs are very picky about them, so you shouldn't use spaces in them, and preferebly any other "special" character, if you managed to have a lot of posts with ugly names, you can use `rename.sh <DIR>` to fix the mess quickly, it works for any files really, useful for renaming assets.
The first thing in the name of post should be publicaion date, it should be in ISO 8601 format. On \*nix you can use `date -I` to quickly get one.
Now to the front matter, front matter in Jekyll is the weird thing at the top of Markdown file, that has 3 dashes at start and end. It includes needed info about your post so Jekyll can cook it properly. The important ones are `layout` that tells if the page are plain one or post, `title` with... well you get it, `tags` and `toc` that if exists or set to `true` will make Jekyll generate table of contents at top of the post.
Now to the _Stanley!_
## The Stanley!
@ -21,6 +34,8 @@ _Stanley_ worked for a company in a big building where he was Employee `#427`.
![The Office](../assets/posts/2023-08-31/The_Office.webp){:.full.media.hover}
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard.
Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order.

2
_sass/custom.scss
View File

@ -1,4 +1,6 @@
/* Custom styles/overrides */
/* Fix contrast of OP badge/instance in comments (remove if color with higher contrast are used as accent) */
section#comments {
.comment {
.avatar-link {

18
_sass/main.scss
View File

@ -179,6 +179,15 @@ kbd:active {
filter: contrast(0.2);
}
figcaption {
margin-top: -1rem;
margin-bottom: 2rem;
display: block;
text-align: center;
color: var(--fg50);
font-size: smaller;
}
/* Tables */
table {
border-collapse: collapse;
@ -235,6 +244,15 @@ video {
max-width: 100%;
}
video.full {
width: 100%;
}
video.pixels {
image-rendering: crisp-edges; /* older firefox browsers */
image-rendering: pixelated;
}
.media {
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);

95
demo.md
View File

@ -14,6 +14,8 @@ disclaimer: "
- Don't interact with asbestos and moon rocks."
---
> For ^these banners see page source <abbr title="The thingy wrapped in three dashes at very top of Markdown document">front matter</abbr>
Text can be **bold**, _italic_, or ~~strikethrough~~, it can also be _**thick**_.
[Link to another page](../demo-page){:.page-link}
@ -70,7 +72,7 @@ end
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
### There's a horizontal rule below this.
### There's a horizontal rule below this
---
@ -112,7 +114,7 @@ end
![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png)
### Definition lists can be used with HTML syntax.
### Definition lists can be used with HTML syntax
<dl>
<dt>Name</dt>
@ -133,39 +135,100 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
The final element.
```
### Extra
### Details
Display pixel-art without filtering.
<details><summary>I may be a spoiler, I may be a long text, I may be anything.</summary>
Quack-quack!
<img class="full media" src="https://random-d.uk/api/randomimg">
</details>
### Small
<small>Small, cute text that doesn't catch attention.</small>
### Abbreviation
The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
### Special ASCII style
<pre class="ascii">
_____________________________________________
|.'', Public_Library_Halls ,''.|
|.'.'', ,''.'.|
|.'.'.'', ,''.'.'.|
|.'.'.'.'', ,''.'.'.'.|
|.'.'.'.'.| |.'.'.'.'.|
|.'.'.'.'.|===; ;===|.'.'.'.'.|
|.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.|
|.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.|
|.'.'.',' /%%%%%%%%%%%\ ','.'.'.|
|.'.',' /%%%%%%%%%%%%%\ ','.'.|
|.',' /%%%%%%%%%%%%%%%\ ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|
</pre>
### Pixel-art without anti-aliasing
```
{:.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){:.pixels}
[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}
Full-width.
### Full-width image/video
```
{:.full}
```
Shadow and round corners.
### Shadow and rounded corners on image/video
```
{:.media}
```
...With zoom on hover.
### ...With zoom on hover
```
{:.media.hover}
```
---
### All together!
Keyboard shortcuts.
```
{:.full.media.hover}
```
![Portal Gun blueprint](https://i.imgur.com/Fr1ImW9.png){:.full.media.hover}
### Image descriptions
![The Office](https://i.imgur.com/ImMAXM3.png){:.media.full}
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
### Video
Everything above can be applied to videos too.
<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>{:.media.full}
<figcaption>Red flower wakes up</figcaption>
### Keyboard shortcut
```
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
@ -173,9 +236,7 @@ Keyboard shortcuts.
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
---
Link to page (rightwards arrow).
### Link to page (rightwards arrow)
```
{:.page-link}
@ -183,7 +244,7 @@ Link to page (rightwards arrow).
[Link to page](../markdown-page){:.page-link}
Link to site (up-rightwards arrow).
### Link to site (up-rightwards arrow)
```
{:.site-link}
@ -191,12 +252,12 @@ Link to site (up-rightwards arrow).
[Link to site](https://example.org){:.site-link}
---
Buttons.
### Buttons
```
[Go to top](#top){: .inline-button}
[File an issue]({{site.issuesurl}})
{: .dialog-buttons}
```
> Look at the end of page xD

4
index.md
View File

@ -29,7 +29,7 @@ Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</
## Preparation
This template needs a <abbr title="Continuous Integration – Practice of automating the integration of code changes from multiple contributors into a single software project">CI</abbr> to be built and deployed, I recommend using either Codeberg or GitLab Pages. For Codeberg Pages I've written a [blog post](https://daudix-ufo.codeberg.page/blog/migration-from-github-to-codeberg/#github-pages--codeberg-pages) on step-by-step guide how to get the CI working.
This template needs a <abbr title="Continuous Integration – Practice of automating the integration of code changes from multiple contributors into a single software project">CI</abbr> to be built and deployed, using either Codeberg or GitLab Pages are recommended. For Codeberg Pages I've written a [blog post](https://daudix-ufo.codeberg.page/blog/migration-from-github-to-codeberg/#github-pages--codeberg-pages) on step-by-step guide how to get the CI working.
There is an included `.woodpecker.yml` and `.gitlab-ci.yml` that should be easy to adjust to your situation. For additional info see [Codeberg Pages](https://docs.codeberg.org/codeberg-pages/) and [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) docs.
@ -49,6 +49,8 @@ The process of setting up the site locally consists of:
- Replace or edit all the graphics. Using [Inkscape](https://inkscape.org) are recommended. If you want to reduce the SVGs size, use [svgo](https://github.com/svg/svgo).
- Add/override styles by doing so in `_sass/custom.scss`. doing this instead of modifying styles directly are strongly recommended, as it will allow you to update Duckquill easily.
- Test the site locally. Run `local.sh serve`.
- `git commit` your changes and push to your remote repo for automatic deployment.