mirror of
https://github.com/safing/web
synced 2025-09-01 10:39:03 +00:00
Replace page layout with new design
This commit is contained in:
davegson
parent
fea8679d9f
commit
628921d0bb
8 changed files with 174 additions and 119 deletions
98
_includes/footer.html
Normal file
98
_includes/footer.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<footer class="bg-black p-8 bg-local bg-no-repeat bg-cover bg-bottom" style="background-image: url(https://safing.io/assets/img/f-bg.png)">
|
||||
<div class="p-12 mx-auto self-center max-w-3xl text-center lg:text-left">
|
||||
<span class="text-white text-xl font-bold">Stay Connected</span>
|
||||
<div class="block lg:flex items-center py-5">
|
||||
<input style="background-color: #302e37;" class="appearance-none rounded-full w-full max-w-md px-6 py-2 text-white" placeholder="Mailing list">
|
||||
<div class="pt-5 lg:pt-0 lg:pl-5 ">
|
||||
<button type="button" style="background-color: #6188ff;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
||||
Join us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center lg:text-left container mx-auto px-8">
|
||||
<div class="w-full flex flex-col md:flex-row py-6 ">
|
||||
<div class="flex-1">
|
||||
<p class="text-white text-xl md:mb-6">Company</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="aboutus.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">About Us</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="team.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Team</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="finances.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Ownership</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="support.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Support</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-white text-xl md:mb-6">Podcast</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Overview</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Itunes</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">RSS</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-white text-xl md:mb-6">Resources</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Technology</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Whitepaper</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-white text-xl md:mb-6">Social</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Github</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Twitter</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Reddit</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Newsletter</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-white text-xl md:mb-6">Legal</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Terms</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Privacy</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Contact & Legal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
<p class="text-center leading-6 text-white opacity-50">
|
||||
© 2020 Safing, LLC. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- meta -->
|
||||
<meta charset={{ site.encoding }}>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
<meta name="author" content="{{ site.author }}">
|
||||
<title>{% if page.type == "podcast" %}The Safing Podcast {{ page.title }}{% elsif page.type == "post" %}Safing Blog: {{ page.title }}{% elsif page.title == "Safing" %}{{ page.title }}{% else %}Safing {{ page.title }}{% endif %}</title>
|
||||
|
|
@ -28,5 +28,3 @@
|
|||
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}css/tailwind.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
|
||||
|
|
|
|||
72
_includes/nav.html
Normal file
72
_includes/nav.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<nav class="flex flex-wrap items-center bg-black px-10 py-6 fixed w-full z-50 lg:absolute">
|
||||
<div class="flex-1 flex justify-between items-center">
|
||||
<a href="index.html" class="flex items-center hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<svg class="spin h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
|
||||
<g data-name="Main" fill-rule="evenodd">
|
||||
<path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#a)" opacity=".8" />
|
||||
<path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#b)" opacity=".8" />
|
||||
<path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6" fill="url(#c)" />
|
||||
<path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)" fill="url(#d)" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-white">Safing<span class="opacity-50">.io</span></span>
|
||||
</a>
|
||||
</div>
|
||||
<label for="menu-toggle" class="pointer-cursor lg:hidden block">
|
||||
<svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</label>
|
||||
<input class="hidden" type="checkbox" id="menu-toggle" />
|
||||
<div class="hidden w-full text-center lg:flex lg:items-center lg:w-auto " id="menu">
|
||||
<nav>
|
||||
<ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="/spn.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
SPN
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="/portmaster.html" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Portmaster
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="/spn.html#Pricing" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="/aboutus.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="/support.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Support
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="block p-5 lg:flex lg:p-0 items-center">
|
||||
<span class="hidden sm:block ml-3 rounded-md">
|
||||
<button type="button" class="hidden lg:block px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
Sign In
|
||||
</button>
|
||||
</span>
|
||||
<span class="sm:ml-3 rounded-md">
|
||||
<button type="button" style="background-color: #6188ff;" class="w-full transform hover:scale-105 lg:inline-flex px-10 py-2 border border-transparent text-lg lg:text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
||||
Sign Up
|
||||
</button>
|
||||
</span>
|
||||
<span class="hidden sm:block ml-3 rounded-md">
|
||||
<button type="button" class="mr-auto ml-auto block lg:hidden px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
Sign In
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<content>
|
||||
<div class="features">
|
||||
<div>
|
||||
<img src="{{ site.icons_url }}lock.svg" alt="">
|
||||
<div>
|
||||
<span>Privacy first</span>
|
||||
<p>
|
||||
We believe privacy is the foundation to a free & open society. We can only grow if we have a safe place to nourish our best selves.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="{{ site.icons_url }}community.svg" alt="">
|
||||
<div>
|
||||
<span>Community</span>
|
||||
<p>
|
||||
Do we walk our talk? You be the judge! If you like what you see, consider <a href="{{ site.reddit_url }}">helping us</a> by contributing in our community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="{{ site.icons_url }}shield.svg" alt="">
|
||||
<div>
|
||||
<span>Open Source</span>
|
||||
<p>
|
||||
Transparency is a key value for us, therefore we release our code open source. If you're a techie, we challenge you to <a href="{{ site.github_url }}">have a look</a> ;)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
|
||||
{% unless page.exclude_kickstarter_plug == true %}
|
||||
<content class="kickstarter-plug">
|
||||
<a href="{{ site.kickstarter_url }}">
|
||||
<div>
|
||||
<h3>Raised 11.755€ on Kickstarter - Thank You!</h3>
|
||||
<p>Have a look at all the details and watch video updates from the team 🎬</p>
|
||||
</div>
|
||||
</a>
|
||||
</content>
|
||||
{% endunless %}
|
||||
|
||||
<footer class="f-bg">
|
||||
<div class="list">
|
||||
<ul>
|
||||
<span>Company</span>
|
||||
<li><a href="{{ site.our_values_url }}">Team</a></li>
|
||||
<li><a href="{{ site.our_values_url }}#ownership">Ownership</a></li>
|
||||
<li><a href="{{ site.jobs_url }}">Jobs</a></li>
|
||||
<li class="vhidden">.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<span>Podcast</span>
|
||||
<li><a href="{{ site.podcast_url }}">Overview</a></li>
|
||||
<li><a href="{{ site.podcast_itunes_url }}">iTunes</a></li>
|
||||
<li><a href="{{ site.podcast_feed_url }}">RSS</a></li>
|
||||
<li class="vhidden">.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<span>Resources</span>
|
||||
<li><a href="{{ site.technology_url }}">Technology</a></li>
|
||||
<li><a href="{{ site.whitepaper_url }}Gate17.pdf">Whitepaper</a></li>
|
||||
<li><a href="{{ site.blog_url }}">Blog</a></li>
|
||||
<li class="vhidden">.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<span>Social</span>
|
||||
<li><a href="{{ site.reddit_url }}">Reddit</a></li>
|
||||
<li><a href="{{ site.newsletter_url }}">Newsletter</a></li>
|
||||
<li><a href="{{ site.github_url }}">Github</a></li>
|
||||
<li><a href="{{ site.twitter_url }}">Twitter</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<span>Legal</span>
|
||||
<li><a href="{{ site.terms_url }}">Terms</a></li>
|
||||
<li><a href="{{ site.privacy_url }}">Privacy</a></li>
|
||||
<li><a href="{{ site.contact_url }}">Contact & Legal</a></li>
|
||||
<li class="vhidden">.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="legal">
|
||||
<ul>
|
||||
<li>Safing © {{ site.time | date: '%Y' }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<content class="o-bg">
|
||||
<div class="mission">
|
||||
<h1>Enabling you to reclaim your privacy</h1>
|
||||
<p>We're building tools to help everyone withstand today's mass surveillance</p>
|
||||
</div>
|
||||
</content>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<nav>
|
||||
<a href="{{ site.base_url }}">
|
||||
<div>
|
||||
<img src="{{ site.img_url }}logo_v3_light.png" alt="">
|
||||
<p>Safing<span>.io</span></p>
|
||||
</div>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="{{ site.our_values_url }}">About</a></li>
|
||||
<li><a href="{{ site.jobs_url }}">Jobs</a></li>
|
||||
<li><a href="{{ site.community_hub_url }}">Community</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -1,18 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang={{ site.lang }}>
|
||||
<head>
|
||||
{% if layout.legacy_layout %}
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}semantic/semantic.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ site.assets_url }}css/legacy.css" type="text/css">
|
||||
{% endif %}
|
||||
{% include head.html %}
|
||||
</head>
|
||||
<body>
|
||||
{% include new/nav.html %}
|
||||
{% if page.include_mission %}
|
||||
{% include new/mission.html %}
|
||||
{% endif %}
|
||||
<body class="antialiased font-semibold">
|
||||
{% include nav.html %}
|
||||
{{ content }}
|
||||
{% include new/footer.html %}
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue