[tor-commits] [nyx/master] Couple initial FAQ entries

[atagar at torproject.org]

commit d5f57277fd9ac392a98e4026f20a1d683bac6e5e
Author: Damian Johnson <atagar at torproject.org>
Date:   Fri Jul 28 10:02:28 2017 -0700

    Couple initial FAQ entries
    
    Few issues with them. For instance, expanion doesn't uncover tall images and
    you can't copy text. But wanted to start with these since I've been wanting to
    use Shadowgirl's picture for a while. :P
---
 web/images/faq/front_page.png                       | Bin 0 -> 42523 bytes
 .../faq/resources/nyx_by_shadowgirl-d5oeuj8.jpg     | Bin 0 -> 139956 bytes
 web/images/faq/shadowgirl.jpg                       | Bin 0 -> 37023 bytes
 web/index.html                                      |  20 +++++++++++++-------
 web/styles.css                                      |   6 ++++++
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/images/faq/front_page.png b/web/images/faq/front_page.png
new file mode 100644
index 0000000..541ee61
Binary files /dev/null and b/web/images/faq/front_page.png differ
diff --git a/web/images/faq/resources/nyx_by_shadowgirl-d5oeuj8.jpg b/web/images/faq/resources/nyx_by_shadowgirl-d5oeuj8.jpg
new file mode 100644
index 0000000..aaf47b8
Binary files /dev/null and b/web/images/faq/resources/nyx_by_shadowgirl-d5oeuj8.jpg differ
diff --git a/web/images/faq/shadowgirl.jpg b/web/images/faq/shadowgirl.jpg
new file mode 100644
index 0000000..d4a810c
Binary files /dev/null and b/web/images/faq/shadowgirl.jpg differ
diff --git a/web/index.html b/web/index.html
index 646d7d2..2116b00 100644
--- a/web/index.html
+++ b/web/index.html
@@ -93,17 +93,21 @@
 
         <br /><br />
 
-        <div class="question" id="question_1">
-          <span>Demo question 1</span>
+        <div class="question" id="what_is_nyx">
+          <span>What is Nyx?</span>
           <div class="answer">
-            <p>answer 1</p>
+            <a href="images/screenshots/front_page.png"><img src="images/faq/front_page.png" alt="screenshot" /></a>
+            <p>Nyx is a command-line application for monitoring real time <a href="https://www.torproject.org/">Tor</a> status information. This includes bandwidth usage, logs, connections, configuration, and more.</p>
+            <p>As a curses interface Nyx is particularly well suited for ssh connections, tty terminals, and command-line aficionados.</p>
           </div>
         </div>
 
-        <div class="question" id="question_2">
-          <span>Demo question 2</span>
+        <div class="question" id="why_is_it_called_nyx">
+          <span>Why is it called Nyx?</span>
           <div class="answer">
-            <p>answer 2</p>
+            <a href="http://fallenlights.net/"><img src="images/faq/shadowgirl.jpg" alt="greek goddess" title="Nyx by Shadowgirl, used with permission." /></a>
+            <p>Simple - because it's short and memorable. Terminal applications are handiest when they're easy to remember and type, such as top, ssh, etc. Anything longer is just begging to be aliased down.</p>
+            <p>That, and because Nyx is the <a href="https://en.wikipedia.org/wiki/Nyx">Greek goddess of night</a>.</p>
           </div>
         </div>
       </div>
@@ -214,7 +218,9 @@
           var newHeight = 0;
 
           answer.children().each(function () {
-            newHeight += $(this).outerHeight(true);
+            if (this.tagName == "P") {
+              newHeight += $(this).outerHeight(true);
+            }
           });
 
           answer.animate({'height': newHeight}, 100);
diff --git a/web/styles.css b/web/styles.css
index fcd0510..98a76c1 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -167,6 +167,12 @@ FAQ Page
   font-weight: bold;
 }
 
+.question img {
+  float: right;
+  margin-top: 20px;
+  margin-left: 20px;
+}
+
 .answer {
   height: 0px;
   overflow: hidden;