Alart

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.

<div class="alert">
    <i class="icon-mic text-lg"></i>
    <span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>

.alert {
    @apply bg-gray-600;
    @apply text-white;
    @apply text-sm;
    @apply py-4;
    @apply px-9;
    @apply rounded-md;
    @apply flex;
    @apply break-words;
    @apply w-full;
    @apply space-x-4;
    @apply items-center;
    @apply justify-center;
}

.alert span {
    @apply text-white;
}

Primary

preview
html
scss

Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.

<div class="alert-primary">
    <i class="icon-mic text-lg"></i>
    <span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>

.alert-primary {
    @apply alert;
    @apply bg-safing-blue-600;
}

.alert-primary>.link {
    @apply text-white;
}

Tiny

preview
html
scss

Alpha Software: Portmaster is in active development

<div class="alert-tiny">
    <i class="icon-mic text-md"></i>
    <span>Alpha Software: Portmaster is in active development </span>
</div>

.alert-tiny {
    @apply alert;
    @apply text-xs;
    @apply rounded-full;
    @apply py-2;
    @apply px-4;
    @apply space-x-3;
    @apply justify-start;
}

Button

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

<button class="btn">Take back your freedom</button>

.btn {
    @apply px-10;
    padding-top   : 0.8rem;
    padding-bottom: 0.8rem;
    @apply bg-gray-500;
    @apply rounded-full;
    @apply uppercase;
    @apply font-semibold;
    @apply text-white;
    @apply text-center;
    @apply text-xs;
    @apply inline-flex;
    @apply items-center;
    @apply leading-normal;
    @apply whitespace-normal;
    @apply cursor-pointer;
    @apply hover-scale-in;
}

.btn[disabled],
.btn[disabled],
.btn[disabled],
.btn[disabled] {
    @apply bg-safing-gray-100;
    @apply text-safing-gray-400;
    @apply cursor-not-allowed;
}

.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i {
    @apply text-safing-gray-400;
}

.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover {
    @apply transform;
    @apply scale-100;
}

.btn i,
.btn i,
.btn i,
.btn i {
    @apply align-baseline;
}

Primary

preview
html
scss

<button class="btn-primary">Take back your freedom</button>

.btn-primary {
    @apply btn;
    @apply bg-safing-blue-500;
}

Secondary

preview
html
scss

<button class="btn-secondary">Take back your freedom</button>

.btn-secondary {
    @apply btn;
    @apply bg-black;
}

Tertiary

preview
html
scss

<button class="btn-tertiary">Take back your freedom</button>

.btn-tertiary {
    @apply btn;
    @apply text-black;
    @apply bg-transparent;
    @apply hover-opacity-out;
}

Card

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

SPN

Create RSS Feeds

The Assignment:

Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.

<div class="card">
    <label class="card-label" for="card-toggle-anchor-2">
        <div class="wrapper-left">
            <div class="tag-list">
                <span class="tag-spn">
                    SPN
                </span>
            </div>
            <div class="card-title">
                <i class="icon-tick text-green-500"></i>
                <h1 class="title">Create RSS Feeds</h1>
            </div>
        </div>
        <div class="wrapper-right">
            <div class="wrapper-right-profiles">
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
            </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">
            <p>The Assignment:</p>
            <br>
            <p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.</p>
        </div>
    </div>
</div>

.card,
.card-extended {
    @apply h-max;
    @apply max-w-7xl;
    @apply block;
    @apply rounded-lg;
    @apply bg-white;
    @apply card-shadow;
}

.card-extended .card {
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    border-top: solid 1px rgba(0, 0, 0, 0.15);
    @apply rounded-none;
    margin-bottom: 2.5rem;
}


.card-extended > .card-label,
.card > .card-label {
    @apply z-10;
    @apply flex;

    @apply pl-8;
    @apply pr-8;

    @apply pt-8;
    @apply pb-11;
    @apply cursor-pointer;
}

.card-extended .card .card-label { 
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1.5rem;
    padding-top: 1rem;

}

.card-extended .wrapper-left,
.card .wrapper-left {
    @apply w-full;
}

.card-extended .tag-list,
.card .tag-list {
    @apply flex;
    @apply items-center;
    @apply m-0;
    @apply p-0;
}

.card-extended .card .card-title {
    @apply pt-0;
}

.card-extended .card-title,
.card .card-title {
    @apply flex;
    @apply items-center;

    @apply w-full;
    @apply pt-6;
}

.card-extended .card-title [class^='icon'],
.card-extended .card-title [class*=' icon'],
.card-extended .card-title [class^='icon-'],
.card-extended .card-title [class*=' icon-'],
.card .card-title [class^='icon'],
.card .card-title [class*=' icon'],
.card .card-title [class^='icon-'],
.card .card-title [class*=' icon-'] {
    @apply text-xl;
}

.card-extended .card-title .title,
.card .card-title .title {
    @apply text-black;
    @apply pl-3;
    @apply text-lg;
}

.card-extended .card .title {
    @apply pl-0;
    @apply text-md;
}

.card-extended .wrapper-right,
.card .wrapper-right {
    @apply flex;
    @apply justify-end;
    @apply w-max;
    @apply items-center;
    @apply space-x-4;
}

.card-extended .wrapper-right .wrapper-right-profiles,
.card .wrapper-right .wrapper-right-profiles {
    @apply flex;
    @apply space-x-1;
}
    
