From 604dcfe244ab8f6913db9dec3de5796ad32f43f5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 16:26:47 +0200 Subject: Removed private section, various improvements --- assets/css/_base.scss | 1 + assets/css/components/_card.scss | 2 +- assets/css/components/_hnav.scss | 20 +- assets/css/layouts/_card-list.scss | 39 ++- assets/css/layouts/_container.scss | 11 + assets/css/style.scss | 1 + .../9thPK7O3xn/dreams/biological-experiments.md | 23 -- content/9thPK7O3xn/dreams/false-awakening.md | 14 - content/9thPK7O3xn/dreams/index.md | 7 - content/9thPK7O3xn/dreams/infinite-skyscrapers.md | 24 -- content/9thPK7O3xn/index.md | 10 - content/9thPK7O3xn/misc/design-test.md | 315 --------------------- content/9thPK7O3xn/misc/index.md | 6 - content/9thPK7O3xn/posts/index.md | 6 - content/art/index.md | 4 +- content/notebook/index.md | 6 + content/notebook/scrap/design-test.md | 315 +++++++++++++++++++++ content/notebook/scrap/index.md | 6 + content/posts/index.md | 4 - content/services/index.md | 2 +- metadata/metadata.yaml | 17 +- templates/layouts/categorized_list.html | 10 +- templates/layouts/page.html | 2 +- templates/partials/ascii_fox.html | 2 +- templates/partials/ascii_fox_small.html | 2 +- templates/partials/gallery_card.html | 2 +- templates/partials/small_gallery_card.html | 39 +++ yarn.lock | 2 +- 28 files changed, 437 insertions(+), 455 deletions(-) create mode 100644 assets/css/layouts/_container.scss delete mode 100644 content/9thPK7O3xn/dreams/biological-experiments.md delete mode 100644 content/9thPK7O3xn/dreams/false-awakening.md delete mode 100644 content/9thPK7O3xn/dreams/index.md delete mode 100644 content/9thPK7O3xn/dreams/infinite-skyscrapers.md delete mode 100644 content/9thPK7O3xn/index.md delete mode 100644 content/9thPK7O3xn/misc/design-test.md delete mode 100644 content/9thPK7O3xn/misc/index.md delete mode 100644 content/9thPK7O3xn/posts/index.md create mode 100644 content/notebook/index.md create mode 100644 content/notebook/scrap/design-test.md create mode 100644 content/notebook/scrap/index.md delete mode 100644 content/posts/index.md create mode 100644 templates/partials/small_gallery_card.html diff --git a/assets/css/_base.scss b/assets/css/_base.scss index dd24fed..ac6b989 100644 --- a/assets/css/_base.scss +++ b/assets/css/_base.scss @@ -9,6 +9,7 @@ code { body { box-sizing: border-box; + height: auto; min-height: 100%; } diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index f8f106d..6c15145 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -135,7 +135,7 @@ position: relative; width: 100%; height: 2em; - padding-top: 46%; + padding-top: 50%; } @include iro.bem-elem('thumbnail-img') { diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss index 4097373..6eea345 100644 --- a/assets/css/components/_hnav.scss +++ b/assets/css/components/_hnav.scss @@ -10,20 +10,18 @@ @include iro.props-store(( --dims: ( - --margin-top: fn.global-dim(--size --600), - --gap: 2em, - --pad-y: .5em + --gap: 1.5em, + --margin-top: fn.global-dim(--paragraph --margin-top), + --margin-bottom: fn.global-dim(--size --900), ) ), 'dims'); @include iro.bem-component(iro.props-namespace()) { - display: flex; - gap: fn.dim(--gap); - align-items: baseline; - margin-top: fn.dim(--margin-top); - padding: fn.dim(--pad-y) 0 0; - border-width: 1px 0 0; - border-style: solid; - border-color: fn.color(--border); + display: flex; + gap: fn.dim(--gap); + align-items: baseline; + margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom); + padding-top: fn.dim(--margin-top); + border-top: 1px solid fn.color(--border); } } diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index 96f9060..6d388e6 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -6,7 +6,19 @@ --dims: ( --margin-top: fn.global-dim(--size --600), --spacing: fn.global-dim(--size --200), - --col-width: 17em, + --gap: fn.global-dim(--size --25), + --grid: ( + --gap: fn.global-dim(--size --75), + --col-width: fn.global-dim(--size --3400), + ), + --small-gallery: ( + --gap: fn.global-dim(--size --250), + --col-width: fn.global-dim(--size --2800), + ), + --gallery: ( + --gap: fn.global-dim(--size --250), + --col-width: fn.global-dim(--size --3400), + ) ) ), 'dims'); @@ -14,24 +26,23 @@ margin-top: fn.dim(--margin-top); font-size: 1rem; + @include iro.bem-elem('header') { + margin-top: fn.dim(--margin-top); + } + @include iro.bem-elem('cards') { display: flex; flex-direction: column; - gap: 2px; + gap: fn.dim(--gap); margin-top: fn.dim(--spacing); - @include iro.bem-modifier('grid', 'gallery') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr)); - align-items: start; - } - - @include iro.bem-modifier('grid') { - gap: 6px; - } - - @include iro.bem-modifier('gallery') { - gap: 20px; + @each $mode in 'grid' 'small-gallery' 'gallery' { + @include iro.bem-modifier($mode) { + display: grid; + align-items: start; + grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr)); + gap: fn.dim('--#{$mode}' --gap); + } } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss new file mode 100644 index 0000000..10d6832 --- /dev/null +++ b/assets/css/layouts/_container.scss @@ -0,0 +1,11 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('container') { + @include iro.props-store(( + --dims: ( + --width: iro.fn-px-to-rem(730px), + --width-50: iro.fn-px-to-rem(380px), + ) + ), 'dims'); +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 1184bb2..e160f91 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -7,6 +7,7 @@ @use 'base'; @use 'iro-design/src/layouts'; +@use 'layouts/container'; @use 'layouts/media'; @use 'layouts/card-list'; diff --git a/content/9thPK7O3xn/dreams/biological-experiments.md b/content/9thPK7O3xn/dreams/biological-experiments.md deleted file mode 100644 index 94a7f63..0000000 --- a/content/9thPK7O3xn/dreams/biological-experiments.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -date: 2012-01-01 -title: Biological Experiments ---- - -*I don't remember the real date of this dream, just that it happened in 2012.* - -I'm at a large gym. It is separated in two halves by a huge wall with a goal in front of it. The wall doesn't stretch all the way to the outer walls so it's possible to go from one side to the other. It looks quite different from the gym where I used to have PE, but it still feels like it somehow. My classmates are there as well and are playing soccer together. - -Suddenly, the environment changes. It's still the same gym, but now the dividing wall and the goal are gone. Instead, there are many tables and the walls are plastered with scientific posters. -My biology teacher shows up and gives all of us an assignment: Form groups of two, create a mixture with some specific chemicals, and inject it into our eyes. So that's what I do, until it's finally time for the injection. I'm too scared and refuse to do it. - -The situation changes again. I'm now inside of a tavern, sitting at a table with some of my classmates. The tavern reminds me of a log cabin I was once at -- the walls and the furniture are made of heavy wooden logs. -My legs feel strange, but I'm not bothered by it because that's an expected effect of the mixture we previously produced. Looks like I've changed my mind between the last scene and this one. -After some time, I finally get curios and take a look at my legs. Instead of my feet, there are black paws. My classmates must've noticed their changes as well, as one of them says: "Ah, so it has begun." - -The dream gets hazy and all I know is that the changes keep progressing. - -There's a moment of clarity. The changes have gotten very far since my body is now covered in black fur, I have a muzzle, and due to the anatomical changes I can only barely stand on two legs. I start talking with my teacher and ask: "How long will it take/last?" He answers: "As long as you want, but you'll have to return." - -The dream gets hazy again, followed by one last scene: I'm in front of the tavern with four other people. The changes are complete and we are now werewolves. We run into the forest that surrounds us. - -This isn't the end of the dream yet, but I don't remember anything from this point. diff --git a/content/9thPK7O3xn/dreams/false-awakening.md b/content/9thPK7O3xn/dreams/false-awakening.md deleted file mode 100644 index 4f2a0b2..0000000 --- a/content/9thPK7O3xn/dreams/false-awakening.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -date: 2015-07-29 -title: False Awakening ---- - -It was noon. I was tired and decided to lie down for a bit. I didn't want to fall asleep, though, so I tried to stay awake and kept checking the time since I had to go to the uni later. This went on for quite a while, resulting in a constant cycle of dozing → remembering to check the time → looking at my smartphone to check the time → going back to dozing → and so on. - -At some point, I actually must have fallen asleep for quite a while. I opened my eyes to take my smartphone once again when I noticed that my room was dark. It must've been late -- about 9 or 10pm -- which immediately irritated me. I had been tired, but not _that_ tired. - -I stood up and groggily went to my desk to switch on my desk lamp. I pressed the button and heard the usual click noise, but nothing happened. After a few more tries, I eventually pulled the lamp towards me to see if the LED bulb at least flickered. It was completely dead. - -I walked back to my bed to check on my smartphone what time it actually was. I was greeted by my lock screen, but it looked different than usual: There was only empty space where the clock should have been and overall it just looked "wrong." - -This whole situation felt strange and I started to wonder what was going on, when I suddenly felt like all of my strength was sucked out of my body. My head was spinning and I collapsed onto my bed. I couldn't even think straight anymore and just wished for it to stop, for me to wake up... and that's when I did. For real, this time. diff --git a/content/9thPK7O3xn/dreams/index.md b/content/9thPK7O3xn/dreams/index.md deleted file mode 100644 index 95e613d..0000000 --- a/content/9thPK7O3xn/dreams/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Dream Journal -position: 1 -list_order: date_desc -list_read_indicators: true -feed: true ---- diff --git a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md b/content/9thPK7O3xn/dreams/infinite-skyscrapers.md deleted file mode 100644 index 1086379..0000000 --- a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -date: 2021-01-09 -title: Infinite Skyscrapers ---- - -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/9thPK7O3xn/index.md b/content/9thPK7O3xn/index.md deleted file mode 100644 index de7fb0f..0000000 --- a/content/9thPK7O3xn/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Personal -unlisted: true -feed: true ---- - -Content that doesn't belong in the public sections of my website such as test pages or posts about more personal topics. - -The purpose of this section is simply to be a bit tricky, but not impossible to discover. -Feel free to share pages from here *privately* if you think someone would like them. diff --git a/content/9thPK7O3xn/misc/design-test.md b/content/9thPK7O3xn/misc/design-test.md deleted file mode 100644 index 2367513..0000000 --- a/content/9thPK7O3xn/misc/design-test.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Design Test ---- - -- [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) - ----- - -## 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.
-
----
-
-# Headline 1
-
-## Headline 2
-
-### Headline 3
-
-#### Headline 4
-
-##### Headline 5
-
-###### Headline 6
diff --git a/content/9thPK7O3xn/misc/index.md b/content/9thPK7O3xn/misc/index.md
deleted file mode 100644
index 99bc5e7..0000000
--- a/content/9thPK7O3xn/misc/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title:                Stuff
-position:             2
-list_read_indicators: true
-feed:                 true
----
diff --git a/content/9thPK7O3xn/posts/index.md b/content/9thPK7O3xn/posts/index.md
deleted file mode 100644
index 8801530..0000000
--- a/content/9thPK7O3xn/posts/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title:                Posts
-position:             0
-list_read_indicators: true
-feed:                 true
----
diff --git a/content/art/index.md b/content/art/index.md
index 5ed1858..eadac7a 100644
--- a/content/art/index.md
+++ b/content/art/index.md
@@ -1,7 +1,7 @@
 ---
 title:       Art
 position:    2
-list_layout: gallery
-list_limit:  4
+list_layout: small-gallery
+list_limit:  6
 feed:        true
 ---
diff --git a/content/notebook/index.md b/content/notebook/index.md
new file mode 100644
index 0000000..8d58834
--- /dev/null
+++ b/content/notebook/index.md
@@ -0,0 +1,6 @@
+---
+title:       Notebook
+position:    3
+list_limit:  4
+feed:        true
+---
diff --git a/content/notebook/scrap/design-test.md b/content/notebook/scrap/design-test.md
new file mode 100644
index 0000000..2367513
--- /dev/null
+++ b/content/notebook/scrap/design-test.md
@@ -0,0 +1,315 @@
+---
+title: Design Test
+---
+
+- [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)
+
+----
+
+## 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.
+
+---
+
+# Headline 1
+
+## Headline 2
+
+### Headline 3
+
+#### Headline 4
+
+##### Headline 5
+
+###### Headline 6
diff --git a/content/notebook/scrap/index.md b/content/notebook/scrap/index.md
new file mode 100644
index 0000000..4cc3c2e
--- /dev/null
+++ b/content/notebook/scrap/index.md
@@ -0,0 +1,6 @@
+---
+title:                Scrap
+position:             100
+list_read_indicators: true
+feed:                 true
+---
diff --git a/content/posts/index.md b/content/posts/index.md
deleted file mode 100644
index 4396e20..0000000
--- a/content/posts/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title:    Posts
-position: 3
----
diff --git a/content/services/index.md b/content/services/index.md
index 1aa41a6..9f0dce0 100644
--- a/content/services/index.md
+++ b/content/services/index.md
@@ -1,6 +1,6 @@
 ---
 title:          Services
-position:       3
+position:       4
 list_layout:    grid
 list_post_icon: arrow-up-right
 ---
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 679cdcb..35b7209 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -7,15 +7,18 @@ author:
 
 menus:
   main:
-    - id:     projects
-      label:  Projects
-      url:    /projects/
+    - id:     art
+      label:  Art
+      url:    /art/
+
+    - id:     notebook
+      label:  Notebook
+      url:    /notebook/
 
     - id:     profiles
       label:  Profiles
       url:    /profiles/
 
-    - id:     9thPK7O3xn
-      label:  Personal
-      url:    /9thPK7O3xn/
-      hidden: true
+    - id:     services
+      label:  Services
+      url:    /services/
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 7f94ff4..8217fd9 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -3,12 +3,10 @@
         
$title$

 
 $body$
-
     
 
     $if(notoc)$$else$