From e99681e1abb802e486a7042434ec2697585a9d0e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 6 May 2021 21:53:04 +0200 Subject: Update --- assets/css/_basics.scss | 7 +- assets/css/_vars.scss | 4 +- assets/css/components/_landing-banner.scss | 5 +- assets/css/components/_outer-button.scss | 11 +- assets/css/scopes/_body.scss | 74 +---- assets/css/scopes/_colored-links.scss | 20 ++ assets/css/scopes/_headlines.scss | 58 ++++ assets/css/style.scss | 2 + content/personal/dre-infinite-skyscrapers/index.md | 45 +++ content/personal/infinite-skyscrapers/index.md | 45 --- content/personal/mis-design-test/index.md | 306 +++++++++++++++++++++ filters/common_actions.lua | 9 +- metadata/metadata.yaml | 2 + templates/layouts/categorized_list.html | 14 +- templates/layouts/index.html | 2 +- templates/layouts/page.html | 16 +- 16 files changed, 472 insertions(+), 148 deletions(-) create mode 100644 assets/css/scopes/_colored-links.scss create mode 100644 assets/css/scopes/_headlines.scss create mode 100644 content/personal/dre-infinite-skyscrapers/index.md delete mode 100644 content/personal/infinite-skyscrapers/index.md create mode 100644 content/personal/mis-design-test/index.md diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 2a271ff..b2a437b 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -84,7 +84,6 @@ li { width: prop(--dims --indent); margin-left: calc(-1 * #{prop(--dims --indent)}); color: prop(--colors --fg-hi); - font-family: $font-fam--mono; } } @@ -144,7 +143,7 @@ h6 { font-family: $font-fam--large; font-size: 1em; font-weight: 600; - line-height: 1.2; + line-height: 1.4; font-feature-settings: 'ss02' 1; & + & { @@ -163,7 +162,7 @@ p { hr { height: 1px; - margin: ($line-height * 1rem) 0; + margin: ($line-height * 2rem) 0; border: 0; background-color: prop(--colors --obj-hi); } @@ -172,5 +171,5 @@ blockquote, pre { margin: ($line-height * 1rem) 0 0 1px; padding-left: calc(#{prop(--dims --indent)} - 3px); - border-left: 2px solid prop(--colors --obj); + border-left: 3px solid prop(--colors --obj); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 263cb5d..3adce04 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -66,9 +66,7 @@ $gray7: hsl(220, 7%, 100%); ), --link: ( - --idle: var(--colors--fg-lo), - --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), - --visited-body: hsl(270, 60%, 75%), // hsl(354, 50%, 66%), + --idle: var(--colors--fg-lo), ) ) )); diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index 58d64d7..0e44e35 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -13,13 +13,10 @@ transform: translateX(-.06em); font-family: $font-fam--large; font-weight: 350; + line-height: 1.2; text-transform: none; } - @include element('text') { - font-size: 1 / 16 * 18em; - } - @include element('title-inner') { background-image: linear-gradient( to top, diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index d1da93c..22fa251 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -24,10 +24,10 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); - font-family: $font-fam--large; - font-size: 1rem; - font-weight: 500; + font-size: 1 / 16 * 15rem; + letter-spacing: 1px; text-decoration: none; + text-transform: uppercase; @include modifier('inverted') { background-color: prop(--colors --inverted --bg); @@ -51,8 +51,8 @@ @include element('icon-symbol') { display: block; - width: 1.35em; - height: 1.35em; + width: 1.45em; + height: 1.45em; } @include element('content') { @@ -60,7 +60,6 @@ padding-right: prop(--dims --pad-x); padding-left: prop(--dims --pad-x); transition: border-color .2s; - font-size: 1 / 16 * 15em; line-height: prop(--dims --outer, $global: true); white-space: nowrap; } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index b4d0a3c..8e5f876 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -1,10 +1,6 @@ @include namespace('body') { @include store(( --colors: ( - --emph: ( - --fg: prop(--colors --accent --color, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ), --meta: ( --fg: prop(--colors --fg-hi, $global: true), ) @@ -12,73 +8,15 @@ )); @include scope(namespace()) { - font-size: 1 / 16 * 18em; - - > :first-child { - margin-top: 0; - } - - :link { - color: prop(--colors --link --idle-body, $global: true); - } - - :visited { - color: prop(--colors --link --visited-body, $global: true); - } - - h1, - h2, - h3, - h4 { - transform: translateX(-.06em); - } - - h1 { - @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); - } - - h2 { - @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); - } - - h3 { - @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); - - letter-spacing: .05em; - text-transform: uppercase; - } - - h4, - h5, - h6 { - @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); - - letter-spacing: .1em; - text-transform: uppercase; - } - - h5, - h6 { - color: currentColor; - font-weight: 400; - } - - @include element('title-inner') { - background-image: linear-gradient( - to top, - transparent .15em, - #{prop(--colors --emph --bg)} .15em, - #{prop(--colors --emph --bg)} .6em, - transparent .6em - ); - } + font-size: 1 / 16 * 19em; @include element('meta') { - color: prop(--colors --meta --fg); - font-size: 1 / 18 * 16em; + margin-top: $line-height * 1rem; + color: prop(--colors --meta --fg); + font-size: 1 / 16 * 15rem; - + h1 { - margin-top: $line-height * 1rem; + + * { + margin-top: $line-height * 1.5rem; } } diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss new file mode 100644 index 0000000..25ed289 --- /dev/null +++ b/assets/css/scopes/_colored-links.scss @@ -0,0 +1,20 @@ +@include namespace('colored-links') { + @include store(( + --colors: ( + --link: ( + --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), + --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%), + ) + ) + )); + + @include scope(namespace()) { + :link { + color: prop(--colors --link --idle); + } + + :visited { + color: prop(--colors --link --visited); + } + } +} diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss new file mode 100644 index 0000000..6b28e9c --- /dev/null +++ b/assets/css/scopes/_headlines.scss @@ -0,0 +1,58 @@ +@include namespace('headlines') { + @include store(( + --colors: ( + --emph: ( + --bg: prop(--colors --bg-hi, $global: true), + ) + ) + )); + + @include scope(namespace()) { + h1, + h2, + h3, + h4 { + transform: translateX(-.06em); + } + + h1 { + @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); + } + + h2 { + @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); + } + + h3 { + @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); + + letter-spacing: .05em; + text-transform: uppercase; + } + + h4, + h5, + h6 { + @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); + + letter-spacing: .1em; + text-transform: uppercase; + } + + h5, + h6 { + color: currentColor; + font-weight: 400; + } + + @include element('title-inner') { + background-image: linear-gradient( + to top, + transparent .15em, + #{prop(--colors --emph --bg)} .15em, + #{prop(--colors --emph --bg)} .6em, + transparent .6em + ); + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index aa83f85..e4a36b0 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -24,6 +24,8 @@ @import 'components/card'; @import 'components/project'; +@import 'scopes/colored-links'; +@import 'scopes/headlines'; @import 'scopes/body'; @import 'utils'; diff --git a/content/personal/dre-infinite-skyscrapers/index.md b/content/personal/dre-infinite-skyscrapers/index.md new file mode 100644 index 0000000..ca30329 --- /dev/null +++ b/content/personal/dre-infinite-skyscrapers/index.md @@ -0,0 +1,45 @@ +--- +date: 2021-01-09 +title: Infinite Skyscrapers +category: dre +--- + +I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected. +I'm not even sure if there's a floor since I'm just floating, being able to fly around at will. +There is also something chasing me and I'm trying to get away from it. + +The buildings around me get denser and more chaotic, some look like glitches in a computer game. +The creature chasing me seems to absorb buildings into its body, growing larger and more powerful. + +Then there's a cut and I'm presumably inside one of those buildings. +I'm in a dark room with barely any lighting which looks somewhat like a large office. +It's very cluttered, though. +There's another similar room next to this one, separated by a glass wall and a door. +There's also a person with me who I seem to know, and that creature that chased me. +It seems like it managed to capture us. + +It dares us to escape from this situation, and as soon as it said that, the room begins to get locked off. +There are some red lights blinking and the door connecting our current room with the neighboring room is about to close permanently. +Panicked, I quickly run through it, but the other person couldn't make it. + +I suddenly realize I'm a cat and the other person an even smaller critter, I don't know what. +It's obvious that the creature is just playing with us, watching our futile efforts to escape for its amusement. + +The other person tries to get the door to open again by messing with its circuitry, and I do my best to block the creature's view from what was going on without looking suspicious. + +After a while, I start exploring the room and notice that there's a hallway in front of it, also separated by a glass wall and a door. +However, the wall is broken in one place and has a hole large enough for me to jump through. +So that's what I do. +I land in a bunch of glass disks lying on the floor, breaking them, but I'm unharmed. + +Now being a human again, I take a glass shard with me and run through a door which leads to a staircase. +It is huge, having the shape of a pill with stairs going along the edge. +The center is empty so I can see all the floors coming before and after. +There's no end in any direction. +I know the creature will come after me soon and so I run upwards as fast as I can. + +I made it about 5 floors when I hear a door burst open. +I quickly enter the room next to me, hoping that the creature hasn't seen me. + +This floor was very large and open and brightly lit. +The dream starts to make no sense anymore and that's it. diff --git a/content/personal/infinite-skyscrapers/index.md b/content/personal/infinite-skyscrapers/index.md deleted file mode 100644 index a4a78e1..0000000 --- a/content/personal/infinite-skyscrapers/index.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -date: 2021-01-09 -title: Infinite Skyscrapers -category: dre ---- - -I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected. -I'm not even sure if there's a floor since I'm just floating, being able to fly around at will. -There is also something chasing me and I'm trying to get away from it. - -The buildings around me get denser and more chaotic, some look like glitches in a computer game. -The creature chasing me seems to absorb buildings into its body, growing larger and more powerful. - -Then there's a cut and I'm presumably inside one of those buildings. -I'm in a dark room with barely any lighting which looks somewhat like a large office. -It's very cluttered, though. -There's another similar room next to this one, separated by a glass wall and a door. -There's also a person with me who I seem to know, and that creature that chased me. -It seems like it managed to capture us. - -It dares us to escape from this situation, and as soon as it said that, the room begins to get locked off. -There are some red lights blinking and the door connecting our current room with the neighboring room is about to close permanently. -Panicked, I quickly run through it, but the other person couldn't make it. - -I suddenly realize I'm a cat and the other person an even smaller critter, I don't know what. -It's obvious that the creature is just playing with us, watching our futile efforts to escape for its amusement. - -The other person tries to get the door to open again by messing with its circuitry, and I do my best to block the creature's view from what was going on without looking suspicious. - -After a while, I start exploring the room and notice that there's a hallway in front of it, also separated by a glass wall and a door. -However, the wall is broken in one place and has a hole large enough for me to jump through. -So that's what I do. -I land in a bunch of glass disks lying on the floor, breaking them, but I'm unharmed. - -Now being a human again, I take a glass shard with me and run through a door which leads to a staircase. -It is huge, having the shape of a pill with stairs going along the edge. -The center is empty so I can see all the floors coming before and after. -There's no end in any direction. -I know the creature will come after me soon and so I run upwards as fast as I can. - -I made it about 5 floors when I hear a door burst open. -I quickly enter the room next to me, hoping that the creature hasn't seen me. - -This floor was very large and open and brightly lit. -The dream starts to make no sense anymore and that's it. diff --git a/content/personal/mis-design-test/index.md b/content/personal/mis-design-test/index.md new file mode 100644 index 0000000..c31e42d --- /dev/null +++ b/content/personal/mis-design-test/index.md @@ -0,0 +1,306 @@ +--- +title: "Design Test: Markdown Syntax" +category: mis +--- + +- [Overview](#overview) + - [Philosophy](#philosophy) +- [Block Elements](#block-elements) + - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks) + - [Headers](#headers) + - [Blockquotes](#blockquotes) + - [Lists](#lists) + - [Code Blocks](#code-blocks) +- [Span Elements](#span-elements) + - [Links](#links) + - [Emphasis](#emphasis) + - [Code](#code) + + +**Note:** This document is itself written using Markdown; you +can [see the source for it by adding '.text' to the URL](/projects/markdown/syntax.text). + +---- + +## Overview + +### Philosophy + +Markdown is intended to be as easy-to-read and easy-to-write as is feasible. + +Readability, however, is emphasized above all else. A Markdown-formatted +document should be publishable as-is, as plain text, without looking +like it's been marked up with tags or formatting instructions. While +Markdown's syntax has been influenced by several existing text-to-HTML +filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html), +[Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of +inspiration for Markdown's syntax is the format of plain text email. + +## Block Elements + +### Paragraphs and Line Breaks + +A paragraph is simply one or more consecutive lines of text, separated +by one or more blank lines. (A blank line is any line that looks like a +blank line -- a line containing nothing but spaces or tabs is considered +blank.) Normal paragraphs should not be indented with spaces or tabs. + +The implication of the "one or more consecutive lines of text" rule is +that Markdown supports "hard-wrapped" text paragraphs. This differs +significantly from most other text-to-HTML formatters (including Movable +Type's "Convert Line Breaks" option) which translate every line break +character in a paragraph into a `
` tag. + +When you *do* want to insert a `
` break tag using Markdown, you +end a line with two or more spaces, then type return. + +### Headers + +Markdown supports two styles of headers, [Setext] [1] and [atx] [2]. + +Optionally, you may "close" atx-style headers. This is purely +cosmetic -- you can use this if you think it looks better. The +closing hashes don't even need to match the number of hashes +used to open the header. (The number of opening hashes +determines the header level.) + + +### Blockquotes + +Markdown uses email-style `>` characters for blockquoting. If you're +familiar with quoting passages of text in an email message, then you +know how to create a blockquote in Markdown. It looks best if you hard +wrap the text and put a `>` before every line: + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. +> +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +Markdown allows you to be lazy and only put the `>` before the first +line of a hard-wrapped paragraph: + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +id sem consectetuer libero luctus adipiscing. + +Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by +adding additional levels of `>`: + +> This is the first level of quoting. +> +> > This is nested blockquote. +> +> Back to the first level. + +Blockquotes can contain other Markdown elements, including headers, lists, +and code blocks: + +> ## This is a header. +> +> 1. This is the first list item. +> 2. This is the second list item. +> +> Here's some example code: +> +> return shell_exec("echo $input | $markdown_script"); + +Any decent text editor should make email-style quoting easy. For +example, with BBEdit, you can make a selection and choose Increase +Quote Level from the Text menu. + + +### Lists + +Markdown supports ordered (numbered) and unordered (bulleted) lists. + +Unordered lists use asterisks, pluses, and hyphens -- interchangably +-- as list markers: + +* Red +* Green +* Blue + +is equivalent to: + ++ Red ++ Green ++ Blue + +and: + +- Red +- Green +- Blue + +Ordered lists use numbers followed by periods: + +1. Bird +2. McHale +3. Parish + +It's important to note that the actual numbers you use to mark the +list have no effect on the HTML output Markdown produces. The HTML +Markdown produces from the above list is: + +If you instead wrote the list in Markdown like this: + +1. Bird +1. McHale +1. Parish + +or even: + +3. Bird +1. McHale +8. Parish + +you'd get the exact same HTML output. The point is, if you want to, +you can use ordinal numbers in your ordered Markdown lists, so that +the numbers in your source match the numbers in your published HTML. +But if you want to be lazy, you don't have to. + +To make lists look nice, you can wrap items with hanging indents: + +* Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, + viverra nec, fringilla in, laoreet vitae, risus. +* Donec sit amet nisl. Aliquam semper ipsum sit amet velit. + Suspendisse id sem consectetuer libero luctus adipiscing. + +But if you want to be lazy, you don't have to: + +* Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, +viverra nec, fringilla in, laoreet vitae, risus. +* Donec sit amet nisl. Aliquam semper ipsum sit amet velit. +Suspendisse id sem consectetuer libero luctus adipiscing. + +List items may consist of multiple paragraphs. Each subsequent +paragraph in a list item must be indented by either 4 spaces +or one tab: + +1. This is a list item with two paragraphs. Lorem ipsum dolor + sit amet, consectetuer adipiscing elit. Aliquam hendrerit + mi posuere lectus. + + Vestibulum enim wisi, viverra nec, fringilla in, laoreet + vitae, risus. Donec sit amet nisl. Aliquam semper ipsum + sit amet velit. + +2. Suspendisse id sem consectetuer libero luctus adipiscing. + +It looks nice if you indent every line of the subsequent +paragraphs, but here again, Markdown will allow you to be +lazy: + +* This is a list item with two paragraphs. + + This is the second paragraph in the list item. You're +only required to indent the first line. Lorem ipsum dolor +sit amet, consectetuer adipiscing elit. + +* Another item in the same list. + +To put a blockquote within a list item, the blockquote's `>` +delimiters need to be indented: + +* A list item with a blockquote: + + > This is a blockquote + > inside a list item. + +To put a code block within a list item, the code block needs +to be indented *twice* -- 8 spaces or two tabs: + +* A list item with a code block: + + + +### Code Blocks + +Pre-formatted code blocks are used for writing about programming or +markup source code. Rather than forming normal paragraphs, the lines +of a code block are interpreted literally. Markdown wraps a code block +in both `
` and `` tags.
+
+To produce a code block in Markdown, simply indent every line of the
+block by at least 4 spaces or 1 tab.
+
+This is a normal paragraph:
+
+    This is a code block.
+
+Here is an example of AppleScript:
+
+    tell application "Foo"
+        beep
+    end tell
+
+A code block continues until it reaches a line that is not indented
+(or the end of the article).
+
+Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
+are automatically converted into HTML entities. This makes it very
+easy to include example HTML source code using Markdown -- just paste
+it and indent it, and Markdown will handle the hassle of encoding the
+ampersands and angle brackets. For example, this:
+
+    

+        © 2004 Foo Corporation
+    

+
+Regular Markdown syntax is not processed within code blocks. E.g.,
+asterisks are just literal asterisks within a code block. This means
+it's also easy to use Markdown to write about Markdown's own syntax.
+
+```
+tell application "Foo"
+    beep
+end tell
+```
+
+## Span Elements
+
+### Links
+
+Markdown supports two style of links: *inline* and *reference*.
+
+In both styles, the link text is delimited by [square brackets].
+
+To create an inline link, use a set of regular parentheses immediately
+after the link text's closing square bracket. Inside the parentheses,
+put the URL where you want the link to point, along with an *optional*
+title for the link, surrounded in quotes. For example:
+
+This is [an example](http://example.com/) inline link.
+
+[This link](http://example.net/) has no title attribute.
+
+### Emphasis
+
+Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
+emphasis. Text wrapped with one `*` or `_` will be wrapped with an
+HTML `` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`` tag. E.g., this input:
+
+*single asterisks*
+
+_single underscores_
+
+**double asterisks**
+
+__double underscores__
+
+### Code
+
+To indicate a span of code, wrap it with backtick quotes (`` ` ``).
+Unlike a pre-formatted code block, a code span indicates code within a
+normal paragraph. For example:
+
+Use the `printf()` function.
diff --git a/filters/common_actions.lua b/filters/common_actions.lua
index 262f086..5b6c86b 100644
--- a/filters/common_actions.lua
+++ b/filters/common_actions.lua
@@ -1,12 +1,15 @@
 function CodeBlock(el)
     if el.classes[1] == "plain" then
         el = pandoc.Div({el}, {class = 's-code'})
-    else
+    elseif el.classes[1] then
         local formatted = pandoc.pipe('pygmentize', {
             '-l', el.classes[1], '-f', 'html', '-O',
             'cssclass=s-code s-code--highlight'
         }, el.text)
-        el = pandoc.RawBlock('html', formatted)
+
+        if formatted then
+            el = pandoc.RawBlock('html', formatted)
+        end
     end
 
     return el
@@ -16,7 +19,7 @@ function Header(el)
     if el.level == 1 then
         local newchildren = pandoc.List()
 
-        newchildren:insert(pandoc.Span(el.content, {class = 's-body__title-inner'}))
+        newchildren:insert(pandoc.Span(el.content, {class = 's-headlines__title-inner'}))
 
         el.content = newchildren
     end
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index c8a841d..86b5c66 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -26,6 +26,8 @@ categories:
     dre:
       name:      Dream Journal
       show_date: true
+    mis:
+      name: Sonstiges
       
   projects:
     emj:
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8cc5c24..5e2d4a5 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,11 +1,13 @@
 

-    

-        
$title$

+    

+        

+            
$title$

 
 $body$
+        

 
         $for(pages.by_category)$
-            

+            

                 $for(it.value/first/first)$
                     $it.category.name$
                 $endfor$
@@ -13,10 +15,10 @@ $body$
             

-            

+            

                 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
             

         

diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e45f6eb..2093f8c 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,13 +1,13 @@
 

-    

-        $if(category.show_date)$
-            

-                $date.long$
-            

-        $endif$
+    

+        
$title$

 
-        
$title$

+        

+            $if(category.show_date)$
+                $date.long$
+            $endif$
+        

 
-        $body$
+$body$
     

 

-- 
cgit v1.2.3-70-g09d2