.card-extended .icon-arrow,
.card .icon-arrow {
    @apply text-sm;
    @apply font-normal;
    @apply text-black;

    @apply transform;
    @apply rotate-180;
}

.card-extended .card .card-dropdown-toggle {
    @apply pb-0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.card-extended .card-dropdown-toggle,
.card .card-dropdown-toggle {
    @apply pb-14;
    @apply pl-8;
    @apply pr-8;
    @apply hidden;
    @apply cursor-auto;
}

.card-extended .card-dropdown-content > h1,
.card .card-dropdown-content > h1 {
    @apply text-black;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 1.5rem;
}

.card-extended .card-dropdown-content > h1:first-child,
.card .card-dropdown-content > h1:first-child {
    margin-top: 0;
}

.card-extended .card-dropdown-content > p {
    margin-top: 1rem;
}

.card-extended .card p {
    margin-top: 0;
}

.card-extended .card-dropdown-content {
    @apply text-md;
    @apply pl-0;
    @apply pb-4;
}

.card-extended .card-dropdown-content .card .title{
    @apply pl-0;
}

.card .card-dropdown-content {
    @apply text-black ;
    @apply text-md;
    @apply pl-0;
}



.card-input-toggle {
    @apply hidden;
}

.card-input-toggle:checked+.card-dropdown-toggle {
    @apply block;
}

.card-shadow {
    @apply relative;
}

.card-shadow::after {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
    content: '';
    @apply h-full;
    @apply left-0;
    @apply absolute;
    @apply top-0;
    @apply w-full;
    z-index: -1;
}

Extended

preview
html

SPN

Create RSS Feeds

Assignment

Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.

Safing Blog RSS Finally Arrived

This has been a request for over a year. And to be honest, the reason we never added this was kinda silly: Since progress update posts (like the one you are reading now) heavily rely on CSS tricks in order to support noJS, a RSS reader cannot properly format the progress update. Instead it displays a rather broken blog post. With no easy solution in sight, the RSS feed just got postponed indefinitely. But after finally revisiting this topic we came up with a simple solution. Just add a disclaimer to progress update posts that they are only viewable in the web-view. Problem solved. Proper communication, and finally a RSS feed everyone can subscribe to.

<div class="card-extended">
    <label class="card-label" for="card-toggle-anchor-10">
        <div class="wrapper-left">
            <div class="tag-list">
                <span class="tag-spn">
                    SPN
                </span>
            </div>
            <div class="card-title">
                <i class="icon-tick text-green-500"></i>
                <h1 class="title">Create RSS Feeds</h1>
            </div>
        </div>
        <div class="wrapper-right">
            <div class="wrapper-right-profiles">
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
                <div class="circular-profile" tooltip="David">
                    <img src="https://safing.io/assets/img/profiles/david.png">
                </div>
            </div>
            <i class="icon-arrow"></i>
        </div>
    </label>
    <input class="card-input-toggle" id="card-toggle-anchor-10" type="checkbox">
    <div class="card-dropdown-toggle">
        <div class="card-dropdown-content">
            <div class="card">
                <label class="card-label" for="card-toggle-anchor-10-1">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">Assignment</h1>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <i class="icon-arrow"></i>
                    </div>
                </label>
                <input class="card-input-toggle" id="card-toggle-anchor-10-1" type="checkbox">
                <div class="card-dropdown-toggle">
                    <div class="card-dropdown-content">
                        <p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work. </p>
                    </div>
                </div>
            </div>
            <h1>Safing Blog RSS Finally Arrived</h1>
            <p>
                This has been a request for over a year. And to be honest, the reason
                we never added this was kinda silly: Since progress update posts
                (like the one you are reading now) heavily rely on CSS tricks in
                order to support noJS, a RSS reader cannot properly format the
                progress update. Instead it displays a rather broken blog post. With
                no easy solution in sight, the RSS feed just got postponed indefinitely.
                But after finally revisiting this topic we came up with a simple solution.
                Just add a disclaimer to progress update posts that they are only viewable
                in the web-view. Problem solved. Proper communication, and finally a RSS
                feed everyone can subscribe to.
            </p>
        </div>
    </div>
</div>

Font-Icon

This is still a wip

Class

btn btn-secondary btn-secondary

Icons

preview
html

General Icons

Social Icons

Platform Icons

<div class="space-y-10">
    <div class="space-y-7">
        <span>General Icons</span>
        <div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-y-10">
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-earth">
                <i class="icon-earth text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-reload">
                <i class="icon-reload text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-files">
                <i class="icon-files text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog">
                <i class="icon-cog text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-arrow">
                <i class="icon-arrow text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog-ring">
                <i class="icon-cog-ring text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-cross">
                <i class="icon-cross text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-external">
                <i class="icon-external text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-heart">
                <i class="icon-heart text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-info">
                <i class="icon-info text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-mic">
                <i class="icon-mic text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-play">
                <i class="icon-play text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-podcast">
                <i class="icon-podcast text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-rss">
                <i class="icon-rss text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-shield">
                <i class="icon-shield text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-tick">
                <i class="icon-tick text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-users">
                <i class="icon-users text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
                <i class="icon-warning text-lg"></i>
            </div>
        </div>
    </div>
    <div class="space-y-7">
        <span>Social Icons</span>
        <div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4">
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-github">
                <i class="icon-github text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-linkedin">
                <i class="icon-linkedin text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-reddit">
                <i class="icon-reddit text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-twitter">
                <i class="icon-twitter text-lg"></i>
            </div>
        </div>
    </div>
    <div class="space-y-7">
        <span>Platform Icons</span>
        <div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4">
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-ubuntu">
                <i class="icon-ubuntu text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-fedora">
                <i class="icon-fedora text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-windows">
                <i class="icon-windows text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-linux">
                <i class="icon-linux text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-mac">
                <i class="icon-mac text-lg"></i>
            </div>
            <div class="bg-white p-4 w-max m-auto" tooltip=".icon-docker">
                <i class="icon-docker text-lg"></i>
            </div>
        </div>
    </div>
</div>

Input

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

<input class="input-rounded w-full" type="email" name="email" required="" placeholder="email">

.input {
  @apply bg-gray-200;

  @apply appearance-none;
  @apply text-black;
  @apply focus:outline-none;
  @apply placeholder-red-600;
}

.input-rounded {
  @apply bg-gray-400;
  @apply rounded-full;
  
  @apply placeholder-gray-200;

  @apply text-white;

  @apply px-6;
  @apply py-2; 
}

.input-rounded-primary{
  @apply input-rounded;
  
  @apply bg-safing-gray-800;
  
  @apply placeholder-gray-400;

  @apply text-white;
}

Primary

preview
html

<input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">

Link

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

Take back your freedom

<a class="link">Take back your freedom</a>

.link {
    @apply text-gray-500;
    @apply text-left;
    @apply font-medium;
    white-space    : break-spaces;
    @apply cursor-pointer;
    @apply hover-opacity-in;
}

.link i {
    /* tailwind "sub" not supported */
    vertical-align: sub;
}

Primary-External

preview
html
scss

Take back your freedom

<a class="link-primary-external">Take back your freedom</a>

.link-primary-external {
    @apply link-primary;
}

.link-primary-external::after {
    @apply icon;
    @apply inline-block;
    @apply font-bold;

    content: var(--icon-external);
    @apply text-base;
    transform: rotate(30deg) translateY(2px) translateX(1px) scale(0.75);
}

Primary

preview
html
scss

Take back your freedom

<a class="link-primary">Take back your freedom</a>

.link-primary {
    @apply link;
    @apply text-safing-blue-500;
}

Secondary

preview
html
scss

Take back your freedom

<a class="link-secondary">Take back your freedom</a>

.link-secondary {
    @apply link;
    @apply text-black;
    /* @apply hover: opacity-60; */
}

Profile

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

<div class="circular-profile" tooltip="David">
    <img src="https://safing.io/assets/img/profiles/david.png">
</div>

.circular-profile {
    @apply flex-shrink-0;
    @apply -mt-1;
    @apply w-max;
  }

.circular-profile img {
    @apply inline-block;
    @apply h-6;
    @apply w-6;
    @apply rounded-full;
    @apply text-white;
    @apply border-2;
    @apply border-white;

}

.circular-profile:hover img {
    @apply transform;
    @apply hover:scale-110;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
    @apply shadow-2xl;
}

Spacer

This is still a wip

Class

btn btn-secondary btn-secondary

Horizontal

preview
html

```
<div class="horizontal-line"></div>
```

Tag

This is still a wip

Class

btn btn-secondary btn-secondary

Community

preview
html
scss

Community

<span class="tag-community">
    Community
</span>

.tag-community {
    @apply tag;
    @apply bg-purple-100;
    @apply text-purple-800;
}

Default

preview
html
scss

Default
```
<span class="tag">
    Default
</span>
```

.tag {
    @apply inline-flex;
    @apply items-center;
    @apply px-3;
    @apply py-1;
    @apply rounded-full;
    @apply text-sm;
    @apply font-medium;
    @apply leading-5;
    @apply mr-2;
}

Marketing

preview
html
scss

Marketing

<span class="tag-marketing">
    Marketing
</span>

.tag-marketing {
    @apply tag;
    @apply bg-orange-100;
    @apply text-orange-800;
}

Portmaster

preview
html
scss

Portmaster

<span class="tag-portmaster">
    Portmaster
</span>

.tag-portmaster {
    @apply tag;
    @apply bg-blue-100;
    @apply text-blue-800;
}

Spn

preview
html
scss

SPN
```
<span class="tag-spn">
    SPN
</span>
```

.tag-spn {
    @apply tag;
    @apply bg-green-100;
    @apply text-green-800;
}

Website

preview
html
scss

Website

<span class="tag-website">
    Website
</span>

.tag-website {
    @apply tag;
    @apply bg-gray-200;
    @apply text-gray-800;
}

Toggle

This is still a wip

Default

preview
html
scss

<div class="element-x-center-max space-y-2">
    <input class="toggle block" type="checkbox" checked>
    <input class="toggle block" type="checkbox">
</div>

.toggle {
    @apply appearance-none;
    @apply cursor-pointer;

    height: 25px;
    min-width: 45px;
    border-radius: 16px;

    @apply border-2;
    @apply border-solid;
    @apply border-safing-gray-600;

    @apply inline-block;
    @apply relative;
    @apply m-0;

    @apply bg-safing-gray-800;
    transition: all 0.2s ease;
}

.toggle:focus {
    @apply outline-none;
}

.toggle:after {
    content: "";
    @apply absolute;

    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;

    @apply bg-safing-gray-600;
    transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
.toggle:checked {
    @apply bg-safing-blue-500;
    @apply border-safing-blue-500;
}
.toggle:checked:after {
    @apply bg-white;
    transform: translatex(20px);
}

This is still a wip

Class

btn btn-secondary btn-secondary

Default

preview
html
scss

hover over me!

<div tooltip="Cool Tooltip!" class="bg-white">
    hover over me!
</div>

[tooltip] {
    @apply relative;
}

[tooltip]::before,
[tooltip]::after {
    @apply hidden;
    @apply text-sm;
    @apply left-1/2;
    @apply opacity-0;
    @apply pointer-events-none;
    @apply absolute;
    @apply normal-case;
    transform: translate(-50%, -0.5em);
    @apply select-none;
}

[tooltip]::before {
    border: 5px solid transparent;
    @apply border-b-0;
    border-top-color: #333;
    @apply bottom-full;
    content: '';
    z-index: 1001;
}

[tooltip]::after {
    background: #333;
    border-radius: 100px;
    bottom: calc(100% + 5px);
    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
    @apply text-white;
    content: attr(tooltip);
    font-family: Helvetica, sans-serif;
    max-width: 21em;
    min-width: 3em;
    overflow: hidden;
    padding: 1ch 2ch;
    @apply text-center;
    @apply overflow-ellipsis;
    @apply whitespace-nowrap;
    z-index: 1000;
}

[tooltip='']::before,
[tooltip='']::after {
    @apply hidden !important;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
    @apply block;
}

@keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}

Transition

This is still a wip

Class

btn btn-secondary btn-secondary

Hover-Opacity

preview
html
scss

hover-opacity-in

hover-opacity-out

<div class="element-x-center-max space-y-5">
    <div class="alert max-w-md hover-opacity-in">
        <i class="icon-mic text-lg"></i>
        <span>hover-opacity-in</span>
    </div>
    <div class="alert max-w-md hover-opacity-out">
        <i class="icon-mic text-lg"></i>
        <span>hover-opacity-out</span>
    </div>
</div>

.hover-opacity-in {
    @apply hover:opacity-50;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
}
.hover-opacity-out {
    @apply opacity-50;
    @apply hover:opacity-100;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
}

Hover-Scale

preview
html
scss

hover-scale-in

hover-scale-out

<div class="element-x-center-max space-y-5">
    <div class="alert max-w-md hover-scale-in">
        <i class="icon-mic text-lg"></i>
        <span>hover-scale-in</span>
    </div>
    <div class="alert max-w-md hover-scale-out">
        <i class="icon-mic text-lg"></i>
        <span>hover-scale-out</span>
    </div>
</div>

.hover-scale-in {
    @apply transform;
    @apply hover:scale-95;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
}
.hover-scale-out {
    @apply transform;
    @apply hover:scale-105;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
}

Pulse-Opacity

preview
html
scss

pulse-opacity-out-in

pulse-opacity-in-out
pulse-opacity-out-in pulse-opacity-in-out

<div class="element-x-center-max space-y-5">
    <button class="btn-primary pulse-opacity-out-in">pulse-opacity-out-in</button>
    <button class="btn-primary pulse-opacity-out-in">pulse-opacity-in-out</button>
    
    <div class="flex items-center space-x-2">
        <span class="dot pulse-opacity-out-in"></span>
        <a href="#" class="link-secondary">pulse-opacity-out-in</a>
    </div>
    <div class="flex items-center space-x-2">
        <span class="dot pulse-opacity-out-in"></span>
        <a href="#" class="link-secondary">pulse-opacity-in-out</a>
    </div>

    <a href="#" class="block link-primary-external pulse-opacity-out-in">pulse-opacity-out-in</a>
    <a href="#" class="block link-primary-external pulse-opacity-out-in">pulse-opacity-in-out</a>
</div>

.pulse-opacity-out-in {
    animation: pulse 2s infinite;
}
.pulse-opacity-in-out {
    animation: pulse 2s infinite reverse;
}
@keyframes pulse {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

Col-Container

This is still a wip

Default

preview
html
scss

Lazy Responsive Column!

Windows 10 Ubuntu (Latest) Macos (Not supported)

Windows 10 Ubuntu (Latest) Macos (Not supported)

<div class="download-container">
    <h2 class="download-container-title">
        Lazy Responsive Column!
    </h2>
    <div class="col-container">
        <a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Windows 10</a>
        <a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ubuntu (Latest)</a>
        <a disabled class="btn " href="#"><i class="icon-twitter text-xs mr-2"></i>Macos (Not supported)</a>
    </div>
    <div class="col-container-center">
        <a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Windows 10</a>
        <a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ubuntu (Latest)</a>
        <a disabled class="btn " href="#"><i class="icon-twitter text-xs mr-2"></i>Macos (Not supported)</a>
    </div>
</div>

.col-container {
    @apply space-y-4;
    @apply sm:space-x-2;
}

.col-container-center {
    @apply col-container;
    @apply sm:element-x-center-max;
}

Faq-Container

This is still a wip

Default

preview
html
scss

FAQ
You have a question? We answered some already, but you can always contact us at hello@safing.io

How do you make money? What is the catch?

In short, our business model is Freemium. First provide local privacy for free, forever. Then let happy users support us by paying for a powerful VPN alternative. Finally reinvest earnings into making all our products better.

hello@safing.io

Since the Portmaster can block ads and trackers, do I still need an ad-blocker for my browser?

Yes, we highly recommend to continue using adblockers, such as uBlock Origin, uMatrix, or similar. They give you more fine grained control over domains. iE you can allow certain domains to allow css files & images while blocking cookies & javascripts. The Portmaster cannot make this distinction.

What platforms do you support?

Currently we support Windows and Linux. Mac and Mobile are planned, but are further down the road.

Where can I find your source code?

You can find our code on Github. The Portmaster, the Portmaster UI, the SPN, the docs and this website have their respective repositories. Jess, the heart of the SPN, which got audited by Cure53, can also be found online.

<div class="faq-container">
    <div class="faq-container-top">
        <span class="faq-container-top-title">
            FAQ
        </span>
        <p class="faq-container-top-desc">
            You have a question? We answered some already, but you
            can always contact us at <a class="link-primary" href="">hello@safing.io</a>
        </p>
    </div>
    <div class="faq-container-bottom">
        <div class="faq-container-bottom-question">
            <div class="card-faq hover-scale-out">
                <label class="card-label" for="card-toggle-anchor-2">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">How do you make money? What is the catch?</h1>
                        </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">
                        <p>
                            In short, our business model is Freemium. First provide local privacy for free,
                            forever. Then let happy users support us by paying for a powerful VPN alternative.
                            Finally reinvest earnings into making all our products better.
                        </p>
                        <p>
                            <a class="link-primary" href="">hello@safing.io</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="faq-container-bottom-question">
            <div class="card-faq hover-scale-out">
                <label class="card-label" for="card-toggle-anchor-3">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">
                                Since the Portmaster can block ads and trackers, do I still need
                                an ad-blocker for my browser?
                            </h1>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <i class="icon-arrow"></i>
                    </div>
                </label>
                <input class="card-input-toggle" id="card-toggle-anchor-3" type="checkbox">
                <div class="card-dropdown-toggle">
                    <div class="card-dropdown-content">
                        <p>
                            Yes, we highly recommend to continue using adblockers, such as uBlock Origin, uMatrix,
                            or similar. They give you more fine grained control over domains. iE you can allow
                            certain domains to allow css files & images while blocking cookies & javascripts. The
                            Portmaster cannot make this distinction.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="faq-container-bottom-question">
            <div class="card-faq hover-scale-out">
                <label class="card-label" for="card-toggle-anchor-4">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">
                                What platforms do you support?
                            </h1>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <i class="icon-arrow"></i>
                    </div>
                </label>
                <input class="card-input-toggle" id="card-toggle-anchor-4" type="checkbox">
                <div class="card-dropdown-toggle">
                    <div class="card-dropdown-content">
                        <p>
                            Currently we support Windows and Linux. Mac and Mobile are planned, but are further
                            down the road.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="faq-container-bottom-question">
            <div class="card-faq hover-scale-out">
                <label class="card-label" for="card-toggle-anchor-5">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">
                                Where can I find your source code?
                            </h1>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <i class="icon-arrow"></i>
                    </div>
                </label>
                <input class="card-input-toggle" id="card-toggle-anchor-5" type="checkbox">
                <div class="card-dropdown-toggle">
                    <div class="card-dropdown-content">
                        <p>
                            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.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.faq-container {
    @apply element-x-center-max;
    @apply space-y-28;
    @apply w-full;
  }
  
  .faq-container .faq-container-top {
    @apply element-x-center;
    @apply space-y-7;
  }
  
  .faq-container .faq-container-top-title {
    @apply block;
    @apply relative;
    @apply text-5xl;
    @apply tracking-tight;
    @apply font-bold;
    @apply leading-none;
    @apply text-center;
  
    @apply lg:text-center;
  }
  
  .faq-container .faq-container-top-desc {
    @apply element-x-center;
    @apply text-safing-gray-500;
    @apply text-center;
    @apply inline-block;
  }
  
  .faq-container .faq-container-bottom {
    @apply element-x-center-max;
    max-width: 85rem;
    @apply space-y-10;
    @apply px-4;
    @apply sm:px-10;
    @apply md:space-y-0;
    @apply md:grid;
    @apply md:grid-cols-2;
    @apply md:gap-10;
    @apply xl:px-0;
    @apply w-full;
  }
  
  .faq-container .faq-container-bottom-question {
    @apply block;
    @apply space-y-5;
  }
  
  .faq-container .faq-container-bottom-question-title {
    @apply text-2xl;
  }
  
  .faq-container .faq-container-bottom-question-desc {
    @apply text-safing-gray-500;
    @apply inline-block;
  }

This is still a wip

Default

preview
html
scss

Stay Connected via Newsletter

I agree that Safing & rapidmail.de may process and use the email for newsletter purposes.

Company

About Us Business Model Ownership
We're Hireing
Get Help

Community

What's Next?
Blog

Podcast
Videos

Code of Conduct Github Reddit Twitter

Portmaster

Discover Documentation Source Code Backlog

SPN

Discover Whitepaper Source Code Backlog

vs Tor vs VPNs

© 2021 Safing ICS Technologies GmbH
Terms of Service Privacy Policy Contact & Notice

Companies mentioned are by way of example and are an opinion only, not based on fact.

<footer class="footer">
    <div class="footer-form-wrapper">
        <span class="footer-form-title">Stay Connected via Newsletter</span>
        <form class="footer-form">
            <div class="footer-form-subscribe">
                <input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">
                <input class="btn-primary" type="submit" value="Subscribe">
            </div>
            <div class="footer-form-legal">
                <input class="toggle" type="checkbox" id="consent_text" name="consent_text" value="yes" required="">
                <div>
                    <label class="consent cursor-pointer opacity-55 text-safing-gray-500" for="consent_text">
                        I agree that Safing &
                        <a class="link-primary-external" href="https://rapidmail.de" target="_blank">rapidmail.de</a>
                        may process and use the email for newsletter purposes.
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div class="footer-wrapper">
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Company</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> About Us </a>
                    <a href="#" class="footer-link"> Business Model </a>
                    <a href="#" class="footer-link"> Ownership </a>
                    <div class="flex items-center space-x-2">
                        <span class="dot pulse-opacity-out-in"></span>
                        <a href="#" class="footer-link">We're Hireing </a>
                    </div>
                    <a href="#" class="footer-link"> Get Help </a>
                </div>
            </div>
        </div>
        <div class="vertical-line"></div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Community</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> What's Next? </a>
                    <div class="flex  items-center space-x-2">
                        <a href="#" class="footer-link"> Blog </a>
                        <a href="#" class="footer-link"><i class="icon-rss text-xs"></i></a>
                    </div>
                    <div class="flex  items-center space-x-2">
                        <a href="#" class="footer-link"> Podcast </a>
                        <a href="#" class="footer-link"><i class="icon-rss text-xs"></i></a>
                    </div>
                    <a href="#" class="footer-link"> Videos </a>
                </div>
                <div class="footer-links-right">
                    <a href="#" class="footer-link"> Code of Conduct </a>
                    <a href="#" class="footer-link"> Github</a>
                    <a href="#" class="footer-link"> Reddit </a>
                    <a href="#" class="footer-link"> Twitter </a>
                </div>
            </div>
        </div>
        <div class="vertical-line"></div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Portmaster</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> Discover </a>
                    <a href="#" class="footer-link"> Documentation </a>
                    <a href="#" class="footer-link"> Source Code </a>
                    <a href="#" class="footer-link"> Backlog </a>
                </div>
            </div>
        </div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>SPN</span>
                <div class="horizontal-line"></div>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> Discover </a>
                    <a href="#" class="footer-link"> Whitepaper </a>
                    <a href="#" class="footer-link"> Source Code </a>
                    <a href="#" class="footer-link"> Backlog </a>
                </div>
                <div class="footer-links-right">
                    <a href="#" class="footer-link"> vs Tor </a>
                    <a href="#" class="footer-link"> vs VPNs </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-legal">
        <div class="footer-legal-wrapper">
            <span class="footer-legal-copyright">
                © 2021 Safing ICS Technologies GmbH
            </span>
            <div class="footer-legal-links">
                <a href="#" class="footer-legal-link"> Terms of Service </a>
                <a href="#" class="footer-legal-link"> Privacy Policy </a>
                <a href="#" class="footer-legal-link"> Contact & Notice </a>
            </div>
        </div>
        <span class="footer-legal-extra">
            Companies mentioned are by way of example and are an opinion only, not based on fact.
        </span>
    </div>
</footer>

.footer {
    @apply bg-black;
    @apply p-8;
}

.footer-wrapper {
    @apply grid;
    @apply mx-auto;
    @apply grid-rows-4;
    @apply grid-cols-1;
    @apply grid-flow-col-dense;
    @apply grid-flow-row-dense;
    @apply justify-center;
    @apply max-w-screen-sm;
    @apply gap-y-14;

    @apply sm:grid-rows-2;
    @apply sm:grid-cols-2;

    @apply md:justify-around;

    @apply lg:grid-cols-6-md;
    @apply lg:grid-rows-none;
    @apply lg:max-w-screen-xl;
    @apply lg:gap-y-0;
}

.footer-wrapper .footer-links-right,
.footer-wrapper .footer-links-left {
    @apply space-y-4;
    @apply space-x-0;
}

.footer .footer-link {
    @apply block;
    @apply text-white;
    @apply text-base;
    @apply hover-opacity-out;
    @apply w-max;

    @apply lg:text-md;
}

.footer .footer-links {
   @apply flex;
   @apply space-x-12;
}

.footer .footer-category {
    @apply sm:w-max;
}

.footer .footer-category-title {
    @apply flex;
    @apply items-center;
    @apply mb-2;
}

.footer .footer-category-title span {
    @apply block;
    @apply text-white;
    @apply text-xl;
    @apply mb-6;
    @apply pr-10;
}

.footer .horizontal-line {
    @apply border-t-2;
    @apply border-white;
    @apply w-full;
    opacity: 0.25;
    height: 20px;
}

.footer .vertical-line {
    @apply hidden;
    @apply border-r-2;
    @apply border-white;
    opacity: 0.25;
    height: 200px;
    width: 2px;

    @apply lg:block;
}

.footer .footer-legal {
    @apply text-sm;
    @apply mt-16;
    @apply mb-4;
}

.footer .footer-legal-wrapper {
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;

    @apply lg:flex;
}

.footer .footer-legal-copyright {
    @apply block;
    @apply leading-6;
    @apply text-white;
    @apply opacity-30;
    @apply mb-4;
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;

    @apply lg:mb-0;
    @apply lg:mx-0;
    @apply lg:text-center;
}

.footer .footer-legal-links {
   @apply block;
   @apply space-y-2;
   @apply space-x-0;
   @apply w-full;

   @apply sm:flex;
   @apply sm:space-y-0;
   @apply sm:space-x-12;
   @apply sm:w-max;
   @apply sm:mx-auto;

   @apply lg:mr-0;
   @apply lg:ml-12;
}

.footer .footer-legal-link {
    @apply block;
    @apply text-white;
    @apply text-base;
    @apply hover-opacity-out;
    @apply w-max;

    @apply lg:text-sm;
}

.footer .footer-legal-extra {
    @apply block;
    @apply leading-6;
    @apply text-white;
    @apply opacity-30;
    @apply mt-5;
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;
    
    @apply md:text-center;
}

.footer .footer-form-wrapper {
    @apply mt-3;
    @apply mb-8;
    @apply mx-auto;
    @apply self-center;
    @apply max-w-2xl;
    @apply text-center;
    @apply space-y-2;

    @apply md:p-12;

    @apply lg:space-y-0;
    @apply lg:text-left;
}

.footer .footer-form-title {
    @apply block;
    @apply text-white;
    @apply text-xl;
    @apply font-bold;
    @apply w-full;
    @apply mx-auto;

    @apply sm:w-max;

    @apply lg:mx-0;
}

.footer .footer-form-subscribe {
    @apply block;
    @apply lg:flex;
    @apply items-center;
    @apply py-5;
    @apply space-x-3;
    @apply space-y-4;

    @apply w-full;

    @apply sm:mx-auto;

    @apply lg:space-y-0;
    @apply lg:mx-0;
}

.footer .footer-form-legal {
    @apply block;
    @apply max-w-md;
    @apply mx-auto;
    @apply space-y-3;
    @apply space-x-0;
    @apply select-none;
    @apply items-center;

    @apply lg:space-y-0;
    @apply lg:space-x-5;
    @apply lg:flex;
    @apply lg:mx-0;
    @apply lg:max-w-xl;
}

.footer .footer-form-legal .link-primary-external {
    @apply table-cell;
    padding-left: 3px;
}

.dot {
    height: 0.45rem; 
    width: 0.45rem; 
    border-radius: 50%;
    @apply bg-safing-blue-500;
    @apply inline-block;
}

Markdown-Container

This is still a wip

Default

preview
html
scss

blockquote

h1

h2

h3

h4

em

strong

code

But who pays for all of this? That is such a critical question to ask in order to understand where a company stands and where it is heading.

External Link

Internal / Link

Internal https://safing.io Link

<div class="markdown-container">
    <!-- Markdown Example  -->
    
    <blockquote>
        <p>blockquote</p>
    </blockquote>

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>

    <p><em>em</em></p>

    <p><strong>strong</strong></p>

    <p><code>code</code></p>
    
    <p>But who pays for all of this? That is such a critical question to ask in order to understand where a company stands and where it is heading.</p>

    <p><a href="https://world.hey.com/jonas/how-money-dictates-design-decisions-5e866cd9">External Link</a></p>
    
    <p><a href="/ownership/#influences">Internal / Link</a></p>

    <p><a href="https://safing.io/esa-bic/">Internal https://safing.io Link</a></p>

    <p><img src="https://safing.io/assets/img/blog/breaking_chain.png" alt="image displays a chain with many strong links (no meta-data, security, usability) but still breaking at its weak link (business-model))"></p>

    <!-- Markdown Example -->
</div>

.markdown-container {
    @apply element-x-center;
    @apply px-10;
    @apply max-w-4xl;
}

.markdown-container > h2,
.markdown-container > h3,
.markdown-container > h4,
.markdown-container > h5,
.markdown-container > h6,
.markdown-container > h1 {
    @apply mt-8;
    @apply mb-3;
}

.markdown-container > h1 {
    @apply text-4xl;
}

.markdown-container > h2 {
    @apply text-3xl;
    border-bottom: 1px solid #d7d7d7;
}

.markdown-container > h3 {
    @apply text-2xl;
}

.markdown-container > h4 {
    @apply text-xl;
}

.markdown-container > h5 {
    @apply text-lg;
}

.markdown-container > h6 {
    @apply text-md;
}

.markdown-container > hr {
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
}

.markdown-container > [class^=' alert'],
.markdown-container > [class*='alert'] {
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
}

.markdown-container > p:not(:first-of-type):not(:last-of-type) {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.markdown-container > p:not(:first-of-type) {
    margin-top: 1rem;
}

.markdown-container > p:not(:last-of-type) {
    margin-bottom: 1rem;
}

.markdown-container > p > code {
    color: #ba00bf;
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

.markdown-container > p > code::after {
    content: '`';
}

.markdown-container > p > code::before {
    content: '`';
}

.markdown-container > a,
.markdown-container > ul > li > a,
.markdown-container > ol > li > a,
.markdown-container > p > a {
    @apply link-primary;
}

.markdown-container > a[href^="http"]:not([href*='safing.io']),
.markdown-container > ul > li > a[href^="http"]:not([href*='safing.io']),
.markdown-container > ol > li > a[href^="http"]:not([href*='safing.io']),
.markdown-container > p > a[href^="http"]:not([href*='safing.io']) {
    @apply link-primary-external;
}

.markdown-container > p > img {
    border-radius: 0.375rem;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
    display: block;
    height: auto;
    margin-bottom: 4rem;
    margin-top: 5rem;
    max-width: 100%;
}

.markdown-container > ul {
    list-style-type: disc;
    padding-left: 1.85rem;
    padding-top: 1rem;
    @apply space-y-2;
}

.markdown-container > ol {
    list-style-type: decimal;
    padding-left: 1.85rem;
    padding-top: 1rem;
    @apply space-y-2;
}

.markdown-container > blockquote {
    border-left: 4px solid #ddd;
    @apply text-safing-gray-600;
    margin-top: 1.55rem;
    opacity: 1;
    padding-left: 1rem;
}

This is still a wip

Default

preview
html
scss

Safing.io

Portmaster Docs Source Code About What's Next Get Help

Sign In Sign Up

<nav class="nav">
    <div class="nav-left">
        <a href="" class="nav-logo-wrapper">
            <!-- turn this into a font icon -->
            <svg class="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" opacity=".8"></path>
                    <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" opacity=".8"></path>
                    <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"></path>
                    <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)"></path>
                </g>
            </svg>
            <span>Safing<span>.io</span></span>
        </a>
    </div>
    <label class="nav-right-burger" for="nav-toggle-visable">
        <!-- turn this into a font icon -->
        <svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            <path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
    </label>
    <input class="nav-toggle-burger" id="nav-toggle-visable" type="checkbox">
    <div class="nav-right">
        <div class="nav-right-links">
            <a href="" class="nav-link"> Portmaster </a>
            <a href="" class="nav-link"> Docs </a>
            <a href="" class="nav-link"> Source Code </a>
            <a href="" class="nav-link"> About </a>
            <a href="" class="nav-link"> What's Next </a>
            <a href="" class="nav-link"> Get Help </a>
        </div>
        <div class="nav-right-actions">
            <a href="" class="nav-link"> Sign In </a>
            <a href="" class="btn-primary"> Sign Up </a>
        </div>
    </div>
</nav>

.nav {
    @apply bg-black;
    @apply flex;
    @apply p-6;

    @apply lg:pr-12;
    @apply lg:pl-12;
}

.nav > .nav-left {
    @apply flex;
    @apply flex-auto;
    @apply justify-start;
    @apply w-1/5;
}

.nav-left > .nav-logo-wrapper {
    @apply flex;
    @apply items-center;
    @apply hover-opacity-in;
}

.nav-logo-wrapper > span {
    @apply text-white;
}

.nav-logo-wrapper > span > span {
    @apply text-safing-gray-400;
}

.nav > .nav-right-burger {
    @apply z-20;
    @apply block;

    @apply lg:hidden;
}

.nav-right-burger:hover {
    @apply cursor-pointer;
}

.nav > .nav-toggle-burger {
    @apply hidden;
}

.nav-toggle-burger:checked+.nav-right {
    @apply grid;
}

@media (min-width: 1024px) {
.nav-toggle-burger:checked+.nav-right {
    @apply flex;
}
}

.nav > .nav-right {
    @apply hidden;
    @apply bg-black;
    @apply absolute;
    @apply content-center;
    @apply inset-0;
    @apply h-full;
    @apply p-10;
    @apply z-10;
    @apply w-full;

    @apply lg:flex;
    @apply lg:flex-auto;
    @apply lg:relative;
    @apply lg:justify-end;
    @apply lg:p-0;
    @apply lg:h-auto;
}

.nav-right > .nav-right-links {
    @apply space-x-0;
    @apply space-y-11;
    @apply items-baseline;
    @apply justify-center;
    @apply text-center;

    @apply lg:flex;
    @apply lg:space-y-0;
    @apply lg:space-x-7;
    @apply lg:items-center;
}

.nav .nav-link {
    @apply block;
    @apply text-white;
    @apply font-bold;
    @apply text-base;

    @apply lg:text-sm;
}

.nav-right-links > .nav-link {
    @apply hover-opacity-in;
}

.nav-right-actions > .nav-link {
    @apply hover-opacity-out;
}

.nav-right > .nav-right-actions {
    @apply space-y-11;
    @apply items-baseline;
    @apply ml-0;
    @apply mt-11;
    @apply text-center;

    @apply md:items-center;

    @apply lg:mt-0;
    @apply lg:ml-11;
    @apply lg:flex;
    @apply lg:space-y-0;
    @apply lg:space-x-5;
}

.nav-right-actions > .btn-primary {
    @apply w-full;
    @apply py-3;

    @apply lg:w-auto;
}

Components

Alart

Class

Button

Class

Card

Class

Create RSS Feeds

Create RSS Feeds

Assignment

Safing Blog RSS Finally Arrived

Font-Icon

Class

Input

Class

Link

Class

Profile

Class

Spacer

Class

Tag

Class

Toggle

Tooltip

Class

Transition

Class

Prebuilt

Col-Container

Lazy Responsive Column!

Faq-Container

How do you make money? What is the catch?

Since the Portmaster can block ads and trackers, do I still need an ad-blocker for my browser?

What platforms do you support?

Where can I find your source code?

Footer

Markdown-Container

h1

h2

h3

h4

Navbar