├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── _demo ├── 01.home │ ├── 01.control │ │ ├── 01.if │ │ │ ├── 01.switch │ │ │ │ ├── banner.webp │ │ │ │ └── default.md │ │ │ ├── crossroads.webp │ │ │ ├── default.md │ │ │ └── dog.webp │ │ ├── 02.for │ │ │ ├── cube.webp │ │ │ ├── default.md │ │ │ └── track.webp │ │ ├── 03.while │ │ │ ├── banner.webp │ │ │ ├── default.md │ │ │ └── loops.webp │ │ └── collection.md │ ├── 02.variables │ │ ├── banner.webp │ │ ├── boxes.webp │ │ └── default.md │ ├── 03.closures │ │ ├── banner.webp │ │ ├── body.webp │ │ └── default.md │ ├── 04.booleans │ │ ├── banner.webp │ │ ├── body.webp │ │ └── default.md │ ├── 05.trycatch │ │ ├── banner.webp │ │ ├── default.md │ │ └── glass.webp │ ├── better_header.webp │ ├── collection.md │ ├── cozy_web.webp │ └── header_image.png ├── images │ └── favicon.png └── pages │ ├── 01.home │ ├── default.md │ └── win95.png │ ├── 02.reference │ ├── 01.jpg │ ├── air.png │ ├── collection-examples.gif │ ├── default.md │ ├── htplus.png │ ├── latex.png │ ├── marx.png │ ├── modest.png │ ├── sakura-dark-solar.png │ ├── sakura-dark.png │ ├── sakura-earth.png │ ├── sakura-vader.png │ ├── sakura.png │ ├── structure_tab.png │ ├── stylize.png │ ├── tacit.png │ ├── theme_settings_intro.png │ ├── tufte.png │ ├── w3c-chocolate.png │ ├── w3c-midnight.png │ ├── w3c-modernist.png │ ├── w3c-oldstyle.png │ ├── w3c-steely.png │ ├── w3c-swiss.png │ ├── w3c-traditional.png │ ├── w3c-ultramarine.png │ ├── water-dark.png │ ├── water-light.png │ ├── writ.png │ └── yorha.png │ ├── 03.typography │ └── default.md │ └── 04.demos │ ├── 01.blog │ ├── 01.january │ │ ├── calendar.jpg │ │ ├── default.md │ │ ├── jan-header.jpg │ │ └── january.jpg │ ├── 02.february │ │ ├── calendar.jpg │ │ ├── default.md │ │ ├── feb-header.jpg │ │ ├── february_01.jpg │ │ └── february_02.jpg │ ├── 03.march │ │ ├── calendar.jpg │ │ ├── default.md │ │ └── mar-header.jpg │ ├── 04.april │ │ ├── apr-header.jpg │ │ ├── calendar.jpg │ │ └── default.md │ ├── 05.may │ │ ├── calendar.jpg │ │ ├── default.md │ │ └── may-header.jpg │ ├── 06.june │ │ ├── calendar.jpg │ │ ├── default.md │ │ └── jun-header.jpg │ ├── 07.july │ │ ├── calendar.jpg │ │ ├── default.md │ │ └── jul-header.jpg │ └── blog.md │ ├── 02.collection │ ├── 01.dogs │ │ └── item.md │ ├── 02.cats │ │ └── item.md │ ├── 03.birds │ │ └── item.md │ ├── 04.fish │ │ └── item.md │ ├── 05.reptiles │ │ └── item.md │ ├── 06.rocks │ │ └── item.md │ ├── 07.cactus │ │ └── item.md │ └── collection.md │ ├── 03.testing │ ├── 01.first-post │ │ └── item.md │ ├── 02.second-best │ │ └── item.md │ ├── 03.third-base │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ ├── 04.fourth-of-july │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ ├── 05.staying-alive-with-five │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ ├── 06.six-sticks │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ ├── 07.seven-in-heaven │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ ├── 08.eight-way-hexagon │ │ ├── item.md │ │ ├── kitten.jpg │ │ └── puppy.jpg │ └── blog.md │ └── collection.md ├── assets ├── screenshot.png └── win95.png ├── blueprints.yaml ├── blueprints ├── blog.yaml ├── blog_item.yaml ├── blog_list.yaml ├── collection.yaml ├── default.yaml └── item.yaml ├── css ├── air.css ├── hypertext++.css ├── latex.css ├── marx.css ├── milligram.css ├── modest.css ├── mvp.css ├── newcss-default.css ├── newcss-night.css ├── newcss-terminal.css ├── sakura-dark-solarized.css ├── sakura-dark.css ├── sakura-earthly.css ├── sakura-ink.css ├── sakura-pink.css ├── sakura-radical.css ├── sakura-vader.css ├── sakura.css ├── simple.css ├── stylize.css ├── tacit.css ├── tufte.css ├── visual-impaired.css ├── water-dark.css ├── water-light.css ├── writ.css └── yorha.css ├── fonts ├── TTF │ ├── Atkinson-Hyperlegible-Bold-102.ttf │ ├── Atkinson-Hyperlegible-BoldItalic-102.ttf │ ├── Atkinson-Hyperlegible-Italic-102.ttf │ └── Atkinson-Hyperlegible-Regular-102.ttf ├── WOFF │ ├── Atkinson-Hyperlegible-Bold-102.woff │ ├── Atkinson-Hyperlegible-BoldItalic-102.woff │ ├── Atkinson-Hyperlegible-Italic-102.woff │ └── Atkinson-Hyperlegible-Regular-102.woff └── WOFF2 │ ├── Atkinson-Hyperlegible-Bold-102a.woff2 │ ├── Atkinson-Hyperlegible-BoldItalic-102a.woff2 │ ├── Atkinson-Hyperlegible-Italic-102a.woff2 │ └── Atkinson-Hyperlegible-Regular-102a.woff2 ├── hypertext.php ├── hypertext.yaml ├── languages.yaml ├── screenshot.jpg ├── templates ├── blog.html.twig ├── blog_item.html.twig ├── blog_list.html.twig ├── collection.html.twig ├── css │ ├── air.css │ ├── hypertext++.css │ ├── latex.css │ ├── marx.css │ ├── milligram.css │ ├── modest.css │ ├── mvp.css │ ├── newcss-default.css │ ├── newcss-night.css │ ├── newcss-terminal.css │ ├── sakura-dark-solarized.css │ ├── sakura-dark.css │ ├── sakura-earthly.css │ ├── sakura-ink.css │ ├── sakura-pink.css │ ├── sakura-radical.css │ ├── sakura-vader.css │ ├── sakura.css │ ├── simple.css │ ├── stylize.css │ ├── tacit.css │ ├── tufte.css │ ├── visual-impaired.css │ ├── water-dark.css │ ├── water-light.css │ ├── writ.css │ └── yorha.css ├── default.html.twig ├── error.html.twig ├── item.html.twig ├── modular.html.twig └── partials │ ├── base.html.twig │ ├── breadcrumbs.html.twig │ ├── item │ ├── README.md │ ├── children.html.twig │ ├── footer.html.twig │ ├── grid.html.twig │ ├── header.html.twig │ ├── list.html.twig │ ├── summary.html.twig │ └── table.html.twig │ └── page │ ├── README.md │ ├── footer.html.twig │ ├── header.html.twig │ ├── js-css.html.twig │ ├── messages.html.twig │ ├── navigation.html.twig │ └── pagination.html.twig └── thumbnail.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Alejo Grigera Sutro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /_demo/01.home/01.control/01.if/01.switch/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/01.if/01.switch/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/01.if/01.switch/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Switch Statements' 3 | allowCSS: default 4 | allowJS: default 5 | subtitle: 'Leveraging Switch Statements for Efficient Code in JavaScript' 6 | show_header_image: false 7 | show_clickthrough: true 8 | --- 9 | 10 | === 11 | 12 | ![An image depicting a railway switch with tracks diverging in multiple directions, symbolizing the concept of switch statements in programming.](banner.webp) 13 | 14 | Hello, fellow coders! It’s Michelle from Ontario, diving deep into a JavaScript feature that, while simple, can significantly streamline your code: the switch statement. Especially useful in scenarios involving numerous conditions that affect the flow of execution, the switch statement provides a cleaner, more readable alternative to lengthy `if-else` chains. 15 | 16 | ## Basics of Switch Statements 17 | 18 | The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case. Here's a basic example: 19 | 20 | ```javascript 21 | let fruit = 'apple'; 22 | 23 | switch (fruit) { 24 | case 'apple': 25 | console.log('Apples are $0.99 per pound.'); 26 | break; 27 | case 'banana': 28 | console.log('Bananas are $0.59 per pound.'); 29 | break; 30 | default: 31 | console.log('Sorry, we are out of ' + fruit + '.'); 32 | } 33 | ``` 34 | 35 | In this example, the switch statement checks the value of `fruit` and prints the price per pound based on the fruit type. The `break` keyword prevents the script from falling through to the next case, and the `default` case provides a fallback if no matching cases are found. 36 | 37 | ## When to Use Switch Statements 38 | 39 | Switch statements are most effective when dealing with multiple discrete values of a single variable or expression. They're particularly useful in scenarios where you're checking the same variable against many constant values. This can make your code cleaner and more efficient compared to using multiple `if-else` statements, which might be harder to read and maintain. 40 | 41 | ## Advanced Use: Grouping Cases 42 | 43 | You can streamline your switch statements further by grouping multiple cases that execute the same code. This is useful when multiple inputs should trigger the same output: 44 | 45 | ```javascript 46 | switch (fruit) { 47 | case 'apple': 48 | case 'mango': 49 | case 'pear': 50 | console.log('This fruit is $1.99 per pound.'); 51 | break; 52 | case 'banana': 53 | case 'orange': 54 | console.log('This fruit is $0.99 per pound.'); 55 | break; 56 | default: 57 | console.log('Sorry, we are out of ' + fruit + '.'); 58 | } 59 | ``` 60 | 61 | Here, multiple fruits share the same price, reducing redundancy in your code. 62 | 63 | ## Using Switch Statements with Complex Conditions 64 | 65 | While switch statements traditionally work with simple comparisons, you can use them in more complex scenarios by evaluating expressions that return specifically crafted values. This can include concatenating strings, performing calculations, or using functions that return values to match against cases: 66 | 67 | ```javascript 68 | let a = 1, b = 2; 69 | switch (true) { 70 | case a + b === 3: 71 | console.log('The sum of a and b is 3'); 72 | break; 73 | case a + b === 4: 74 | console.log('The sum of a and b is 4'); 75 | break; 76 | default: 77 | console.log('Default case'); 78 | } 79 | ``` 80 | 81 | This technique, where `true` is used as the switch expression, allows you to handle more dynamic conditions, providing greater flexibility in how you use switch statements. 82 | 83 | ![An image showing a complex circuit board with different pathways lighting up, representing complex conditions in switch statements.](body.webp) 84 | 85 | ## Best Practices for Using Switch Statements 86 | 87 | To maximize the effectiveness of switch statements in your code: 88 | 1. **Use them when you have three or more conditions** involving the same variable or expression. 89 | 2. **Always include a `default` case** to handle unexpected or unknown values gracefully. 90 | 3. **Group cases** to minimize code duplication when multiple conditions result in the same action. 91 | 4. **Be cautious with fall-through behavior** unless explicitly needed; always end each case with a `break`, unless you have a specific reason to chain cases together. 92 | 93 | Switch statements can significantly tidy up your code, making it easier to read and maintain, especially in complex decision-making scenarios. Try refactoring an existing chunk of `if-else` conditions with a switch and see the clarity it brings to your codebase! Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/01.control/01.if/crossroads.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/01.if/crossroads.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/01.if/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'If Statements' 7 | media_order: 'crossroads.webp,dog.webp' 8 | subtitle: 'Conditionals make your code work right.' 9 | --- 10 | 11 | === 12 | 13 | Hello, fellow coders! It’s Michelle here, sharing some insights from the chilly but beautiful Ontario, Canada. When I'm not baking or taking my dogs, Jasper and Cody, for a swim, I love diving into the world of coding. Today, I'm excited to walk you through one of the foundational concepts in JavaScript — the **if statement**. Whether you're just starting out or you're looking to brush up on your basics, understanding if statements is crucial for controlling the flow of your programs. 14 | 15 | ## What is an If Statement? 16 | 17 | An if statement in JavaScript allows you to make decisions in your code based on conditions. Think of it as a crossroad where you can choose which path to take based on the conditions met. Here’s the simplest form of an if statement: 18 | 19 | ```javascript 20 | if (condition) { 21 | // code to execute if condition is true 22 | } 23 | ``` 24 | 25 | For example, let's say we want our program to greet us only in the morning. Here’s how you might write that: 26 | 27 | ```javascript 28 | let hour = new Date().getHours(); // Gets the current hour 29 | if (hour < 12) { 30 | console.log("Good morning!"); 31 | } 32 | ``` 33 | 34 | ![An image showing a cartoon of a person standing at a crossroads with signs pointing to "True" and "False" paths, symbolizing an if statement decision-making process.](crossroads.webp) 35 | 36 | ## Adding Complexity: Else and Else If 37 | 38 | As you get more comfortable with basic if statements, you might find that you need more options. That's where `else` and `else if` come into play. These allow you to handle multiple conditions by chaining them together. Here’s a look at a more complex scenario: 39 | 40 | ```javascript 41 | if (hour < 12) { 42 | console.log("Good morning!"); 43 | } else if (hour < 18) { 44 | console.log("Good afternoon!"); 45 | } else { 46 | console.log("Good evening!"); 47 | } 48 | ``` 49 | 50 | This code checks the time of day and greets you accordingly. It’s a great example of how if statements can be expanded to cover multiple conditions, making your programs smarter and more interactive. 51 | 52 | ## Practical Application: A Real-World Example 53 | 54 | Let’s put our knowledge into practice with a real-world application. Suppose we're building a website feature that recommends a pet activity based on the weather: 55 | 56 | ```javascript 57 | let weather = "sunny"; 58 | let temperature = 20; // in degrees Celsius 59 | 60 | if (weather === "rainy") { 61 | console.log("It's rainy. Let's stay indoors and play fetch!"); 62 | } else if (weather === "sunny" && temperature > 20) { 63 | console.log("It's warm and sunny. Perfect for a swim!"); 64 | } else if (weather === "sunny" && temperature <= 20) { 65 | console.log("It's cool but sunny. How about a nice walk?"); 66 | } else { 67 | console.log("Unique weather today! Let's just chill inside."); 68 | } 69 | ``` 70 | 71 | This example demonstrates using both multiple conditions and combining conditions with logical operators (`&&`), increasing the sophistication of our decisions. 72 | 73 | ![An image depicting a cartoon scenario where a dog chooses between toys based on different weather conditions displayed on a computer screen.](dog.webp) 74 | 75 | If statements are a powerful tool in your JavaScript toolkit. They allow your programs to react dynamically to different inputs and situations, much like choosing what to bake based on what ingredients you have at home or deciding whether it's a good day for a swim. Dive into these examples, tweak them, and watch how they can transform your code. Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/01.control/01.if/dog.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/01.if/dog.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/02.for/cube.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/02.for/cube.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/02.for/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'For Loops' 7 | media_order: 'cube.webp,track.webp' 8 | subtitle: 'Understanding code flow' 9 | --- 10 | 11 | === 12 | 13 | Hey there, it’s Michelle from Ontario, where the weather is as unpredictable as a tricky piece of code! Whether I’m baking up a storm or planning the next fun outing with my dogs, Jasper and Cody, I find that planning and sequencing are key. This is very much like using **for loops** in JavaScript, which are fundamental for controlling code flow and handling repetitive tasks efficiently. Let’s break down this concept for both beginners and those looking to refresh their skills. 14 | 15 | ## The Basics of For Loops 16 | 17 | A for loop is a control flow statement that repeats a block of code a known number of times. This makes it incredibly useful for executing code repeatedly without writing the same line of code over and over. Here’s the basic syntax of a for loop in JavaScript: 18 | 19 | ```javascript 20 | for (initialization; condition; final-expression) { 21 | // code to be executed 22 | } 23 | ``` 24 | 25 | Here’s a simple example to illustrate this: 26 | 27 | ```javascript 28 | for (let i = 0; i < 5; i++) { 29 | console.log('Loop iteration number ' + i); 30 | } 31 | ``` 32 | 33 | This loop will print out a message five times, incrementing the number `i` from 0 to 4. Each iteration updates `i` until the condition `i < 5` is no longer true. 34 | 35 | ![An image showing a cartoon person running on a looping track, counting each lap, symbolizing the iterations of a for loop.](track.webp) 36 | 37 | ## Expanding Your Use of For Loops 38 | 39 | Once you're comfortable with the basic for loop, you can start to explore more complex scenarios. For loops are extremely versatile and can be used to navigate through arrays, interact with HTML elements, or even handle nested data structures. Here’s a more complex example that demonstrates iterating over an array: 40 | 41 | ```javascript 42 | let pets = ['Jasper', 'Cody', 'Molly', 'Bella']; 43 | 44 | for (let i = 0; i < pets.length; i++) { 45 | console.log(pets[i] + ' is a great pet!'); 46 | } 47 | ``` 48 | 49 | This loop goes through each element in the `pets` array and prints out a message for each pet. It’s a straightforward way to handle multiple items without repeating your code. 50 | 51 | ## Practical Application: Nested For Loops 52 | 53 | When you start working with more complex data structures like matrices or need to perform operations on multi-dimensional arrays, nested for loops become invaluable. Here’s an example where we use a nested for loop to print a simple 3x3 number grid: 54 | 55 | ```javascript 56 | for (let i = 0; i < 3; i++) { 57 | for (let j = 0; j < 3; j++) { 58 | console.log(`Row ${i + 1}, Column ${j + 1}: ${i * 3 + j + 1}`); 59 | } 60 | } 61 | ``` 62 | 63 | This loop uses two variables, `i` and `j`, to manage rows and columns, respectively, demonstrating how nested loops work in a practical scenario. 64 | 65 | ![An image depicting a grid with numbers filling each cell, demonstrating the output of a nested for loop.](cube.webp) 66 | 67 | For loops are like the rhythm in music or the steps in a dance routine, providing your programs with the structure and flow needed to perform tasks efficiently and effectively. Dive into these examples, experiment with modifications, and see how versatile for loops can be in your coding projects. Keep practicing, and soon you’ll be looping like a pro! Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/01.control/02.for/track.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/02.for/track.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/03.while/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/03.while/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/03.while/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'While & Do While' 7 | media_order: 'loops.webp,banner.webp' 8 | subtitle: 'More options for code flow.' 9 | --- 10 | 11 | === 12 | 13 | ![A banner image depicting a cartoon coder sitting at a desk, surrounded by looping arrows and question marks to symbolize decision-making in loop structures.](banner.webp) 14 | 15 | Hello again from Ontario! Michelle here, ready to take you through another exciting coding journey. Today, we're focusing on two powerful types of loops in JavaScript: while loops and do-while loops. These loops are crucial for executing code repeatedly under specific conditions, giving you more control over your program's flow. Let's dive into the basics and then explore how you can utilize these loops in more complex scenarios. 16 | 17 | ## Understanding While Loops 18 | 19 | A `while` loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The loop executes the code block as long as the condition remains true. Here’s the syntax: 20 | 21 | ```javascript 22 | while (condition) { 23 | // code block to be executed 24 | } 25 | ``` 26 | 27 | Here's a straightforward example to demonstrate a while loop: 28 | 29 | ```javascript 30 | let i = 0; 31 | while (i < 5) { 32 | console.log('Loop iteration number ' + i); 33 | i++; 34 | } 35 | ``` 36 | 37 | This loop will continue to print the iteration number and increment `i` by 1 until `i` is no longer less than 5. 38 | 39 | ## Exploring Do-While Loops 40 | 41 | The do-while loop is a variant of the while loop, which guarantees that the code block will execute at least once before checking if the condition is true, then it will repeat the loop as long as the condition remains true. Here’s how you can write a do-while loop: 42 | 43 | ```javascript 44 | do { 45 | // code block to be executed 46 | } while (condition); 47 | ``` 48 | 49 | To see this in action, consider this example: 50 | 51 | ```javascript 52 | let i = 0; 53 | do { 54 | console.log('Loop iteration number ' + i); 55 | i++; 56 | } while (i < 5); 57 | ``` 58 | 59 | This will function similarly to the previous while loop example, but here, the code block is guaranteed to execute at least once, which is useful in scenarios where the initial condition needs to be tested after execution. 60 | 61 | ## Comparing While and Do-While 62 | 63 | Understanding the difference between while and do-while loops is crucial for implementing the correct loop based on your specific needs. While both loops are great for cases where the number of iterations isn’t known upfront, choosing the right type of loop can affect the logic and performance of your code. 64 | 65 | - **While loops** are useful when you need to check the condition before executing the loop body, which might be necessary if the loop shouldn’t run at all under certain conditions. 66 | - **Do-while loops** are excellent when the loop must run at least once, such as prompting a user for input and validating that input. 67 | 68 | ![An image illustrating a person at a fork in a path, choosing between paths labeled "While Loop" and "Do While Loop", symbolizing the decision-making process in choosing loop types.](loops.webp) 69 | 70 | ## Practical Applications and Tips 71 | 72 | As you start to incorporate while and do-while loops into your projects, consider scenarios that fit their strengths. For example, a while loop is perfect for reading a stream of data where the end condition is not known beforehand. A do-while loop, on the other hand, is great for menu systems where the user should always see the menu at least once. 73 | 74 | Here's a practical application for a menu system using a do-while loop: 75 | 76 | ```javascript 77 | let input; 78 | do { 79 | input = prompt('Enter your choice (1-5):'); 80 | console.log('You selected option ' + input); 81 | } while (input !== '5'); // Continue until '5' is selected to quit 82 | ``` 83 | 84 | This example showcases how do-while loops are effective for handling user input where at least one interaction with the user is necessary. 85 | 86 | By mastering these loops, you can significantly enhance your ability to control the flow of your JavaScript applications, making your code more efficient and responsive to various runtime conditions. Dive in, experiment, and see the power of loops in action! -------------------------------------------------------------------------------- /_demo/01.home/01.control/03.while/loops.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/01.control/03.while/loops.webp -------------------------------------------------------------------------------- /_demo/01.home/01.control/collection.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Control Flows' 3 | allowCSS: default 4 | allowJS: default 5 | subtitle: 'Exploring Program Control Flows in JavaScript' 6 | show_header_image: false 7 | show_clickthrough: true 8 | content: 9 | items: 10 | - '@self.children' 11 | order: 12 | by: folder 13 | dir: desc 14 | sibling_links: false 15 | render: 16 | children: 17 | style: summary 18 | image: false 19 | subtitle: true 20 | category: true 21 | date: false 22 | which_date: date 23 | nested_children: true 24 | taxonomy: 25 | category: 26 | - 'essential tutorials' 27 | - 'advanced tutorials' 28 | tag: 29 | - 'basic techniques' 30 | - 'advanced techniques' 31 | --- 32 | 33 | === 34 | 35 | ![Placeholder for an image depicting a flowchart with arrows guiding paths between different programming symbols, representing the concept of program control flows.](placeholder-image) 36 | 37 | Hi, Michelle here! Today, let's dive into the world of program control flows in JavaScript, a fundamental concept that guides the order in which your code executes. Control flow statements like `if-else`, `switch`, loops (`for`, `while`, `do-while`), and conditional operators dictate how your program responds to different conditions and how it iterates through data. For example, `if-else` allows you to execute code based on certain conditions: 38 | 39 | ```javascript 40 | if (temperature > 30) { 41 | console.log("It's hot outside!"); 42 | } else { 43 | console.log("It's not so hot today."); 44 | } 45 | ``` 46 | 47 | Adding loops into the mix, we can handle repetitive tasks efficiently: 48 | 49 | ```javascript 50 | for (let i = 0; i < 5; i++) { 51 | console.log("Loop iteration:", i); 52 | } 53 | ``` 54 | 55 | Each control flow statement serves a unique purpose, enabling you to build more dynamic, responsive, and powerful web applications. Understanding and mastering these will significantly enhance your coding proficiency! -------------------------------------------------------------------------------- /_demo/01.home/02.variables/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/02.variables/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/02.variables/boxes.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/02.variables/boxes.webp -------------------------------------------------------------------------------- /_demo/01.home/02.variables/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'Variables: Declaration, Naming, and Scoping' 7 | media_order: 'boxes.webp,banner.webp' 8 | subtitle: 'Understand and use variables like a pro. From naming to long subtitles for testing, variables are just the greatest and most wonderful thing you can use.' 9 | taxonomy: 10 | category: 11 | - 'essential tutorials' 12 | tag: 13 | - variables 14 | - 'variable naming' 15 | --- 16 | 17 | === 18 | 19 | ![A banner image depicting an artist painting different symbols and characters on a canvas, symbolizing the creativity and rules in variable naming and declaration in programming.](banner.webp) 20 | 21 | Hello everyone, it's Michelle here from Ontario, excited to guide you through the fundamentals of variables in JavaScript. Understanding how to properly declare, name, and scope variables is essential for writing clear and effective code. Whether you're just starting out or looking to solidify your understanding, mastering these concepts will help you avoid common pitfalls and enhance your programming skills. 22 | 23 | ## Declaring Variables in JavaScript 24 | 25 | Variables are containers for storing data values. In JavaScript, there are three primary ways to declare a variable: using `var`, `let`, or `const`. Each has its own implications for usage and scope: 26 | 27 | ```javascript 28 | var name = 'Michelle'; // Function scoped or globally scoped 29 | let age = 31; // Block scoped 30 | const city = 'Ontario'; // Block scoped, and the value cannot be reassigned 31 | ``` 32 | 33 | - `var` is the oldest keyword and is function scoped when declared inside a function and globally scoped if declared outside a function. 34 | - `let` and `const` are both block scoped, which means they are only accessible within the nearest set of curly braces `{}` (e.g., a loop or an if statement). 35 | 36 | ## Naming Variables 37 | 38 | Choosing meaningful and descriptive names for your variables is crucial as it makes your code more readable and maintainable. Here are some tips for effective variable naming: 39 | 40 | - Use names that describe the variable's purpose. 41 | - Stick to camelCase formatting as it's the convention in JavaScript. 42 | - Avoid using JavaScript reserved words (like `new`, `class`, etc.). 43 | - Keep names concise but informative. 44 | 45 | Here's an example of good versus poor variable naming: 46 | 47 | ```javascript 48 | let d = new Date(); // Poor naming 49 | let currentDate = new Date(); // Good naming 50 | 51 | let minutes = currentDate.getMinutes(); // Clearly indicates what the variable holds 52 | ``` 53 | 54 | ## Understanding Variable Scope 55 | 56 | Variable scope refers to the availability of variables in different parts of your code. In JavaScript, scope is controlled by the location of variable declaration: 57 | 58 | ```javascript 59 | function startCar(carId) { 60 | let message = 'Starting...'; // 'message' is only accessible within startCar 61 | } 62 | 63 | if (carId > 1000) { 64 | let start = true; // 'start' is only accessible within this if block 65 | } 66 | ``` 67 | 68 | Here, `message` and `start` are examples of block-scoped variables. They cannot be accessed outside their respective blocks, demonstrating how `let` helps prevent variables from leaking out into the global scope. 69 | 70 | ![An image depicting boxes within larger boxes, each labeled with different variable names, illustrating the concept of variable scope.](boxes.webp) 71 | 72 | ## Scoping Pitfalls and Best Practices 73 | 74 | Improper scoping can lead to bugs that are hard to trace. For example, if you accidentally declare a variable without `var`, `let`, or `const`, it becomes global and might interfere with other parts of your code. Here’s an example of a scoping pitfall: 75 | 76 | ```javascript 77 | function setAlarm(time) { 78 | alarmTime = time; // Incorrectly creates a global variable 79 | } 80 | ``` 81 | 82 | To avoid such pitfalls: 83 | - Always declare variables with `var`, `let`, or `const`. 84 | - Use `let` or `const` for block-level scoping to limit where variables can be accessed. 85 | - Consider using linters or other tools to catch common errors. 86 | 87 | Understanding and applying these principles of variable declaration, naming, and scoping will make you a more proficient JavaScript developer. Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/03.closures/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/03.closures/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/03.closures/body.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/03.closures/body.webp -------------------------------------------------------------------------------- /_demo/01.home/03.closures/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'Unraveling JavaScript Closures' 7 | subtitle: 'A great way to understand functional programming.' 8 | media_order: 'body.webp,banner.webp' 9 | taxonomy: 10 | category: 11 | - 'advanced tutorials' 12 | tag: 13 | - closures 14 | - 'advanced techniques' 15 | --- 16 | 17 | === 18 | 19 | ![A banner image depicting a magical book with code symbols floating around it, symbolizing the mysterious and powerful concept of closures in JavaScript.](banner.webp) 20 | 21 | Hi everyone, Michelle here from the scenic landscapes of Ontario. Today, I’m excited to delve into a more advanced but incredibly powerful aspect of JavaScript: closures and functional programming. Understanding these concepts can truly elevate your coding skills and enable you to write cleaner, more efficient code. 22 | 23 | ## What is a Closure? 24 | 25 | In JavaScript, a closure is a function that remembers its outer variables even after the outer function has returned. This means that a function defined inside another function continues to access external variables aside from its own scope. Here’s a simple example to illustrate this: 26 | 27 | ```javascript 28 | function greet(message) { 29 | return function(name) { 30 | console.log(message + ', ' + name); 31 | }; 32 | } 33 | 34 | const greetHello = greet('Hello'); 35 | greetHello('Michelle'); // Outputs: "Hello, Michelle" 36 | ``` 37 | 38 | In this example, `greetHello` is a closure that remembers the value of `message` even after the outer function `greet` has finished executing. This is powerful because it allows the function to maintain state in between executions. 39 | 40 | ## Functional Programming Basics 41 | 42 | Functional programming (FP) is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. In JavaScript, FP can be utilized to create more predictable and bug-free code. Here’s an example that demonstrates the FP concept using the `map` function, which is a cornerstone of functional programming: 43 | 44 | ```javascript 45 | const numbers = [1, 2, 3, 4, 5]; 46 | const squaredNumbers = numbers.map(number => number * number); 47 | console.log(squaredNumbers); // Outputs: [1, 4, 9, 16, 25] 48 | ``` 49 | 50 | This example shows how `map` transforms a list of numbers into a new list of numbers without modifying the original array, adhering to the FP principle of immutability. 51 | 52 | ## Advanced Closure: Creating Private Variables 53 | 54 | One of the most practical uses of closures is to create private variables that cannot be accessed directly from outside the function. This is an important aspect of encapsulation in JavaScript. Here’s a more complex example: 55 | 56 | ```javascript 57 | function createCounter() { 58 | let count = 0; // 'count' is now a private variable 59 | return { 60 | increment() { 61 | count++; 62 | console.log(count); 63 | }, 64 | decrement() { 65 | count--; 66 | console.log(count); 67 | } 68 | }; 69 | } 70 | 71 | const counter = createCounter(); 72 | counter.increment(); // Outputs: 1 73 | counter.decrement(); // Outputs: 0 74 | ``` 75 | 76 | In this scenario, `count` is not accessible from outside `createCounter()`, and we can only modify it using the `increment` and `decrement` methods provided. 77 | 78 | ![An image showing a vault with a numeric keypad, representing the concept of private variables secured by closures.](body.webp) 79 | 80 | ## Practical Functional Programming: Pure Functions 81 | 82 | In functional programming, a pure function is a function where the return value is determined only by its input values, without observable side effects. This means if you call a pure function with the same arguments, you will always get the same result. Here’s an example of a pure function: 83 | 84 | ```javascript 85 | function add(a, b) { 86 | return a + b; 87 | } 88 | 89 | console.log(add(3, 4)); // Outputs: 7 90 | ``` 91 | 92 | This function always returns the same output for the same inputs, and it does not modify any external state, making it predictable and easy to test. 93 | 94 | Understanding closures and functional programming will not only help you write more efficient and secure JavaScript code but also prepare you for frameworks and libraries that heavily rely on these concepts, like React. Dive into these examples, explore more, and harness the power of functional programming in your projects! Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/04.booleans/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/04.booleans/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/04.booleans/body.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/04.booleans/body.webp -------------------------------------------------------------------------------- /_demo/01.home/04.booleans/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'Understanding Booleans' 7 | media_order: 'body.webp,banner.webp' 8 | taxonomy: 9 | category: 10 | - 'essential tutorials' 11 | tag: 12 | - 'code samples' 13 | - introduction 14 | --- 15 | 16 | === 17 | 18 | ![An image depicting a simple light switch in the on and off positions, symbolizing the binary nature of booleans.](banner.webp) 19 | 20 | Hi there! It’s Michelle here again, bringing you another essential JavaScript concept right from my cozy corner in Ontario. Today, we’re diving into the world of booleans. In JavaScript, as in many other programming languages, a boolean is a primitive data type that can hold one of two values: `true` or `false`. These are incredibly useful when making decisions in your code, controlling loops, and managing conditional logic. 21 | 22 | Booleans are often the result of comparisons or conditions. For example, when you compare two values, the result is a boolean: 23 | 24 | ```javascript 25 | let isGreater = 10 > 9; // true 26 | console.log(isGreater); // Outputs: true 27 | ``` 28 | 29 | This simple comparison checks if 10 is greater than 9, which is true, so `isGreater` holds the boolean value `true`. Booleans are straightforward but powerful. They direct the flow of execution in your programs through control structures like if-else statements and loops. 30 | 31 | ## Using Booleans with Conditional Statements 32 | 33 | One common use of booleans is within conditional statements, where they decide which code block to execute. Here's a practical example: 34 | 35 | ```javascript 36 | let temperature = 20; // degrees Celsius 37 | 38 | if (temperature > 25) { 39 | console.log("It's a hot day!"); 40 | } else { 41 | console.log("It's a pleasant day!"); 42 | } 43 | ``` 44 | 45 | In this case, the `if` statement checks a condition (`temperature > 25`), which evaluates to a boolean. Depending on whether it's `true` or `false`, a different message is printed. 46 | 47 | Booleans also come into play with logical operators, which allow you to combine multiple conditions. These operators include AND (`&&`), OR (`||`), and NOT (`!`), each manipulating boolean values to achieve complex conditions: 48 | 49 | ```javascript 50 | let isWeekend = true; 51 | let isHoliday = false; 52 | 53 | if (isWeekend && isHoliday) { 54 | console.log("Time for a long break!"); 55 | } else if (isWeekend || isHoliday) { 56 | console.log("Enjoy your day off!"); 57 | } else { 58 | console.log("Another day at work!"); 59 | } 60 | ``` 61 | 62 | This script uses both AND and OR operators to determine what message to display based on whether it’s a weekend, a holiday, or neither. 63 | 64 | ![An image showing a decision tree diagram with nodes labeled 'Weekend?', 'Holiday?', and actions like 'Work', 'Day Off', 'Long Break' to illustrate complex boolean logic.](body.webp) 65 | 66 | Booleans might seem simple at a glance, but they form the backbone of decision-making in programming. Whether you’re just starting out or brushing up on your JavaScript skills, understanding how to effectively use booleans will significantly improve your ability to handle logic in your coding projects. Dive in, experiment with different conditions, and see the powerful effects of booleans in action! Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/05.trycatch/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/05.trycatch/banner.webp -------------------------------------------------------------------------------- /_demo/01.home/05.trycatch/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: false 5 | show_clickthrough: true 6 | title: 'Try Catch Blocks' 7 | subtitle: 'Handling errors gracefully.' 8 | media_order: 'banner.webp,glass.webp' 9 | taxonomy: 10 | category: 11 | - 'advanced tutorials' 12 | tag: 13 | - 'code samples' 14 | - introduction 15 | - 'advanced techniques' 16 | --- 17 | 18 | === 19 | 20 | ![An image depicting a digital safety net catching falling code snippets, symbolizing error handling in programming.](banner.webp) 21 | 22 | Hello from Ontario! Michelle here to guide you through a crucial part of programming in JavaScript: error handling using try-catch blocks. As you embark on or continue your coding journey, understanding how to manage errors can make your applications more robust and user-friendly. Let’s dive into how you can implement effective error handling strategies in your projects. 23 | 24 | ## Understanding Error Handling 25 | 26 | Error handling is a method of responding to and resolving errors that occur in a program's execution, ensuring that the program doesn’t crash and can continue running or terminate gracefully. In JavaScript, the primary tool for managing runtime errors is the try-catch block. Here's the basic structure: 27 | 28 | ```javascript 29 | try { 30 | // Code that might throw an error 31 | } catch (error) { 32 | // Code to handle the error 33 | } 34 | ``` 35 | 36 | The `try` block contains the code that is expected to potentially throw an error, while the `catch` block defines what to do if an error occurs. This setup allows you to handle exceptions safely without stopping the entire program. 37 | 38 | ## Simple Try Catch Example 39 | 40 | Let’s start with a simple example. Suppose you have a function that expects a number as an argument but might receive something else: 41 | 42 | ```javascript 43 | function square(number) { 44 | if (typeof number !== 'number') { 45 | throw new Error('Argument must be a number'); 46 | } 47 | return number * number; 48 | } 49 | 50 | try { 51 | console.log(square('test')); 52 | } catch (error) { 53 | console.log(error.message); // Output will be "Argument must be a number" 54 | } 55 | ``` 56 | 57 | In this example, the `throw` statement creates a custom error message if the input is not a number. The error is then caught in the catch block, preventing the script from failing and allowing the error to be handled gracefully. 58 | 59 | ## Using Finally Clause 60 | 61 | In addition to `try` and `catch`, you can use the `finally` clause, which will execute after the try and catch blocks regardless of whether an error occurred. This is useful for cleaning up resources or performing final steps that need to happen no matter what: 62 | 63 | ```javascript 64 | try { 65 | console.log(square(2)); 66 | } catch (error) { 67 | console.log(error.message); 68 | } finally { 69 | console.log('Operation completed'); 70 | } 71 | ``` 72 | 73 | Here, no matter the outcome of the `try` or `catch`, the `finally` block will run, indicating the completion of the operation. 74 | 75 | ## Advanced Error Handling Strategies 76 | 77 | As your applications grow more complex, so might your error handling. You might encounter scenarios where different types of errors need different handling strategies. This is where knowing more about error types can come in handy: 78 | 79 | ```javascript 80 | try { 81 | // Some error-prone code 82 | } catch (error) { 83 | if (error instanceof TypeError) { 84 | console.log('Type error!'); 85 | } else if (error instanceof RangeError) { 86 | console.log('Range error!'); 87 | } else { 88 | console.log('Unknown error:', error); 89 | } 90 | } 91 | ``` 92 | 93 | This setup helps differentiate actions based on the type of error, allowing for more precise debugging and responses. 94 | 95 | ![An image showing a detective with a magnifying glass examining different error icons like exclamation marks and question marks, illustrating the investigation of various error types.](glass.webp) 96 | 97 | ## Practical Tips for Using Try Catch 98 | 99 | 1. **Use try-catch blocks judiciously**: Only use them where errors are expected and can be handled meaningfully. 100 | 2. **Log errors for debugging**: In the catch block, consider logging errors or sending them to a monitoring service for further analysis. 101 | 3. **Communicate with users**: Provide feedback to users when an error occurs, if appropriate, so they understand what went wrong and what to do next. 102 | 103 | Mastering try-catch blocks and error handling in JavaScript will not only improve the stability of your applications but also enhance user experience by handling potential issues seamlessly. Remember, the goal isn’t to prevent errors entirely but to deal with them in an efficient and user-friendly manner. Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/05.trycatch/glass.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/05.trycatch/glass.webp -------------------------------------------------------------------------------- /_demo/01.home/better_header.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/better_header.webp -------------------------------------------------------------------------------- /_demo/01.home/collection.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | show_header_image: true 5 | show_clickthrough: false 6 | title: 'Welcome to Hobbyist JavaScript!' 7 | media_order: 'cozy_web.webp,header_image.png,better_header.webp' 8 | subtitle: 'A demo website to teach people about javascript.' 9 | header_image_file: header_image.png 10 | thumbnail_image_file: header_image.png 11 | summary: { } 12 | content: 13 | items: 14 | - '@self.children' 15 | order: 16 | by: folder 17 | dir: desc 18 | sibling_links: false 19 | render: 20 | children: 21 | style: list 22 | image: true 23 | subtitle: true 24 | category: true 25 | date: false 26 | which_date: date 27 | nested_children: true 28 | --- 29 | 30 | === 31 | 32 | Hi there! I'm Michelle, and I've been tinkering with JavaScript for over a decade. I live in the vibrant province of Ontario, Canada, where I enjoy baking, swimming, and spending time with my two dogs, Jasper and Cody. Over the years, I've discovered the immense satisfaction that comes from building something from scratch — be it a delicious cake or a sleek web application. That's why I created this site: to help you learn the art of coding in JavaScript, even if you're just doing it for fun. 33 | 34 | ## Why Learn JavaScript? 35 | 36 | JavaScript is one of the most popular programming languages in the world and a cornerstone of web development. Whether you're looking to build interactive websites, develop games, or simply automate parts of your daily life, JavaScript can do it all. Here’s why learning JavaScript is a great choice: 37 | 38 | - **Versatility:** From front-end frameworks like React to back-end environments like Node.js, JavaScript is everywhere. 39 | - **Community:** The JavaScript community is one of the largest and most supportive. Whatever problem you face, someone has likely already solved it and written about it. 40 | - **Career Opportunities:** Knowing JavaScript opens up many doors in the tech industry, even if it starts as a hobby! 41 | 42 | ## How Can This Site Help You? 43 | 44 | Whether you're a complete beginner or looking to polish your skills, this site has something for you. Here’s how we can help: 45 | 46 | - **Interactive Tutorials:** Learn by doing with tutorials that let you write, test, and see your code run in real-time. 47 | - **Step-by-Step Guides:** From basic syntax to complex functions, our guides are detailed and easy to follow. 48 | - **Community Support:** Get help from fellow hobbyists through our community forum. 49 | 50 | To give you a sneak peek, here’s a simple piece of JavaScript code that you'll learn to write: 51 | 52 | ```javascript 53 | // A simple JavaScript program to display "Hello, World!" 54 | console.log("Hello, World!"); 55 | ``` 56 | 57 | And here's what you can expect visually when you're coding along with us: 58 | 59 | ![An image depicting a cozy study setup with a laptop open to a JavaScript coding tutorial, a notepad, a cup of coffee, and a view of a rainy window.](cozy_web.webp) 60 | 61 | Ready to dive in? Let’s start this journey together, one line of code at a time. Happy coding! -------------------------------------------------------------------------------- /_demo/01.home/cozy_web.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/cozy_web.webp -------------------------------------------------------------------------------- /_demo/01.home/header_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/01.home/header_image.png -------------------------------------------------------------------------------- /_demo/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/images/favicon.png -------------------------------------------------------------------------------- /_demo/pages/01.home/win95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/01.home/win95.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/01.jpg -------------------------------------------------------------------------------- /_demo/pages/02.reference/air.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/air.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/collection-examples.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/collection-examples.gif -------------------------------------------------------------------------------- /_demo/pages/02.reference/htplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/htplus.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/latex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/latex.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/marx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/marx.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/modest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/modest.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/sakura-dark-solar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/sakura-dark-solar.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/sakura-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/sakura-dark.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/sakura-earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/sakura-earth.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/sakura-vader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/sakura-vader.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/sakura.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/sakura.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/structure_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/structure_tab.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/stylize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/stylize.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/tacit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/tacit.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/theme_settings_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/theme_settings_intro.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/tufte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/tufte.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-chocolate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-chocolate.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-midnight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-midnight.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-modernist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-modernist.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-oldstyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-oldstyle.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-steely.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-steely.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-swiss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-swiss.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-traditional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-traditional.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/w3c-ultramarine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/w3c-ultramarine.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/water-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/water-dark.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/water-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/water-light.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/writ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/writ.png -------------------------------------------------------------------------------- /_demo/pages/02.reference/yorha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/02.reference/yorha.png -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/01.january/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/01.january/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/01.january/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'January is a lovely time of year' 5 | show_header_image: true 6 | header_image_file: jan-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'winter' 11 | - 'baking' 12 | tags: 13 | - 'birthday' 14 | - 'cold' 15 | - 'new-year' 16 | --- 17 | 18 | January is a lovely time of year, and it's my birthday month! 19 | 20 | === 21 | 22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 23 | 24 | ![An image of January.](january.jpg){align=left} 25 | 26 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 27 | 28 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 29 | 30 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 31 | 32 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 33 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/01.january/jan-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/01.january/jan-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/01.january/january.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/01.january/january.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/02.february/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/02.february/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/02.february/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'February is shorter than other months' 5 | show_header_image: true 6 | header_image_file: feb-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'winter' 11 | tags: 12 | - 'valentines' 13 | - 'cold' 14 | - 'shortened' 15 | --- 16 | 17 | Make sure you get your Valentine something nice! 18 | 19 | === 20 | 21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 22 | 23 | ![An image of February.](february_01.jpg) 24 | 25 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 26 | 27 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 28 | 29 | ![An image of February.](february_02.jpg) 30 | 31 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 32 | 33 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 34 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/02.february/feb-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/02.february/feb-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/02.february/february_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/02.february/february_01.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/02.february/february_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/02.february/february_02.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/03.march/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/03.march/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/03.march/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'March is when snow melts' 5 | show_header_image: true 6 | header_image_file: mar-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'spring' 11 | tags: 12 | - 'less-bleak' 13 | - 'rainy' 14 | --- 15 | 16 | Make sure you stay dry... 17 | 18 | === 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 21 | 22 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 23 | 24 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 25 | 26 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 27 | 28 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 29 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/03.march/mar-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/03.march/mar-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/04.april/apr-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/04.april/apr-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/04.april/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/04.april/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/04.april/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'April has some rain where I come from' 5 | show_header_image: true 6 | header_image_file: apr-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'spring' 11 | - 'baking' 12 | tags: 13 | - 'holiday' 14 | - 'rainy' 15 | - 'taxes' 16 | - 'april-fools' 17 | --- 18 | 19 | You can take time off in April. 20 | 21 | === 22 | 23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 24 | 25 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 26 | 27 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 28 | 29 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 30 | 31 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 32 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/05.may/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/05.may/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/05.may/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'May flowers are here!' 5 | show_header_image: true 6 | header_image_file: may-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'spring' 11 | tags: 12 | - 'flowers' 13 | - 'rainy' 14 | - 'pretty' 15 | --- 16 | 17 | May is good for weddings. 18 | 19 | === 20 | 21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 22 | 23 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 24 | 25 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 26 | 27 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 28 | 29 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 30 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/05.may/may-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/05.may/may-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/06.june/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/06.june/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/06.june/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'Forget the June gloom' 5 | show_header_image: true 6 | header_image_file: jun-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'summer' 11 | tags: 12 | - 'cookouts' 13 | - 'cloudy' 14 | --- 15 | 16 | June is when you get the BBQ out of storage. 17 | 18 | === 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 21 | 22 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 23 | 24 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 25 | 26 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 27 | 28 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 29 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/06.june/jun-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/06.june/jun-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/07.july/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/07.july/calendar.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/07.july/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | subtitle: 'July can get really hot' 5 | show_header_image: true 6 | header_image_file: jul-header.jpg 7 | thumbnail_image_file: calendar.jpg 8 | taxonomy: 9 | category: 10 | - 'summer' 11 | tags: 12 | - 'cookouts' 13 | - 'holiday' 14 | --- 15 | 16 | July means fireworks for fourth of july! 17 | 18 | === 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 21 | 22 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 23 | 24 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 25 | 26 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. 27 | 28 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 29 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/07.july/jul-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/01.blog/07.july/jul-header.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/01.blog/blog.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | content: 5 | items: 6 | - '@self.children' 7 | order: 8 | by: folder 9 | dir: desc 10 | --- 11 | 12 | This is an example `blog` page with many children to demonstrate long lists of sequential content. 13 | 14 | === 15 | 16 | This is a blog and it is functionally identical to a [collection](../collection). The only difference is how it's representing the content. -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/01.dogs/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'four-legs' 5 | - 'furry' 6 | tag: 7 | - obedient 8 | - playful 9 | - work-oriented 10 | - trainable 11 | allowCSS: default 12 | allowJS: default 13 | subtitle: This subtitle is all about the wonders of dog ownership. 14 | --- 15 | 16 | A standard example page with category, tag, subtitle, and summary. 17 | 18 | === 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 21 | 22 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 23 | 24 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 25 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/02.cats/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'four-legs' 5 | - 'furry' 6 | tag: 7 | - playful 8 | - sly 9 | - trainable 10 | allowCSS: default 11 | allowJS: default 12 | subtitle: Cats are often where it's at 13 | --- 14 | 15 | A standard example page with category, tag, subtitle, and summary. 16 | 17 | === 18 | 19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 20 | 21 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 22 | 23 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 24 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/03.birds/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'two-legs' 5 | tag: 6 | - playful 7 | - noisy 8 | - trainable 9 | allowCSS: default 10 | allowJS: default 11 | subtitle: Birds can take to the air and send imaginations soaring 12 | --- 13 | 14 | Birds are an often overlooked pet that can be just as rewarding as a four-legged friend. This item has no front-matter at all. 15 | 16 | === 17 | 18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 19 | 20 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 21 | 22 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 23 | 24 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/04.fish/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'no-legs' 5 | - 'aquatic' 6 | - 'inexpensive' 7 | allowCSS: default 8 | allowJS: default 9 | subtitle: Fish are like moving houseplants 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 13 | 14 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 15 | 16 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 17 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/05.reptiles/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'four-legs' 5 | - 'desert' 6 | tags: 7 | - 'untrainable' 8 | - 'cheap' 9 | - 'bite-y' 10 | allowCSS: default 11 | allowJS: default 12 | subtitle: Reptiles are cool, but don't try to cuddle them 13 | --- 14 | 15 | Etiam et rhoncus mi. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. 16 | 17 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 18 | 19 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 20 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/06.rocks/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'no-legs' 5 | - 'inexpensive' 6 | tags: 7 | - 'untrainable' 8 | allowCSS: default 9 | allowJS: default 10 | subtitle: The pet rock was a fad a long time ago 11 | --- 12 | 13 | Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. 14 | 15 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 16 | 17 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 18 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/07.cactus/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'no-legs' 5 | - 'desert' 6 | tags: 7 | - 'untrainable' 8 | - 'prickly' 9 | allowCSS: default 10 | allowJS: default 11 | subtitle: Cactus can make for a great, low-maintenance pet 12 | --- 13 | 14 | If you get one, name it Jim. 15 | 16 | === 17 | 18 | Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. Quisque id sapien luctus, pretium libero et, fermentum dolor. In justo nisi, consectetur a finibus sit amet, vestibulum at urna. Suspendisse ut ex et nisi lobortis mollis. Aliquam non leo non nunc finibus varius. 19 | 20 | Etiam et rhoncus mi. Sed in luctus lectus, at molestie dui. Vivamus condimentum ligula eget libero porta molestie vitae efficitur augue. Suspendisse et magna et orci ultrices imperdiet. Duis malesuada rutrum aliquet. Vivamus bibendum semper urna at porta. Vivamus bibendum porta pharetra. 21 | 22 | Aliquam non leo non nunc finibus varius. Phasellus nec odio tincidunt, dignissim urna finibus, eleifend libero. Maecenas id volutpat massa. Donec venenatis aliquam sem. Quisque quis ex fermentum, auctor dui vitae, suscipit lectus. 23 | -------------------------------------------------------------------------------- /_demo/pages/04.demos/02.collection/collection.md: -------------------------------------------------------------------------------- 1 | --- 2 | content: 3 | items: 4 | - '@self.children' 5 | order: 6 | by: folder 7 | dir: asc 8 | --- 9 | 10 | This is an example `collection` page, including several children in order to demonstrate a leaner presentation method than `blog`. 11 | 12 | === 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis pharetra mauris a ultricies. Maecenas scelerisque faucibus elit, sed faucibus nulla varius vestibulum. **Quisque id sapien luctus**, pretium libero et, fermentum dolor. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/01.first-post/item.md: -------------------------------------------------------------------------------- 1 | This is an ordinary post with no frontmatter or special features at all. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 2 | 3 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 4 | 5 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 6 | 7 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/02.second-best/item.md: -------------------------------------------------------------------------------- 1 | This is a basic post with a summary header, but nothing else. 2 | 3 | === 4 | 5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 6 | 7 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 8 | 9 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 10 | 11 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/03.third-base/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - animals 5 | tag: 6 | - cats 7 | --- 8 | 9 | This post has a summary and an image. Includes a category but no tags. 10 | 11 | === 12 | 13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 14 | 15 | ![puppy.jpg](puppy.jpg) 16 | 17 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 18 | 19 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 20 | 21 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/03.third-base/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/03.third-base/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/03.third-base/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/03.third-base/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/04.fourth-of-july/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - animals 5 | tag: 6 | - dogs 7 | subtitle: The fourth post is the one that includes a subtitle. 8 | --- 9 | 10 | Includes a summary, image, taxonomy, and subtitle. 11 | 12 | === 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 15 | 16 | ![puppy.jpg](puppy.jpg) 17 | 18 | 19 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies niuusl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. 20 | 21 | Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 22 | 23 | ![kitten.jpg](kitten.jpg) 24 | 25 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 26 | 27 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/04.fourth-of-july/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/04.fourth-of-july/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/04.fourth-of-july/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/04.fourth-of-july/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/05.staying-alive-with-five/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - aircraft 5 | tag: 6 | - dogs 7 | allowCSS: default 8 | allowJS: default 9 | header_image_file: puppy.jpg 10 | --- 11 | 12 | Includes everything from #4, but this time with a header image defined in the frontmatter. 13 | 14 | === 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 17 | 18 | ![puppy.jpg](puppy.jpg) 19 | 20 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 21 | 22 | ![kitten.jpg](kitten.jpg) 23 | 24 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 25 | 26 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/05.staying-alive-with-five/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/05.staying-alive-with-five/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/05.staying-alive-with-five/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/05.staying-alive-with-five/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/06.six-sticks/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'desktop publishing' 5 | tag: 6 | - pencils 7 | allowCSS: default 8 | allowJS: default 9 | subtitle: This post is also detailed enough to require a subtitle. 10 | --- 11 | 12 | All posts from here on out are just to fill up space. 13 | 14 | === 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 17 | 18 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 19 | 20 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 21 | 22 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/06.six-sticks/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/06.six-sticks/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/06.six-sticks/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/06.six-sticks/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/07.seven-in-heaven/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'desktop publishing' 5 | allowCSS: default 6 | allowJS: default 7 | --- 8 | 9 | All posts from here on out are just to fill up space. 10 | 11 | === 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 13 | 14 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 15 | 16 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 17 | 18 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/07.seven-in-heaven/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/07.seven-in-heaven/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/07.seven-in-heaven/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/07.seven-in-heaven/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/08.eight-way-hexagon/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | taxonomy: 3 | category: 4 | - 'desktop publishing' 5 | allowCSS: default 6 | allowJS: default 7 | --- 8 | 9 | All posts from here on out are just to fill up space. 10 | 11 | === 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit lectus, id molestie libero mollis vel. Mauris tincidunt elit dui, nec sodales sem laoreet posuere. Vivamus consequat placerat quam, in tincidunt lectus vulputate eu. Nulla nec blandit ex. Curabitur id eleifend magna, in bibendum diam. Vivamus vestibulum diam nec ante vehicula efficitur. Quisque ut aliquam ante. Nullam nec consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ut massa sed porta. Fusce ullamcorper lacinia odio ut rhoncus. Phasellus efficitur euismod faucibus. Proin at interdum felis. 13 | 14 | Morbi lacus nisi, feugiat sit amet elit sit amet, ornare imperdiet felis. Sed egestas, augue vel volutpat ultrices, tortor felis posuere nibh, sed ultricies nisl lectus et sapien. In faucibus odio ac cursus elementum. Nullam quis ante vel magna efficitur euismod. Aliquam erat volutpat. Fusce vel dui elit. Sed vitae dolor ultrices, volutpat elit in, mattis dui. Donec mauris turpis, mollis a pretium sed, congue eu velit. Sed pretium, orci at imperdiet fringilla, elit orci elementum ligula, ac malesuada felis erat in orci. Phasellus magna lacus, sollicitudin id quam at, lacinia mollis elit. Curabitur lectus ex, facilisis sodales ante porta, sodales faucibus justo. Maecenas id lorem sagittis, efficitur nunc viverra, auctor nunc. Ut eget elit et justo pharetra tincidunt. 15 | 16 | Integer at tempor turpis. Proin nec metus erat. In nisi lacus, vehicula sit amet pellentesque non, porttitor quis eros. Duis tristique tellus finibus, molestie orci eget, mattis ex. Phasellus vehicula libero nec odio venenatis gravida. Nam dolor libero, blandit vel commodo vitae, eleifend quis tellus. Fusce velit quam, mollis eget metus at, viverra cursus dui. Fusce consectetur tellus non purus elementum, ut laoreet diam blandit. Aenean tempus, eros mollis eleifend ornare, nisi est semper arcu, a dictum odio sem et metus. Aenean nec pellentesque odio, et congue nunc. Ut pellentesque sapien sed bibendum cursus. Pellentesque ac sollicitudin diam. Pellentesque non ligula felis. Nam iaculis tincidunt consectetur. Fusce ullamcorper est a augue consequat, non eleifend leo vestibulum. 17 | 18 | Mauris a vehicula enim. Pellentesque a congue enim. Curabitur ut orci eu odio euismod dictum sed a arcu. Suspendisse bibendum ex risus, ut scelerisque dolor porta eu. Nam sit amet sollicitudin elit, non pharetra quam. Nulla facilisi. Aenean finibus consequat massa at pulvinar. Vestibulum imperdiet scelerisque consectetur. Proin scelerisque euismod tortor eget posuere. Aenean at velit sit amet nulla ultricies cursus. Nullam suscipit euismod molestie. Ut lobortis luctus metus, a laoreet enim tincidunt non. Phasellus cursus lorem at consectetur fermentum. Etiam non lectus lacinia, placerat lectus non, laoreet neque. In scelerisque tincidunt sem, id pharetra metus imperdiet eu. -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/08.eight-way-hexagon/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/08.eight-way-hexagon/kitten.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/08.eight-way-hexagon/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/_demo/pages/04.demos/03.testing/08.eight-way-hexagon/puppy.jpg -------------------------------------------------------------------------------- /_demo/pages/04.demos/03.testing/blog.md: -------------------------------------------------------------------------------- 1 | This collection exists only for testing and isn't meant to be a real demo of what content would look like in this theme. i.e. Every page has different content/data instead of being uniform, so it's going to look really weird. -------------------------------------------------------------------------------- /_demo/pages/04.demos/collection.md: -------------------------------------------------------------------------------- 1 | --- 2 | allowCSS: default 3 | allowJS: default 4 | content: 5 | items: 6 | - '@self.children' 7 | order: 8 | by: folder 9 | dir: asc 10 | --- 11 | 12 | A demo collection that shows other content as child pages. 13 | 14 | === 15 | 16 | This page demonstrates the collection/blog features of the Hypertext theme. Each section is a group of fake pages that give you an idea of how the theme responds to different kinds of content. 17 | 18 | This page is also an example of the `collection` page type. It's a collection of sub-pages, and is identical to the `blog` and `blog_list` page types in other themes. -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/assets/screenshot.png -------------------------------------------------------------------------------- /assets/win95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/assets/win95.png -------------------------------------------------------------------------------- /blueprints/blog.yaml: -------------------------------------------------------------------------------- 1 | # Functionally identical to a collection, this only exists 2 | # to make compatibility with other themes easier. 3 | 4 | extends@: collection 5 | child_type: default -------------------------------------------------------------------------------- /blueprints/blog_item.yaml: -------------------------------------------------------------------------------- 1 | # Functionally identical to a collection, this only exists 2 | # to make compatibility with other themes easier. 3 | 4 | extends@: default -------------------------------------------------------------------------------- /blueprints/blog_list.yaml: -------------------------------------------------------------------------------- 1 | # Functionally identical to a collection, this only exists 2 | # to make compatibility with other themes easier. 3 | 4 | extends@: collection 5 | child_type: default -------------------------------------------------------------------------------- /blueprints/item.yaml: -------------------------------------------------------------------------------- 1 | # This only exists to improve compatibility with other themes 2 | # It may be extended in the future, though 3 | extends@: default -------------------------------------------------------------------------------- /css/air.css: -------------------------------------------------------------------------------- 1 | /* 2 | https://github.com/markdowncss/air 3 | MIT License (MIT) 4 | Copyright (c) 2014-2015 John Otander 5 | */ 6 | 7 | @media print { 8 | *, 9 | *:before, 10 | *:after { 11 | background: transparent !important; 12 | color: #000 !important; 13 | box-shadow: none !important; 14 | text-shadow: none !important; 15 | } 16 | 17 | a, 18 | a:visited { 19 | text-decoration: underline; 20 | } 21 | 22 | a[href]:after { 23 | content: " (" attr(href) ")"; 24 | } 25 | 26 | abbr[title]:after { 27 | content: " (" attr(title) ")"; 28 | } 29 | 30 | a[href^="#"]:after, 31 | a[href^="javascript:"]:after { 32 | content: ""; 33 | } 34 | 35 | pre, 36 | blockquote { 37 | border: 1px solid #999; 38 | page-break-inside: avoid; 39 | } 40 | 41 | thead { 42 | display: table-header-group; 43 | } 44 | 45 | tr, 46 | img { 47 | page-break-inside: avoid; 48 | } 49 | 50 | img { 51 | max-width: 100% !important; 52 | } 53 | 54 | p, 55 | h2, 56 | h3 { 57 | orphans: 3; 58 | widows: 3; 59 | } 60 | 61 | h2, 62 | h3 { 63 | page-break-after: avoid; 64 | } 65 | } 66 | 67 | html { 68 | font-size: 12px; 69 | } 70 | 71 | @media screen and (min-width: 32rem) and (max-width: 48rem) { 72 | html { 73 | font-size: 15px; 74 | } 75 | } 76 | 77 | @media screen and (min-width: 48rem) { 78 | html { 79 | font-size: 16px; 80 | } 81 | } 82 | 83 | body { 84 | line-height: 1.85; 85 | } 86 | 87 | p, 88 | .air-p { 89 | font-size: 1rem; 90 | margin-bottom: 1.3rem; 91 | } 92 | 93 | h1, 94 | .air-h1, 95 | h2, 96 | .air-h2, 97 | h3, 98 | .air-h3, 99 | h4, 100 | .air-h4 { 101 | margin: 1.414rem 0 .5rem; 102 | font-weight: inherit; 103 | line-height: 1.42; 104 | } 105 | 106 | h1, 107 | .air-h1 { 108 | margin-top: 0; 109 | font-size: 3.998rem; 110 | } 111 | 112 | h2, 113 | .air-h2 { 114 | font-size: 2.827rem; 115 | } 116 | 117 | h3, 118 | .air-h3 { 119 | font-size: 1.999rem; 120 | } 121 | 122 | h4, 123 | .air-h4 { 124 | font-size: 1.414rem; 125 | } 126 | 127 | h5, 128 | .air-h5 { 129 | font-size: 1.121rem; 130 | } 131 | 132 | h6, 133 | .air-h6 { 134 | font-size: .88rem; 135 | } 136 | 137 | small, 138 | .air-small { 139 | font-size: .707em; 140 | } 141 | 142 | /* https://github.com/mrmrs/fluidity */ 143 | 144 | img, 145 | canvas, 146 | iframe, 147 | video, 148 | svg, 149 | select, 150 | textarea { 151 | max-width: 100%; 152 | } 153 | 154 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300); 155 | 156 | body { 157 | color: #444; 158 | font-family: 'Open Sans', Helvetica, sans-serif; 159 | font-weight: 300; 160 | margin: 6rem auto 1rem; 161 | max-width: 48rem; 162 | text-align: center; 163 | } 164 | 165 | img { 166 | border-radius: 50%; 167 | height: 200px; 168 | margin: 0 auto; 169 | width: 200px; 170 | } 171 | 172 | a, 173 | a:visited { 174 | color: #3498db; 175 | } 176 | 177 | a:hover, 178 | a:focus, 179 | a:active { 180 | color: #2980b9; 181 | } 182 | 183 | pre { 184 | background-color: #fafafa; 185 | padding: 1rem; 186 | text-align: left; 187 | } 188 | 189 | blockquote { 190 | margin: 0; 191 | border-left: 5px solid #7a7a7a; 192 | font-style: italic; 193 | padding: 1.33em; 194 | text-align: left; 195 | } 196 | 197 | ul, 198 | ol, 199 | li { 200 | text-align: left; 201 | } 202 | 203 | p { 204 | color: #777; 205 | } -------------------------------------------------------------------------------- /css/hypertext++.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #353535; 3 | font-size:large; 4 | padding:0 10px; 5 | margin: 40px auto; 6 | } 7 | img { max-width: 80%; } 8 | h1, h2, h3 { font-family: sans-serif; } 9 | p { line-height:1.5; } 10 | table { border-spacing: 0; width: 100%; } 11 | td, th { border-bottom: 2px solid #e1e1e1; padding: 20px 24px; text-align: left; } -------------------------------------------------------------------------------- /css/modest.css: -------------------------------------------------------------------------------- 1 | /*MIT License (MIT) Copyright (c) 2014-2015 John Otander*/ @media print{*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}code,pre{font-family:Menlo,Monaco,"Courier New",monospace}pre{padding:.5rem;line-height:1.25;overflow-x:scroll}a,a:visited{color:#3498db}a:active,a:focus,a:hover{color:#2980b9}.modest-no-decoration{text-decoration:none}html{font-size:12px}@media screen and (min-width:32rem) and (max-width:48rem){html{font-size:15px}}@media screen and (min-width:48rem){html{font-size:16px}}body{line-height:1.85}.modest-p,p{font-size:1rem;margin-bottom:1.3rem}.modest-h1,.modest-h2,.modest-h3,.modest-h4,h1,h2,h3,h4{margin:1.414rem 0 .5rem;font-weight:inherit;line-height:1.42}.modest-h1,h1{margin-top:0;font-size:3.998rem}.modest-h2,h2{font-size:2.827rem}.modest-h3,h3{font-size:1.999rem}.modest-h4,h4{font-size:1.414rem}.modest-h5,h5{font-size:1.121rem}.modest-h6,h6{font-size:.88rem}.modest-small,small{font-size:.707em}canvas,iframe,img,select,svg,textarea,video{max-width:100%}html{font-size:18px;max-width:100%}body{color:#444;font-family:'Open Sans Condensed',sans-serif;font-weight:300;margin:0 auto;max-width:48rem;line-height:1.45;padding:.25rem}h1,h2,h3,h4,h5,h6{font-family:Arimo,Helvetica,sans-serif}h1,h2,h3{border-bottom:2px solid #fafafa;margin-bottom:1.15rem;padding-bottom:.5rem;text-align:center}blockquote{border-left:8px solid #fafafa;padding:1rem}code,pre{background-color:#fafafa} -------------------------------------------------------------------------------- /css/sakura-earthly.css: -------------------------------------------------------------------------------- 1 | /* Sakura.css v1.5.0 2 | * ================ 3 | * Minimal css theme. 4 | * Project: https://github.com/oxalorg/sakura/ 5 | */ 6 | /* Body */ 7 | html { 8 | font-size: 62.5%; 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 10 | } 11 | 12 | body { 13 | font-size: 1.8rem; 14 | line-height: 1.618; 15 | max-width: 38em; 16 | margin: auto; 17 | color: #222222; 18 | background-color: #ffffff; 19 | padding: 13px; 20 | } 21 | 22 | @media (max-width: 684px) { 23 | body { 24 | font-size: 1.53rem; 25 | } 26 | } 27 | @media (max-width: 382px) { 28 | body { 29 | font-size: 1.35rem; 30 | } 31 | } 32 | h1, h2, h3, h4, h5, h6 { 33 | line-height: 1.1; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 35 | font-weight: 700; 36 | margin-top: 3rem; 37 | margin-bottom: 1.5rem; 38 | overflow-wrap: break-word; 39 | word-wrap: break-word; 40 | -ms-word-break: break-all; 41 | word-break: break-word; 42 | } 43 | 44 | h1 { 45 | font-size: 2.35em; 46 | } 47 | 48 | h2 { 49 | font-size: 2em; 50 | } 51 | 52 | h3 { 53 | font-size: 1.75em; 54 | } 55 | 56 | h4 { 57 | font-size: 1.5em; 58 | } 59 | 60 | h5 { 61 | font-size: 1.25em; 62 | } 63 | 64 | h6 { 65 | font-size: 1em; 66 | } 67 | 68 | p { 69 | margin-top: 0px; 70 | margin-bottom: 2.5rem; 71 | } 72 | 73 | small, sub, sup { 74 | font-size: 75%; 75 | } 76 | 77 | hr { 78 | border-color: #007559; 79 | } 80 | 81 | a { 82 | text-decoration: none; 83 | color: #007559; 84 | } 85 | a:visited { 86 | color: #004232; 87 | } 88 | a:hover { 89 | color: #006994; 90 | border-bottom: 2px solid #222222; 91 | } 92 | 93 | ul { 94 | padding-left: 1.4em; 95 | margin-top: 0px; 96 | margin-bottom: 2.5rem; 97 | } 98 | 99 | li { 100 | margin-bottom: 0.4em; 101 | } 102 | 103 | blockquote { 104 | margin-left: 0px; 105 | margin-right: 0px; 106 | padding-left: 1em; 107 | padding-top: 0.8em; 108 | padding-bottom: 0.8em; 109 | padding-right: 0.8em; 110 | border-left: 5px solid #007559; 111 | margin-bottom: 2.5rem; 112 | background-color: #f7f7f7; 113 | } 114 | 115 | blockquote p { 116 | margin-bottom: 0; 117 | } 118 | 119 | img, video { 120 | height: auto; 121 | max-width: 100%; 122 | margin-top: 0px; 123 | margin-bottom: 2.5rem; 124 | } 125 | 126 | /* Pre and Code */ 127 | pre { 128 | background-color: #f7f7f7; 129 | display: block; 130 | padding: 1em; 131 | overflow-x: auto; 132 | margin-top: 0px; 133 | margin-bottom: 2.5rem; 134 | font-size: 0.9em; 135 | } 136 | 137 | code, kbd, samp { 138 | font-size: 0.9em; 139 | padding: 0 0.5em; 140 | background-color: #f7f7f7; 141 | white-space: pre-wrap; 142 | } 143 | 144 | pre > code { 145 | padding: 0; 146 | background-color: transparent; 147 | white-space: pre; 148 | font-size: 1em; 149 | } 150 | 151 | /* Tables */ 152 | table { 153 | text-align: justify; 154 | width: 100%; 155 | border-collapse: collapse; 156 | margin-bottom: 2rem; 157 | } 158 | 159 | td, th { 160 | padding: 0.5em; 161 | border-bottom: 1px solid #f7f7f7; 162 | } 163 | 164 | /* Buttons, forms and input */ 165 | input, textarea { 166 | border: 1px solid #222222; 167 | } 168 | input:focus, textarea:focus { 169 | border: 1px solid #007559; 170 | } 171 | 172 | textarea { 173 | width: 100%; 174 | } 175 | 176 | .button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button { 177 | display: inline-block; 178 | padding: 5px 10px; 179 | text-align: center; 180 | text-decoration: none; 181 | white-space: nowrap; 182 | background-color: #007559; 183 | color: #ffffff; 184 | border-radius: 1px; 185 | border: 1px solid #007559; 186 | cursor: pointer; 187 | box-sizing: border-box; 188 | } 189 | .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] { 190 | cursor: default; 191 | opacity: 0.5; 192 | } 193 | .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover { 194 | background-color: #006994; 195 | color: #ffffff; 196 | outline: 0; 197 | } 198 | .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible { 199 | outline-style: solid; 200 | outline-width: 2px; 201 | } 202 | 203 | textarea, select, input { 204 | color: #222222; 205 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 206 | margin-bottom: 10px; 207 | background-color: #f7f7f7; 208 | border: 1px solid #f7f7f7; 209 | border-radius: 4px; 210 | box-shadow: none; 211 | box-sizing: border-box; 212 | } 213 | textarea:focus, select:focus, input:focus { 214 | border: 1px solid #007559; 215 | outline: 0; 216 | } 217 | 218 | input[type=checkbox]:focus { 219 | outline: 1px dotted #007559; 220 | } 221 | 222 | label, legend, fieldset { 223 | display: block; 224 | margin-bottom: 0.5rem; 225 | font-weight: 600; 226 | } -------------------------------------------------------------------------------- /css/sakura.css: -------------------------------------------------------------------------------- 1 | /* Sakura.css v1.5.0 2 | * ================ 3 | * Minimal css theme. 4 | * Project: https://github.com/oxalorg/sakura/ 5 | */ 6 | /* Body */ 7 | html { 8 | font-size: 62.5%; 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 10 | } 11 | 12 | body { 13 | font-size: 1.8rem; 14 | line-height: 1.618; 15 | max-width: 38em; 16 | margin: auto; 17 | color: #4a4a4a; 18 | background-color: #f9f9f9; 19 | padding: 13px; 20 | } 21 | 22 | @media (max-width: 684px) { 23 | body { 24 | font-size: 1.53rem; 25 | } 26 | } 27 | @media (max-width: 382px) { 28 | body { 29 | font-size: 1.35rem; 30 | } 31 | } 32 | h1, h2, h3, h4, h5, h6 { 33 | line-height: 1.1; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 35 | font-weight: 700; 36 | margin-top: 3rem; 37 | margin-bottom: 1.5rem; 38 | overflow-wrap: break-word; 39 | word-wrap: break-word; 40 | -ms-word-break: break-all; 41 | word-break: break-word; 42 | } 43 | 44 | h1 { 45 | font-size: 2.35em; 46 | } 47 | 48 | h2 { 49 | font-size: 2em; 50 | } 51 | 52 | h3 { 53 | font-size: 1.75em; 54 | } 55 | 56 | h4 { 57 | font-size: 1.5em; 58 | } 59 | 60 | h5 { 61 | font-size: 1.25em; 62 | } 63 | 64 | h6 { 65 | font-size: 1em; 66 | } 67 | 68 | p { 69 | margin-top: 0px; 70 | margin-bottom: 2.5rem; 71 | } 72 | 73 | small, sub, sup { 74 | font-size: 75%; 75 | } 76 | 77 | hr { 78 | border-color: #1d7484; 79 | } 80 | 81 | a { 82 | text-decoration: none; 83 | color: #1d7484; 84 | } 85 | a:visited { 86 | color: #144f5a; 87 | } 88 | a:hover { 89 | color: #982c61; 90 | border-bottom: 2px solid #4a4a4a; 91 | } 92 | 93 | ul { 94 | padding-left: 1.4em; 95 | margin-top: 0px; 96 | margin-bottom: 2.5rem; 97 | } 98 | 99 | li { 100 | margin-bottom: 0.4em; 101 | } 102 | 103 | blockquote { 104 | margin-left: 0px; 105 | margin-right: 0px; 106 | padding-left: 1em; 107 | padding-top: 0.8em; 108 | padding-bottom: 0.8em; 109 | padding-right: 0.8em; 110 | border-left: 5px solid #1d7484; 111 | margin-bottom: 2.5rem; 112 | background-color: #f1f1f1; 113 | } 114 | 115 | blockquote p { 116 | margin-bottom: 0; 117 | } 118 | 119 | img, video { 120 | height: auto; 121 | max-width: 100%; 122 | margin-top: 0px; 123 | margin-bottom: 2.5rem; 124 | } 125 | 126 | /* Pre and Code */ 127 | pre { 128 | background-color: #f1f1f1; 129 | display: block; 130 | padding: 1em; 131 | overflow-x: auto; 132 | margin-top: 0px; 133 | margin-bottom: 2.5rem; 134 | font-size: 0.9em; 135 | } 136 | 137 | code, kbd, samp { 138 | font-size: 0.9em; 139 | padding: 0 0.5em; 140 | background-color: #f1f1f1; 141 | white-space: pre-wrap; 142 | } 143 | 144 | pre > code { 145 | padding: 0; 146 | background-color: transparent; 147 | white-space: pre; 148 | font-size: 1em; 149 | } 150 | 151 | /* Tables */ 152 | table { 153 | text-align: justify; 154 | width: 100%; 155 | border-collapse: collapse; 156 | margin-bottom: 2rem; 157 | } 158 | 159 | td, th { 160 | padding: 0.5em; 161 | border-bottom: 1px solid #f1f1f1; 162 | } 163 | 164 | /* Buttons, forms and input */ 165 | input, textarea { 166 | border: 1px solid #4a4a4a; 167 | } 168 | input:focus, textarea:focus { 169 | border: 1px solid #1d7484; 170 | } 171 | 172 | textarea { 173 | width: 100%; 174 | } 175 | 176 | .button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button { 177 | display: inline-block; 178 | padding: 5px 10px; 179 | text-align: center; 180 | text-decoration: none; 181 | white-space: nowrap; 182 | background-color: #1d7484; 183 | color: #f9f9f9; 184 | border-radius: 1px; 185 | border: 1px solid #1d7484; 186 | cursor: pointer; 187 | box-sizing: border-box; 188 | } 189 | .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] { 190 | cursor: default; 191 | opacity: 0.5; 192 | } 193 | .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover { 194 | background-color: #982c61; 195 | color: #f9f9f9; 196 | outline: 0; 197 | } 198 | .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible { 199 | outline-style: solid; 200 | outline-width: 2px; 201 | } 202 | 203 | textarea, select, input { 204 | color: #4a4a4a; 205 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 206 | margin-bottom: 10px; 207 | background-color: #f1f1f1; 208 | border: 1px solid #f1f1f1; 209 | border-radius: 4px; 210 | box-shadow: none; 211 | box-sizing: border-box; 212 | } 213 | textarea:focus, select:focus, input:focus { 214 | border: 1px solid #1d7484; 215 | outline: 0; 216 | } 217 | 218 | input[type=checkbox]:focus { 219 | outline: 1px dotted #1d7484; 220 | } 221 | 222 | label, legend, fieldset { 223 | display: block; 224 | margin-bottom: 0.5rem; 225 | font-weight: 600; 226 | } -------------------------------------------------------------------------------- /css/stylize.css: -------------------------------------------------------------------------------- 1 | /* stylize.css v1.0.0 | License MIT | https://github.com/vasanthv/stylize.css */:root{--text:#333;--text-med:#888;--text-light:#ccc;--text-lighter:#eee;--blue:#3498db;--dark-blue:#2980b9;--yellow:#ffeaa7;--red:#c0392b;--border-radius:3px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;font-size:1em;color:var(--text);margin:10px;-webkit-text-size-adjust:100%}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.17em 0}h5{font-size:.83em;margin:1.5em 0}h6{font-size:.67em;margin:2em 0}a{color:var(--blue);background-color:transparent}a:visited{color:var(--dark-blue)}nav{background-color:var(--text-lighter);padding:1em;margin:-10px}nav a{padding:.5em;border-radius:var(--border-radius);text-decoration:none}nav a:hover{background-color:var(--text-light);color:var(--text)}hr{border:1px solid var(--text-med);border-bottom:0;height:0}p{margin:1em 0}mark{background-color:var(--yellow);color:#333}small{font-size:80%}sub,sup{font-size:75%}blockquote{border-left:4px solid var(--text-light);margin:1em 0;padding:.6em 1em}pre{font-family:monospace;border:1px solid var(--text-light);background-color:var(--text-lighter);padding:.8em;border-radius:var(--border-radius);font-size:1em;white-space:pre-wrap;word-wrap:break-word}code,kbd,samp{font-family:monospace;font-size:1em}code,kbd{border-radius:var(--border-radius);padding:0 2px}code{border:1px solid var(--text-light);background-color:var(--text-lighter);color:var(--red)}kbd{border:1px solid var(--text);background-color:var(--text);color:var(--text-lighter)}ul,ol{padding-left:2em}fieldset{border:1px solid var(--text);border-radius:var(--border-radius)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position-x:100%;background-position-y:50%}button,input,select,textarea,a[role="button"]{font-family:inherit;font-size:100%;line-height:1.5;margin:0;padding:.33em;border:1px solid var(--text-light);border-radius:var(--border-radius);box-sizing:border-box}input[type="checkbox"],input[type="radio"]{border:0;border:0}button,input[type="button"],input[type="submit"],a[role="button"]{padding:.33em .66em;cursor:pointer;background-color:var(--text-lighter);color:var(--text);text-decoration:none}button:hover,input[type="button"]:hover,input[type="submit"]:hover,a[role="button"]:hover{background-color:var(--text-light)}a[role="button"]{padding:.5em .66em}button:disabled,input[type="button"]:disabled,input[type="submit"]:disabled,a[role="button"]:disabled{background-color:var(--text-lighter);color:var(--text-light);cursor:not-allowed}progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border:0;width:15em;height:.75em;background-color:var(--text-light);color:var(--blue)}progress[value]::-webkit-progress-bar{background-color:var(--text-light)}progress[value]::-webkit-progress-value{background-color:var(--blue)}table{border-collapse:collapse}table,table th,table td{border-bottom:1px solid var(--text-light);padding:.33em .66em;text-align:left;vertical-align:middle}table[border="1"],table[border="1"] th,table[border="1"] td{border:1px solid var(--text-light)}.left{float:left}.right{float:right}.center{text-align:center}.clear{clear:both}.hide{display:none}.spacer{display:block;height:1em;border:0;clear:both}.wrap{width:100%;max-width:40em;margin:auto}.reset{font:inherit;font-size:100%;margin:0;padding:0;border:0;text-decoration:none}ol.reset,ul.reset{list-style:none} 2 | -------------------------------------------------------------------------------- /css/visual-impaired.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'AtkinsonHL'; 3 | src: 4 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'), /* Super Modern Browsers */ 5 | url('../fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff') format('woff'), /* Pretty Modern Browsers */ 6 | url('../fonts/TTF/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype'); /* Safari, Android, iOS */ 7 | } 8 | @font-face { 9 | font-family: 'AtkinsonHL'; 10 | font-weight: bold; 11 | src: 12 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'), /* Super Modern Browsers */ 13 | url('../fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff') format('woff'), /* Pretty Modern Browsers */ 14 | url('../fonts/TTF/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype'); /* Safari, Android, iOS */ 15 | } 16 | @font-face { 17 | font-family: 'AtkinsonHL'; 18 | font-style: italic; 19 | src: 20 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'), /* Super Modern Browsers */ 21 | url('../fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff') format('woff'), /* Pretty Modern Browsers */ 22 | url('../fonts/TTF/Atkinson-Hyperlegible-Italic-102.ttf') format('truetype'); /* Safari, Android, iOS */ 23 | } 24 | @font-face { 25 | font-family: 'AtkinsonHL'; 26 | font-weight: bold; 27 | font-style: italic; 28 | src: 29 | url('../fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'), /* Super Modern Browsers */ 30 | url('../fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff'), /* Pretty Modern Browsers */ 31 | url('../fonts/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf') format('truetype'); /* Safari, Android, iOS */ 32 | } 33 | body, h1, h2, h3, h4, h5, h6 { font-family: 'AtkinsonHL'; } -------------------------------------------------------------------------------- /css/water-dark.css: -------------------------------------------------------------------------------- 1 | body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73} 2 | /* Copyright © 2019 Kognise - MIT License 3 | https://github.com/kognise/water.css - https://watercss.netlify.com/ */ -------------------------------------------------------------------------------- /css/water-light.css: -------------------------------------------------------------------------------- 1 | body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4} 2 | /* Copyright © 2019 Kognise - MIT License 3 | https://github.com/kognise/water.css - https://watercss.netlify.com/ */ 4 | -------------------------------------------------------------------------------- /css/writ.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Writ v1.0.4 3 | * 4 | * Copyright © 2015, Curtis McEnroe 5 | * 6 | * https://cmcenroe.me/writ/LICENSE (ISC) 7 | * https://github.com/programble/writ 8 | * https://writ.cmcenroe.me/ 9 | */dd,hr,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow-x:auto}a,ins{text-decoration:none}html{font-family:Palatino,Georgia,Lucida Bright,Book Antiqua,serif;font-size:16px;line-height:1.5rem}code,kbd,pre,samp{font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.833rem;color:#111}kbd{font-weight:700}h1,h2,h3,h4,h5,h6,th{font-weight:400}h1{font-size:2.488em}h2{font-size:2.074em}h3{font-size:1.728em}h4{font-size:1.44em}h5{font-size:1.2em}h6{font-size:1em}small{font-size:.833em}h1,h2,h3{line-height:3rem}blockquote,dl,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin:1.5rem 0 0}pre,table{margin-bottom:-1px}hr{border:none;padding:1.5rem 0 0}table{line-height:calc(1.5rem - 1px);width:100%;border-collapse:collapse}pre{margin-top:calc(1.5rem - 1px)}body{color:#222;margin:1.5rem 1ch}a,a code,header nav a:visited{color:#00e}a:visited,a:visited code{color:#60b}mark{color:inherit;background-color:#fe0}code,pre,samp,tfoot,thead{background-color:rgba(0,0,0,.05)}blockquote,ins,main aside{border:rgba(0,0,0,.05) solid}blockquote,main aside{border-width:0 0 0 .5ch}code,pre,samp{border:rgba(0,0,0,.1) solid}td,th{border:solid #dbdbdb}body>header{text-align:center}body>footer,main{display:block;max-width:78ch;margin:auto}main aside,main figure{float:right;margin:1.5rem 0 0 1ch}main aside{max-width:26ch;padding:0 0 0 .5ch}blockquote{margin-right:3ch;margin-left:1.5ch;padding:0 0 0 1ch}pre{border-width:1px;border-radius:2px;padding:0 .5ch}pre code{border:none;padding:0;background-color:transparent;white-space:inherit}code,ins,samp,td,th{border-width:1px}img{max-width:100%}dd,ol,ul{padding:0 0 0 3ch}ul>li{list-style-type:disc}li ul>li{list-style-type:circle}li li ul>li{list-style-type:square}ol>li{list-style-type:decimal}li ol>li{list-style-type:lower-roman}li li ol>li{list-style-type:lower-alpha}nav ul{padding:0;list-style-type:none}nav ul li{display:inline;padding-left:1ch;white-space:nowrap}nav ul li:first-child{padding-left:0}ins,mark{padding:1px}td,th{padding:0 .5ch}sub,sup{font-size:.75em;line-height:1em}code,samp{border-radius:2px;padding:.1em .2em;white-space:nowrap} -------------------------------------------------------------------------------- /fonts/TTF/Atkinson-Hyperlegible-Bold-102.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/TTF/Atkinson-Hyperlegible-Bold-102.ttf -------------------------------------------------------------------------------- /fonts/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf -------------------------------------------------------------------------------- /fonts/TTF/Atkinson-Hyperlegible-Italic-102.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/TTF/Atkinson-Hyperlegible-Italic-102.ttf -------------------------------------------------------------------------------- /fonts/TTF/Atkinson-Hyperlegible-Regular-102.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/TTF/Atkinson-Hyperlegible-Regular-102.ttf -------------------------------------------------------------------------------- /fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff -------------------------------------------------------------------------------- /fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff -------------------------------------------------------------------------------- /fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff -------------------------------------------------------------------------------- /fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff -------------------------------------------------------------------------------- /fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2 -------------------------------------------------------------------------------- /fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2 -------------------------------------------------------------------------------- /fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2 -------------------------------------------------------------------------------- /fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2 -------------------------------------------------------------------------------- /hypertext.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hypertext.yaml: -------------------------------------------------------------------------------- 1 | structure: 2 | inline_navbar: true 3 | inline_pagination: true 4 | use_decorators: true 5 | html_mode: default 6 | use_favicon: false 7 | show_date: default 8 | style: 9 | configuration: centered 10 | width: 768 11 | allowCSS: false 12 | allowJS: false 13 | stylesheet: default 14 | include_type: default 15 | image_cropping: false 16 | inline_navbar: 1 17 | -------------------------------------------------------------------------------- /languages.yaml: -------------------------------------------------------------------------------- 1 | en: 2 | THEME_HYPERTEXT: 3 | PAGINATION: 4 | PREVIOUS_PAGE: Previous 5 | NEXT_PAGE: Next 6 | CONTINUE_READING: Continue Reading 7 | SUB_PAGES: Sub-Pages 8 | CATEGORIES: 9 | CATEGORIES: Categories 10 | DATES: 11 | PUBLISHED: Published 12 | THUMBNAIL: 13 | THUMBNAIL: Thumbnail 14 | FOOTER: 15 | BY_LINE: Running the Grav CMS using the Hypertext theme. 16 | 17 | fr: 18 | THEME_HYPERTEXT: 19 | PAGINATION: 20 | PREVIOUS_PAGE: Précédent 21 | NEXT_PAGE: Suivant 22 | CONTINUE_READING: Continuer la lecture 23 | SUB_PAGES: Sous-Pages 24 | CATEGORIES: 25 | CATEGORIES: Catégories 26 | DATES: 27 | PUBLISHED: Publié 28 | THUMBNAIL: 29 | THUMBNAIL: Miniature 30 | FOOTER: 31 | BY_LINE: Fonctionne avec Grav CMS et le thème Hypertext. 32 | 33 | vi: 34 | THEME_HYPERTEXT: 35 | PAGINATION: 36 | PREVIOUS_PAGE: Trang trước 37 | NEXT_PAGE: Trang sau 38 | CONTINUE_READING: Đọc tiếp 39 | SUB_PAGES: Trang-con 40 | CATEGORIES: 41 | CATEGORIES: Danh mục 42 | DATES: 43 | PUBLISHED: Đã xuất bản 44 | THUMBNAIL: 45 | THUMBNAIL: Hình thu nhỏ 46 | FOOTER: 47 | BY_LINE: Chạy Grav CMS bằng chủ đề Siêu văn-bản. 48 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/screenshot.jpg -------------------------------------------------------------------------------- /templates/blog.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'default.html.twig' %} 2 | {# This only exists to improve compatibility with other themes. #} 3 | {# It may be extended in the future, though. Use collection if possible. #} 4 | {% endembed %} -------------------------------------------------------------------------------- /templates/blog_item.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'default.html.twig' %} 2 | {# This only exists to improve compatibility with other themes. #} 3 | {# It may be extended in the future, though. Use default if possible. #} 4 | {% endembed %} -------------------------------------------------------------------------------- /templates/blog_list.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'default.html.twig' %} 2 | {# This only exists to improve compatibility with other themes. #} 3 | {# It may be extended in the future, though. Use collection if possible. #} 4 | {% endembed %} -------------------------------------------------------------------------------- /templates/collection.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'default.html.twig' %} 2 | {# A collection is a generic content display, suitable for very lean pages. #} 3 | {# Blog is going to offer more flexibility. Someday. #} 4 | {% endembed %} -------------------------------------------------------------------------------- /templates/css/air.css: -------------------------------------------------------------------------------- 1 | /* 2 | https://github.com/markdowncss/air 3 | MIT License (MIT) 4 | Copyright (c) 2014-2015 John Otander 5 | */ 6 | 7 | @media print { 8 | *, 9 | *:before, 10 | *:after { 11 | background: transparent !important; 12 | color: #000 !important; 13 | box-shadow: none !important; 14 | text-shadow: none !important; 15 | } 16 | 17 | a, 18 | a:visited { 19 | text-decoration: underline; 20 | } 21 | 22 | a[href]:after { 23 | content: " (" attr(href) ")"; 24 | } 25 | 26 | abbr[title]:after { 27 | content: " (" attr(title) ")"; 28 | } 29 | 30 | a[href^="#"]:after, 31 | a[href^="javascript:"]:after { 32 | content: ""; 33 | } 34 | 35 | pre, 36 | blockquote { 37 | border: 1px solid #999; 38 | page-break-inside: avoid; 39 | } 40 | 41 | thead { 42 | display: table-header-group; 43 | } 44 | 45 | tr, 46 | img { 47 | page-break-inside: avoid; 48 | } 49 | 50 | img { 51 | max-width: 100% !important; 52 | } 53 | 54 | p, 55 | h2, 56 | h3 { 57 | orphans: 3; 58 | widows: 3; 59 | } 60 | 61 | h2, 62 | h3 { 63 | page-break-after: avoid; 64 | } 65 | } 66 | 67 | html { 68 | font-size: 12px; 69 | } 70 | 71 | @media screen and (min-width: 32rem) and (max-width: 48rem) { 72 | html { 73 | font-size: 15px; 74 | } 75 | } 76 | 77 | @media screen and (min-width: 48rem) { 78 | html { 79 | font-size: 16px; 80 | } 81 | } 82 | 83 | body { 84 | line-height: 1.85; 85 | } 86 | 87 | p, 88 | .air-p { 89 | font-size: 1rem; 90 | margin-bottom: 1.3rem; 91 | } 92 | 93 | h1, 94 | .air-h1, 95 | h2, 96 | .air-h2, 97 | h3, 98 | .air-h3, 99 | h4, 100 | .air-h4 { 101 | margin: 1.414rem 0 .5rem; 102 | font-weight: inherit; 103 | line-height: 1.42; 104 | } 105 | 106 | h1, 107 | .air-h1 { 108 | margin-top: 0; 109 | font-size: 3.998rem; 110 | } 111 | 112 | h2, 113 | .air-h2 { 114 | font-size: 2.827rem; 115 | } 116 | 117 | h3, 118 | .air-h3 { 119 | font-size: 1.999rem; 120 | } 121 | 122 | h4, 123 | .air-h4 { 124 | font-size: 1.414rem; 125 | } 126 | 127 | h5, 128 | .air-h5 { 129 | font-size: 1.121rem; 130 | } 131 | 132 | h6, 133 | .air-h6 { 134 | font-size: .88rem; 135 | } 136 | 137 | small, 138 | .air-small { 139 | font-size: .707em; 140 | } 141 | 142 | /* https://github.com/mrmrs/fluidity */ 143 | 144 | img, 145 | canvas, 146 | iframe, 147 | video, 148 | svg, 149 | select, 150 | textarea { 151 | max-width: 100%; 152 | } 153 | 154 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300); 155 | 156 | body { 157 | color: #444; 158 | font-family: 'Open Sans', Helvetica, sans-serif; 159 | font-weight: 300; 160 | margin: 6rem auto 1rem; 161 | max-width: 48rem; 162 | text-align: center; 163 | } 164 | 165 | img { 166 | border-radius: 50%; 167 | height: 200px; 168 | margin: 0 auto; 169 | width: 200px; 170 | } 171 | 172 | a, 173 | a:visited { 174 | color: #3498db; 175 | } 176 | 177 | a:hover, 178 | a:focus, 179 | a:active { 180 | color: #2980b9; 181 | } 182 | 183 | pre { 184 | background-color: #fafafa; 185 | padding: 1rem; 186 | text-align: left; 187 | } 188 | 189 | blockquote { 190 | margin: 0; 191 | border-left: 5px solid #7a7a7a; 192 | font-style: italic; 193 | padding: 1.33em; 194 | text-align: left; 195 | } 196 | 197 | ul, 198 | ol, 199 | li { 200 | text-align: left; 201 | } 202 | 203 | p { 204 | color: #777; 205 | } -------------------------------------------------------------------------------- /templates/css/hypertext++.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #353535; 3 | font-size:large; 4 | padding:0 10px; 5 | margin: 40px auto; 6 | } 7 | img { max-width: 80%; } 8 | h1, h2, h3 { font-family: sans-serif; } 9 | p { line-height:1.5; } 10 | table { border-spacing: 0; width: 100%; } 11 | td, th { border-bottom: 2px solid #e1e1e1; padding: 20px 24px; text-align: left; } -------------------------------------------------------------------------------- /templates/css/modest.css: -------------------------------------------------------------------------------- 1 | /*MIT License (MIT) Copyright (c) 2014-2015 John Otander*/ @media print{*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}code,pre{font-family:Menlo,Monaco,"Courier New",monospace}pre{padding:.5rem;line-height:1.25;overflow-x:scroll}a,a:visited{color:#3498db}a:active,a:focus,a:hover{color:#2980b9}.modest-no-decoration{text-decoration:none}html{font-size:12px}@media screen and (min-width:32rem) and (max-width:48rem){html{font-size:15px}}@media screen and (min-width:48rem){html{font-size:16px}}body{line-height:1.85}.modest-p,p{font-size:1rem;margin-bottom:1.3rem}.modest-h1,.modest-h2,.modest-h3,.modest-h4,h1,h2,h3,h4{margin:1.414rem 0 .5rem;font-weight:inherit;line-height:1.42}.modest-h1,h1{margin-top:0;font-size:3.998rem}.modest-h2,h2{font-size:2.827rem}.modest-h3,h3{font-size:1.999rem}.modest-h4,h4{font-size:1.414rem}.modest-h5,h5{font-size:1.121rem}.modest-h6,h6{font-size:.88rem}.modest-small,small{font-size:.707em}canvas,iframe,img,select,svg,textarea,video{max-width:100%}html{font-size:18px;max-width:100%}body{color:#444;font-family:'Open Sans Condensed',sans-serif;font-weight:300;margin:0 auto;max-width:48rem;line-height:1.45;padding:.25rem}h1,h2,h3,h4,h5,h6{font-family:Arimo,Helvetica,sans-serif}h1,h2,h3{border-bottom:2px solid #fafafa;margin-bottom:1.15rem;padding-bottom:.5rem;text-align:center}blockquote{border-left:8px solid #fafafa;padding:1rem}code,pre{background-color:#fafafa} -------------------------------------------------------------------------------- /templates/css/sakura.css: -------------------------------------------------------------------------------- 1 | /* Sakura.css v1.5.0 2 | * ================ 3 | * Minimal css theme. 4 | * Project: https://github.com/oxalorg/sakura/ 5 | */ 6 | /* Body */ 7 | html { 8 | font-size: 62.5%; 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 10 | } 11 | 12 | body { 13 | font-size: 1.8rem; 14 | line-height: 1.618; 15 | max-width: 38em; 16 | margin: auto; 17 | color: #4a4a4a; 18 | background-color: #f9f9f9; 19 | padding: 13px; 20 | } 21 | 22 | @media (max-width: 684px) { 23 | body { 24 | font-size: 1.53rem; 25 | } 26 | } 27 | @media (max-width: 382px) { 28 | body { 29 | font-size: 1.35rem; 30 | } 31 | } 32 | h1, h2, h3, h4, h5, h6 { 33 | line-height: 1.1; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 35 | font-weight: 700; 36 | margin-top: 3rem; 37 | margin-bottom: 1.5rem; 38 | overflow-wrap: break-word; 39 | word-wrap: break-word; 40 | -ms-word-break: break-all; 41 | word-break: break-word; 42 | } 43 | 44 | h1 { 45 | font-size: 2.35em; 46 | } 47 | 48 | h2 { 49 | font-size: 2em; 50 | } 51 | 52 | h3 { 53 | font-size: 1.75em; 54 | } 55 | 56 | h4 { 57 | font-size: 1.5em; 58 | } 59 | 60 | h5 { 61 | font-size: 1.25em; 62 | } 63 | 64 | h6 { 65 | font-size: 1em; 66 | } 67 | 68 | p { 69 | margin-top: 0px; 70 | margin-bottom: 2.5rem; 71 | } 72 | 73 | small, sub, sup { 74 | font-size: 75%; 75 | } 76 | 77 | hr { 78 | border-color: #1d7484; 79 | } 80 | 81 | a { 82 | text-decoration: none; 83 | color: #1d7484; 84 | } 85 | a:visited { 86 | color: #144f5a; 87 | } 88 | a:hover { 89 | color: #982c61; 90 | border-bottom: 2px solid #4a4a4a; 91 | } 92 | 93 | ul { 94 | padding-left: 1.4em; 95 | margin-top: 0px; 96 | margin-bottom: 2.5rem; 97 | } 98 | 99 | li { 100 | margin-bottom: 0.4em; 101 | } 102 | 103 | blockquote { 104 | margin-left: 0px; 105 | margin-right: 0px; 106 | padding-left: 1em; 107 | padding-top: 0.8em; 108 | padding-bottom: 0.8em; 109 | padding-right: 0.8em; 110 | border-left: 5px solid #1d7484; 111 | margin-bottom: 2.5rem; 112 | background-color: #f1f1f1; 113 | } 114 | 115 | blockquote p { 116 | margin-bottom: 0; 117 | } 118 | 119 | img, video { 120 | height: auto; 121 | max-width: 100%; 122 | margin-top: 0px; 123 | margin-bottom: 2.5rem; 124 | } 125 | 126 | /* Pre and Code */ 127 | pre { 128 | background-color: #f1f1f1; 129 | display: block; 130 | padding: 1em; 131 | overflow-x: auto; 132 | margin-top: 0px; 133 | margin-bottom: 2.5rem; 134 | font-size: 0.9em; 135 | } 136 | 137 | code, kbd, samp { 138 | font-size: 0.9em; 139 | padding: 0 0.5em; 140 | background-color: #f1f1f1; 141 | white-space: pre-wrap; 142 | } 143 | 144 | pre > code { 145 | padding: 0; 146 | background-color: transparent; 147 | white-space: pre; 148 | font-size: 1em; 149 | } 150 | 151 | /* Tables */ 152 | table { 153 | text-align: justify; 154 | width: 100%; 155 | border-collapse: collapse; 156 | margin-bottom: 2rem; 157 | } 158 | 159 | td, th { 160 | padding: 0.5em; 161 | border-bottom: 1px solid #f1f1f1; 162 | } 163 | 164 | /* Buttons, forms and input */ 165 | input, textarea { 166 | border: 1px solid #4a4a4a; 167 | } 168 | input:focus, textarea:focus { 169 | border: 1px solid #1d7484; 170 | } 171 | 172 | textarea { 173 | width: 100%; 174 | } 175 | 176 | .button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button { 177 | display: inline-block; 178 | padding: 5px 10px; 179 | text-align: center; 180 | text-decoration: none; 181 | white-space: nowrap; 182 | background-color: #1d7484; 183 | color: #f9f9f9; 184 | border-radius: 1px; 185 | border: 1px solid #1d7484; 186 | cursor: pointer; 187 | box-sizing: border-box; 188 | } 189 | .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] { 190 | cursor: default; 191 | opacity: 0.5; 192 | } 193 | .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover { 194 | background-color: #982c61; 195 | color: #f9f9f9; 196 | outline: 0; 197 | } 198 | .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible { 199 | outline-style: solid; 200 | outline-width: 2px; 201 | } 202 | 203 | textarea, select, input { 204 | color: #4a4a4a; 205 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 206 | margin-bottom: 10px; 207 | background-color: #f1f1f1; 208 | border: 1px solid #f1f1f1; 209 | border-radius: 4px; 210 | box-shadow: none; 211 | box-sizing: border-box; 212 | } 213 | textarea:focus, select:focus, input:focus { 214 | border: 1px solid #1d7484; 215 | outline: 0; 216 | } 217 | 218 | input[type=checkbox]:focus { 219 | outline: 1px dotted #1d7484; 220 | } 221 | 222 | label, legend, fieldset { 223 | display: block; 224 | margin-bottom: 0.5rem; 225 | font-weight: 600; 226 | } -------------------------------------------------------------------------------- /templates/css/stylize.css: -------------------------------------------------------------------------------- 1 | /* stylize.css v1.0.0 | License MIT | https://github.com/vasanthv/stylize.css */:root{--text:#333;--text-med:#888;--text-light:#ccc;--text-lighter:#eee;--blue:#3498db;--dark-blue:#2980b9;--yellow:#ffeaa7;--red:#c0392b;--border-radius:3px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;font-size:1em;color:var(--text);margin:10px;-webkit-text-size-adjust:100%}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.17em 0}h5{font-size:.83em;margin:1.5em 0}h6{font-size:.67em;margin:2em 0}a{color:var(--blue);background-color:transparent}a:visited{color:var(--dark-blue)}nav{background-color:var(--text-lighter);padding:1em;margin:-10px}nav a{padding:.5em;border-radius:var(--border-radius);text-decoration:none}nav a:hover{background-color:var(--text-light);color:var(--text)}hr{border:1px solid var(--text-med);border-bottom:0;height:0}p{margin:1em 0}mark{background-color:var(--yellow);color:#333}small{font-size:80%}sub,sup{font-size:75%}blockquote{border-left:4px solid var(--text-light);margin:1em 0;padding:.6em 1em}pre{font-family:monospace;border:1px solid var(--text-light);background-color:var(--text-lighter);padding:.8em;border-radius:var(--border-radius);font-size:1em;white-space:pre-wrap;word-wrap:break-word}code,kbd,samp{font-family:monospace;font-size:1em}code,kbd{border-radius:var(--border-radius);padding:0 2px}code{border:1px solid var(--text-light);background-color:var(--text-lighter);color:var(--red)}kbd{border:1px solid var(--text);background-color:var(--text);color:var(--text-lighter)}ul,ol{padding-left:2em}fieldset{border:1px solid var(--text);border-radius:var(--border-radius)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position-x:100%;background-position-y:50%}button,input,select,textarea,a[role="button"]{font-family:inherit;font-size:100%;line-height:1.5;margin:0;padding:.33em;border:1px solid var(--text-light);border-radius:var(--border-radius);box-sizing:border-box}input[type="checkbox"],input[type="radio"]{border:0;border:0}button,input[type="button"],input[type="submit"],a[role="button"]{padding:.33em .66em;cursor:pointer;background-color:var(--text-lighter);color:var(--text);text-decoration:none}button:hover,input[type="button"]:hover,input[type="submit"]:hover,a[role="button"]:hover{background-color:var(--text-light)}a[role="button"]{padding:.5em .66em}button:disabled,input[type="button"]:disabled,input[type="submit"]:disabled,a[role="button"]:disabled{background-color:var(--text-lighter);color:var(--text-light);cursor:not-allowed}progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border:0;width:15em;height:.75em;background-color:var(--text-light);color:var(--blue)}progress[value]::-webkit-progress-bar{background-color:var(--text-light)}progress[value]::-webkit-progress-value{background-color:var(--blue)}table{border-collapse:collapse}table,table th,table td{border-bottom:1px solid var(--text-light);padding:.33em .66em;text-align:left;vertical-align:middle}table[border="1"],table[border="1"] th,table[border="1"] td{border:1px solid var(--text-light)}.left{float:left}.right{float:right}.center{text-align:center}.clear{clear:both}.hide{display:none}.spacer{display:block;height:1em;border:0;clear:both}.wrap{width:100%;max-width:40em;margin:auto}.reset{font:inherit;font-size:100%;margin:0;padding:0;border:0;text-decoration:none}ol.reset,ul.reset{list-style:none} 2 | -------------------------------------------------------------------------------- /templates/css/visual-impaired.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'AtkinsonHL'; 3 | src: 4 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'), /* Super Modern Browsers */ 5 | url('../fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff') format('woff'), /* Pretty Modern Browsers */ 6 | url('../fonts/TTF/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype'); /* Safari, Android, iOS */ 7 | } 8 | @font-face { 9 | font-family: 'AtkinsonHL'; 10 | font-weight: bold; 11 | src: 12 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'), /* Super Modern Browsers */ 13 | url('../fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff') format('woff'), /* Pretty Modern Browsers */ 14 | url('../fonts/TTF/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype'); /* Safari, Android, iOS */ 15 | } 16 | @font-face { 17 | font-family: 'AtkinsonHL'; 18 | font-style: italic; 19 | src: 20 | url('../fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'), /* Super Modern Browsers */ 21 | url('../fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff') format('woff'), /* Pretty Modern Browsers */ 22 | url('../fonts/TTF/Atkinson-Hyperlegible-Italic-102.ttf') format('truetype'); /* Safari, Android, iOS */ 23 | } 24 | @font-face { 25 | font-family: 'AtkinsonHL'; 26 | font-weight: bold; 27 | font-style: italic; 28 | src: 29 | url('../fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'), /* Super Modern Browsers */ 30 | url('../fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff'), /* Pretty Modern Browsers */ 31 | url('../fonts/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf') format('truetype'); /* Safari, Android, iOS */ 32 | } 33 | body, h1, h2, h3, h4, h5, h6 { font-family: 'AtkinsonHL'; } -------------------------------------------------------------------------------- /templates/css/water-dark.css: -------------------------------------------------------------------------------- 1 | body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73} 2 | /* Copyright © 2019 Kognise - MIT License 3 | https://github.com/kognise/water.css - https://watercss.netlify.com/ */ -------------------------------------------------------------------------------- /templates/css/water-light.css: -------------------------------------------------------------------------------- 1 | body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=submit]:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4} 2 | /* Copyright © 2019 Kognise - MIT License 3 | https://github.com/kognise/water.css - https://watercss.netlify.com/ */ 4 | -------------------------------------------------------------------------------- /templates/css/writ.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Writ v1.0.4 3 | * 4 | * Copyright © 2015, Curtis McEnroe 5 | * 6 | * https://cmcenroe.me/writ/LICENSE (ISC) 7 | * https://github.com/programble/writ 8 | * https://writ.cmcenroe.me/ 9 | */dd,hr,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow-x:auto}a,ins{text-decoration:none}html{font-family:Palatino,Georgia,Lucida Bright,Book Antiqua,serif;font-size:16px;line-height:1.5rem}code,kbd,pre,samp{font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.833rem;color:#111}kbd{font-weight:700}h1,h2,h3,h4,h5,h6,th{font-weight:400}h1{font-size:2.488em}h2{font-size:2.074em}h3{font-size:1.728em}h4{font-size:1.44em}h5{font-size:1.2em}h6{font-size:1em}small{font-size:.833em}h1,h2,h3{line-height:3rem}blockquote,dl,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin:1.5rem 0 0}pre,table{margin-bottom:-1px}hr{border:none;padding:1.5rem 0 0}table{line-height:calc(1.5rem - 1px);width:100%;border-collapse:collapse}pre{margin-top:calc(1.5rem - 1px)}body{color:#222;margin:1.5rem 1ch}a,a code,header nav a:visited{color:#00e}a:visited,a:visited code{color:#60b}mark{color:inherit;background-color:#fe0}code,pre,samp,tfoot,thead{background-color:rgba(0,0,0,.05)}blockquote,ins,main aside{border:rgba(0,0,0,.05) solid}blockquote,main aside{border-width:0 0 0 .5ch}code,pre,samp{border:rgba(0,0,0,.1) solid}td,th{border:solid #dbdbdb}body>header{text-align:center}body>footer,main{display:block;max-width:78ch;margin:auto}main aside,main figure{float:right;margin:1.5rem 0 0 1ch}main aside{max-width:26ch;padding:0 0 0 .5ch}blockquote{margin-right:3ch;margin-left:1.5ch;padding:0 0 0 1ch}pre{border-width:1px;border-radius:2px;padding:0 .5ch}pre code{border:none;padding:0;background-color:transparent;white-space:inherit}code,ins,samp,td,th{border-width:1px}img{max-width:100%}dd,ol,ul{padding:0 0 0 3ch}ul>li{list-style-type:disc}li ul>li{list-style-type:circle}li li ul>li{list-style-type:square}ol>li{list-style-type:decimal}li ol>li{list-style-type:lower-roman}li li ol>li{list-style-type:lower-alpha}nav ul{padding:0;list-style-type:none}nav ul li{display:inline;padding-left:1ch;white-space:nowrap}nav ul li:first-child{padding-left:0}ins,mark{padding:1px}td,th{padding:0 .5ch}sub,sup{font-size:.75em;line-height:1em}code,samp{border-radius:2px;padding:.1em .2em;white-space:nowrap} -------------------------------------------------------------------------------- /templates/default.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'partials/base.html.twig' %} 2 | {# This only exists to improve compatibility with other themes #} 3 | {% endembed %} -------------------------------------------------------------------------------- /templates/error.html.twig: -------------------------------------------------------------------------------- 1 | {% extends 'partials/base.html.twig' %} 2 | 3 | {% block content %} 4 |
5 |

