org-demo.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <div id="org-demo" style="counter-set: chk 0">
  2. <asside class="label-left">Metadata </asside>
  3. <pre class="label-left">
  4. #+title: <span class="org-document-title">Example Org File</span>
  5. #+author: <span class="org-document-info">TEC</span>
  6. #+date: <span class="org-document-info">2020-10-27</span></pre>
  7. <details open>
  8. <summary>
  9. <asside class="right" style="position: relative; z-index: -1">
  10. <h4>Outlining</h4>
  11. Headlines and folding make structured editing a breeze.
  12. Plain text makes it easy to sync and version control Org files.
  13. </asside>
  14. <pre><span class="org-level-1">* Revamp orgmode.org website</span></pre>
  15. </summary>
  16. <asside class="left">
  17. <h4>Agenda</h4>
  18. List todos across all your files.
  19. Filter content, and update it in place.
  20. </asside>
  21. <pre>
  22. The <i>/beauty/</i> of org <b>*must*</b> be shared.</pre>
  23. <details class="replace">
  24. <summary>
  25. <pre><span class="org-link">[[https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg]]</span></pre>
  26. </summary>
  27. <img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg" alt="share icon" style="height: 3em; margin-left: 1.5em"/>
  28. </details>
  29. <details open class="br">
  30. <summary>
  31. <pre><span class="org-level-2">** <span class="org-done">DONE Make screenshots</span></span></pre>
  32. </summary>
  33. <pre> <span class="org-special-keyword">CLOSED:</span> <span class="org-date">[2020-09-03 Thu 18:24]</span>
  34. </pre>
  35. </details>
  36. <details open>
  37. <summary>
  38. <pre><span class="org-level-2">** <span class="org-done">DONE Restyle Site CSS</span></span></pre>
  39. </summary>
  40. <pre>
  41. Go through <span class="org-link"><a href="/resources/style/org.css">[[file:style.scss][stylesheet]]</a></span>
  42. </pre>
  43. </details>
  44. <input type="checkbox" class="chk" id="chk1" checked />
  45. <input type="checkbox" class="chk" id="chk2" checked />
  46. <input type="checkbox" class="chk extra" id="chk3" />
  47. <input type="checkbox" class="chk" id="chk4" />
  48. <input type="checkbox" class="chk" id="chk5" checked />
  49. <input type="checkbox" class="chk extra" id="chk6" />
  50. <input type="checkbox" class="chk" id="chk7" />
  51. <details>
  52. <summary>
  53. <pre><span class="org-level-2">** <span class="org-todo">TODO</span> Check CSS on main pages <span class="count-res"></span></span></pre>
  54. </summary>
  55. <pre class="countme">
  56. <label for="chk1"><span class="org-list-dt">-</span> Index page</label>
  57. <label for="chk2"><span class="org-list-dt">-</span> Quickstart</label>
  58. <label for="chk3"><span class="org-list-dt">-</span> Features</label>
  59. <label for="chk4"><span class="org-list-dt">-</span> Releases</label>
  60. <label for="chk5"><span class="org-list-dt">-</span> Install</label>
  61. <label for="chk6"><span class="org-list-dt">-</span> Manual</label>
  62. <label for="chk7"><span class="org-list-dt">-</span> Contribute</label>
  63. </pre>
  64. </details>
  65. </details>
  66. <details open class="label-left">
  67. <summary>
  68. <asside class="label-left">Prose</asside>
  69. <pre><span class="org-level-1">* Learn Org</span></pre>
  70. </summary>
  71. <pre>
  72. Org makes easy things trivial and complex things practial.
  73. You don't need to learn Org before using Org: read the quickstart
  74. page and you should be good to go. If you need more, Org will be
  75. here for you as well: dive into the manual and join the community!
  76. </pre>
  77. <details open>
  78. <summary>
  79. <pre><span class="org-level-2">** Feedback</span></pre>
  80. </summary>
  81. <pre>
  82. <span class="org-special-keyword">#+include: "other/feedback.org*manual" :only-contents t</span></pre>
  83. </details>
  84. </details>
  85. <details open>
  86. <summary>
  87. <pre>
  88. <span class="org-level-1">* Check CSS minification ratios</span>
  89. </pre>
  90. </summary>
  91. <asside class="right">
  92. <h4>Babel</h4>
  93. Perform literate programing in org,
  94. with notebook-like live code execution in the buffer.
  95. </asside>
  96. <asside class="label-left">Code</asside>
  97. <details open>
  98. <summary><pre class="label-left" style="background-color: #ccc4"><span class="org-block-begin-line">#+begin_src python</span></pre></summary>
  99. <pre class="src label-left" style="background-color: #fff4">
  100. <span class="org-keyword">from</span> pathlib <span class="org-keyword">import</span> Path
  101. <span class="org-variable-name">cssRatios</span> = []
  102. <span class="org-keyword">for</span> css_min <span class="org-keyword">in</span> Path(<span class="org-string">"resources/style"</span>).glob(<span class="org-string">"*.min.css"</span>):
  103. <span class="org-variable-name">css</span> = css_min.with_suffix(<span class="org-string">''</span>).with_suffix(<span class="org-string">'.css'</span>)
  104. cssRatios.append([css.name,
  105. <span class="org-string">"{:.0f}% minified ({:4.1f} KiB)"</span>.<span class="org-builtin">format</span>( <b>100</b> *
  106. css_min.stat().st_size / css.stat().st_size,
  107. css_min.stat().st_size / <b>1000</b>)])
  108. <span class="org-keyword">return</span> cssRatios
  109. </pre>
  110. <pre class="label-left" style="background-color: #ccc4"><span class="org-block-end-line">#+end_src</span></pre>
  111. </details>
  112. <details open>
  113. <summary>
  114. <asside class="label-left">Evaluated results</asside>
  115. <pre class="label-left br"><span class="org-block-begin-line">#+RESULTS:</span></pre>
  116. </summary>
  117. <pre class="label-left"><span class="org-table">| index.css | 76% minified ( 1.4 KiB) |
  118. | org-demo.css | 77% minified ( 2.8 KiB) |
  119. | errors.css | 74% minified ( 4.9 KiB) |
  120. | org.css | 75% minified (10.7 KiB) |
  121. </span></pre>
  122. </details>
  123. </details>
  124. </div>