Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website redesign #305

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Website redesign #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aa02756
Implement redesigned mocks for the landing page
hellais Nov 16, 2019
a0cd8ab
Split reports and blog sections
hellais Nov 16, 2019
6a88267
Put the fish on the other side
hellais Nov 18, 2019
f127122
Copy edits to landing page
agrabeli Nov 19, 2019
82722f6
Fix Explorer screenshots
hellais Jan 27, 2020
4147b2e
Update to a darker colored hero landing page
hellais Jan 27, 2020
f39f0ce
Iterate on the landing page
hellais Jan 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions content/data/content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
---
aliases:
- /reports
- /reports/0.1/
---

## This URL is old

Raw ooniprobe measurements now live at:
Expand Down
1 change: 1 addition & 0 deletions content/reports/content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

349 changes: 130 additions & 219 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,228 +1,139 @@
{{ partial "head.html" . }}
<body class="homepage">

<a href="https://github.com/ooni">
<img class="fork-me" style="position: absolute; top: 0; left: 0; border: 0;" src="/images/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub"/>
</a>
<div class="container">
<nav>
<div class="col-1"></div>
<div class="col-2">
{{ partial "nav.html" }}
</div>
</nav>

<header>
<div class="row">
<div class="col-1">
<img class="logo" src="/images/ooni-header-mascot.png" srcset="/images/ooni-header-mascot-2x.png 2x" height="200" width="200"/>
</div>
<div class="col-2">
<img class="wordmark" src="/images/wordmark.png" srcset="/images/wordmark-2x.png 2x" alt="OONI"/>
<h2>Open Observatory of Network Interference</h2>
<p>A free software, global observation network for detecting censorship,
surveillance and traffic manipulation on the internet</p>
</div>
</div>
</header>
</div>

<main>
<div class="ooni-explorer">
<div class="container">
<div class="row">
<div class="col-1">
<h2>OONI Explorer</h2>
<p class="subtext">OONI has been monitoring internet censorship around the world since 2012</p>
<p class="subtext"><a class="explorer-button btn" href="https://explorer.ooni.org/">Explore OONI Data</a></p>
</div>

<div class="col-2">
<img src="/images/ooni-explorer-screenshot" srcset="/images/ooni-explorer-screenshot@2x.png 1440w" />
</div>
</div>
{{ partial "nav.html" }}

<div class="homepage-hero">
<div class="sky">
<div class="graphics">
<img class="cloud-left" src="/images/homepage/cloud-left-double.png" />
<img class="cloud-right-high" src="/images/homepage/cloud-right-high.png" />
<img class="cloud-right-low" src="/images/homepage/cloud-right-low.png" />
<div class="waves"></div>
</div>
</div>
<div class="ooni-probe">
<div class="container">
<div class="ooni-probe-container">
<div class="ooni-probe-cta-div">
<img class="ooni-probe-logo" src="/images/homepage/Probe-HorizontalMonochromeInverted.png" srcset="/images/homepage/Probe-HorizontalMonochromeInverted@2x.png 2x" />
<h1 class="landing-cta">Measure internet censorship</h1>
<h2 class="landing-cta-sub">Detect the blocking of websites and instant messaging apps. Measure the speed and performance of networks.</h2>
<a class="btn" href="/install">Install OONI Probe</a>
</div>
<div class="ooni-probe-phone-div">
<img class="ooni-probe-phone" src="/images/homepage/ooni-probe-phone.png" srcset="/images/homepage/ooni-probe-phone@2x.png 2x" alt="OONI Probe mobile app" />
</div>
</div>
</div>
</div>
</div>
<div class="recent-reports">
<div class="container">
<h2>Reports</h2>
<hr />
{{ range first 5 .Site.Taxonomies.categories.report }}
<div class="row">
<a class="report-link" href="{{ .RelPermalink }}">
<p class="title">{{ .Title }}</p>
<p class="date">{{ .Date.Format "2 Jan 2006" }}</p>
</a>
</div>
{{ end }}
<a class="learn-more" href="/post/">View all</a>
</div>
</div>

<div class="ooni-explorer">
<div class="container">
<div class="row">
<div class="col-2">
<img class="ooni-explorer-browser" src="/images/ooni-explorer-screenshot.png" srcset="/images/ooni-explorer-screenshot@2x.png 2x" alt="OONI Probe mobile app" />
</div>
<div class="col-2">
<img class="ooni-explorer-logo" src="/images/homepage/Explorer-HorizontalMonochromeInverted.png" srcset="/images/homepage/Explorer-HorizontalMonochromeInverted@2x.png 2x" />
<h2>Uncover evidence of internet censorship worldwide</h2>
<p>
OONI Explorer is an open data resource on internet censorship, containing millions of network measurements collected from more than 200 countries since 2012.
</p>
<a class="btn" href="https://explorer.ooni.org/">Explore OONI data</a>
</div>
</div>
</div>
</div>

