diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..b918b18 Binary files /dev/null and b/favicon.ico differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..a5c7911 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + diff --git a/files.txt b/files.txt index 632cf34..1a8112b 100644 --- a/files.txt +++ b/files.txt @@ -1,2 +1,3 @@ readme.md 2022-28-06 Tickle -examples.md 2022-28-06 Examples \ No newline at end of file +examples.md 2022-28-06 Examples +tutorial-styling.md 2022-28-06 Styling \ No newline at end of file diff --git a/index.html b/index.html index d20fd89..cd2d05d 100644 --- a/index.html +++ b/index.html @@ -22,15 +22,89 @@ margin: 0; padding: 0; } - .trigger { - display: none; + body { + padding: 3em; + max-width: 52em; + margin: 0 auto; } - .left-nav > * { + pre { + margin: 0; + padding: 3em; + max-width: inherit; + max-height: 100vh; + overflow: scroll; + background: rgb(192, 192, 192); + position: absolute; + top: 0; + left: 50%; + transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translate(-50%, -100%); + } + .is-source-enabled pre { + transform: translate(-50%, 0); + } + button { + display: inline-block; + border: none; + margin: 0; + text-decoration: none; + font-family: inherit; + font-size: 1rem; + display: flex; + justify-content: center; + align-content: center; + text-align: center; + vertical-align: middle; + background: var(--accent); + color: var(--background); + cursor: pointer; + padding: 0.5em 1em; + border-radius: 0 0 0.2em 0; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + -webkit-appearance: none; + -moz-appearance: none; + } + h1, + h2, + h3, + h4 { + color: var(--accent); + font-family: "Lobster", serif; + } + a { + color: var(--accent); + position: relative; + text-decoration: none; + padding: 0.1em; + } + a::after { + content: ""; + position: absolute; + background-color: var(--accent); + position: absolute; + left: 0; + bottom: 3px; + width: 100%; + height: 1px; + z-index: -1; + transition: all 0.1s ease-in; + } + a:hover { + color: var(--background); + transition: all 0.3s ease-in-out; + } + a:hover::after { + bottom: 0; + height: 100%; + transition: all 0.3s ease-in-out; + } + .menu, + .burger { position: fixed; top: 0; left: 0; } - .left-nav > .menu { + .menu { padding: 1em; transform: translateX(-100%); display: flex; @@ -40,39 +114,26 @@ transition: all 0.3s ease-out; gap: 1em; } - .left-nav > .menu a { + .menu a { text-decoration: none; background: var(--background); color: var(--accent); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; padding: 0.2em 0.4em; } - .left-nav > .menu a:hover { + .menu a:hover { background: var(--accent); color: var(--background); } - .left-nav > .trigger:checked ~ .menu { + .menu-is-open .menu { transform: translateX(0); transition-duration: 0.1s; } - .burger { - width: 2em; - height: 2em; - display: flex; - justify-content: center; - align-content: center; - text-align: center; - vertical-align: middle; - line-height: 2em; - border-radius: 0.2em; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - transition: background 0.5s ease; - } - .left-nav > .trigger:checked ~ .burger { + .menu-is-open .burger { color: transparent; } - .left-nav > .trigger:checked ~ .burger, + .menu-is-open .burger, #Loading { top: 0; right: 0; @@ -80,9 +141,10 @@ height: 100%; border-radius: 0; background: rgba(17, 17, 17, 0.2); + cursor: default; } #Loading { - position: absolute; + position: fixed; text-align: center; align-items: center; justify-content: center; @@ -94,16 +156,15 @@ display: flex; overflow: hidden; } + #Loading > * { + animation: load 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); + } .is-loading #Loading { opacity: 1; height: 100%; transition: opacity 1s ease-in, height 0 linear; } - #Loading::after { - content: "❤"; - animation: beat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); - } - @keyframes beat { + @keyframes load { 0% { transform: scale(0.95); } @@ -123,48 +184,37 @@ transform: scale(0.9); } } - #Body { - padding: 3em; - max-width: 52em; - margin: 0 auto; - } - #Body h1, - #Body h2, - #Body h3, - #Body h4 { - color: var(--accent); - font-family: "Lobster", serif; - } - #Body a { - color: var(--background); - background-color: var(--accent); - text-decoration: none; - padding: 0.1em 0.4em; - } -
-
+ 

+    

+      
❤

+    

     
   
 
diff --git a/readme.md b/readme.md
index 5b8d302..8554057 100644
--- a/readme.md
+++ b/readme.md
@@ -15,7 +15,7 @@ By default, Tickle will:
 
 1. Read a text file containing a list of posts
 2. Load the first post
-3. Parse the markdown
+3. Render the markdown
 4. Display the list of links, and the pages
 
 Tickle is small enough that a moderately knowledgeable programmer should be able to make it do whatever they want.
@@ -24,10 +24,10 @@ Tickle is small enough that a moderately knowledgeable programmer should be able
 ## How do I use Tickle?
 
 1. write markdown files
-2. reference your files in a text file called "files.txt"
+2. Optional: reference files in a text file called "files.txt" to fill the side navigation
 3. upload everything on some server
 
-We have a [neat little UI to help you do all of that](https://git.poto.cafe/yagich/ticle-godot-frontend). You don't have to use it, but it's neat.
+We have a [neat little UI to help you do all of that](https://git.poto.cafe/yagich/tickle-godot-frontend). You don't have to use it, but it's neat.
 
 Here are more detailed explanations, for different knowledge levels.
 
@@ -45,7 +45,9 @@ It's important to know that Tickle is an *idea*. Think of it as a specification.
 
 ### Q: What if I want custom functionality, but don't know programming at all?
 
-**A**: Check the [examples](examples.md) first, and see if there's something for you. Otherwise, write to us! Find us on X or Y, and shoot your request. Maybe we'll get to it
+**A**: Check the [examples](examples.md) first, and see if there's something for you. Otherwise, write to us! Find us on X or Y, and shoot your request. Maybe we'll get to it. 
+
+TODO: specify where to find us
 
 ### Q: Everything in the browser? Isn't that bad for SEO?
 
@@ -53,7 +55,7 @@ It's important to know that Tickle is an *idea*. Think of it as a specification.
 
 ### Q: Isn't it bad for performance?
 
-**A**: Again, who cares? For Facebook, a microsecond lost means a large amount of people will not see ads fast enough, that loses them money. But someone who comes to read your blog will wait 300ms to read your article, no worries.
+**A**: Again, who cares? For Facebook, a microsecond could mean a large amount of people will miss some ads, and that costs them profits. But someone who comes to read your blog will wait 300ms to read your article, no worries.
 
 ### Q: What about accessibility?
 
@@ -61,7 +63,9 @@ It's important to know that Tickle is an *idea*. Think of it as a specification.
 
 ### Q: What's the license?
 
-**A**: The license is [[upcoming]]
+**A**: The license is upcoming
+
+TODO: decide on a license
 
 ### Q: "Tickle"?
 
diff --git a/tutorial-hackers.md b/tutorial-hackers.md
index fc34771..41eaad8 100644
--- a/tutorial-hackers.md
+++ b/tutorial-hackers.md
@@ -6,4 +6,6 @@ Tickle consists of 3 distinct and simple parts:
 2. parses markdown files in the browser
 3. displays the markdown files
 
-To parse markdown files, the default implementation uses Micromark, but feel free to plug any parser you like.
\ No newline at end of file
+To parse markdown files, the default implementation uses Micromark, but feel free to plug any parser you like.
+
+The source is commented fairly well, and your best bet is to check out the [examples](examples.md).
\ No newline at end of file
diff --git a/tutorial-publishers.md b/tutorial-publishers.md
index 17e50c1..803522f 100644
--- a/tutorial-publishers.md
+++ b/tutorial-publishers.md
@@ -5,20 +5,24 @@ Unfortunately, we couldn't remove entirely all the technicalities. But we've man
 There are 4 steps to writing articles in Tickle:
 
 1. Write the articles in Markdown
-2. List the articles in a file
+2. Optionally, list the articles in a file
 3. Optionally, preview the site locally before uploading
 4. Upload everything on a server
 
-We have a desktop app that takes care of steps 1, 2, and 3 (and maybe some day step 4!). It's comfy, made with love, and you can install it from https://git.poto.cafe/yagich/ticle-godot-frontend
+We have a desktop app that takes care of steps 1, 2, and 3 (and maybe some day step 4!). It's comfy, made with love, and you can install it from https://git.poto.cafe/yagich/tickle-godot-frontend
 
-But if you want to do the things manually, read on. You need to do step 4 manually either way.
+But if you want to do the things manually, read on (You need to do step 4 manually either way).
 
 ## 1. Write A Few Articles
 
-You will need some knowledge of Markdown. This is how we write the articles. It's really not hard! In fact, it looks very similar to how you already use characters in chat for emphasis. Check [a reference here](https://commonmark.org/help/). Create a document, call it "my-first-article.md" for example (`.md` stands for "markdown"). Write some text in it.
+You will need some knowledge of Markdown. This is how we write the articles. It's really not hard! In fact, it looks very similar to how you already use characters in chat for emphasis. Check [a reference here](https://commonmark.org/help/). 
+
+For example: create a document, call it "my-first-article.md" for example (`.md` stands for "markdown"). Write some text in it. Want an example of markdown? Press `?` on any Tickle page in any Tickle site to display the source.
 
 ## 2. Create the List of Files
 
+This is optional, and is used to fill the side navigation. Without this step though, your site will be empty, so you need to write at least one page in it.
+
 Once you have written a document, you then open a new file, call it "files.txt". At the top, write:
 
 ```
@@ -31,9 +35,7 @@ At this state, the site is "ready". You can upload it, but before that, you prob
 
 ## 3. Preview the site
 
-You will need to run a server. The easier server to run is [our own](https://git.poto.cafe/yagich/ticle-godot-frontend), but if you want other options, you want to search for "easy http server", and see what you get.
-
-- TODO: list a few good options here
+You will need to run a server. The easier server to run is [our own](https://git.poto.cafe/yagich/ticle-godot-frontend), but if you want other options, [XAMPP](https://www.apachefriends.org/download.html) is a good one (but is not specialized for Tickle).
 
 Once you have the server up and running, you can open a browser to the address the site opened. Usually, something like http://localhost:3000. The number is arbitrary and might be anything; it depends on the server.
 
diff --git a/tutorial-styling.md b/tutorial-styling.md
new file mode 100644
index 0000000..cfae5f0
--- /dev/null
+++ b/tutorial-styling.md
@@ -0,0 +1,13 @@
+# Styling Tickle
+
+Tickle's CSS is kept very simple on purpose. It matches elements, rather than classes, because that's less clutter.
+
+If you just want to change the color scheme and fonts, you have css variables in the `:root` selector, which you can use for that.
+
+If you want to add more styles, or edit styles, be aware that:
+
+1. Modalities of the page are handled through toggling classes on the `body` element. Those modalities are:
+   1. `is-loading`: for when the loading overlay is shown
+   2. `menu-is-open`: for when the menu and overlay are open
+   3. `is-source-enabled`: for when the markdown source is shown
+2. The navigation burger button *becomes* the open menu overlay. That saves an element and is neat, but it means that if you have transitions on your button, you'll get strange flashes as the button stretches and cover the entire page.
\ No newline at end of file