Update layout

This commit is contained in:
Luke 2022-01-25 03:42:11 +01:00
parent e3ecab3e9e
commit d040abe36e

View file

@ -6,39 +6,46 @@ layout: page
<section class="space-y-80"> <section class="space-y-80">
<div class="download-container max-w-4xl ">
<h2 class="download-container-title">
Support
</h2> <div class="download-container">
<p class="download-container-extra"> <h2 class="download-container-title">Support</h2>
What do you need help with? <p class="download-container-extra">
</p> What do you need help with?
<div class="download-container-buttons"> </p>
<a class="btn-secondary" href="#portmaster"><i class="icon-twitter text-xs mr-2"></i>Portmaster</a> <div class="col-container-center w-full md:w-max text-center md:text-left">
<a class="btn-secondary" href="#spn"><i class="icon-twitter text-xs mr-2"></i>SPN</a> <a class="btn-secondary" href="{{ site.download_windows_url }}"><i class="icon-windows text-md mr-2"></i>Windows 10 + 11</a>
</div> <a class="btn-secondary" href="{{ site.download_linux_deb_url }}"><i class="icon-ubuntu text-md mr-2"></i>Ubuntu</a>
</div>
</div> </div>
<div class="space-y-36" id="portmaster"> <div class="space-y-36" id="portmaster">
<div class="download-container max-w-4xl "> <div class="download-container">
<h2 class="download-container-title"> <h2 class="download-container-title">
Portmaster Portmaster
</h2> </h2>
<div class="alert-primary max-w-3xl mx-auto"> <div class="space-y-8 max-w-3xl mx-auto">
<i class="icon-twitter text-xs"></i>
<span>Portmaster is Alpha Software, thanks for being an Early Adopter. Bug reports are appreciated. </span>
</div>
<div class="download-container-buttons">
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>View Documentation</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Report Issuse</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ask On Reddit</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Contact Us</a>
</div>
<p class="download-container-extra"> <p class="download-container-extra">
For common problems check out our documentation with extensive guides on For common problems check out our documentation with extensive guides on
installation, DNS Configuration and the Settings Handbook, describing every installation, DNS Configuration and the Settings Handbook, describing every
Portmaster setting in detail. Report issues and bugs on GitHub while you can Portmaster setting in detail. Report issues and bugs on GitHub while you can
always ask for more help on our subreddit or via mail. always ask for more help on our subreddit or via mail.
</p> </p>
<div class="alert-primary">
<i class="icon-twitter text-xs"></i>
<span>Portmaster is Alpha Software, treat as such; expect bugs here and there. Early Adopters welcome.</span>
</div>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left">
<a class="btn-secondary" href="{{ site.download_windows_url }}"><i class="icon-windows text-md mr-2"></i>Windows 10 + 11</a>
<a class="btn-secondary" href="{{ site.download_linux_deb_url }}"><i class="icon-ubuntu text-md mr-2"></i>Ubuntu</a>
<a class="btn-secondary" href="{{ site.download_linux_rpm_url }}"><i class="icon-fedora text-md mr-2"></i>Fedora</a>
<a disabled class="btn" href="#"><i class="icon-mac text-md mr-2"></i>Macos (Not supported)</a>
</div>
</div> </div>
<div class="faq-container"> <div class="faq-container">
<div class="faq-container-top"> <div class="faq-container-top">
@ -46,98 +53,130 @@ layout: page
FAQ FAQ
</span> </span>
<p class="faq-container-top-desc"> <p class="faq-container-top-desc">
You have a question? We answered some already, but you Have a question? Check out some we already answered below. You can always reach out to us to find out more or just to say hi.
can always contact us at <a class="link-primary" href="">hello@safing.io</a>
</p> </p>
</div> </div>
<div class="faq-container-bottom"> <div class="faq-container-bottom">
{% for faq in site.data.faq.portmaster %} {% for faq in site.data.faq.portmaster %}
<div class="faq-container-bottom-question"> <div class="faq-container-bottom-question">
<h1 class="faq-container-bottom-question-title"> <div class="card-faq hover-scale-out">
{{ faq.q }} <label class="card-label" for="card-toggle-anchor-2">
</h1> <div class="wrapper-left">
<p class="faq-container-bottom-question-desc"> <div class="card-title">
{{ faq.a }} <h1 class="title">
</p> {{ faq.q }}
<div class="faq-container-bottom-question-desc-extra"> </h1>
{% if faq.link %} </div>
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a> </div>
{% endif %} <div class="wrapper-right">
</div> <i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
{{ faq.a }}
{% if faq.link %}
<br>
<br>
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a>
{% endif %}
</div>
</div>
</div>
</div> </div>
{% endfor %} {% endfor %}
<div class="faq-container-bottom-question"> <div class="faq-container-bottom-question">
<h1 class="faq-container-bottom-question-title"> <div class="card-faq hover-scale-out">
Where can I find your source code? <label class="card-label" for="card-toggle-anchor-2">
</h1> <div class="wrapper-left">
<p class="faq-container-bottom-question-desc"> <div class="card-title">
You can find our code on <a class="link-primary" href="">Github. The Portmaster</a>, the <a class="link-primary" href="">Portmaster UI</a>, the <a class="link-primary" href="">SPN</a>, the <a class="link-primary" href="">docs</a> <h1 class="title">
and <a class="link-primary" href="">this website</a> have their respective repositories. <a class="link-primary" href="">Jess</a>, the heart of the SPN, which Where can I find your source code?
got audited by Cure53, can also be found online. </h1>
</p> </div>
</div> </div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
You can find our code on <a class="link-primary" href="">Github. The Portmaster</a>, the <a class="link-primary" href="">Portmaster UI</a>, the <a class="link-primary" href="">SPN</a>, the <a class="link-primary" href="">docs</a>
and <a class="link-primary" href="">this website</a> have their respective repositories. <a class="link-primary" href="">Jess</a>, the heart of the SPN, which
got audited by Cure53, can also be found online.
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="space-y-36" id="spn">
<div class="download-container max-w-4xl ">
<h2 class="download-container-title">
Safing Privacy Network <div class="space-y-36" id="portmaster">
</h2> <div class="download-container">
<div class="alert-primary max-w-3xl mx-auto"> <h2 class="download-container-title">
<i class="icon-twitter text-xs"></i> Safing Privacy Network
<span> </h2>
If you want to know more about the technology, visit <div class="alert-primary max-w-3xl mx-auto">
<a class="link" href="{{ site.spn_url }}">the SPN page</a>, <i class="icon-twitter text-xs"></i>
<a class="link" href="{{ site.kickstarter_url }}">the Kickstarter</a> <span>
or If you want to know more about the technology, visit
<a class="link" href="{{ site.whitepaper_url }}">read our Whitepaper</a>. <a class="link" href="{{ site.spn_url }}">the SPN page</a>,
Otherwise, feel free to contact us with any matter or request you might have. <a class="link" href="{{ site.kickstarter_url }}">the Kickstarter</a>
</span> or
</div> <a class="link" href="{{ site.whitepaper_url }}">read our Whitepaper</a>.
<div class="download-container-buttons"> Otherwise, feel free to contact us with any matter or request you might have.
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>View SPN Repository</a> </span>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ask On Reddit</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Contact Us</a>
</div>
</div> </div>
<div class="faq-container"> <div class="col-container-center w-full md:w-max text-center md:text-left">
<div class="faq-container-top"> <a class="btn-secondary" href="{{ site.download_windows_url }}"><i class="icon-windows text-md mr-2"></i>Windows 10 + 11</a>
<span class="faq-container-top-title"> <a class="btn-secondary" href="{{ site.download_linux_deb_url }}"><i class="icon-ubuntu text-md mr-2"></i>Ubuntu</a>
FAQ <a class="btn-secondary" href="{{ site.download_linux_rpm_url }}"><i class="icon-fedora text-md mr-2"></i>Fedora</a>
</span> <a disabled class="btn" href="#"><i class="icon-mac text-md mr-2"></i>Macos (Not supported)</a>
<p class="faq-container-top-desc"> </div>
You have a question? We answered some already, but you </div>
can always contact us at <a class="link-primary" href="">hello@safing.io</a> <div class="faq-container">
</p> <div class="faq-container-top">
</div> <span class="faq-container-top-title">
<div class="faq-container-bottom"> FAQ
{% for faq in site.data.faq.spn %} </span>
<div class="faq-container-bottom-question"> <p class="faq-container-top-desc">
<h1 class="faq-container-bottom-question-title"> Have a question? Check out some we already answered below. You can always reach out to us to find out more or just to say hi.
{{ faq.q }} </p>
</h1> </div>
<p class="faq-container-bottom-question-desc"> <div class="faq-container-bottom">
{{ faq.a }} {% for faq in site.data.faq.spn %}
</p>
<div class="faq-container-bottom-question-desc-extra">
{% if faq.link %}
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a>
{% endif %}
</div>
</div>
{% endfor %}
<div class="faq-container-bottom-question"> <div class="faq-container-bottom-question">
<h1 class="faq-container-bottom-question-title"> <div class="card-faq hover-scale-out">
Where can I find your source code? <label class="card-label" for="card-toggle-anchor-2">
</h1> <div class="wrapper-left">
<p class="faq-container-bottom-question-desc"> <div class="card-title">
You can find our code on <a class="link-primary" href="">Github. The Portmaster</a>, the <a class="link-primary" href="">Portmaster UI</a>, the <a class="link-primary" href="">SPN</a>, the <a class="link-primary" href="">docs</a> <h1 class="title">
and <a class="link-primary" href="">this website</a> have their respective repositories. <a class="link-primary" href="">Jess</a>, the heart of the SPN, which {{ faq.q }}
got audited by Cure53, can also be found online. </h1>
</p> </div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
{{ faq.a }}
{% if faq.link %}
<br>
<br>
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a>
{% endif %}
</div>
</div>
</div>
</div> </div>
</div> {% endfor %}
</div> </div>
</div> </div>
</section> </section>