<div class="recent-reports">
<div class="container">
<h2>News</h2>
<hr />
{{ with .Site.Taxonomies.categories.blog }}
{{ range first 5 . }}
<div class="row">
<a class="report-link" href="{{ .RelPermalink }}">
<p class="title">{{ .Title }}</p>
<p class="date">{{ .Date.Format "2 Jan 2006" }}</p>
</a>
</div>
{{ end }}
{{ end }}
<a class="learn-more" href="/post/">View all</a>
</div>
</div>

<div class="container cta-section">
<div class="row">
<div class="col-2">
<div class="cta-box">
<img src="/images/homepage/comment-o.png" srcset="/images/homepage/comment-o@2x.png 2x" />
<h3>Join us</h3>
<p>
Participate in community discussions on <a href="https://slack.ooni.org/">Slack</a> (bridged via IRC <a href="ircs://irc.oftc.net:6697/#ooni">#ooni on OFTC</a>)
and sign-up for the
<a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-talk">ooni-talk</a> and
<a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-dev">ooni-dev</a> mailing lists
to receive and share updates.
</p>
<a class="learn-more" href="/get-involved/">Get involved</a>
</div>
</div>
<div class="col-2">
<div class="cta-box">
<img src="/images/homepage/code-braces.png" srcset="/images/homepage/code-braces@2x.png 2x" />
<h3>Hack on our code</h3>
<p>
OONI source code is available on <a href="https://github.com/ooni">GitHub</a>.
If you have code you would like to contribute, please open a pull request or <a href="https://github.com/ooni/probe/issues">file an issue</a>.
</p>
<a class="learn-more" href="https://github.com/ooni/">Fork OONI on GitHub</a>
</div>
<div class="container">
<div class="row">
<div class="col-1"><h2>What OONI does</h2></div>
<div class="col-2 pad-below">
<h3>OONI develops free software tests designed to examine the following:</h3>
<br>
<ul>
<li>Blocking of websites
<li>Blocking of instant messaging apps
<li>Blocking of Tor and other circumvention tools
<li>Detection of systems that could be responsible for censorship and/or surveillance

<p class="cta"><a href="/nettest/">Testing methodology</a></p>
<p><strong>There are risks.</strong> Running a probe involves testing
connections to websites that may be banned and using tools to attempt
circumventing web censorship. It is not designed to protect the privacy
of those running probes. Measurements are published and can include IP
addresses or other identifying information.</p>
<p class="cta"><a href="/about/risks">More about the risks</a></p>
</div>
</div>
</div>

<div class="how-it-works">
<div class="container">
<div class="row">
<div class="col-1">
<h2>How OONI Works</h2>
<p class="subtext">OONI scans TCP, DNS, HTTP and TLS connections for tampering. Some tests
work by requesting data over an unencrypted connection and comparing
against a known good value. Others check for DNS spoofing, keyword
filtering, transparent proxying and website block lists.</p>
</div>
<div class="col-2">
<img src="/images/how-ooni-works.png" srcset="/images/how-ooni-works-2x.png 2x" width="680" height="280" />
</div>
</div>
</div>
</div>


<div class="container"> <!-- Container Wrap till the end -->


<!-- div class="row">
<div class="col-1">
<h2>Recent Measurements</h2>
</div>
<div class="col-2"></div>
</div>
<div class="row measurements">
<table class="col-3">
<tr>
<td class="tcol-1"></td>
<td>NZ</td>
<td>AU</td>
<td>US</td>
<td>CN</td>
<td>NL</td>
<td>BR</td>
<td>CA</td>
<td>CH</td>
<td>DE</td>
</tr>

<tr>
<td class="tcol-1">DNS spoofing</td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="10"/></td>
<td><img src="/images/dot.svg" width="25"/></td>
<td><img src="/images/dot.svg" width="3"/></td>
<td><img src="/images/dot.svg" width="12"/></td>
<td><img src="/images/dot.svg" width="22"/></td>
<td><img src="/images/dot.svg" width="12"/></td>
<td><img src="/images/dot.svg" width="6"/></td>
</tr>

<tr>
<td class="tcol-1">HTTP injection</td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="7"/></td>
<td><img src="/images/dot.svg" width="10"/></td>
<td><img src="/images/dot.svg" width="17"/></td>
<td><img src="/images/dot.svg" width="3"/></td>
<td><img src="/images/dot.svg" width="1"/></td>
<td><img src="/images/dot.svg" width="4"/></td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="0"/></td>
</tr>

<tr>
<td class="tcol-1">HTTP blocking</td>
<td><img src="/images/dot.svg" width="1"/></td>
<td><img src="/images/dot.svg" width="4"/></td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="25"/></td>
<td><img src="/images/dot.svg" width="5"/></td>
<td><img src="/images/dot.svg" width="13"/></td>
<td><img src="/images/dot.svg" width="11"/></td>
<td><img src="/images/dot.svg" width="14"/></td>
<td><img src="/images/dot.svg" width="20"/></td>
</tr>

<tr>
<td class="tcol-1">Tor blocking</td>
<td><img src="/images/dot.svg" width="10"/></td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="7"/></td>
<td><img src="/images/dot.svg" width="24"/></td>
<td><img src="/images/dot.svg" width="9"/></td>
<td><img src="/images/dot.svg" width="6"/></td>
<td><img src="/images/dot.svg" width="1"/></td>
<td><img src="/images/dot.svg" width="2"/></td>
<td><img src="/images/dot.svg" width="3"/></td>
</tr>

</table>
</div>
<div class="row pad-below">
<div class="col-1"></div>
<div class="col-2 table-caption">Large circles indicate consistent, widespread traffic manipulation</div>
</div -->

<div class="row pad-below">
<div class="col-1">
<h2>Blog Posts</h2>
</div>
<div class="col-2 blog-summary">
{{ range first 5 (where (where .Site.Pages.ByDate.Reverse "Section" "post") "Kind" "page") }}
<a href="{{ .RelPermalink }}">
<p class="title">{{ .Title }}</p>
<p class="byline">{{ .Date.Format "2 Jan 2006" }}</p>
</a>
{{ end }}
<a class="read-more" href="/post/">Read More</a>
</div>
</div>

<div class="row pad-below">
<div class="col-1">
<h2>Getting Involved</h2>
</div>
<div class="col-2">
<p>Join us in IRC <a href="ircs://irc.oftc.net:6697/#ooni">#ooni on OFTC</a> (or via a <a href="https://slack.openobservatory.org/">slack bridge</a>)
or on the
<a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-talk">ooni-talk</a> and
<a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-dev">ooni-dev</a> mailing lists
to discuss the project, what you've learned from measurements and ways
you can help out.
</p>
<p>If you are contributing regular ooniprobe measurements be sure to also subscribe to
<a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-operators">ooni-operators</a> for important updates.
</p>
<p><a href="https://github.com/TheTorProject/ooni-probe">Source code</a>
is available (<a href="https://gitweb.torproject.org/ooni-probe.git">Tor project mirror</a>).
Issues and future plans for OONI can be <a href="https://github.com/thetorproject/ooni-probe/issues">found on github</a>.</p>
</div>
</div>

<div class="row">
<div class="col-1">
<h2>Contact</h2>
</div>
<div class="col-2">
<p>To contact the OONI team send an email to <strong>contact@openobservatory.org</strong>
Encrypted emails can be sent using the following PGP key:</p>
<p class="fingerprint">
Key ID: 6B2943F00CB177B7<br>
Fingerprint: 4C15 DDA9 96C6 C0CF 48BD 3309 6B29 43F0 0CB1 77B7
</p>
<p>
We can also be reached <a href="/about/#contact">on Jabber</a>.
</p>
</div>
</div>


</div>
</div>

<div class="row">
<div class="col-2">
<div class="cta-box">
<img src="/images/homepage/ooni-logo-small.png" srcset="/images/homepage/ooni-logo-small@2x.png 2x" />
<h3>What is OONI?</h3>
<p>
The Open Observatory of Network Interference (OONI) is a free software
project that aims to empower decentralized efforts in increasing
transparency of internet censorship around the world.
</p>
<a class="learn-more" href="/about/">About OONI</a>
<a class="learn-more" href="/help/faq/">Frequently Asked Questions (FAQ)</a>
</div>
</main>
</div>
<div class="col-2">
<img src="/images/homepage/database.png" srcset="/images/homepage/database@2x.png 2x" />
<h3>Explore OONI data</h3>
<p>
Every day, hundreds of thousands of new measurements are published from around the world. Dig through OONI data to uncover internet censorship!
</p>
<a class="learn-more" href="/data/">OONI data</a>
<a class="learn-more" href="/nettest/">Learn how OONI Probe tests work</a>
</div>
</div>
</div>

<footer class="footer-home">
<div class="container row">
Expand Down
Loading