site

scripts to generate personal blog and git repositories
001-example.md.example

(3115B)
      1 filename: example.html
      2 title: Example page
      3 description: This is an example page
      4 keywords: example
      5 created: 2009-04-12
      6 updated: 2009-04-12
      7 
      8 
      9 <nav aria-labelledby="toc-heading">
     10 	<h2 id="toc-heading">Table of Contents</h2>
     11 	<ol>
     12 		<li><a href="#introduction">Introduction of Lorem Ipsum</a></li>
     13 		<li><a href="#definitions">Definitions of Random Words</a></li>
     14 		<li>
     15 			<a href="#texts">Texts of Stuff</a>
     16 			<ol>
     17 				<li><a href="#blockquote">Blockquote of Sorts</a></li>
     18 				<li><a href="#bindings">Keyboard of Bindings</a></li>
     19 				<li><a href="#html-formatting">Text without HTML Formatting</a></li>
     20 			</ol>
     21 		</li>
     22 		<li><a href="#essential-web">Essential Web Features</a></li>
     23 		<li><a href="#tech-snippet">Technical Snippet</a></li>
     24 		<li><a href="#media">Media & Figures</a></li>
     25 		<li><a href="#unit-comparison">Unit Comparison</a></li>
     26 	</ol>
     27 </nav>
     28 
     29 ## Introduction to Lorem Ipsum Foo Bar Blue Blah {#introduction}
     30 
     31 Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a [hyperlink](#) to test your theme's primary color and text-decoration.
     32 
     33 Strong text check: **This should be strong of the parent size.** Small text check: <small>This should be 80% of the parent size.</small>  
     34 Subscript/Superscript: H~2~O and E=mc^2^.
     35 
     36 ## Definitions of Random Words {#definitions}
     37 
     38 Beast of Bodmin
     39 : A large feline inhabiting Bodmin Moor.
     40 
     41 Morgawr
     42 : A sea serpent.
     43 
     44 Owlman
     45 : A giant owl-like creature.
     46 
     47 ## Texts of stuff {#texts}
     48 
     49 ### Blockquote of Sorts {#blockquote}
     50 
     51 > The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset.
     52 >
     53 > The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset.
     54 >
     55 > — Alan Kay
     56 
     57 ---
     58 
     59 ### Keyboard Bindings {#bindings}
     60 
     61 Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.
     62 
     63 ### Text without HTML Formatting {#html-formatting}
     64 
     65 ```text
     66 			 S
     67 			 A
     68 			LUT
     69 			 M
     70 			O N
     71 			D  E
     72 			DONT
     73 		  JE SUIS
     74 		  LA  LAN
     75 		  G U E  É
     76 		 L O Q U E N
     77 		TE       QUESA
     78 	   B  O  U  C  H  E
     79 	  O         P A R I S
     80 	 T I R E   ET   TIRERA
     81 	T O U               JOURS
     82    AUX                   A  L
     83  LEM                     ANDS   - Apollinaire
     84 ```
     85 
     86 ## Essential Web Features {#essential-web}
     87 
     88 * Responsive Design with `clamp()`
     89 * Semantic HTML5 Tags
     90 * Custom CSS Properties (Variables)
     91 
     92 1. First step: Define the theme
     93 2. Second step: Apply Preflight
     94 3. Third step: Build the UI
     95 
     96 ## Technical Snippet {#tech-snippet}
     97 
     98 To define a variable in your `@theme` block, use this syntax:
     99 
    100 ```css
    101 @theme {
    102 	--default-font-family: 'Inter', sans-serif;
    103 	--brand-color: oklch(60% 0.15 250);
    104 }
    105 ```
    106 
    107 ## Media & Figures {#media}
    108 
    109 <figure>
    110     <img src="https://picsum.photos/800/400" alt="Placeholder Image">
    111     <figcaption>Fig 1. Testing image max-width and height-auto from Preflight.</figcaption>
    112 </figure>
    113 
    114 ## Unit Comparison {#unit-comparison}
    115 
    116 | Unit | Relative To | Usage |
    117 | :--- | :--- | :--- |
    118 | `ex` | x-height | Typography |
    119 | `ch` | 0 width | Containers |
    120