Browse Source

Overhaul demo, from image to interactive html

TEC 9 months ago
parent
commit
5a8cc6c066

+ 6 - 4
index.org

@@ -5,6 +5,7 @@
 #+html_head: <link rel="preload" href="/resources/img/org-mode-unicorn.svg" as="image" type="image/svg+xml">
 #+include: "./resources/preamble.html" export html
 
+#+html_head: <link rel="stylesheet" href="/resources/style/org-demo.min.css" type="text/css" />
 #+include: "./resources/normal-outline-3.html" export html
 
 #+begin_export html
@@ -41,7 +42,6 @@
     <meta itemprop="softwareVersion" content="9.3.8">
     <meta itemprop="datePublished" content="2020-08-07">
     <meta itemprop="url" content="https://orgmode.org">
-    <meta itemprop="screenshot" content="https://orgmode.org/resources/img/main.svg">
   </div>
   </div>
   <div class="banner slim green inline">
@@ -91,13 +91,15 @@
 
 * Elaboration + demo image                                        :ignore:
 
+#+attr_html: :style margin-top:2rem;
 Org is a highly flexible structured plain text file format, composed
 of a few simple, yet versatile, structures --- constructed to be both
 [[https://karl-voit.at/2017/09/23/orgmode-as-markup-only/][simple enough for the novice]] and [[http://howardism.org/Technical/Emacs/literate-devops.html][powerful enough for the expert]].
 
-#+attr_html: :alt An example org file, showing a few basic elements
-#+attr_html: :style max-width:min(45rem, 80vw); background-color:#7a92; padding: 1rem 0;
-[[file:resources/img/main.svg]]
+Get a glimpse of the expressive power Org offers in the example below.
+Click the headlines and links to discover how Org intelligently folds structural content.
+
+#+include: org-demo.html export html
 
 * Further reading
   :PROPERTIES:

+ 102 - 0
org-demo.html

@@ -0,0 +1,102 @@
+<div id="org-demo">
+<asside class="label-left">Metadata </asside>
+<pre class="label-left">
+#+title:  <span class="org-document-title">Example Org File</span>
+#+author: <span class="org-document-info">TEC</span>
+#+date:   <span class="org-document-info">2020-10-27</span>
+</pre>
+<details open><summary>
+<asside class="right">
+    <h4>Outlining</h4>
+    Headlines and folding make structured editing a breeze.
+    Plain text makes it easy to sync and version control Org files.
+</asside>
+<pre>
+<span class="org-level-1">* Revamp orgmode.org website</span>
+</pre> </summary>
+<asside class="left">
+    <h4>Agenda</h4>
+    List todos across all your files.
+    Filter content, and update it in place.
+</asside>
+<pre>
+  The <i>/beauty/</i> of org <b>*must*</b> be shared.
+</pre>
+<details class="replace"> <summary>
+<pre>
+   <span class="org-link">[[https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg]]</span>
+</pre> </summary>
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg" alt="share icon" style="height: 3em; margin-left: 1.5em"/>
+</details>
+<details open class="br"><summary><pre>
+<span class="org-level-2">** <span class="org-done">DONE Make screenshots</span></span>
+</pre></summary><pre>
+   <span class="org-special-keyword">CLOSED:</span> <span class="org-date">[2020-09-03 Thu 18:24]</span>
+</pre></details>
+<details open><summary><pre>
+<span class="org-level-2">** <span class="org-todo-active">HOLD</span> Restyle Site CSS</span>
+</pre></summary><pre>
+   Go through <span class="org-link"><a href="/resources/style/org.css">[[file:style.scss][stylesheet]]</a></span>
+</pre></details>
+<details><summary><pre>
+<span class="org-level-2">** <span class="org-todo">TODO</span> Check CSS on main pages <span class="org-checkbox-statistics-todo">[28%]</span></span>
+</pre></summary><pre>
+   <span class="org-list-dt">-</span> <span class="org-done">[X] Index page</span>
+   <span class="org-list-dt">-</span> <span class="org-checkbox">[-]</span> Quickstart
+   <span class="org-list-dt">-</span> <span class="org-done">[X] Features</span>
+   <span class="org-list-dt">-</span> <span class="org-checkbox">[ ]</span> Releases
+   <span class="org-list-dt">-</span> <span class="org-checkbox">[-]</span> Install
+   <span class="org-list-dt">-</span> <span class="org-checkbox">[ ]</span> Manual
+   <span class="org-list-dt">-</span> <span class="org-checkbox">[ ]</span> Contribute
+</pre></details>
+</details>
+<details open class="label-left"><summary>
+<asside class="label-left">Prose</asside>
+<pre><span class="org-level-1">* Update Manual</span></pre>
+</summary><pre>
+  We should provide a simpler experience for new users.
+  Org has a lot to offer, but it's easy to become overwhelmed.
+  Providing a clearer introduction to the basics would be a good improvement.
+  Hopefully the new "Quickstart" page will help with that.
+
+</pre>
+<details open><summary><pre>
+<span class="org-level-2">** Feedback</span>
+</pre></summary><pre>
+   <span class="org-special-keyword">#+include: "other/feedback.org*manual" :only-contents t</span>
+</pre></details></details>
+<details open><summary><pre>
+<span class="org-level-1">* Investigate some prime moduli</span>
+</pre></summary>
+<asside class="right">
+    <h4>Babel</h4>
+    Perform literate programing in org,
+    with notebook-like live code execution in the buffer.
+</asside>
+<asside class="label-left">Code</asside>
+<details open><summary>
+<pre class="label-left" style="background-color: #ccc4">
+  <span class="org-block-begin-line">#+begin_src python</span>
+</pre></summary>
+<pre class="src label-left" style="background-color: #fff4">
+  <span class="org-variable-name">primes</span> = [2, 5, 7, 11]
+  <span class="org-variable-name">remainders</span> = []
+  <span class="org-keyword">for</span> i <span class="org-keyword">in</span> <span class="org-builtin">range</span>(2, 6):
+      remainders.append([p % i <span class="org-keyword">for</span> p <span class="org-keyword">in</span> primes])
+  <span class="org-keyword">return</span> remainders
+</pre><pre class="label-left" style="background-color: #ccc4">
+  <span class="org-block-end-line">#+end_src</span>
+</pre></details>
+<details open><summary>
+<asside class="label-left">Evaluated results</asside>
+<pre class="label-left br">  <span class="org-block-begin-line">#+RESULTS:</span>
+</pre></summary>
+<pre class="label-left">
+  <span class="org-table">| 0 | 1 | 1 | 1 |
+  | 2 | 2 | 1 | 2 |
+  | 2 | 1 | 3 | 3 |
+  | 2 | 0 | 2 | 1 |
+</span>
+</pre></details>
+</details>
+</div>

+ 114 - 0
resources/style/org-demo.css

@@ -0,0 +1,114 @@
+#org-demo {
+  background: #eee;
+  padding: 0.5rem 1rem; }
+  #org-demo asside.left, #org-demo asside.right {
+    background-color: #7a94;
+    line-height: 1.4;
+    border-radius: 3px;
+    padding: 0 1rem 0.3em 1rem; }
+    #org-demo asside.left h4, #org-demo asside.right h4 {
+      margin: 0 -1rem 0.1em -1rem;
+      padding: 0.2em 1rem;
+      background-color: #7a95; }
+    @media (max-width: 1000px) {
+      #org-demo asside.left, #org-demo asside.right {
+        display: block;
+        font-size: 0.8em;
+        font-style: italic;
+        margin: 1em -1rem 1em -1rem; } }
+  @media (min-width: 1000px) {
+    #org-demo asside.left, #org-demo asside.right {
+      width: 35%; }
+    #org-demo asside.right {
+      float: right;
+      clear: right;
+      margin-right: -40%; }
+    #org-demo asside.left {
+      float: left;
+      clear: left;
+      margin-left: -40%; } }
+  #org-demo asside.label-left {
+    float: left;
+    transform: translateX(-100%);
+    color: #aa8b77;
+    margin-right: -100%;
+    font-family: var(--sans);
+    padding-right: 2rem; }
+  @media (max-width: 1000px) {
+    #org-demo {
+      margin-left: 2.2em;
+      margin-top: 0; }
+      #org-demo asside.label-left {
+        text-orientation: sideways;
+        writing-mode: sideways-lr; } }
+  @media (min-width: 1000px) and (max-width: 1600px) {
+    #org-demo {
+      width: 60vw;
+      max-width: 100%;
+      margin-left: calc(42% - 25vw); }
+      #org-demo asside.left, #org-demo asside.right {
+        max-width: 15vw; }
+      #org-demo asside.right {
+        margin-right: calc(-18vw - 0.5em); }
+      #org-demo asside.left {
+        margin-left: calc(-18vw - 0.5em); } }
+  #org-demo pre.label-left, #org-demo details.label-left pre {
+    box-shadow: -4px 0px 0px 0px #fafafa, -8px 0px 0px 0px #aa8b77;
+    transform: translateX(-1rem);
+    padding-left: 1rem;
+    margin-right: -2rem; }
+  #org-demo pre {
+    font-size: 1.2rem;
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; }
+  #org-demo pre.br {
+    margin-top: 1em; }
+  #org-demo .org-document-title, #org-demo .org-document-info {
+    color: var(--dark-green); }
+  #org-demo .org-level-1 {
+    color: var(--green); }
+  #org-demo .org-level-2 {
+    color: #ab8867; }
+  #org-demo .org-level-1, #org-demo .org-level-2 {
+    cursor: pointer; }
+  #org-demo .org-done, #org-demo .org-special-keyword, #org-demo .org-block-begin-line, #org-demo .org-block-end-line {
+    color: #62686e; }
+  #org-demo .org-date {
+    color: #ab8867; }
+    #org-demo .org-date:hover {
+      color: #eee;
+      background-color: #ab8867; }
+  #org-demo .org-todo-active, #org-demo .org-table {
+    color: #9289ab; }
+  #org-demo .org-todo, #org-demo .org-checkbox, #org-demo .org-checkbox-statistics-todo {
+    color: #6fab75; }
+  #org-demo .org-link {
+    color: #80a2ab;
+    text-decoration: underline; }
+    #org-demo .org-link:hover {
+      color: #eee;
+      background-color: #80a2ab;
+      cursor: pointer; }
+    #org-demo .org-link a {
+      color: inherit; }
+  #org-demo .org-list-dt {
+    color: #80a2ab; }
+  #org-demo .org-document-title, #org-demo .org-level-1, #org-demo .org-level-2 {
+    font-weight: bold; }
+  #org-demo .org-code {
+    color: #ab8867; }
+  #org-demo > details, #org-demo details.br {
+    margin-top: 1em; }
+  #org-demo details:not([open]) pre .org-level-1::after, #org-demo details:not([open]) pre .org-level-2::after {
+    content: "..."; }
+  #org-demo summary {
+    outline: none;
+    list-style: none; }
+  #org-demo summary::marker, #org-demo summary::-webkit-details-marker {
+    display: none; }
+  #org-demo details.replace[open] summary {
+    opacity: 0;
+    height: 0; }

