vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-23 20:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions1

Merge pull request from safing/feature/roadmap

Browse source 
Roadmap & Progress Update blogs
This commit is contained in:
Luke Seers 2020-07-31 16:31:08 +02:00 • committed by GitHub
commit da71108fb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1282 additions and 3 deletions

2
_config.yml
View file

@ -20,6 +20,7 @@ vendor_url: /vendor/
### pages
about_url: /about/
blog_url: /blog/
backlog_url: /backlog/
community_hub_url: /community-hub/
contact_url: /contact/
esa_bic_url: /esa-bic/
@ -29,6 +30,7 @@ ownership_url: /ownership/
podcast_url: /podcast/
portmaster_url: /portmaster/
privacy_url: /privacy/
next_page_url: /next/
spn_url: /spn/
team_url: /team/
terms_url: /terms/

9
_data/backlog.yml Normal file
View file

@ -0,0 +1,9 @@
cards:
- title: Stabilize the Network
description:
- After v0.1, focus on stabilizing the typical issues that arise with early software. Fix bugs, improve performance & stability.
- Deliver to more and more pre-orders as the network's matures.
projects:
- SPN
team:
- Daniel

133
_data/next.yml Normal file
View file

@ -0,0 +1,133 @@
# Project Priority (for ordering)
# - Portmaster
# - SPN
# - Website (includes the CustomerHub)
# - Community
# - Marketing
# - Backoffice
# Ordering of team members should lean towards most involved -> least involved. but may also be done randomly
# Description style:
# - write in the perspective of a manager giving orders. Add this, redesign that, Request X.
# - when talking about users, customers, readers, ... ALWAYS switch to the "you" perspective.
# -> NO: Create a roadmap so users know what is going on.
# -> YES: Create a roadmap so you know what is going on.
cards:
done:
- title: Improve Installation Process
description:
- Instead of downloading individual components on first start-up, download them during the installation process.
projects:
- Portmaster
team:
- Patrick
- title: CI & Arch Installer
description:
- Package the Portmaster for Arch Linux.
- While at it implement Continuous Integration via Github Actions to automatically test all future installs on Windows, Debian & Arch.
projects:
- Portmaster
team:
- Patrick
- title: Funding Proposals
description:
- Request different grants to help us out financially with all the research & development still ahead of us.
- Apply follow up fundings both from the Netidee and the FFG.
link:
text: "More on Transparent Funding..."
url: "/ownership/#finances"
projects:
- Backoffice
team:
- Tabitha
- Raphael
in_progress:
- title: SPN Pre-Alpha
description:
- Deploy the SPN in v0.1. Give access to Marvin and Visionary Kickstarter backers.
- Communicate that this is only the first step and that it will take a few weeks or months until the network is stable enough to support hundreds/thousands of users.
projects:
- SPN
team:
- Daniel
- Patrick
- title: Safing API
description:
- Enable you to sign in to your Safing account on the Portmaster client via the Safing API. Also respond with details regarding your SPN subscription.
- Implement device management so you can sign out of devices from the Safing website.
projects:
- SPN
- Portmaster
- Website
team:
- David
- Daniel
- title: IntelHub
description:
- Create a service that aggregates filterlists, updates this intelligence frequently and distributes it to Portmaster clients so they do not have to do this resource heavy work themselves.
- Also aggregate and distribute GeoIP data so the SPN module can calculate up-to-date Internet routes for its circuits.
projects:
- Portmaster
team:
- Patrick
- title: Portscan Detection
description: Detect and block malicious actors trying to expose vulnerabilities by scanning through all networking ports on your device. Research thoroughly to prevent false positives.
projects:
- Portmaster
team:
- Daniel
- Thomas (Intern)
- title: Portmaster Documentation
description:
- You can see our high level concepts & you can inspect our code. But nothing in between.
- Fill that gap by providing proper documentation of the Portmaster. What does each component do? With what other components does it interact? Where is its code located?
projects:
- Portmaster
- Website
team:
- David
- Patrick
- Daniel
- title: Administration Interface
description:
- Enable admins to easily accept cash payments, manage refunds or suspend rogue users.
- Also provide some basic insights on signups, payments, survey results, etc...
projects:
- Website
team:
- Alex
- Raphael (Intern)
- title: Next Page & Backlog
description:
- Properly communicate what we currently are working on so you know what to expect from us in the nearer future.
- Also provide a backlog to acknowledge everything that needs to be done further down the road. Encourage participation so you can easily let us know where we might need to adapt or what we might have missed in the bigger picture.
projects:
- Website
- Community
team:
- Luke
- David
- title: Redesign account.safing.io
description:
- When visiting https://account.safing.io/ to manage your Safing account, the design clearly breaks from the main website.
- Unify these designs so you get a more wholesome web experience.
projects:
- Website
team:
- Luke
- title: "Inception: Reaching Out"
description:
- As the SPN will soon see the light of day, the time has come to spread the word, also by spending money.
- Reach out to YouTube channels and newsletters in the privacy scene who offer sponsored shout-outs.
- You are very welcome to give us suggestions in this context.
link:
text: "Share your ideas on reddit"
url: "https://reddit.com/r/safing/"
projects:
- Marketing
team:
- Raphael
- Tabitha
discarded:

