Add new style idea

cy-by · Sep 10, 2024 · 57065f8 · 57065f8
1 parent 8ee8130
commit 57065f8
Show file tree

Hide file tree

Showing 18 changed files with 640 additions and 42 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,8 +1,4 @@
 module.exports = function (eleventyConfig) {
-    // Pass static files
-    eleventyConfig.addPassthroughCopy("style.css");
-
-    // Watch targets
-    eleventyConfig.addWatchTarget("./style.css");
-}
-
+    eleventyConfig.addWatchTarget("./styles");
+    eleventyConfig.addPassthroughCopy("./styles");
+};
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 _drafts/
 _site/
 .cache
+.DS_store
diff --git a/_includes/layout.liquid b/_includes/layout.liquid
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>{{ title }} | Cyby.dev</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="color-scheme" content="light dark" />
+        <link
+            rel="icon"
+            href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪴</text></svg>"
+        />
+        <link href="/styles/reset.css" rel="stylesheet" />
+        <link href="/styles/style.css" rel="stylesheet" />
+        <link href="/styles/large.css" media="only screen and (min-width: 600px)" rel="stylesheet" />
+    </head>
+    <body>
+        <a href="#main" class="skip">Skip to main content</a>
+        <header>
+            <h1><a href="/">cyby.dev</a></h1>
+            <!-- <nav>
+                <ul>
+                    <li><a href="/blog">blog</a></li>
+                </ul>
+            </nav> -->
+            <div class="triangle"></div>
+        </header>
+        <main id="main" class="stack layout">
+            {{ content }}
+        </main>
+    </body>
+</html>
diff --git a/about.md b/about.md
@@ -0,0 +1,6 @@
+---
+title: About
+layout: layout.liquid
+---
+
+# About
diff --git a/index.html b/index.html
diff --git a/index.md b/index.md
@@ -0,0 +1,12 @@
+---
+title: index
+layout: layout.liquid
+---
+
+# Posts
+
+<ul class="post-list">
+{%- for post in collections.post %}
+    <li><a href="{{ post.url }}">{{ post.data.title }}</a><time>2024-09-07</time></li>
+{% endfor %}
+</ul>
diff --git a/posts/posts.json b/posts/posts.json
@@ -0,0 +1,4 @@
+{
+    "layout": "layout.liquid",
+    "tags": "post"
+}
diff --git a/posts/test.md b/posts/test.md
@@ -0,0 +1,244 @@
+---
+title: Markdown egg test
+---
+
+# {{ title }}
+
+**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 `<br />` tag.
+
+When you *do* want to insert a `<br />` 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.
+
+### 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 `<pre>` and `<code>` 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:
+```plain
+This is a code block.
+```
+Here is an example of AppleScript:
+
+```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:
+
+```html
+<div class="footer">
+    &copy; 2004 Foo Corporation
+</div>
+```
+
+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.
+
+```
+var const let for while
+function() linear-gradient()
+<div class"testing" id"test">
+  testing
+</div>
+.myDiv{ background-color: pink; }
+console.log("hello", true)
+/* comment */
+& | $ + − = ~ [] () {} / ; : " @ %
+0 1 2 3 4 5 6 7 8 9
+var = red;
+if (var) {}
+<p>
+give me a break...
+</p>
+```
+
+## 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 `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`<strong>` tag. E.g., this input:
+
+*single asterisks*
+
+_single underscores_
+
+**double asterisks**
+
+__double underscores__
diff --git a/style.css b/style.css
diff --git a/styles/FontWithASyntaxHighlighter-Regular.woff2 b/styles/FontWithASyntaxHighlighter-Regular.woff2
diff --git a/styles/JetBrainsMono-Bold.woff2 b/styles/JetBrainsMono-Bold.woff2
diff --git a/styles/JetBrainsMono-ExtraBold.woff2 b/styles/JetBrainsMono-ExtraBold.woff2
diff --git a/styles/JetBrainsMono-Italic.woff2 b/styles/JetBrainsMono-Italic.woff2
diff --git a/styles/JetBrainsMono-Regular.woff2 b/styles/JetBrainsMono-Regular.woff2
diff --git a/styles/JetBrainsMono-SemiBold.woff2 b/styles/JetBrainsMono-SemiBold.woff2
diff --git a/styles/large.css b/styles/large.css
@@ -0,0 +1,5 @@
+.post-list {
+    a {
+        font-size: 3.5rem;
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ node_modules/ @@
     _drafts/
     _site/
     .cache
+    .DS_store