Update support page with proper content and styling

This commit is contained in:
Martin Kleinschrodt 2022-07-25 07:24:38 +02:00
parent da7c8fdd55
commit bf6b96a97d
2 changed files with 56 additions and 39 deletions

View File

@ -1,39 +1,54 @@
<a href="#"> <ul class="plain box">
<button class="fill-horizontally"> <li class="list-item">
<div class="horizontal spacing layout"> <a href="https://padloc.app/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<i class="fa-user block"></i> <i class="fa-globe block"></i>
<div class="stretch">FAQs</div> <div class="stretch">Website</div>
<i class="subtle block fa-external-link"></i> <i class="subtle block fa-external-link"></i>
</div> </a>
</button> </li>
</a> <li class="list-item">
<a href="https://padloc.app/blog/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<i class="fa-megaphone block"></i>
<div class="stretch">Blog</div>
<i class="subtle block fa-external-link"></i>
</a>
</li>
<li class="list-item">
<a href="https://padloc.app/tos/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<i class="fa-file-lines block"></i>
<div class="stretch">Terms of Service</div>
<i class="subtle block fa-external-link"></i>
</a>
</li>
<li class="list-item">
<a href="https://docs.padloc.app/privacy/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<i class="fa-blinds block"></i>
<div class="stretch">Privacy Policy</div>
<i class="subtle block fa-external-link"></i>
</a>
</li>
</ul>
<a href="#"> <ul class="plain box">
<button class="fill-horizontally"> <li class="list-item">
<div class="horizontal spacing layout"> <a href="mailto:support@padloc.app" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<i class="fa-lock lock block"></i> <i class="fa-envelope block"></i>
<div class="stretch">Support Ticket</div> <div class="stretch">Contact Support</div>
<i class="subtle block fa-external-link"></i> <i class="subtle block fa-external-link"></i>
</div> </a>
</button> </li>
</a> <li class="list-item">
<a href="https://docs.padloc.app/manual/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<a href="#"> <i class="fa-book block"></i>
<button class="fill-horizontally"> <div class="stretch">User Manual</div>
<div class="horizontal spacing layout">
<i class="fa-comments-alt block"></i>
<div class="stretch">Live Chat</div>
<i class="subtle block fa-external-link"></i> <i class="subtle block fa-external-link"></i>
</div> </a>
</button> </li>
</a> <li class="list-item">
<a href="https://docs.padloc.app/questions/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
<a href="#"> <i class="fa-comments-question block"></i>
<button class="fill-horizontally"> <div class="stretch">Frequently Asked Questions</div>
<div class="horizontal spacing layout">
<i class="fa-tools block"></i>
<div class="stretch">Support Center</div>
<i class="subtle block fa-external-link"></i> <i class="subtle block fa-external-link"></i>
</div> </a>
</button> </li>
</a> </ul>

View File

@ -65,7 +65,8 @@ export const content = css`
list-style: square; list-style: square;
} }
ul.plain { ul.plain,
ul.unstyled {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
@ -96,10 +97,8 @@ export const content = css`
color: var(--button-primary-color, var(--button-color)); color: var(--button-primary-color, var(--button-color));
} }
${click("button")}; a.plain,
${hover("button")}; a.unstyled {
a.plain {
text-decoration: none !important; text-decoration: none !important;
} }
@ -128,4 +127,7 @@ export const content = css`
margin-bottom: 0.5em; margin-bottom: 0.5em;
overflow-x: auto; overflow-x: auto;
} }
${click("button")};
${hover("button")};
`; `;