File diff suppressed because it is too large
+ 3 - 0
resources/style/org-demo.min.css


File diff suppressed because it is too large
+ 9 - 0
resources/style/org-demo.min.css.map


+ 157 - 0
resources/style/org-demo.scss

@@ -0,0 +1,157 @@
+#org-demo {
+    background: #eee;
+    padding: 0.5rem 1rem;
+    // box-shadow:
+    //     0 -1px 1px rgba(0,0,0,0.15),
+    //     0 -10px 0 -5px #eee,
+    //     0 -10px 1px -4px rgba(0,0,0,0.15),
+    //     0 -20px 0 -10px #eee,
+    //     0 -20px 1px -9px rgba(0,0,0,0.15);
+
+    asside.left, asside.right {
+        background-color: #7a94;
+        line-height: 1.4;
+        border-radius: 3px;
+        padding: 0 1rem 0.3em 1rem;
+        h4 {
+            margin: 0 -1rem 0.1em -1rem;
+            padding: 0.2em 1rem;
+            background-color: #7a95;
+        }
+        @media (max-width:1000px) {
+            display: block;
+            font-size: 0.8em;
+            font-style: italic;
+            margin: 1em -1rem 1em -1rem;
+        }
+    }
+
+    @media (min-width:1000px) {
+        asside.left, asside.right {
+            width: 35%;
+        }
+        asside.right {
+            float: right;
+            clear: right;
+            margin-right: -40%;
+        }
+        asside.left {
+            float: left;
+            clear: left;
+            margin-left: -40%;
+        }
+    }
+    
+    asside.label-left {
+        float: left;
+        transform: translateX(-100%);
+        color: #aa8b77;
+        margin-right: -100%;
+        font-family: var(--sans);
+        padding-right: 2rem;
+    }
+    @media (max-width:1000px) {
+        margin-left: 2.2em;
+        margin-top: 0;
+        asside.label-left {
+            text-orientation: sideways;
+            writing-mode: sideways-lr;
+        }
+    }
+    @media (min-width:1000px) and (max-width:1600px) {
+        width: 60vw;
+        max-width: 100%;
+        margin-left: calc(42% - 25vw);
+        asside.left, asside.right {
+            max-width: 15vw; }
+        asside.right {
+            margin-right: calc(-18vw - 0.5em); }
+        asside.left {
+            margin-left: calc(-18vw - 0.5em); }
+    }
+
+    pre.label-left, details.label-left pre {
+        box-shadow: -4px 0px 0px 0px #fafafa,
+                    -8px 0px 0px 0px #aa8b77;
+        transform: translateX(-1rem);
+        padding-left: 1rem;
+        margin-right: -2rem;
+    }
+    
+    pre {
+        font-size: 1.2rem;
+        border: none;
+        background: none;
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+    }
+    pre.br {
+        margin-top: 1em;
+    }
+
+    .org-document-title, .org-document-info {
+        color: var(--dark-green); }
+    .org-level-1 {
+        color: var(--green); }
+    .org-level-2 {
+        color: #ab8867; }
+    .org-level-1, .org-level-2 {
+        cursor: pointer; }
+    .org-done, .org-special-keyword, .org-block-begin-line, .org-block-end-line {
+        color: #62686e; }
+    .org-date {
+        color: #ab8867;
+        &:hover {
+            color: #eee;
+            background-color: #ab8867;
+        }
+    }
+    .org-todo-active, .org-table {
+        color: #9289ab; }
+    .org-todo, .org-checkbox, .org-checkbox-statistics-todo {
+        color: #6fab75;}
+    .org-link {
+        color: #80a2ab;
+        text-decoration: underline;
+        &:hover {
+            color: #eee;
+            background-color: #80a2ab;
+            cursor: pointer;
+        }
+        a {
+            color: inherit;
+        }
+    }
+    .org-list-dt {
+        color: #80a2ab;
+    }
+    .org-document-title, .org-level-1, .org-level-2 {
+        font-weight: bold; }
+    .org-code {
+        color: #ab8867; 
+    }
+
+    > details, details.br {
+        margin-top: 1em;
+    }
+    details:not([open]) pre {
+        .org-level-1, .org-level-2 {
+            &::after {
+                content: "...";
+            }
+        }
+    }
+    summary {
+        outline: none;
+        list-style: none;
+    }
+    summary::marker, summary::-webkit-details-marker  {
+        display: none;
+    }
+
+    details.replace[open] summary {
+        opacity: 0;
+        height: 0;
+    }
+}