5
_includes/nav.html
View file

@ -42,6 +42,11 @@
About
</a>
</li>
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm relative">
<a href="{{ site.next_page_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
What's Next?
</a>
</li>
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
<a href="{{ site.help_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
Get Help

80
_includes/project_card.html Normal file
View file

@ -0,0 +1,80 @@
<div class="card text-left transform scale-95">
<div class="block shadowthing p-8 rounded-lg">
<div class="tabs">
<div class="tab">
<input class="dropinput" type="checkbox" id="card-{{ include.state }}-{{ forloop.index }}">
<label style="min-width: 90%; min-height: 150px; display: block;" class="absolute cursor-pointer" for="card-{{ include.state }}-{{ forloop.index }}">
<img class="absolute right-0" style="margin-right: 1rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
</label>
<div>
<div class="flex">
{% for tag in card.projects %}
{% assign tag_bg_strength = 100 %}
{% if tag == 'Portmaster' %}
{% assign tag_color = 'blue' %}
{% elsif tag == 'SPN' %}
{% assign tag_color = 'green' %}
{% elsif tag == 'Website' %}
{% assign tag_color = 'pink' %}
{% elsif tag == 'Backoffice' %}
{% assign tag_color = 'gray' %}
{% assign tag_bg_strength = 200 %}
{% elsif tag == 'Community' %}
{% assign tag_color = 'purple' %}
{% elsif tag == 'Marketing' %}
{% assign tag_color = 'orange' %}
{% endif %}
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-{{ tag_color }}-{{ tag_bg_strength }} text-{{ tag_color }}-800 mr-2">
{{ tag }}
</span>
{% endfor %}
</div>
<div class="flex pt-6 items-center">
<div>
{% if include.state == 'done' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
{% elsif include.state == 'in_progress' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt="">
{% elsif include.state == 'discarded' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt="">
{% elsif include.state == 'backlog' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt="">
{% endif %}
</div>
<h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
</div>
</div>
<div style="padding-left: 0;" class="tab-content opacity-50 text-md">
<p>The Assignment:</p>
<br/>
{% for paragraph in card.description %}
<p>{{ paragraph }}</p>
{% unless forloop.last %}
<br/>
{% endunless %}
{% endfor %}
{% if card.link %}
<br/>
<a href="{{ card.link.url }}">
{{ card.link.text }}
</a>
{% endif %}
</div>
</div>
<div class="pt-3">
<div class="absolute top-0 right-0 mr-6 pt-1 overflow-visible mt-20 sm:mt-16 sm:mr-16">
<div class="flex-shrink-0 mt-0">
<div class="flex ">
{% for member in card.team %}
<span class="transform hover:scale-110 duration-150 ease-in-out" tooltip="{{ member | capitalize }}" >
<img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member }}">
</span>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>

117
_includes/project_tablecard.html Normal file
View file

@ -0,0 +1,117 @@
<div class="tablecard shadowthing text-left transform scale-95">
<div class="block px-8 py-6 rounded-lg">
<div class="absolute top-0 right-0 overflow-visible mr-16 mt-12 z-20">
<div class="flex-shrink-0 mt-0">
<div class="flex ">
{% for member in card.team %}
<span class="transform hover:scale-110 duration-150 ease-in-out" tooltip="{{ member | capitalize }}">
<img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member }}">
</span>
{% endfor %}
</div>
</div>
</div>
<div class="tabs">
<div class="tab relative">
<input class="dropinput" type="checkbox" id="tablecard-{{ include.state }}-{{ forloop.index }}">
<label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="tablecard-{{ include.state }}-{{ forloop.index }}">
<img class="absolute right-0" style="margin-right: 1rem; margin-top: 1.2rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
</label>
<div class="flex relative ">
<div>
<div class="flex">
{% for tag in card.projects %}
{% assign tag_bg_strength = 100 %}
{% if tag == 'Portmaster' %}
{% assign tag_color = 'blue' %}
{% elsif tag == 'SPN' %}
{% assign tag_color = 'green' %}
{% elsif tag == 'Website' %}
{% assign tag_color = 'pink' %}
{% elsif tag == 'Backoffice' %}
{% assign tag_color = 'gray' %}
{% assign tag_bg_strength = 200 %}
{% elsif tag == 'Community' %}
{% assign tag_color = 'purple' %}
{% elsif tag == 'Marketing' %}
{% assign tag_color = 'orange' %}
{% endif %}
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-{{ tag_color }}-{{ tag_bg_strength }} text-{{ tag_color }}-800 mr-2">
{{ tag }}
</span>
{% endfor %}
</div>
<div class="flex pt-3 items-center">
<div>
{% if include.state == 'done' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
{% elsif include.state == 'in_progress' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt="">
{% elsif include.state == 'discarded' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt="">
{% elsif include.state == 'backlog' %}
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt="">
{% endif %}
</div>
<h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
</div>
</div>
</div>
<div style="padding-left: 0; padding-right: 0;" class="tab-content text-md">
<div class="block py-3">
<hr>
<div class="tab relative" id="tabtwo">
<input class="dropinput" type="checkbox" id="tablecard-description-{{ include.state }}-{{ forloop.index }}">
<label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="tablecard-description-{{ include.state }}-{{ forloop.index }}">
<img class="absolute right-0" style="margin-right: 1rem; margin-top: 0.5rem;" id="icontwo" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
</label>
<div class="flex relative">
<div class="self-center -mt-5">
<div class="absolute right-0 mr-12 transform scale-110">
</div>
</div>
<div>
<div class="flex py-3" style="margin-left: 1rem;">
<div>
<img src="" alt="">
</div>
<span class=" text-md opacity-50">Assignment</span>
</div>
</div>
</div>
<div style="padding-left: 3; padding-right: 1em; padding-top: 0;" class="tab-content text-md">
<p>
{% for paragraph in card.description %}
{{ paragraph }}
{% endfor %}
</p>
</div>
</div>
<hr>
</div>
<div>
{% for tag in card.progress %}
{% if tag.type == 'a' %}
<{{ tag.type }} href='{{ tag.href }}'>{{ tag.text }}</{{tag.type}}>
{% elsif tag.type == 'br' %}
<br/>
{% elsif tag.type == 'ol' %}
<ol>
{% for li in tag.lis %}
<li>{{ li }}</li>
{% endfor %}
</ol>
{% else %}
<{{ tag.type }}>{{ tag.text }}</{{tag.type}}>
{% endif %}
{% endfor %}
</div>
<!-- <div class="pt-12">
<span style="font-size: 0.8rem;" class="absolute right-0"><strong>01/6/2020</strong> <span class="opacity-50">-</span><strong> 31/6/2020</strong></span>
</div> -->
</div>
</div>
</div>
</div>
</div>

2
_includes/thumbnail_blog.html
View file

@ -1,4 +1,4 @@
<li class="mt-10 md:mt-0">
<li class="list-none mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="{{ post.url }}">
<div class="relative" style="max-width: 365px;">

5
_layouts/post.html
View file

@ -17,7 +17,12 @@ layout: page_container
</a>
</div>
</div>
{% if page.progress_update %}
<div>
{% else %}
<div class="content">
{% endif %}
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
</div>

2
_posts/2020-06-26-progress-update.md
View file

@ -1,7 +1,7 @@
---
# ⚠️ ALWAYS follow this format: "#001 - Some sweet title"
# this has to be consistent for displaying only the episode number or only the title
title: "#001 - Progress Update June"
title: "#000 - Progress Update June"
date: 2020-06-26
author: davegson
custom_thumbnail_name: progress-update

311
_posts/2020-07-31-progress-update-july.html Normal file
View file

@ -0,0 +1,311 @@
---
# ⚠️ ALWAYS follow this format: "#001 - Some sweet title"
# this has to be consistent for displaying only the episode number or only the title
title: "#001 - Progress Update July"
date: 2020-07-31
author: davegson
custom_thumbnail_name: progress-update
# Progress Update blogs make a snapshot of the current next page
# and then add a "progress: description" to it.
# -> this is cool for history purposes
# And in there, describe the progress, challenges, cool moments etc..
# You may always refer to previous blog posts to get an idea.
# if a project gets completed / abandoned, add a finish date
# also set this attribute to true so the website does its magic with it
progress_update: true
# snapshot as of 2020/07/31
cards:
done:
- title: Improve Installation Process
description:
- Instead of downloading individual components on first start-up, download them during the installation process.
projects:
- Portmaster
team:
- Patrick
progress:
- type: 'h3'
text: Smoother Installation Is Here
- type: p
text: "It was slightly confusing to install a software which did the \"proper\" installation at its first start up. Next to correctly moving this process into the real installation, while at it, Patrick decided to refactor a lot of related code to further smoothen. We're happy with the results."
- title: CI & Arch Installer
description:
- Package the Portmaster for Arch Linux.
- While at it implement Continuous Integration via Github Actions to automatically test all future installs on Windows, Debian & Arch.
projects:
- Portmaster
team:
- Patrick
progress:
- type: 'h3'
text: All Is Well
- type: p
text: Through this project Patrick got to tinker around with Github Actions for the first time, which he really enjoyed. Having completed this task not only helps distributing to Arch users, but will also help the stability of all future Portmaster builds.
- type: 'h3'
text: More Security As A Side Effect
- type: p
text: While tackling the installer for the second Linux distribution Arch, Patrick pointed out the opt-in security of their service files. Without defining restrictions, an app like the Portmaster gets root access, so when a malicious actor takes over the Portmaster it would give him the tools to take over the whole system. As a result we defined strict rules so the Portmaster only gets read access for most of the system.
- type: a
href: https://github.com/safing/portmaster-packaging/blob/master/linux/debian/portmaster.service
text: Look at the service config
- title: Funding Proposals
description:
- Request different grants to help us out financially with all the research & development still ahead of us.
- Apply follow up fundings both from the Netidee and the FFG.
link:
text: "More on Transparent Funding..."
url: "/ownership/#finances"
projects:
- Backoffice
team:
- Tabitha
- Raphael
progress:
- type: 'h3'
text: FFG Proposal Was 32 Pages Long
- type: p
text: Applying for grants takes a lot of work. We defined 14 R&D goals for the coming year. This time the proposal was extra tricky since we decided to write it in German. Most of our previous applications were written in English, so this time translating texts was also part of the work load. But we are happy we could wrap this up. Result coming in September.
- type: 'h3'
text: Netidee Application Submitted Too
- type: p
text: Safing started out with a funding from Netidee four years ago, so applying for another grant felt special. The extent of the defined work packages are smaller compared to the FFG, so it did not take as long.
in_progress:
- title: SPN Pre-Alpha
description:
- Deploy the SPN in v0.1. Give access to Marvin and Visionary Kickstarter backers.
- Communicate that this is only the first step and that it will take a few weeks or months until the network is stable enough to support hundreds/thousands of users.
projects:
- SPN
team:
- Daniel
- Patrick
progress:
- type: 'h3'
text: Three Major Refactors Made Us Slower But More Secure
- type: p
text: "Since our SPN proof of concept back in 2018, three major events resulted in making the final product more secure and stable, but also increased our workload:"
- type: ol
lis:
- the external code audit of our cryptographic library Jess by Cure53 gave valuable technical advice how to further tighten this aspect
- the decision to split the gossiping between network nodes into two levels of communication
- the Portmaster has matured a lot since its release back in April, resulting in a lot of code-refactors on the client side
- type: 'h3'
text: Code Audit By Cure53
- type: p
text: "Back in January we paid some of the best in the field to audit our cryptographic library. Their insight and expertise challenged us, in a very good way. The foundation was solid, but it was clear we could improve things here and there. During these months, we could progress our cryptography library into what it is now. This module is complete, but also added workload to the timeline."
- type: a
text: View Cure53's audit report
href: https://cure53.de/pentest-report_safing-jess.pdf
- type: br
- type: a
text: Inspect the code of Jess, our cryptography library
href: https://github.com/Safing/jess
- type: 'h3'
text: Refactoring The Gossiping
- type: p
text: "Instead of sending all data from servers to clients, we decided to split the messages into a \"big message\" and a \"small message\". The big message is sent on setup and contains the servers public key and lots of meta-data. The small message contains the servers active links to other nodes and its most current ephemeral keys (for 0-RTT perfect forward & backward secrecy connections). The small message will communicate with clients regularly while the big message will be sent less frequent to prevent unnecessary communication. Naturally, this resulted in a big refactor and a delay in timeline."
- type: p
text: This module is nearly done as well, just a few polishes here and there as well as some more integration tests are needed to wrap this up.
- type: a
text: View the Pull Request of this refactor
href: https://github.com/safing/spn/pull/1
- type: 'h3'
text: "Last Piece of the Puzzle: Client Side Integration"
- type: p
text: "The Portmaster has matured a lot in the last few months, hence this also changed a few components which intercept and resolve network connections. This is the final module we are currently working on until the first testers can join the network. We are so close, but sadly not there yet. Expect the full SPN engine to start very shortly."
- title: Safing API
description:
- Enable you to sign in to your Safing account on the Portmaster client via the Safing API. Also respond with details regarding your SPN subscription.
- Implement device management so you can sign out of devices from the Safing website.
projects:
- SPN
- Portmaster
- Website
team:
- David
- Daniel
progress:
- type: 'h3'
text: We Completed the Server Part
- type: p
text: The Safing API has come very far. It actually already is online, signing in valid users and responding with information on each users SPN subscription status. Setting the API up securely took quite a lot of planning, but we are happy about the result.
- type: 'h3'
text: Designs Are Done Too
- type: p
text: Now in the Portmaster part, we both need to provide an interface where you can log in to the SPN and where it displays your current account status. The designs for this have also been completed by Luke.
- type: 'h3'
text: What is Missing is The Client Side
- type: p
text: The only puzzle piece missing is the frontend implementation, meaning the Portmaster UI actually showing the designs and making the API calls. This project is nearing its completion, so stay tuned!
- title: IntelHub
description:
- Create a service that aggregates filterlists, updates this intelligence frequently and distributes it to Portmaster clients so they do not have to do this resource heavy work themselves.
- Also aggregate and distribute GeoIP data so the SPN module can calculate up-to-date Internet routes for its circuits.
projects:
- Portmaster
team:
- Patrick
progress:
- type: 'h3'
text: Watching Filter List Repos
- type: p
text: Next to providing aggregated filter lists to the privacy filter module of the Portmaster, we added a feature to the IntelHub so it watches the different list repositories. With this, we will constantly be informed about ongoing changes and be able to quickly inform our users about any impactful changes.
- type: 'h3'
text: GeoIP Data is Being Aggregated
- type: p
text: The second big part of this work package is to collect and sort GeoIP data so the Portmaster can properly build SPN circuits locally. If you are pinging a server in Europe it would be ineffective to exit the SPN in Asia. Hence, your client needs this data to calculate efficient routes. This data is already being gathered from many different resources and takes our server up to 16 GB of memory when performing an update.
- type: 'h3'
text: Polishing Things Up
- type: p
text: All in all, Patrick is making great progress and this project is nearing its completion. It just needs a few improvements here and there to then be fully deployed. Expect this to be out soon.
- title: Portscan Detection
description: Detect and block malicious actors trying to expose vulnerabilities by scanning through all networking ports on your device. Research thoroughly to prevent false positives.
projects:
- Portmaster
team:
- Daniel
- Thomas (Intern)
progress:
- type: 'h3'
text: Lots of Research Went Into This
- type: p
text: Although this is a cool feature, it could potentially lead to unwanted side effects. Investigating the impact of this module in a vastness of potential edge cases was the first part we tackled before writing a single line of code.
- type: 'h3'
text: Related Bugs Were Found While Implementing
- type: p
text: When starting to implement the Portscan, we found several related bugs in the Portmaster. Even though these delayed progress in this work package, it was super helpful to further mature the Portmaster overall.
- title: Portmaster Documentation
description:
- You can see our high level concepts & you can inspect our code. But nothing in between.
- Fill that gap by providing proper documentation of the Portmaster. What does each component do? With what other components does it interact? Where is its code located?
projects:
- Portmaster
- Website
team:
- David
- Patrick
- Daniel
progress:
- type: 'h3'
text: Goals Are Specified, Texting Will Start Soon
- type: p
text: Since the roadmap was prioritized not much could be done in this field. But since this project is near and dear to us, David will soon fully focus on getting these texts out of the door.
- title: Administration Interface
description:
- Enable admins to easily accept cash payments, manage refunds or suspend rogue users.
- Also provide some basic insights on signups, payments, survey results, etc...
projects:
- Website
team:
- Alex
- Raphael (Intern)
progress:
- type: 'h3'
text: Planning Done, Implementation Pushing Forward
- type: p
text: Having started this in July, we started off with planning & specifying this feature. After that was done Alex moved on to its implementation and already made great progress, soon to be reviewed and polished. This project also gave one of our summer interns the possibility to take part and experience a feature development cycle right from the start.
- title: Next Page & Backlog
description:
- Properly communicate what we currently are working on so you know what to expect from us in the nearer future.
- Also provide a backlog to acknowledge everything that needs to be done further down the road. Encourage participation so you can easily let us know where we might need to adapt or what we might have missed in the bigger picture.
projects:
- Website
- Community
team:
- Luke
- David
progress:
- type: 'h3'
text: Next Page And Progress Update Blog Are Done
- type: p
text: Many have come to ask what we are up to and what our plans for the future are. And previously, we communicated deadlines and got into a bunch of uncomfortable situations. But the alternative of just NOT communicating anything is lame too, and certainly nothing we stand for. Both David and Luke ping ponged a lot of ideas until we came up with this approach - hopefully you dig it as much as we do!
- type: 'h3'
text: A Lot More Coming Up in the Backlog
- type: p
text: This is the first step of two, since we also want to share all about our work packages lined up further down the road. What features will be added to the SPN, the Portmaster, etc.. Well, we want to tell you, so we are working on it.
- title: Redesign account.safing.io
description:
- When visiting https://account.safing.io/ to manage your Safing account, the design clearly breaks from the main website.
- Unify these designs so you get a more wholesome web experience.
projects:
- Website
team:
- Luke
progress:
- type: 'h3'
text: It Just Started
- type: p
text: This project is fairly new, so not too much could be achieved. The goal is to have a unified design both for the main website and the account part of the website. Luke already started out with some early design concepts.
- title: "Inception: Reaching Out"
description:
- As the SPN will soon see the light of day, the time has come to spread the word, also by spending money.
- Reach out to YouTube channels and newsletters in the privacy scene who offer sponsored shout-outs.
- You are very welcome to give us suggestions in this context!
projects:
- Marketing
team:
- Raphael
- Tabitha
progress:
- type: 'h3'
text: Slots Have Been Booked
- type: p
text: We are happy to already have contacted a few folks where we could book some of their sponsorship slots. Also, some local partners reached out to help us out with marketing opportunities. We will not disclose what will come of it just yet, only after the fact. But next month's update will certainly include more information.
- type: 'h3'
text: It's an Evergoing Process
- type: p
text: Naturally, we will not be done after a few marketing gigs, which is why we are still on the look-out for further opportunities to spread the word.
- type: a
text: "Let us know if you have any ideas on reddit"
href: "https://reddit.com/r/safing/"
discarded:
---
<div class="pt-24">
{% if page.cards.done.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >Completed</h3>
<p>A list of work packages we've fully wrapped up this month. Expand any to find out more about its conclusion.</p>
</div>
<div class="pt-10 blogwrapper">
{% for card in page.cards.done %}
{% include project_tablecard.html state = 'done' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if page.cards.in_progress.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >In Progress</h3>
<p>Expand any work package to find out more about its progress, obstacles and sub-achievements.</p>
</div>
<div class="pt-10 blogwrapper">
{% for card in page.cards.in_progress %}
{% include project_tablecard.html state = 'in_progress' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if page.cards.discarded.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >Discarded</h3>
<p>Work packages we for one reason or the other decided to discard. Click on a package to find out the exact reasons why.</p>
</div>
<div class="pt-10 blogwrapper">
{% for card in page.cards.discarded %}
{% include project_tablecard.html state = 'discarded' %}
{% endfor %}
</div>
</div>
{% endif %}
</div>

257
_sass/_global.scss
View file

@ -180,3 +180,260 @@ a.link {
.hover\:opacity-55:hover {
opacity: 0.55;
}
.card{
max-width: auto;
}
.tablecard{
max-width: auto;
h3{
padding-top: 2.5rem !important;
}
ul,
ol{
padding: 1rem;
list-style-type: decimal;
li{
padding-top: 0.7rem;
color: #898989;
}
}
a{
display: inline-table;
position: none;
padding-top: 1rem;
}
}
.shadowthing{
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0), 0 0px 90px 0 rgba(59, 93, 199, 0.1);
}
.blogwrapper{
display: grid;
grid-template-columns: repeat(1, auto);
grid-template-rows: auto;
grid-row-gap: 3px;
grid-auto-flow: row;
margin-left: auto;
margin-right: auto;
max-width: 1350px;
}
@media (min-width: 640px) {
.blogwrapper{
grid-template-columns: repeat(1, auto);
}
#icon{
margin-top: 2rem;
}
}
.nextwrapper{
display: grid;
grid-template-columns: repeat(1, auto);
grid-template-rows: auto;
grid-row-gap: 10px;
grid-auto-flow: row;
margin-left: auto;
margin-right: auto;
max-width: 1350px;
}
@media (min-width: 640px) {
.nextwrapper{
grid-template-columns: repeat(1, auto);
}
}
@media (min-width: 1024px) {
.nextwrapper{
grid-template-columns: repeat(3, minmax(auto, 445px));
.card{
max-width: 445px;
}
}
}
.dropinput {
position: absolute;
opacity: 0;
z-index: -1;
}
.tabs {
border-radius: 8px;
overflow: visible;
}
.tab {
width: 100%;
color: black;
overflow: hidden;
&-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: transparent;
font-weight: bold;
cursor: pointer;
&:hover {
background: transparent;
}
&::after {
content: " ";
width: 1em;
height: 1em;
text-align: center;
transition: all .0s;
transition-timing-function: ease;
transform: rotate(-90deg);
}
}
&-content {
max-height: 0;
padding: 0 1em;
color: black;
background: transparent;
transition: all .3s;
transition-timing-function: ease-in-out;
}
&-close {
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: transparent;
cursor: pointer;
&:hover {
background: transparent;
}
}
}
#icon {
width: 35px;
position: fixed;
}
#icontwo {
width: 35px;
}
input:checked {
+ label #icon {
transform: rotate(180deg);
}
+ label #icontwo {
transform: rotate(180deg);
}
~ .tab-content {
max-height: 100%;
padding: 1em;
}
}
.dot {
position: absolute;
right: 0;
height: 5px;
width: 5px;
background-color: #6188ff;
border-radius: 50%;
display: inline-block;
}
[tooltip] {
position: relative;
}
[tooltip]::before,
[tooltip]::after {
text-transform: none;
font-size: .9em;
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
z-index: 1001;
}
[tooltip]::after {
content: attr(tooltip);
font-family: Helvetica, sans-serif;
text-align: center;
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 2ch;
border-radius: 100px;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -.5em);
}
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}

