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

Accessibility improvements #30

Merged
merged 1 commit into from
Jul 12, 2024
Merged

Accessibility improvements #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 14 additions & 3 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,13 +353,24 @@ header .btn {
.mobileNav {
background-image: url('../img/icon-menu.png');
background-size: contain;
width: 2.5rem;
background-color: transparent;
color: var(--color-text);
width: auto;
min-width: auto;
min-height: auto;
height: 2.5rem;
background-repeat: no-repeat;
padding-left: 2.25rem;
padding: 0 0.25rem 0 2.25rem;
align-items: center;
font-size: var(--font-size-small);
font-family: var(--font-sans);
font-weight: bold;
display: inline-block;
margin: 0;
}

.mobileNav:focus {
outline: 1px double var(--color-text);
}


Expand Down Expand Up @@ -1063,7 +1074,7 @@ footer {
}

footer p {
font-size: var(--font-size-smallest);
font-size: var(--font-size-4);
}

body.landing .feature .description p {
Expand Down
31 changes: 16 additions & 15 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<header class="island">
<h1>🤫 Hush Line</h1>
<nav>
<a class="mobileNav btnIcon" aria-label="Navigation menu">Menu</a>
<button type="button" class="mobileNav btnIcon" aria-label="Navigation menu">Menu</button>
<ul>
<li><a href="#faq">FAQ</a></li>
<li><a href="https://opencollective.com/scidsg/" target="_blank" rel="noopener noreferrer">Donate</a>
Expand All @@ -42,8 +42,8 @@ <h1>🤫 Hush Line</h1>
</li>
<li><a href="https://github.com/scidsg/hushline/tree/main/docs" target="_blank"
rel="noopener noreferrer">Docs</a></li>
<a class="btn" href="https://beta.hushline.app/login" target="_blank"
rel="noopener noreferrer">Login</a>
<li><a class="btn" href="https://beta.hushline.app/login" target="_blank"
rel="noopener noreferrer">Login</a></li>
</ul>
<a class="btn primaryBtn" href="https://beta.hushline.app/register" target="_blank"
rel="noopener noreferrer">Register</a>
Expand Down Expand Up @@ -177,7 +177,8 @@ <h2>Frequently Asked Questions</h2>
</div>
<ul class="faq-list">
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> How
<h3><a href="#" class="faq-question">
<img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> How
anonymous is Hush Line?</a></h3>
<div class="faq-answer">
<p>Hush Line requires no personally identifying information (PII) for tip line owners to use
Expand All @@ -196,7 +197,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Is
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Is
Hush Line end-to-end encrypted?</a></h3>
<div class="faq-answer">
<p>Hush Line uses <a href="https://github.com/openpgpjs/openpgpjs" target="_blank"
Expand All @@ -215,7 +216,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Is
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Is
two-way communication available?</a></h3>
<div class="faq-answer">
<p>If the individual submitting a message feels comfortable enough to include a contact
Expand All @@ -237,7 +238,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png">Can I
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow">Can I
be deanonymized?</a></h3>
<div class="faq-answer">
<p>Neither us scrubbing IPs nor you using Tor and Signal are silver bullets, and there are
Expand Down Expand Up @@ -294,7 +295,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Why
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Why
not just use Signal?</a></h3>
<div class="faq-answer">
<p>Signal is great, but it's not anonymous. For someone to send you a message, they must
Expand Down Expand Up @@ -323,7 +324,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> How
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> How
is Hush Line different from SecureDrop?</a></h3>
<div class="faq-answer">
<p>SecureDrop is a robust whistleblowing platform whose architecture is necessitated by very
Expand Down Expand Up @@ -371,15 +372,15 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Why
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Why
not fork SecureDrop's code?</a></h3>
<div class="faq-answer">
<p>While open-source, forking SecureDrop would require significant rework. Building a new
solution allows us to optimize Hush Line as an easy-to-use hosted service.</p>
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Why
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Why
Python?</a></h3>
<div class="faq-answer">
<p>We use Python and the Flask framework because they're well-documented and supported. The
Expand All @@ -389,7 +390,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Why
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Why
can't I receive files?</a></h3>
<div class="faq-answer">
<p>Receiving files comes with significant risk, and the functionality is only sometimes
Expand All @@ -415,7 +416,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> How
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> How
do I verify a recipient is legitimate?</a></h3>
<div class="faq-answer">
<p>Hush Line offers human-verified accounts for journalists, organizations, and public
Expand All @@ -427,7 +428,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Has
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Has
Hush Line received an independent security audit?</a></h3>
<div class="faq-answer">
<p>Yes! In 2024, Hush Line's managed service, Personal Server, and self-hosted version
Expand All @@ -440,7 +441,7 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"> Where
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> Where
can I submit a vulnerability report?</a></h3>
<div class="faq-answer">
<p>See something, say something! Submit a vulnerability report if you find a security issue,
Expand Down