commit d5f57277fd9ac392a98e4026f20a1d683bac6e5e Author: Damian Johnson atagar@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;