6
assets/icons/arrow.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 14l-4-4-4 4"/>
</g>
</svg>
Side by side

After

(image error) Size: 238 B

7
assets/icons/cog.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke-linecap="round" stroke-width="1.8" stroke="#323232" fill="none" stroke-linejoin="round">
<path d="M18.364 5.63604c3.51472 3.51472 3.51472 9.2132 0 12.7279-3.51472 3.51472-9.2132 3.51472-12.7279 0-3.51472-3.51472-3.51472-9.2132 0-12.7279 3.51472-3.51472 9.2132-3.51472 12.7279 0"/>
<path d="M12.715 16.632l.982-.264c.183-.049.32-.201.351-.388l.215-1.32c.033-.204.194-.365.398-.398l1.319-.215c.187-.03.339-.168.388-.351l.263-.982c.049-.183-.014-.378-.161-.498l-1.036-.846c-.161-.131-.219-.35-.146-.544l.476-1.253c.067-.177.024-.378-.11-.512l-.718-.718c-.134-.134-.334-.177-.512-.11l-1.251.477c-.194.074-.413.015-.544-.146l-.846-1.036c-.12-.147-.315-.21-.498-.16l-.982.264c-.183.049-.32.201-.351.388l-.215 1.32c-.033.204-.193.364-.398.397l-1.319.215c-.187.03-.339.168-.388.351l-.263.982c-.049.183.014.378.16.498l1.034.846c.16.131.219.35.145.544l-.476 1.253c-.067.177-.024.378.11.512l.718.718c.134.134.334.177.511.11l1.254-.475c.194-.073.413-.015.544.146l.846 1.036c.122.145.317.208.5.159z"/>
</g>
<path fill="none" d="M0 0h24v24H0V0z"/>
</svg>
Side by side