Error {{ page.header.http_response_code }}

6 |

7 | {{ page.content|raw }} 8 |

9 |
10 | {% endblock %} 11 | -------------------------------------------------------------------------------- /templates/item.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'partials/base.html.twig' %} 2 | {# This only exists to improve compatibility with other themes #} 3 | {# It may be extended in the future, though. Use default if possible. #} 4 | {% endembed %} -------------------------------------------------------------------------------- /templates/modular.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'default.html.twig' %} 2 | {# Needs work: Just adding this as a stub for now. #} 3 | {% endembed %} -------------------------------------------------------------------------------- /templates/partials/base.html.twig: -------------------------------------------------------------------------------- 1 | {% set structure = config.themes.hypertext.structure %} 2 | {% set style = config.themes.hypertext.style %} 3 | {% set menu = config.themes.hypertext.menu %} 4 | {% set partials = config.themes.hypertext.partials %} 5 | {% set html5 = structure.html_mode|default('default') == 'default' %} 6 | 7 | {# ------------------------------------------------------------------------ #} 8 | 9 | 10 | 11 | 12 | {# ## HEADLESS RENDERING ## #} 13 | {% if (uri.query('headless') or page.header.is_headless) %} 14 | 15 | 16 | {% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }} 17 | 18 | 19 | {{ block('content') }} 20 | 21 | 22 | 23 | 24 | {% else %} 25 | {# ## ORDINARY RENDER ## #} 26 | 27 | 28 | {% block head %} 29 | 30 | 31 | 32 | 33 | {% for meta in page.metadata %} 34 | 35 | {% endfor %} 36 | 37 | {% if structure.add_site_name %} 38 | {% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }} 39 | {% else %} 40 | {% if header.title %}{{ header.title|e('html') }}{% endif %} 41 | {% endif %} 42 | 43 | 44 | {% if structure.use_favicon %} 45 | 46 | {% endif %} 47 | 48 | {% include 'partials/page/js-css.html.twig' %} 49 | {% endblock head %} 50 | 51 | 52 | 53 | 54 | {# ## HEADER ## #} 55 | {{ html5 ? '
' : '
' }} 56 | {% block header %} 57 | {% include 'partials/page/header.html.twig' %} 58 | {% endblock %} 59 | {{ html5 ? '
' : '' }} 60 | 61 | {# ## BODY ## #} 62 | {{ html5 ? '
' : '
' }} 63 | {{ html5 ? '
' : '
'}} 64 | 65 | {# ARTICLE HEAD #} 66 | {% block item_head %} 67 | {% include 'partials/item/header.html.twig' %} 68 | {% endblock %} 69 | 70 | {# ARTICLE BODY #} 71 | {% block content %} 72 | {{ page.content|raw }} 73 | {% endblock %} 74 | 75 | {# CHILD PAGES #} 76 | {% block children %} 77 | {% include 'partials/item/children.html.twig' %} 78 | {% endblock %} 79 | 80 | {# ARTICLE FOOTER #} 81 | {% block item_footer %} 82 | {% include 'partials/item/footer.html.twig' %} 83 | {% endblock %} 84 | 85 | {{ html5 ? '
' : '
'}} 86 | {{ html5 ? '
' : '' }} 87 | 88 | {# ## FOOTER ## #} 89 | {{ html5 ? '
' : '
' }} 90 | {% block footer %} 91 | {% include 'partials/page/footer.html.twig' %} 92 | {% endblock %} 93 | {{ html5 ? '
' : '' }} 94 | 95 | 96 | {% endif %} 97 | 98 | -------------------------------------------------------------------------------- /templates/partials/breadcrumbs.html.twig: -------------------------------------------------------------------------------- 1 | {% set crumbs = breadcrumbs.get() %} 2 | {% if crumbs|length > 1 %} 3 | 4 | {% for crumb in crumbs %} 5 | {{ crumb.menu }}{% if not loop.last %} » {% endif %} 6 | {% endfor %} 7 | 8 | {% endif %} -------------------------------------------------------------------------------- /templates/partials/item/README.md: -------------------------------------------------------------------------------- 1 | This folder contains snippets necessary for rendering children within some larger page. e.g. the `

` title of a page's `
` but not necessarily the `
` of the whole document. -------------------------------------------------------------------------------- /templates/partials/item/children.html.twig: -------------------------------------------------------------------------------- 1 | {% set collection = page.collection()|length > 0 ? page.collection() : page.children.visible %} 2 | {% set child_style = page.header.render.children.style|default('summary') %} 3 | 4 | {# ------------------------------------------------------------------------ #} 5 | 6 | {% if collection|length > 0 %} 7 | {% set collection = collection.order(page.header.content.order.by|default(system.pages.order.by), 8 | page.header.content.order.dir|default(system.pages.order.dir)) %} 9 | 10 | {# TABLE #} 11 | {% if child_style == 'table' %} 12 | {% include 'partials/item/table.html.twig' with {'parent': page, 'collection': collection} %} 13 | 14 | {# LIST #} 15 | {% elseif child_style == 'list' %} 16 |
    17 | {% for child in collection %} 18 | {% if (child.isPage() or child.isDir()) %} 19 | {% include 'partials/item/list.html.twig' with {'page':child, parent:page, level:1} %} 20 | {% endif %} 21 | {% endfor %} 22 |
23 | 24 | {# SUMMARY #} 25 | {% else %} 26 | {% for child in collection %} 27 | {% if child.isPage() %} 28 | {% include 'partials/item/summary.html.twig' with {'page':child, parent:page} %} 29 | {% endif %} 30 | {% endfor %} 31 | 32 | {% endif %} 33 | 34 | {% if config.plugins.pagination.enabled and collection.params.pagination %} 35 | {% include 'partials/page/pagination.html.twig' with {'base_url':page.url, 'pagination':collection.params.pagination} %} 36 | {% endif %} 37 | {% endif %} -------------------------------------------------------------------------------- /templates/partials/item/footer.html.twig: -------------------------------------------------------------------------------- 1 | {# If this isn't a top-level page, it has siblings under a `collection` page type. #} 2 | {# Add the date, unless suppressed. TODO: Build in suppression option. #} 3 | 4 |

5 | {# Render the next/prev buttons, unless suppressed. #} 6 | {% if not page.parent.root() and page.parent.header.content.sibling_links|default(false) %} 7 | 8 | {% if not page.isLast %} 9 | « {{ 'THEME_HYPERTEXT.PAGINATION.PREVIOUS_PAGE'|t }} 10 | {% endif %} 11 | {% if not page.isFirst %} 12 | {{ 'THEME_HYPERTEXT.PAGINATION.NEXT_PAGE'|t }} » 13 | {% endif %} 14 | 15 | {% endif %} 16 | -------------------------------------------------------------------------------- /templates/partials/item/grid.html.twig: -------------------------------------------------------------------------------- 1 | {% if page.header.show_header_image|default('default') == 'default' %} 2 | {% set show_image = parent.header.render.children.image ?? true %} 3 | {% else %} 4 | {% set show_image = page.header.show_header_image == 'enabled' %} 5 | {% endif %} 6 | 7 | {% set header_image = page.media.images[page.header.header_image_file] ?? page.media.images|first %} 8 | {% set use_image_crop = style.image_cropping|default(false) %} 9 | {% set image_width = use_image_crop ? (style.width == 'default' ? 1024 : style.width) / 7 : header_image.width %} 10 | {% set image_height = use_image_crop ? (style.width == 'default' ? 1024 : style.width) / 7 : header_image.height %} 11 | {% set header_image_url = header_image.cropZoom(image_width, image_height).url : header_image.url %} 12 | 13 | {% set show_subtitle = parent.header.render.children.subtitle ?? true %} 14 | {% set show_cat = parent.header.render.children.category ?? true %} 15 | {% set show_date = parent.header.render.children.date ?? false %} 16 | {% set show_children = parent.header.render.children.nested_children ?? true %} 17 | {% set inner_children = page.collection()|length > 0 ? page.collection() : page.children.visible %} 18 | 19 | {# ------------------------------------------------------------------------ #} 20 | 21 | 22 | 23 | {# Image #} 24 | 25 | {% if show_image and header_image %} 26 | 27 | 28 | 29 | {% endif %} 30 | 31 | 32 | 33 | {# Title #} 34 | 35 | 36 | {{ page.title }} 37 | 38 | 39 | 40 | 41 | {# Subtitle #} 42 | 43 | 44 | {% if show_subtitle and page.header.subtitle %} 45 | {{ page.header.subtitle }} 46 | {% endif %} 47 | 48 | 49 | 50 | 51 | 52 | {# Date #} 53 | 54 | {% if show_date %} 55 | {% if html5 %} 56 | {{ 'THEME_HYPERTEXT.DATES.PUBLISHED'|t|raw }}: 57 | {% else %} 58 | {{ 'THEME_HYPERTEXT.DATES.PUBLISHED'|t|raw }}: {{ page.date|date(system.pages.dateformat.short) }} 59 | {% endif %} 60 | {% endif %} 61 | 62 | 63 | {# Categories #} 64 | 65 | {% if page.taxonomy.category and show_cat %} 66 | {{ 'THEME_HYPERTEXT.CATEGORIES.CATEGORIES'|t|raw }}: 67 | {% for category in page.taxonomy.category %} 68 | {{ structure.use_decorators ? '[' : '' }}{{ category }}{{ structure.use_decorators ? ']' : '' }}{{ not loop.last ? ',' : '' }} 69 | {% endfor %} 70 | {% endif %} 71 | 72 | 73 | {# Children 74 | # Not sure how to implement this just yet... 75 | {% if show_children and inner_children|length > 0 %} 76 | {% set inner_children = inner_children.order(page.header.content.order.by|default('default'), page.header.content.order.dir|default('default')) %} 77 |
78 | {{ 'THEME_HYPERTEXT.PAGINATION.SUB_PAGES'|t }}: 79 |

    80 | {% for child in inner_children %} 81 |
  1. {{ child.title }}{{ child.header.subtitle and show_subtitle ? ' - '~child.header.subtitle~'' : '' }}
    2. 82 | {% endfor %} 83 |
84 | {% endif %} {# End render nested children #} -------------------------------------------------------------------------------- /templates/partials/item/header.html.twig: -------------------------------------------------------------------------------- 1 | {% set show_image = page.header.show_header_image|default(false) %} 2 | {% set header_image_name = page.header.header_image_file|default('header.png') %} 3 | {% set header_image = page.media.images[header_image_name] ?? 4 | media['image://' ~ header_image_name] ?? 5 | 6 | page.media.images['header.png'] ?? 7 | page.media.images['header.gif'] ?? 8 | page.media.images['header.jpg'] ?? 9 | page.media.images['header.webp'] ?? 10 | 11 | media['image://' ~ page.slug()~'.png'] ?? 12 | media['image://' ~ page.slug()~'.gif'] ?? 13 | media['image://' ~ page.slug()~'.jpg'] ?? 14 | media['image://' ~ page.slug()~'.webp'] ?? 15 | 16 | media['image://' ~ page.slug()~'_header.png'] ?? 17 | media['image://' ~ page.slug()~'_header.gif'] ?? 18 | media['image://' ~ page.slug()~'_header.jpg'] ?? 19 | media['image://' ~ page.slug()~'_header.webp'] ?? 20 | 21 | page.media.images|first %} 22 | {% set use_image_crop = style.image_cropping|default(false) %} 23 | {% set image_width = use_image_crop ? (style.width == 'default' ? 1024 : style.width) - 10 : header_image.width %} 24 | {% set image_height = use_image_crop ? (style.width == 'default' ? 1024 : style.width) / 5 : header_image.height %} 25 | {% set header_image_url = use_image_crop ? header_image.cropZoom(image_width, image_height).url : header_image.url %} 26 | 27 | {% set show_date = structure.show_date|default(false) %} 28 | 29 | {% switch page.parent.header.render.children.which_date|default('date') %} 30 | {% case 'modified' %} 31 | {% set date = page.modified %} 32 | {% case 'published' %} 33 | {% set date = page.publishDate %} 34 | {% case 'unpublished' %} 35 | {% set date = page.unpublishDate %} 36 | {% case 'date' %} 37 | {% set date = page.date %} 38 | {% default %} 39 | {% set date = page.date %} 40 | {% endswitch %} 41 | 42 | {# ------------------------------------------------------------------------ #} 43 | 44 | {# Title & Subtitle #} 45 | {% if not page.home() %} 46 |

47 | {{ page.title }} 48 |

49 | {% endif %} 50 | {% if page.header.subtitle %}{{ page.header.subtitle }}{% endif %} 51 | 52 |

{# The next set of items should be somewhat close together. #} 53 | 54 | {# Image #} 55 | {% if show_image and header_image %} 56 | 57 | 58 | 59 |
60 | {% endif %} 61 | 62 | {# Date #} 63 | {% set isHome = page.home() %} 64 | {% if (show_date != 0) and (show_date != default) and page.header.show_date != 'disabled' %} 65 | {% if (show_date == 'everywhere' or show_date == 1) or 66 | (show_date == 'not-home' and not isHome) or 67 | (show_date == 'children' and page.template() in ['default', 'blog_item', 'item', 'modular'] and not isHome) or 68 | page.header.show_date == 'enabled' 69 | %} 70 | Date: 71 | {% if html5 %} 72 | {{ structure.use_decorators ? '[' : '' }}{{ structure.use_decorators ? ']' : '' }} 73 | {% else %} 74 | {{ structure.use_decorators ? '[' : '' }}{{ date|date(system.pages.dateformat.short) }}{{ structure.use_decorators ? ']' : '' }} 75 | {% endif %} 76 |
77 | {% endif %} 78 | {% endif %} 79 | 80 | {# Categories #} 81 | {% if page.taxonomy.category %} 82 | {{ 'THEME_HYPERTEXT.CATEGORIES.CATEGORIES'|t }}: 83 | {% for category in page.taxonomy.category %} 84 | {{ structure.use_decorators ? '[' : '' }}{{ category }}{{ structure.use_decorators ? ']' : '' }}{{ not loop.last ? ',' : '' }} 85 | {% endfor %} 86 | {{ page.taxonomy.tag ? '
' : '' }} 87 | {% endif %} 88 | 89 | {% if page.taxonomy.tag %} 90 | Tags: 91 | {% for tag in page.taxonomy.tag %} 92 | {{ structure.use_decorators ? '[' : '' }}{{ tag }}{{ structure.use_decorators ? ']' : '' }}{{ not loop.last ? ',' : '' }} 93 | {% endfor %} 94 | {% endif %} 95 | 96 |

97 | -------------------------------------------------------------------------------- /templates/partials/item/list.html.twig: -------------------------------------------------------------------------------- 1 | {% set show_subtitle = parent.header.render.children.subtitle ?? true %} 2 | {% set show_cat = parent.header.render.children.category ?? true %} 3 | {% set show_children = parent.header.render.children.nested_children ?? true %} 4 | {% set inner_children = page.collection()|length > 0 ? page.collection() : page.children.visible %} 5 | 6 | {% set show_date = parent.header.render.children.date ?? false %} 7 | {% switch parent.header.render.children.which_date|default('date') %} 8 | {% case 'modified' %} 9 | {% set date = page.modified %} 10 | {% case 'published' %} 11 | {% set date = page.publishDate %} 12 | {% case 'unpublished' %} 13 | {% set date = page.unpublishDate %} 14 | {% case 'date' %} 15 | {% set date = page.date %} 16 | {% default %} 17 | {% set date = page.date %} 18 | {% endswitch %} 19 | 20 | {# ------------------------------------------------------------------------ #} 21 | 22 | {% if page.isDir() %} 23 |
  • {{ page.title }}
    • 24 | {% else %} 25 | 26 |
  • 27 | {# Date #} 28 | {% if show_date %} 29 | {% if html5 %} 30 | {{ structure.use_decorators ? '[' : '' }}{{ structure.use_decorators ? ']' : ' '}} 31 | {% else %} 32 | {{ structure.use_decorators ? '[' : '' }}{{ date|date(system.pages.dateformat.short) }}{{ structure.use_decorators ? ']' : ' '}} 33 | {% endif %} 34 | {% endif %} 35 | 36 | {# Title & Subtitle #} 37 | {{ level > 1 ? '' : '' }} 38 | {{ page.title }} 39 | {{ level > 1 ? '' : '' }} 40 | {% if page.header.subtitle and show_subtitle %} - {{ page.header.subtitle }}{% endif %} 41 | 42 | {# Categories #} 43 | {% if page.taxonomy.category and show_cat %} 44 |
    45 | {{ 'THEME_HYPERTEXT.CATEGORIES.CATEGORIES'|t }}: 46 | {% for category in page.taxonomy.category %} 47 | {{ structure.use_decorators ? '[' : '' }}{{ category }}{{ structure.use_decorators ? ']' : '' }}{{ not loop.last ? ',' : '' }} 48 | {% endfor %} 49 | {% else %} 50 | {% endif %} 51 | 52 | {# Children #} 53 | {% if show_children and inner_children|length > 0 %} 54 | {% set inner_children = inner_children.order(page.header.content.order.by|default(system.pages.order.by), 55 | page.header.content.order.dir|default(system.pages.order.dir)) %} 56 |
      57 | {% for child in inner_children %} 58 | {% include 'partials/item/list.html.twig' with {'page':child, 'parent':parent, level:level + 1} %} 59 | {% endfor %} 60 |
      61 |
    62 | {% endif %} {# End render nested children #} 63 |
    • 64 | {% endif %} -------------------------------------------------------------------------------- /templates/partials/page/README.md: -------------------------------------------------------------------------------- 1 | This folder contains snippets necessary for rendering the larger page (e.g. CSS/JS logic, `` content, etc). -------------------------------------------------------------------------------- /templates/partials/page/footer.html.twig: -------------------------------------------------------------------------------- 1 |
    2 | {# Write the custom footer, if available. #} 3 | {% if partials.footer.custom_footer|default('') != '' %} 4 | {% if partials.footer.custom_footer_type|default('markdown') == 'markdown' %} 5 | {{ partials.footer.custom_footer|markdown }} 6 | {% else %} 7 | {{ partials.footer.custom_footer|raw }} 8 | {% endif %} 9 | {% endif %} 10 | 11 | {# Be cool; please leave the attribution in unless you really need to remove it. ;) #} 12 |

    {{ 'THEME_HYPERTEXT.FOOTER.BY_LINE'|t|raw }}

    13 | 14 | {% block bottom %} 15 | {% if allowJS %} 16 | {{ assets.js('bottom')|raw }} 17 | {% endif %} 18 | 19 | {% if allowCSS %} 20 | {{ assets.css('bottom')|raw }} 21 | {% endif %} 22 | {% endblock %} 23 | -------------------------------------------------------------------------------- /templates/partials/page/header.html.twig: -------------------------------------------------------------------------------- 1 | {% if partials.header.custom_header_image != '' %} 2 | {{ partials.header.custom_header_image|raw }} 3 | {% else %} 4 |

    {{ site.title|e('html') }}

    5 | {% endif %} 6 | 7 | {% if site.metadata.description and partials.header.show_subtitle %} 8 |

    {{ site.metadata.description }}

    9 | {% endif %} 10 | 11 | {% block header_navigation %} 12 | {% include 'partials/page/navigation.html.twig' %} 13 | {% endblock %} 14 | 15 | {% if grav.messages.all %} 16 | {% include 'partials/page/messages.html.twig' %} 17 | {% endif %} -------------------------------------------------------------------------------- /templates/partials/page/js-css.html.twig: -------------------------------------------------------------------------------- 1 | {% set allowCSS = page.header.allowCSS == 'enabled' or 2 | (page.header.allowCSS|default('default') == 'default' and 3 | style.allowCSS == '1') %} 4 | {% set allowJS = page.header.allowJS == 'enabled' or 5 | (page.header.allowJS|default('default') == 'default' and 6 | style.allowJS == '1') %} 7 | {% set use_visually_impaired = style.visually_impared_mode|default(false) %} 8 | 9 | {% set stylesheets = ['air', 'hypertext++', 'latex', 'marx', 'milligram', 'modest', 'mvp', 'newcss-default', 'newcss-night', 'newcss-terminal', 'sakura', 'sakura-dark', 'sakura-dark-solarized', 'sakura-earthly', 'sakura-ink', 'sakura-pink', 'sakura-radical', 'sakura-vader', 'simple', 'stylize', 'tacit', 'tufte', 'water-dark', 'water-light', 'writ', 'yorha'] %} 10 | 11 | {# Set a stylesheet from the style config, then from the URI if available #} 12 | {% set stylesheet = uri.query('theme')|default(style.stylesheet) %} 13 | {% if stylesheet matches '/^\\d+$/' %} 14 | {% set stylesheet = stylesheets[stylesheet % stylesheets|length] %} 15 | {% endif %} 16 | 17 | {# Always required and hard to serve via href. See docs. #} 18 | {% set required_styles %} 19 | img { max-width: 100%; } 20 | 21 | {# Max width and centering vs left alignment #} 22 | body { 23 | {% if style.width != 'default' %} 24 | max-width: {{style.width}}px; 25 | {% else %} 26 | max-width: 100%; 27 | {% endif %} 28 | 29 | {# Reset to 8px, the Chrome default (`unset` doesnt work). #} 30 | {% if style.configuration == 'default' %} 31 | margin-left: 8px; 32 | margin-right: 8px; 33 | {% else %} 34 | margin-left: auto; 35 | margin-right: auto; 36 | {% endif %} 37 | } 38 | {% endset %} 39 | 40 | 41 | 42 | {# CONFIGURE THEME'S CSS FEATURES #} 43 | 44 | {# ------------------------------------------------------------------------ #} 45 | 46 | {% block stylehseets %} 47 | 48 | {# Add the hypertext selected stylesheet #} 49 | {% if stylesheet != 'default' %} 50 | 51 | {% if style.include_type == 'inline' %} 52 | 53 | 54 | {% elseif not allowCSS %} 55 | {# User wants it via href, but doesn't have CSS pipeline running #} 56 | 57 | {% if use_visually_impaired %} {% endif %} 58 | 59 | {% else %} 60 | {# User wants it href and is allowing CSS pipeline, so use that. #} 61 | {% do assets.addCss('theme://css/'~stylesheet~'.css') %} 62 | {% if use_visually_impaired %}{% do assets.addCss('theme://css/visual-impaired.css') %} {%endif %} 63 | {% endif %} 64 | 65 | {% endif %} {# END if style isn't default #} 66 | {% endblock %} 67 | 68 | {% block javascripts %} 69 | {# Hypertext doesn't add any JS, but if it did it would go here. #} 70 | {% endblock %} 71 | 72 | {# Regular CSS/JS includes, like from plugins #} 73 | {% block assets deferred %} 74 | {% if allowCSS %}{{ assets.css()|raw }}{% endif %} 75 | {% if allowJS %}{{ assets.js()|raw }}{% endif %} 76 | {% endblock %} 77 | 78 | {# Add any final required styling like max-width, centering, and user-provided values #} 79 | 91 | -------------------------------------------------------------------------------- /templates/partials/page/messages.html.twig: -------------------------------------------------------------------------------- 1 | {% set type_mapping = {'info':'success', 'error': 'error', 'warning': 'warning'} %} 2 | {% set icon_mapping = {'info':'checkmark', 'error':'wrong', 'warning':'information'} %} 3 | {% set word_mapping = {'info': 'Info: ', 'error': 'Error: ', 'warning': 'Warning: '} %}} 4 | 5 |
    6 | {% for message in grav.messages.fetch %} 7 | 8 | {% set scope = message.scope|e %} 9 | {% set type = type_mapping[scope] %} 10 | {% set icon = icon_mapping[scope] %} 11 | 12 |
    13 | {{word_mapping[scope]}} {{ message.message|raw }} 14 |
    15 | {% endfor %} 16 |
    -------------------------------------------------------------------------------- /templates/partials/page/navigation.html.twig: -------------------------------------------------------------------------------- 1 | {% set hasNav = pages.children.visible|length >= 1 or 2 | config.themes.hypertext.menu.menuItems|length >= 1 or 3 | (config.plugins.login.enabled and grav.user.username) %} 4 | 5 | {% if hasNav %} 6 | 7 | {{ html5 ? '' : '' }} 62 | 63 | {# Breadcrumbs #} 64 | {% if config.plugins.breadcrumbs.enabled %} 65 | {% include 'partials/breadcrumbs.html.twig' %} 66 | {% endif %} 67 | 68 | {# Drop in a separator as most themes need this or will hide it. #} 69 |
    70 | 71 | {% endif %} {# end if has nav #} 72 | -------------------------------------------------------------------------------- /templates/partials/page/pagination.html.twig: -------------------------------------------------------------------------------- 1 | {% set pagination = pagination|default(page.collection.params.pagination) %} 2 | {% set base_url = base_url|default(page.url) %} 3 | 4 | {# ------------------------------------------------------------------------ #} 5 | 6 | {% if pagination|length > 1 %} 7 | 8 | {% if structure.inline_pagination %} 9 | {{ html5 ? '' : '' }} 35 | 36 | {% else %} {# Otherwise, we're doing UL-based navigation, like for a theme #} 37 | 38 | {{ html5 ? '' : '' }} 67 | 68 | {% endif %} {# End veritcal navigation option #} 69 | 70 | {% endif %} {# End if pagination length > 1 #} 71 | -------------------------------------------------------------------------------- /thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artofthesmart/hypertext/a09cc89737263ee74592e42430b54354de2bb320/thumbnail.jpg --------------------------------------------------------------------------------