mirror of
https://github.com/safing/web
synced 2025-04-17 01:19:08 +00:00
3806 lines
No EOL
155 KiB
HTML
3806 lines
No EOL
155 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Safing Tailwind Docs</title>
|
|
<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">
|
|
<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>
|
|
<script>hljs.highlightAll();</script>
|
|
</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>
|
|
</div>
|
|
<div class="flex">
|
|
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
|
|
<h5 class="mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-gray-900">Getting started</h5>
|
|
<div class="space-y-1">
|
|
<a class="block text-safing-gray-500 pt-2" href="#components">Components</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#alart">Alart</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#button">Button</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#card">Card</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#font-icon">Font-Icon</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#input">Input</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#link">Link</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#profile">Profile</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#spacer">Spacer</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#tag">Tag</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#toggle">Toggle</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#tooltip">Tooltip</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#transition">Transition</a>
|
|
<a class="block text-safing-gray-500 pt-2" href="#prebuilt">Prebuilt</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#col-container">Col-Container</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#faq-container">Faq-Container</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#footer">Footer</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#markdown-container">Markdown-Container</a>
|
|
<a class="pl-3 block text-safing-gray-500" href="#navbar">Navbar</a>
|
|
</div>
|
|
</nav>
|
|
<section class="w-full pl-28 space-y-20 pt-20">
|
|
<div class="space-y-2">
|
|
<h1 class="block text-black text-xl" id="components">Components</h1>
|
|
<span class="text-safing-gray-500">This is the compoents section</span>
|
|
</div><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="alart">Alart</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Alart">preview</a></li>
|
|
<li><a href="#html-Default-Alart">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Alart">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Alart" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Primary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Primary-Alart">preview</a></li>
|
|
<li><a href="#html-Primary-Alart">html</a></li>
|
|
|
|
<li><a href="#scss-Primary-Alart">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Primary-Alart" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Primary-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Primary-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.alert-primary {
|
|
@apply alert;
|
|
@apply bg-safing-blue-600;
|
|
}
|
|
|
|
.alert-primary>.link {
|
|
@apply text-white;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Tiny</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Tiny-Alart">preview</a></li>
|
|
<li><a href="#html-Tiny-Alart">html</a></li>
|
|
|
|
<li><a href="#scss-Tiny-Alart">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Tiny-Alart" 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;">
|
|
<div class="alert-tiny">
|
|
<i class="icon-mic text-md"></i>
|
|
<span>Alpha Software: Portmaster is in active development </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Tiny-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-html"><div class="alert-tiny">
|
|
<i class="icon-mic text-md"></i>
|
|
<span>Alpha Software: Portmaster is in active development </span>
|
|
</div></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Tiny-Alart">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.alert-tiny {
|
|
@apply alert;
|
|
@apply text-xs;
|
|
@apply rounded-full;
|
|
@apply py-2;
|
|
@apply px-4;
|
|
@apply space-x-3;
|
|
@apply justify-start;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="button">Button</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Button">preview</a></li>
|
|
<li><a href="#html-Default-Button">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Button">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Button" 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;">
|
|
<button class="btn">Take back your freedom</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Button">
|
|
<pre><code style="min-height: 200px;" class="language-html"><button class="btn">Take back your freedom</button></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Button">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Primary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Primary-Button">preview</a></li>
|
|
<li><a href="#html-Primary-Button">html</a></li>
|
|
|
|
<li><a href="#scss-Primary-Button">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Primary-Button" 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;">
|
|
<button class="btn-primary">Take back your freedom</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Primary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-html"><button class="btn-primary">Take back your freedom</button></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Primary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.btn-primary {
|
|
@apply btn;
|
|
@apply bg-safing-blue-500;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Secondary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Secondary-Button">preview</a></li>
|
|
<li><a href="#html-Secondary-Button">html</a></li>
|
|
|
|
<li><a href="#scss-Secondary-Button">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Secondary-Button" 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;">
|
|
<button class="btn-secondary">Take back your freedom</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Secondary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-html"><button class="btn-secondary">Take back your freedom</button></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Secondary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.btn-secondary {
|
|
@apply btn;
|
|
@apply bg-black;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Tertiary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Tertiary-Button">preview</a></li>
|
|
<li><a href="#html-Tertiary-Button">html</a></li>
|
|
|
|
<li><a href="#scss-Tertiary-Button">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Tertiary-Button" 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;">
|
|
<button class="btn-tertiary">Take back your freedom</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Tertiary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-html"><button class="btn-tertiary">Take back your freedom</button></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Tertiary-Button">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.btn-tertiary {
|
|
@apply btn;
|
|
@apply text-black;
|
|
@apply bg-transparent;
|
|
@apply hover-opacity-out;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="card">Card</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Card">preview</a></li>
|
|
<li><a href="#html-Default-Card">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Card">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Card" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Card">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Card">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}
|
|
</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Extended</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Extended-Card">preview</a></li>
|
|
<li><a href="#html-Extended-Card">html</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Extended-Card" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Extended-Card">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="font-icon">Font-Icon</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Icons</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Icons-Font-Icon">preview</a></li>
|
|
<li><a href="#html-Icons-Font-Icon">html</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Icons-Font-Icon" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Icons-Font-Icon">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="input">Input</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Input">preview</a></li>
|
|
<li><a href="#html-Default-Input">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Input">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Input" 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;">
|
|
<input class="input-rounded w-full" type="email" name="email" required="" placeholder="email">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Input">
|
|
<pre><code style="min-height: 200px;" class="language-html"><input class="input-rounded w-full" type="email" name="email" required="" placeholder="email"></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Input">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Primary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Primary-Input">preview</a></li>
|
|
<li><a href="#html-Primary-Input">html</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Primary-Input" 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;">
|
|
<input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Primary-Input">
|
|
<pre><code style="min-height: 200px;" class="language-html"><input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email"></code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="link">Link</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Link">preview</a></li>
|
|
<li><a href="#html-Default-Link">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Link">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Link" 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;">
|
|
<a class="link">Take back your freedom</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Link">
|
|
<pre><code style="min-height: 200px;" class="language-html"><a class="link">Take back your freedom</a></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Link">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Primary-External</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Primary-External-Link">preview</a></li>
|
|
<li><a href="#html-Primary-External-Link">html</a></li>
|
|
|
|
<li><a href="#scss-Primary-External-Link">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Primary-External-Link" 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;">
|
|
<a class="link-primary-external">Take back your freedom</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Primary-External-Link">
|
|
<pre><code style="min-height: 200px;" class="language-html"><a class="link-primary-external">Take back your freedom</a></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Primary-External-Link">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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);
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Primary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Primary-Link">preview</a></li>
|
|
<li><a href="#html-Primary-Link">html</a></li>
|
|
|
|
<li><a href="#scss-Primary-Link">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Primary-Link" 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;">
|
|
<a class="link-primary">Take back your freedom</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Primary-Link">
|
|
<pre><code style="min-height: 200px;" class="language-html"><a class="link-primary">Take back your freedom</a></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Primary-Link">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.link-primary {
|
|
@apply link;
|
|
@apply text-safing-blue-500;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Secondary</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Secondary-Link">preview</a></li>
|
|
<li><a href="#html-Secondary-Link">html</a></li>
|
|
|
|
<li><a href="#scss-Secondary-Link">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Secondary-Link" 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;">
|
|
<a class="link-secondary">Take back your freedom</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Secondary-Link">
|
|
<pre><code style="min-height: 200px;" class="language-html"><a class="link-secondary">Take back your freedom</a></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Secondary-Link">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.link-secondary {
|
|
@apply link;
|
|
@apply text-black;
|
|
/* @apply hover: opacity-60; */
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="profile">Profile</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Profile">preview</a></li>
|
|
<li><a href="#html-Default-Profile">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Profile">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Profile" 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;">
|
|
<div class="circular-profile" tooltip="David">
|
|
<img src="https://safing.io/assets/img/profiles/david.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Profile">
|
|
<pre><code style="min-height: 200px;" class="language-html"><div class="circular-profile" tooltip="David">
|
|
<img src="https://safing.io/assets/img/profiles/david.png">
|
|
</div></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Profile">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="spacer">Spacer</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Horizontal</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Horizontal-Spacer">preview</a></li>
|
|
<li><a href="#html-Horizontal-Spacer">html</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Horizontal-Spacer" 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;">
|
|
<div class="horizontal-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Horizontal-Spacer">
|
|
<pre><code style="min-height: 200px;" class="language-html"><div class="horizontal-line"></div></code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="tag">Tag</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Community</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Community-Tag">preview</a></li>
|
|
<li><a href="#html-Community-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Community-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Community-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-community">
|
|
Community
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Community-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-community">
|
|
Community
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Community-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.tag-community {
|
|
@apply tag;
|
|
@apply bg-purple-100;
|
|
@apply text-purple-800;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Tag">preview</a></li>
|
|
<li><a href="#html-Default-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-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">
|
|
Default
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag">
|
|
Default
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Marketing</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Marketing-Tag">preview</a></li>
|
|
<li><a href="#html-Marketing-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Marketing-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Marketing-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-marketing">
|
|
Marketing
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Marketing-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-marketing">
|
|
Marketing
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Portmaster</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Portmaster-Tag">preview</a></li>
|
|
<li><a href="#html-Portmaster-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Portmaster-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Portmaster-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-portmaster">
|
|
Portmaster
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Portmaster-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-portmaster">
|
|
Portmaster
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Portmaster-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.tag-portmaster {
|
|
@apply tag;
|
|
@apply bg-blue-100;
|
|
@apply text-blue-800;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Spn</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Spn-Tag">preview</a></li>
|
|
<li><a href="#html-Spn-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Spn-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Spn-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-spn">
|
|
SPN
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Spn-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-spn">
|
|
SPN
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Spn-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.tag-spn {
|
|
@apply tag;
|
|
@apply bg-green-100;
|
|
@apply text-green-800;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Website</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Website-Tag">preview</a></li>
|
|
<li><a href="#html-Website-Tag">html</a></li>
|
|
|
|
<li><a href="#scss-Website-Tag">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Website-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-website">
|
|
Website
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Website-Tag">
|
|
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-website">
|
|
Website
|
|
</span></code></pre>
|
|
</li>
|
|
|
|
<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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="toggle">Toggle</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Toggle">preview</a></li>
|
|
<li><a href="#html-Default-Toggle">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Toggle">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Toggle" 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;">
|
|
<div class="element-x-center-max space-y-2">
|
|
<input class="toggle block" type="checkbox" checked>
|
|
<input class="toggle block" type="checkbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Toggle">
|
|
<pre><code style="min-height: 200px;" class="language-html"><div class="element-x-center-max space-y-2">
|
|
<input class="toggle block" type="checkbox" checked>
|
|
<input class="toggle block" type="checkbox">
|
|
</div></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Toggle">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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);
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="tooltip">Tooltip</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Tooltip">preview</a></li>
|
|
<li><a href="#html-Default-Tooltip">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Tooltip">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Tooltip" 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;">
|
|
<div tooltip="Cool Tooltip!" class="bg-white">
|
|
hover over me!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Tooltip">
|
|
<pre><code style="min-height: 200px;" class="language-html"><div tooltip="Cool Tooltip!" class="bg-white">
|
|
hover over me!
|
|
</div></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Tooltip">
|
|
<pre><code style="min-height: 200px;" class="language-scss">[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);
|
|
}
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="transition">Transition</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
<h1 class="mb-4">Class</h1>
|
|
<span class="block text-safing-gray-500">btn</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
<span class="block text-safing-gray-500">btn-secondary</span>
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Hover-Opacity</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Hover-Opacity-Transition">preview</a></li>
|
|
<li><a href="#html-Hover-Opacity-Transition">html</a></li>
|
|
|
|
<li><a href="#scss-Hover-Opacity-Transition">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Hover-Opacity-Transition" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Hover-Opacity-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Hover-Opacity-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Hover-Scale</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Hover-Scale-Transition">preview</a></li>
|
|
<li><a href="#html-Hover-Scale-Transition">html</a></li>
|
|
|
|
<li><a href="#scss-Hover-Scale-Transition">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Hover-Scale-Transition" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Hover-Scale-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Hover-Scale-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Pulse-Opacity</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Pulse-Opacity-Transition">preview</a></li>
|
|
<li><a href="#html-Pulse-Opacity-Transition">html</a></li>
|
|
|
|
<li><a href="#scss-Pulse-Opacity-Transition">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Pulse-Opacity-Transition" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Pulse-Opacity-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Pulse-Opacity-Transition">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<div class="space-y-2">
|
|
<h1 class="block text-black text-xl" id="prebuilt">Prebuilt</h1>
|
|
<span class="text-safing-gray-500">This is the compoents section</span>
|
|
</div><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="col-container">Col-Container</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Col-Container">preview</a></li>
|
|
<li><a href="#html-Default-Col-Container">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Col-Container">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Col-Container" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Col-Container">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Col-Container">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.col-container {
|
|
@apply space-y-4;
|
|
@apply sm:space-x-2;
|
|
}
|
|
|
|
.col-container-center {
|
|
@apply col-container;
|
|
@apply sm:element-x-center-max;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="faq-container">Faq-Container</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Faq-Container">preview</a></li>
|
|
<li><a href="#html-Default-Faq-Container">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Faq-Container">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Faq-Container" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Faq-Container">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Faq-Container">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}
|
|
</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="footer">Footer</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Footer">preview</a></li>
|
|
<li><a href="#html-Default-Footer">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Footer">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Footer" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Footer">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Footer">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="markdown-container">Markdown-Container</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Markdown-Container">preview</a></li>
|
|
<li><a href="#html-Default-Markdown-Container">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Markdown-Container">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Markdown-Container" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Markdown-Container">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Markdown-Container">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section><section class="w-full space-y-20" style="max-width: 80rem;">
|
|
<div class="title space-y-3">
|
|
<h2 id="navbar">Navbar</h2>
|
|
<span class="desc block text-safing-gray-500">This is still a wip</span>
|
|
</div>
|
|
|
|
<div class="list space-y-2">
|
|
|
|
</div>
|
|
|
|
|
|
<div class="compoent space-y-2">
|
|
<div id="tabMenu" class="space-y-4">
|
|
<div class="flex">
|
|
<div>
|
|
<span class="title block text-md">Default</span>
|
|
</div>
|
|
<ul class="tabs flex space-x-3 ml-auto">
|
|
<li><a href="#preview-Default-Navbar">preview</a></li>
|
|
<li><a href="#html-Default-Navbar">html</a></li>
|
|
|
|
<li><a href="#scss-Default-Navbar">scss</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul class="tabs-content">
|
|
<li id="preview-Default-Navbar" 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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-panel-splitter"></div>
|
|
</div>
|
|
</li>
|
|
<li id="html-Default-Navbar">
|
|
<pre><code style="min-height: 200px;" class="language-html"><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></code></pre>
|
|
</li>
|
|
|
|
<li id="scss-Default-Navbar">
|
|
<pre><code style="min-height: 200px;" class="language-scss">.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;
|
|
}</code></pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
<footer class="my-60"></footer>
|
|
</body>
|
|
|
|
<script src="../docs/js/internal/iframeRefresher.js" type="text/javascript"></script>
|
|
<script src="../docs/js/internal/preview.js" type="text/javascript"></script>
|
|
<script src="../docs/js/internal/tabs.js" type="text/javascript"></script> |