After

(image error) Size: 1.1 KiB

6
assets/icons/cross.svg Normal file
View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#bd6868" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.83 9.17l-5.66 5.66M14.83 14.83L9.17 9.17M12 21v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9z"/>
</g>
</svg>
Side by side

After

(image error) Size: 360 B

7
assets/icons/files.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#8b8b8b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 15l4 2 4-2M12 11l4-2-4-2-4 2zM8 12l4 2 4-2"/>
<path stroke="#8b8b8b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12v0c0 4.971-4.029 9-9 9v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9z"/>
</g>
</svg>
Side by side

After

(image error) Size: 459 B

7
assets/icons/tick.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#58b76d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9z"/>
<path stroke="#58b76d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10l-5 5-3-3"/>
</g>
</svg>
Side by side

After

(image error) Size: 429 B

BIN
assets/img/page-specific/next/files.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 46 KiB

BIN
assets/img/profiles/raphael (intern).png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 6.8 KiB

BIN
assets/img/profiles/thomas (intern).png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 6.2 KiB

142
backlog/index.html Normal file
View file

@ -0,0 +1,142 @@
---
title: Safing Ownership
layout: page
---
<section style="margin-top: 12rem; margin-bottom: 8rem;" class="mb-40">
<div class="items-center h-full">
<div>
<div>
<div class="relative max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-0 lg:flex">
<div class=" pt-8">
<div class="text-center lg:text-left">
<span class="text-sm opacity-55 tracking-normal">20.04.2020</span>
<h2 id="influences" class="text-5xl tracking-tight font-extrabold leading-none pb-10 pt-2">
Backlog
</h2>
<p class="text-md opacity-55 max-w-lg mx-auto">
We find it very hard to say what the ufutre will be. So we have
created our own roadmap to show what we plan doing what we are working.
</p>
</div>
<!-- <div class="pt-10 flex transform scale-110 ml-5 mx-auto justify-center lg:justify-start">
<div class="flex">
<div class="flex-1 pr-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800">
Portmaster
</span>
</div>
<div class="flex-1 pr-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">
Spn
</span>
</div>
<div class="flex-1 pr-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800">
Organization
</span>
</div>
</div>
</div> -->
</div>
<div class="relative mt-24 lg:mt-0 lg:absolute lg:right-0 lg:mr-10">
<div class="mx-auto max-w-xs transform hover:scale-95 duration-150 ease-in-out">
<a href="/roadmapblog/">
<div class="relative" style="max-width: 365px;">
<img src="/assets/img/thumbnails/blog/progress-update.png">
<span class="absolute text-white right-0 bottom-0 pr-3 pb-3" style="font-size: 3.1rem; font-weight: 800;">#01</span>
</div>
<div class="pt-6 max-w-xs">
<span class="opacity-25">
26. Jun 2020
</span>
<p>Progress Update June - #01</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="pt-48">
<div class="gridwrapper">
<div style="margin-top: -3rem;" class="flex absolute pl-8 ">
<span class="opacity-50">Portmaster</span>
<strong class="pl-2 opacity-75">(3)</strong>
</div>
{% include project_card.html %}
{% include project_card.html %}
{% include project_card.html %}
{% include project_card.html %}
</div>
</div>
</div>
<div class="pt-48">
<div class="gridwrapper">
<div style="margin-top: -3rem;" class="flex absolute pl-8 ">
<span class="opacity-50">SPN</span>
<strong class="pl-2 opacity-75">(3)</strong>
</div>
{% include project_card.html %}
{% include project_card.html %}
{% include project_card.html %}
</div>
</div>
<div class="pt-48">
<div class="gridwrapper">
<div style="margin-top: -3rem;" class="flex absolute pl-8 ">
<span class="opacity-50">BackOffice</span>
<strong class="pl-2 opacity-75">(3)</strong>
</div>
{% include project_card.html %}
</div>
</div>
</div>
</div>
</div>
</section>
<!--
this is only for the roadmap backlog.
Luke will clean this at a later date.
-->
<style>
.gridwrapper{
display: grid;
grid-template-columns: repeat(1, auto);
grid-template-rows: auto;
grid-row-gap: 10px;
grid-auto-flow: row;
margin-left: auto;
margin-right: auto;
max-width: 1350px;
}
.card{
max-width: auto;
}
.shadowthing{
box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
}
@media (min-width: 768px) {
}
@media (min-width: 640px) {
.gridwrapper{
grid-template-columns: repeat(1, auto);
}
}
@media (min-width: 1024px) {
.gridwrapper{
grid-template-columns: repeat(3, minmax(auto, 445px));
}
.card{
max-width: 445px;
}
}
</style>

