diff --git a/_includes/head.html b/_includes/head.html
index 9020b55..f393a89 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -39,5 +39,5 @@
<meta name="theme-color" content="#f7f7f7">
<link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
-<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.5.css" type="text/css">
+<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.5.1.css" type="text/css">
<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
diff --git a/_includes/portmaster_plug.html b/_includes/portmaster_plug.html
index d1fc0f4..77a6d57 100644
--- a/_includes/portmaster_plug.html
+++ b/_includes/portmaster_plug.html
@@ -1,8 +1,8 @@
-<a class="advert-container" href="{{ site.portmaster_url }}">
- <div class="advert-container-left">
- <span class="advert-container-left-title">Discover the Portmaster</span>
- <span class="advert-container-left-sub">Open Source. Free Forever.</span>
- <div class="advert-container-left-button btn bg-black text-safing-blue-400">Take Back Control</div>
+<a class="plug-container" href="{{ site.portmaster_url }}">
+ <div class="plug-container-left">
+ <span class="plug-container-left-title">Discover the Portmaster</span>
+ <span class="plug-container-left-sub">Open Source. Free Forever.</span>
+ <div class="plug-container-left-button btn bg-black text-safing-blue-400">Take Back Control</div>
</div>
<div class="absolute mx-auto right-0 left-0 rounded-md flex items-center overflow-hidden" style="max-width: 950px; height: inherit;">
<img class="absolute right-0 bottom-0 hidden lg:block max-w-5xl lg:max-w-full" style="margin-right: -28.8rem; margin-bottom: -14.1rem;" src="{{ site.img_url }}page-specific/portmaster/full-interface.png" alt="">
diff --git a/_includes/tag.html b/_includes/tag.html
index 3c14b2d..1ba88ad 100644
--- a/_includes/tag.html
+++ b/_includes/tag.html
@@ -3,11 +3,11 @@
{% elsif include.tag == 'SPN' %}
<span class="tag-spn">SPN</span>
{% elsif include.tag == 'Website' %}
- <span class="tag bg-pink-100 text-pink-800">Website</span>
+ <span class="tag-website bg-pink-100">Website</span>
{% elsif include.tag == 'Back Office' %}
- <span class="tag bg-gray-100 text-gray-800">Back Office</span>
+ <span class="tag-backoffice bg-gray-100">Back Office</span>
{% elsif include.tag == 'Community' %}
<span class="tag-community">Community</span>
{% elsif include.tag == 'Marketing' %}
- <span class="tag-marketing">Marketing</span>
+ <span class="tag-marketing bg-yellow-100">Marketing</span>
{% endif %}
diff --git a/_layouts/page.html b/_layouts/page.html
index 43e03c9..2e22205 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -3,7 +3,7 @@
<head>
{% include head.html %}
</head>
- <body class="antialiased font-medium">
+ <body class="antialiased font-medium overflow-x-hidden">
{% include nav.html %}
{{ content }}
{% include footer.html %}
diff --git a/spn/index.html b/spn/index.html
index fb4cc3a..c2624d5 100644
--- a/spn/index.html
+++ b/spn/index.html
@@ -3,16 +3,14 @@ title: Safing Privacy Network
layout: page
---
-<div class="alert-primary rounded-none text-md">
+<a class="alert-primary hover-scale-out rounded-none text-md" data-method="get" href="https://docs.safing.io/spn/alpha/status">
<i class="icon-info text-md"></i>
- <a data-method="get" href="https://docs.safing.io/spn/alpha/status">
- <span>
- SPN is in "Alpha". View
- <span class="underline">what to expect</span>
- from current speeds and features
- </span>
- </a>
-</div>
+ <span>
+ SPN is in "Alpha". View
+ <span class="underline">what to expect</span>
+ from current speeds and features
+ </span>
+</a>
<header class="header-one-container-reverse mb-64 mt-36">
<div class="header-one-left pl-12">
<h1 class="header-one-left-title lg:max-w-md">
@@ -152,16 +150,13 @@ layout: page
</div>
</div>
<div class="packages-container" id="pricing">
- <div class="alert-primary mb-20">
- <a data-method="get" href="{{ site.spn_alpha_status_page_url }}">
+ <a class="alert-primary hover-scale-out mb-20" data-method="get" href="{{ site.spn_alpha_status_page_url }}">
<span>
- SPN is in "Alpha". View
- <span class="underline">what to expect</span>
- from current speeds and features
+ SPN is in "Alpha". View
+ <span class="underline">what to expect</span>
+ from current speeds and features
</span>
- </a>
- </div>
-
+ </a>
<div class="packages-container-top">
<h2 class="packages-container-top-title">
Protect Your Connections Today
diff --git a/vendor/safingTailwind-1.5.1.zip b/vendor/safingTailwind-1.5.1.zip
new file mode 100644
index 0000000..976d26b
Binary files /dev/null and b/vendor/safingTailwind-1.5.1.zip differ
diff --git a/vendor/safingTailwind-1.5.zip b/vendor/safingTailwind-1.5.zip
deleted file mode 100644
index 02fca9a..0000000
Binary files a/vendor/safingTailwind-1.5.zip and /dev/null differ
diff --git a/vendor/safingTailwind/docs/docs.html b/vendor/safingTailwind/docs/docs.html
index 5ad725e..2962696 100644
--- a/vendor/safingTailwind/docs/docs.html
+++ b/vendor/safingTailwind/docs/docs.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../docs/css/highlight.min.css">
<link rel="stylesheet" href="../docs/css/style.css">
- <link rel="stylesheet" href="../safingTailwind-1.5.css">
+ <link rel="stylesheet" href="../safingTailwind-1.5.1.css">
<script src="../docs/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="../docs/js/vendor/jquery-resizable.js"></script>
<script src="../docs/js/vendor/highlight.min.js"></script>
@@ -14,7 +14,7 @@
</head>
<body class="antialiased font-sans font-medium">
<div class="alert-primary rounded-none text-md">
- <span>There will be some stuff missing in this, and also some bugs. <strong>v1.5</strong></span>
+ <span>There will be some stuff missing in this, and also some bugs. <strong>v1.5.1</strong></span>
</div>
<div class="flex">
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
@@ -1645,6 +1645,54 @@
</div>
+ <div class="compoent space-y-2">
+ <div id="tabMenu" class="space-y-4">
+ <div class="flex">
+ <div>
+ <span class="title block text-md">Backoffice</span>
+ </div>
+ <ul class="tabs flex space-x-3 ml-auto">
+ <li><a href="#preview-Backoffice-Tag">preview</a></li>
+ <li><a href="#html-Backoffice-Tag">html</a></li>
+
+ <li><a href="#scss-Backoffice-Tag">scss</a></li>
+
+ </ul>
+ </div>
+ </div>
+ <ul class="tabs-content">
+ <li id="preview-Backoffice-Tag" class="active">
+ <div class="preview-container">
+ <div class="preview-panel-left">
+ <iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
+ <div class="data items-center flex h-full" style="height: fit-content;">
+ <div class="w-full h-full" style="height: fit-content;">
+ <span class="tag-backoffice">
+ Community
+</span>
+ </div>
+ </div>
+ </div>
+ <div class="preview-panel-splitter"></div>
+ </div>
+ </li>
+ <li id="html-Backoffice-Tag">
+ <pre><code style="min-height: 200px;" class="language-html"><span class="tag-backoffice">
+ Community
+</span></code></pre>
+ </li>
+
+ <li id="scss-Backoffice-Tag">
+ <pre><code style="min-height: 200px;" class="language-scss">.tag-backoffice {
+ @apply tag;
+ @apply bg-gray-200;
+ @apply text-gray-800;
+}</code></pre>
+ </li>
+
+ </ul>
+ </div>
+
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
@@ -1787,8 +1835,8 @@
<li id="scss-Marketing-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-marketing {
@apply tag;
- @apply bg-orange-100;
- @apply text-orange-800;
+ @apply bg-yellow-200;
+ @apply text-yellow-800;
}</code></pre>
</li>
@@ -1931,8 +1979,8 @@
<li id="scss-Website-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-website {
@apply tag;
- @apply bg-gray-200;
- @apply text-gray-800;
+ @apply bg-pink-200;
+ @apply text-pink-800;
}</code></pre>
</li>
@@ -3459,14 +3507,20 @@
}
.markdown-container > hr {
- margin-bottom: 1.25rem;
margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
}
.markdown-container > [class^=' alert'],
.markdown-container > [class*='alert'] {
- margin-bottom: 1.25rem;
margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+}
+
+.markdown-container > a {
+ @apply block;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.markdown-container > p:not(:first-of-type):not(:last-of-type) {
diff --git a/vendor/safingTailwind/docs/js/internal/iframeRefresher.js b/vendor/safingTailwind/docs/js/internal/iframeRefresher.js
index 310c04c..e3e41e6 100644
--- a/vendor/safingTailwind/docs/js/internal/iframeRefresher.js
+++ b/vendor/safingTailwind/docs/js/internal/iframeRefresher.js
@@ -10,7 +10,7 @@ function SetUpIframeData() {
innerHtml = iframeContents.find('html');
innerBody = iframeContents.find('body');
innerHead = iframeContents.find('head');
- innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.5.css">');
+ innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.5.1.css">');
innerBody.append(data)
});
setTimeout(function(){
diff --git a/vendor/safingTailwind/safingTailwind-1.5.css b/vendor/safingTailwind/safingTailwind-1.5.1.css
similarity index 99%
rename from vendor/safingTailwind/safingTailwind-1.5.css
rename to vendor/safingTailwind/safingTailwind-1.5.1.css
index e5a21b4..bde9e9d 100644
--- a/vendor/safingTailwind/safingTailwind-1.5.css
+++ b/vendor/safingTailwind/safingTailwind-1.5.1.css
@@ -59,9 +59,9 @@ em {
line-height: 1.25rem;
margin-right: 0.5rem;
--tw-bg-opacity: 1;
- background-color: rgba(235, 179, 158, var(--tw-bg-opacity));
+ background-color: rgba(253, 230, 138, var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgba(30, 13, 6, var(--tw-text-opacity));
+ color: rgba(146, 64, 14, var(--tw-text-opacity));
}
.tag-portmaster {
@@ -103,6 +103,25 @@ em {
}
.tag-website {
+ display: inline-flex;
+ align-items: center;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+ border-radius: 9999px;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 500;
+ line-height: 1.25rem;
+ margin-right: 0.5rem;
+ --tw-bg-opacity: 1;
+ background-color: rgba(251, 207, 232, var(--tw-bg-opacity));
+ --tw-text-opacity: 1;
+ color: rgba(157, 23, 77, var(--tw-text-opacity));
+}
+
+.tag-backoffice {
display: inline-flex;
align-items: center;
padding-left: 0.75rem;
@@ -6995,14 +7014,20 @@ em {
}
.markdown-container > hr {
- margin-bottom: 1.25rem;
margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
}
.markdown-container > [class^=' alert'],
.markdown-container > [class*='alert'] {
- margin-bottom: 1.25rem;
margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+}
+
+.markdown-container > a {
+ display: block;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.markdown-container > p:not(:first-of-type):not(:last-of-type) {
@@ -7430,41 +7455,41 @@ em {
padding-left: 1rem;
}
-.advert-container {
+.plug-container {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
max-width: 80rem;
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
display: block;
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
border-radius: 0.5rem;
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
-.advert-container, .card-extended {
+.plug-container, .card-extended {
position: relative;
}
-.advert-container::after, .card-extended::after {
+.plug-container::after, .card-extended::after {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
content: '';
height: 100%;
@@ -7475,7 +7500,7 @@ em {
z-index: -1;
}
-.card-extended .advert-container {
+.card-extended .plug-container {
border-bottom: solid 1px rgba(0, 0, 0, 0.15);
border-top: solid 1px rgba(0, 0, 0, 0.15);
border-radius: 0px;
@@ -7510,7 +7535,7 @@ em {
cursor: pointer;
}
-.card-extended .advert-container .card-label {
+.card-extended .plug-container .card-label {
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1.5rem;
@@ -7537,7 +7562,7 @@ em {
padding: 0px;
}
-.card-extended .advert-container .card-title {
+.card-extended .plug-container .card-title {
padding-top: 0px;
}
@@ -7591,7 +7616,7 @@ em {
line-height: 1.75rem;
}
-.card-extended .advert-container .title {
+.card-extended .plug-container .title {
padding-left: 0px;
font-size: 0.975rem;
}
@@ -7659,7 +7684,7 @@ em {
--tw-rotate: 180deg;
}
-.card-extended .advert-container .card-dropdown-toggle {
+.card-extended .plug-container .card-dropdown-toggle {
padding-bottom: 0px;
padding-left: 1rem;
padding-right: 1rem;
@@ -7702,34 +7727,34 @@ em {
margin-top: 0;
}
-.card-extended .advert-container p {
+.card-extended .plug-container p {
margin-top: 0;
}
-.card-extended .card-dropdown-content .advert-container .title{
+.card-extended .card-dropdown-content .plug-container .title{
padding-left: 0px;
}
-.advert-container .card-dropdown-content {
+.plug-container .card-dropdown-content {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, var(--tw-text-opacity));
font-size: 0.975rem;
padding-left: 0px;
}
-.card-faq .advert-container .card-title {
+.card-faq .plug-container .card-title {
padding-top: 0px;
}
-.card-faq .advert-container .title {
+.card-faq .plug-container .title {
padding-left: 0px;
font-size: 0.975rem;
opacity: 0.5;
}
-.advert-container {
+.plug-container {
--tw-bg-opacity: 1;
- background-color: rgba(148, 174, 255, var(--tw-bg-opacity));
+ background-color: rgba(97, 136, 255, var(--tw-bg-opacity));
width: 100%;
display: flex;
align-items: center;
@@ -7739,36 +7764,36 @@ em {
margin-top: 3rem !important; /* this is dirty but atm it works */
}
-.advert-container > .advert-container-left {
+.plug-container > .plug-container-left {
width: 100%;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
-.advert-container > .advert-container-left > :not([hidden]) ~ :not([hidden]) {
+.plug-container > .plug-container-left > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
-.advert-container > .advert-container-left {
+.plug-container > .plug-container-left {
text-align: center;
}
@media (min-width: 1024px) {
- .advert-container > .advert-container-left {
+ .plug-container > .plug-container-left {
margin-left: 5rem;
}
}
@media (min-width: 1024px) {
- .advert-container > .advert-container-left {
+ .plug-container > .plug-container-left {
text-align: left;
}
}
-.advert-container .advert-container-left-title {
+.plug-container .plug-container-left-title {
display: block;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -7778,12 +7803,12 @@ em {
}
@media (min-width: 1024px) {
- .advert-container .advert-container-left-title {
+ .plug-container .plug-container-left-title {
max-width: 24rem;
}
}
-.advert-container .advert-container-left-sub {
+.plug-container .plug-container-left-sub {
display: block;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -7791,7 +7816,7 @@ em {
opacity: 0.75;
}
-.advert-container .advert-container-left-button {
+.plug-container .plug-container-left-button {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top : 0.8rem;
@@ -7821,12 +7846,12 @@ em {
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
-.advert-container .advert-container-left-button:hover {
+.plug-container .plug-container-left-button:hover {
--tw-scale-x: .95;
--tw-scale-y: .95;
}
-.advert-container .advert-container-left-button {
+.plug-container .plug-container-left-button {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
@@ -7836,17 +7861,17 @@ em {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
-.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
+.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
--tw-bg-opacity: 1;
background-color: rgba(216, 216, 216, var(--tw-bg-opacity));
}
-.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
+.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
--tw-text-opacity: 1;
color: rgba(140, 140, 140, var(--tw-text-opacity));
}
-.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
+.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
cursor: not-allowed;
}
@@ -7892,7 +7917,7 @@ em {
cursor: not-allowed;
}
-.advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i {
+.plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i {
--tw-text-opacity: 1;
color: rgba(140, 140, 140, var(--tw-text-opacity));
}
@@ -7912,7 +7937,7 @@ em {
color: rgba(140, 140, 140, var(--tw-text-opacity));
}
-.advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover {
+.plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@@ -7923,7 +7948,7 @@ em {
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
-.advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover {
+.plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover {
--tw-scale-x: 1;
--tw-scale-y: 1;
}
@@ -7976,7 +8001,7 @@ em {
--tw-scale-y: 1;
}
-.advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i {
+.plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i {
vertical-align: baseline;
}
@@ -7992,11 +8017,11 @@ em {
vertical-align: baseline;
}
-.advert-container .advert-container-left-button {
+.plug-container .plug-container-left-button {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgba(148, 174, 255, var(--tw-text-opacity));
+ color: rgba(97, 136, 255, var(--tw-text-opacity));
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@@ -8010,7 +8035,7 @@ em {
margin-left: -0.75rem;
}
-.advert-container:hover .advert-container-left-button {
+.plug-container:hover .plug-container-left-button {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;