diff --git a/_includes/footer.html b/_includes/footer.html index 2bad0f4..1327efe 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -4,6 +4,6 @@

Website source

- Powered by Jekyll and Duckquill + Powered by Jekyll and Duckquill diff --git a/_posts/2023-08-30-the-quill-of-duck.md b/_posts/2023-08-30-the-quill-of-duck.md index d41989b..0262ee6 100644 --- a/_posts/2023-08-30-the-quill-of-duck.md +++ b/_posts/2023-08-30-the-quill-of-duck.md @@ -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 ` 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} +
The Office where Stanley works, it has yellow floor and beige walls
+ 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. diff --git a/_sass/custom.scss b/_sass/custom.scss index 7f07b2d..0839664 100644 --- a/_sass/custom.scss +++ b/_sass/custom.scss @@ -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 { diff --git a/_sass/main.scss b/_sass/main.scss index 41c0e01..e544c5d 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -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); diff --git a/demo.md b/demo.md index 92ab2ea..7a70b4d 100644 --- a/demo.md +++ b/demo.md @@ -14,6 +14,8 @@ disclaimer: " - Don't interact with asbestos and moon rocks." --- +> For ^these banners see page source front matter + 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
Name
@@ -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. +
I may be a spoiler, I may be a long text, I may be anything. + +Quack-quack! + + + +
+ +### Small + +Small, cute text that doesn't catch attention. + +### Abbreviation + +The ASCII art are awesome! + +### Special ASCII style + +
+ _____________________________________________
+|.'',        Public_Library_Halls         ,''.|
+|.'.'',                                 ,''.'.|
+|.'.'.'',                             ,''.'.'.|
+|.'.'.'.'',                         ,''.'.'.'.|
+|.'.'.'.'.|                         |.'.'.'.'.|
+|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
+|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
+|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
+|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
+|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
+|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
+|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
+|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
+|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
+|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
+|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
+|.'.','         /%%%%%%%%%%%%%\         ','.'.|
+|.','          /%%%%%%%%%%%%%%%\          ','.|
+|;____________/%%%%%Spicer%%%%%%\____________;|
+
+ +### 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} + +
The Office where Stanley works, it has yellow floor and beige walls
+ +### Video + +Everything above can be applied to videos too. + +{:.media.full} + +
Red flower wakes up
+ +### Keyboard shortcut ``` ⌘ Super + Space @@ -173,9 +236,7 @@ Keyboard shortcuts. ⌘ Super + Space ---- - -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 diff --git a/index.md b/index.md index e66fa50..55fc66f 100644 --- a/index.md +++ b/index.md @@ -29,7 +29,7 @@ Make yourself a cup of your favorite drinkCI 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 CI 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.