109
next/index.html Normal file
View file

@ -0,0 +1,109 @@
---
title: What's Next At Safing
layout: page
---
<section class="mb-40 mt-32">
<div class="items-center h-full">
<div class="relative max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-0 lg:flex">
<div class="pt-8">
<div class="text-center lg:text-left">
<span class="text-sm opacity-55 tracking-normal">31.07.2020</span>
<h2 id="influences" class="text-5xl tracking-tight font-extrabold leading-none pb-10 pt-2">
Progress Overview
</h2>
<p class="text-md opacity-55 max-w-lg mx-auto">
Find out what the Safing team is currently working on. This is a compact overview of bigger tasks grouped by projects.
</p>
</div>
</div>
<div class="relative mt-24 lg:mt-0 lg:absolute lg:right-0 lg:mr-10">
<!-- blog -->
{% for post in site.posts limit: 1 %}
{% include thumbnail_blog.html pre_header="BLOG" %}
{% endfor %}
</div>
</div>
</div>
{% if site.data.next.cards.done.size > 0 %}
<div class="pt-48">
<div class="nextwrapper">
<div style="margin-top: -3rem;" class="flex absolute pl-8 ">
<span class="opacity-50">Recently Completed</span>
<strong class="pl-2 opacity-75">({{ site.data.next.cards.done.size }})</strong>
</div>
{% for card in site.data.next.cards.done %}
{% include project_card.html state = 'done' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if site.data.next.cards.in_progress.size > 0 %}
<div class="pt-64">
<div class="nextwrapper">
<div style="margin-top: -8rem;" class="absolute pl-8 ">
<div >
<span class="opacity-50">In Progress</span>
<strong class="pl-2 opacity-75">({{ site.data.next.cards.in_progress.size }})</strong>
</div>
<p class="opacity-50 pt-5 max-w-4xl">
Being in progress does not imply the project will be
completed soon. Plenty will take a while and a few
might even get discarded. Read the monthly blog updates
to follow the progress and conclusion of every project.
</p>
</div>
{% for card in site.data.next.cards.in_progress %}
{% include project_card.html state = 'in_progress' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if site.data.next.cards.discarded.size > 0 %}
<div class="pt-48">
<div class="nextwrapper">
<div style="margin-top: -3rem;" class="flex absolute pl-8 ">
<span class="opacity-50">Recently Discarded</span>
<strong class="pl-2 opacity-75">({{ site.data.next.cards.discarded.size }})</strong>
</div>
{% for card in site.data.next.cards.discarded %}
{% include project_card.html state = 'discarded' %}
{% endfor %}
</div>
</div>
{% endif %}
</section>
<section class="mt-20 lg:mt-40 mb-16 lg:mb-48">
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/next/files.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
There is More. <br/> A Lot More.
</h2>
<p class="text-md opacity-55 max-w-lg">
We have plans and ideas for years to come. We will never be "done" but always evolve and progress. I'm sure you have cool ideas for us too!
Take a look what we already plan on doing in the longer run.
</p>
<p class="text-md opacity-55 max-w-lg pt-8">
As disclosed above we're still working on the backlog. Coming SoonTM.
</p>
<!-- <div class="py-10 flex">
<a href="{{ site.backlog_url }}">
<button type="button" style="background-color: #000;" 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">
Explore the Backlog
</button>
</a>
</div> -->
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/next/files.png" alt="">
</div>
</div>
</div>
</div>
</section>

2
ownership/index.html
View file

@ -38,7 +38,7 @@ layout: page
<img src="{{ site.img_url }}page-specific/ownership/influences.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
<h2 id="finances" style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Financed by Grants, Loans and <span style="color: #6188ff;">You</span>
</h2>
<p class="text-md opacity-55 max-w-lg">

76
roadmapblog/index.html Normal file
View file

@ -0,0 +1,76 @@
---
title: Safing Ownership
layout: page
---
<section id="page-container" class="pb-8 lg:pb-24 pt-16 lg:pt-40 ">
<div class="items-center h-full">
<div class="container mx-auto px-0 sm:px-0 flex">
<div class="max-w-screen-lg mx-auto px-0 sm:px-6 lg:flex">
<div class="py-12 bg-white">
<div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
<content>
<div class="text-center">
<h1 class="text-5xl tracking-tight font-extrabold leading-none pb-5 pt-10 text-center">Community Progress Update</h1>
<p>July 7, 2020</p>
<div class="flex mx-auto justify-center pt-5">
<a href="https://twitter.com/SafingIO" class="opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.1rem; width: auto;" src="/assets/img/icons/twitter.svg">
</a>
<a href="https://github.com/safing" class="pl-4 pr-4 opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.19rem; width: auto;" src="/assets/img/icons/github.svg">
</a>
<a href="https://reddit.com/r/safing" class="opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.18rem; width: auto;" src="/assets/img/icons/reddit.svg">
</a>
</div>
</div>
<div class="pt-24">
{% if site.data.next.cards.done.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >Completed</h3>
<p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
</div>
<div class="pt-10 blogwrapper">
{% for card in site.data.next.cards.done %}
{% include project_tablecard.html state = 'done' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if site.data.next.cards.in_progress.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >In Progress</h3>
<p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
</div>
<div class="pt-10">
{% for card in site.data.next.cards.in_progress %}
{% include project_tablecard.html state = 'in_progress' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if site.data.next.cards.discarded.size > 0 %}
<div class="pt-12">
<div style="max-width: 750px; margin-top: 3rem; margin: auto;">
<h3 >Discarded</h3>
<p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
</div>
<div class="pt-10">
{% for card in site.data.next.cards.discarded %}
{% include project_tablecard.html state = 'discarded' %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</content>
</div>
</div>
</div>
</div>
</div>
</section>