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

Update safingTailwind-1.6

Browse source
This commit is contained in:
Luke 2022-04-26 18:28:40 +02:00
parent 34d3e30a00
commit 8ec9d497b3
8 changed files with 431 additions and 218 deletions

2
_includes/head.html
View file

@ -30,5 +30,5 @@
<meta name="theme-color" content="#f7f7f7">
<link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.5.1.css" type="text/css">
<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.6.css" type="text/css">
<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">

BIN
vendor/safingTailwind-1.5.1.zip vendored
View file

Binary file not shown.

BIN
vendor/safingTailwind-1.6.zip vendored Normal file
View file

Binary file not shown.

16
vendor/safingTailwind/docs/docs.html vendored
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../docs/css/highlight.min.css">
<link rel="stylesheet" href="../docs/css/style.css">
<link rel="stylesheet" href="../safingTailwind-1.5.1.css">
<link rel="stylesheet" href="../safingTailwind-1.6.css">
<script src="../docs/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="../docs/js/vendor/jquery-resizable.js"></script>
<script src="../docs/js/vendor/highlight.min.js"></script>
@ -14,7 +14,7 @@
</head>
<body class="antialiased font-sans font-medium">
<div class="alert-primary rounded-none text-md">
<span>There will be some stuff missing in this, and also some bugs. <strong>v1.5.1</strong></span>
<span>There will be some stuff missing in this, and also some bugs. <strong>v1.6</strong></span>
</div>
<div class="flex">
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
@ -1028,6 +1028,12 @@
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
<i class="icon-warning text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-scales">
<i class="icon-scales text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-chart">
<i class="icon-chart text-lg"></i>
</div>
</div>
</div>
<div class="space-y-7">
@ -1136,6 +1142,12 @@
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning"&gt;
&lt;i class="icon-warning text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-scales"&gt;
&lt;i class="icon-scales text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-chart"&gt;
&lt;i class="icon-chart text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="space-y-7"&gt;

2
vendor/safingTailwind/docs/js/internal/iframeRefresher.js vendored
View file

@ -10,7 +10,7 @@ function SetUpIframeData() {
innerHtml = iframeContents.find('html');
innerBody = iframeContents.find('body');
innerHead = iframeContents.find('head');
innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.5.1.css">');
innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.6.css">');
innerBody.append(data)
});
setTimeout(function(){

BIN
vendor/safingTailwind/fonts/safing-icons.ttf vendored
View file

Binary file not shown.

BIN
vendor/safingTailwind/fonts/safing-icons.woff vendored
View file

Binary file not shown.

629
vendor/safingTailwind/safingTailwind-1.5.1.css → vendor/safingTailwind/safingTailwind-1.6.css vendored
View file

@ -2153,7 +2153,17 @@ em {
content: var(--icon-mac);
}
.icon-scales:before {
content: var(--icon-scales);
}
.icon-chart:before {
content: var(--icon-chart);
}
:root {
--icon-scales: "\e91c";
--icon-chart: "\e91d";
--icon-fedora: "\e901";
--icon-ubuntu: "\e902";
--icon-windows: "\e903";
@ -5896,6 +5906,411 @@ em {
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.feature-one-container {
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: auto;
margin-right: auto;
max-width: 1536px;
display: block;
}
.feature-one-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.feature-one-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
.feature-one-container {
padding-left: 2.5rem;
padding-right: 2.5rem;
width: 100%;
}
@media (min-width: 768px) {
.feature-one-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 1280px) {
.feature-one-container {
display: flex;
}
}
@media (min-width: 1280px) {
.feature-one-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(5rem * var(--tw-space-x-reverse));
margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
}
}
@media (min-width: 1280px) {
.feature-one-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
.feature-one-container .feature-one-container-left {
display: block;
width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-left {
text-align: left;
}
}
@media (min-width: 1280px) {
.feature-one-container .feature-one-container-left {
max-width: 28rem;
}
}
.feature-one-container .feature-one-container-left-title {
font-size: 3rem;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 800;
line-height: 1;
margin-bottom: 2rem;
}
.feature-one-container .feature-one-container-left-desc {
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
max-width: 48rem;
}
@media (min-width: 1280px) {
.feature-one-container .feature-one-container-left-desc {
max-width: 100%;
}
}
.feature-one-container .feature-one-container-right {
display: block;
align-items: center;
}
.feature-one-container .feature-one-container-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.feature-one-container .feature-one-container-right {
width: 100%;
}
@media (min-width: 640px) {
.feature-one-container .feature-one-container-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-right {
display: flex;
}
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
.feature-one-container .feature-one-container-right-content > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.feature-one-container .feature-one-container-right-content {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.feature-one-container .feature-one-container-right-content:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
}
.feature-one-container .feature-one-container-right-content {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
max-width: 24rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.feature-one-container .feature-one-container-right-content {
text-align: left;
}
}
.feature-one-container .feature-one-container-right-content-icon {
display: block;
--tw-text-opacity: 1;
color: rgba(97, 136, 255, var(--tw-text-opacity));
font-size: 1.875rem;
line-height: 2.25rem;
}
.feature-one-container .feature-one-container-right-content-title {
display: block;
font-size: 1.5rem;
line-height: 2rem;
line-height: 1.5rem;
font-weight: 700;
}
.feature-one-container .feature-one-container-right-content-desc {
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
}
.feature-two-container {
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: auto;
margin-right: auto;
}
.feature-two-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(7rem * var(--tw-space-y-reverse));
}
.feature-two-container {
width: 100%;
}
.feature-two-container .feature-two-container-top {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.feature-two-container .feature-two-container-top > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}
.feature-two-container .feature-two-container-top-title {
display: block;
position: relative;
font-size: 3rem;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 700;
line-height: 1;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.feature-two-container .feature-two-container-top-title {
text-align: center;
}
}
.feature-two-container .feature-two-container-top-desc {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
text-align: center;
margin-left: auto;
margin-right: auto;
}
.feature-two-container .feature-two-container-bottom {
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: auto;
margin-right: auto;
max-width: 85rem;
}
.feature-two-container .feature-two-container-bottom > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.feature-two-container .feature-two-container-bottom {
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.feature-two-container .feature-two-container-bottom {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 768px) {
.feature-two-container .feature-two-container-bottom > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
@media (min-width: 768px) {
.feature-two-container .feature-two-container-bottom {
display: grid;
}
}
@media (min-width: 768px) {
.feature-two-container .feature-two-container-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.feature-two-container .feature-two-container-bottom {
gap: 2.5rem;
}
}
@media (min-width: 1280px) {
.feature-two-container .feature-two-container-bottom {
padding-left: 0px;
padding-right: 0px;
}
}
.feature-two-container .feature-two-container-bottom {
width: 100%;
}
.feature-two-container .feature-two-container-bottom-content > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.feature-two-container .feature-two-container-bottom-content {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.feature-two-container .feature-two-container-bottom-content:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
}
.feature-two-container .feature-two-container-bottom-content {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
max-width: 36rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.feature-two-container .feature-two-container-bottom-content {
text-align: left;
}
}
.feature-two-container .feature-two-container-bottom-content-icon {
display: block;
--tw-text-opacity: 1;
color: rgba(97, 136, 255, var(--tw-text-opacity));
font-size: 1.875rem;
line-height: 2.25rem;
}
.feature-two-container .feature-two-container-bottom-content-title {
display: block;
font-size: 1.5rem;
line-height: 2rem;
line-height: 1.5rem;
font-weight: 700;
}
.feature-two-container .feature-two-container-bottom-content-desc {
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
}
.showcase-container-reverse {
flex-direction: row-reverse;
}
@ -6157,220 +6572,6 @@ em {
}
}
.feature-container {
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: auto;
margin-right: auto;
max-width: 1536px;
display: block;
}
.feature-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.feature-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
.feature-container {
padding-left: 2.5rem;
padding-right: 2.5rem;
width: 100%;
}
@media (min-width: 768px) {
.feature-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 1280px) {
.feature-container {
display: flex;
}
}
@media (min-width: 1280px) {
.feature-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(5rem * var(--tw-space-x-reverse));
margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
}
}
@media (min-width: 1280px) {
.feature-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
.feature-container .feature-left {
display: block;
width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.feature-container .feature-left {
text-align: left;
}
}
@media (min-width: 1280px) {
.feature-container .feature-left {
max-width: 28rem;
}
}
.feature-container .feature-left-title {
font-size: 3rem;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 800;
line-height: 1;
margin-bottom: 2rem;
}
.feature-container .feature-left-desc {
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
max-width: 48rem;
}
@media (min-width: 1280px) {
.feature-container .feature-left-desc {
max-width: 100%;
}
}
.feature-container .feature-right {
display: block;
align-items: center;
}
.feature-container .feature-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.feature-container .feature-right {
width: 100%;
}
@media (min-width: 640px) {
.feature-container .feature-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 768px) {
.feature-container .feature-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
}
@media (min-width: 768px) {
.feature-container .feature-right {
display: flex;
}
}
@media (min-width: 768px) {
.feature-container .feature-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}
}
@media (min-width: 768px) {
.feature-container .feature-right > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
.feature-container .feature-right-content > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.feature-container .feature-right-content {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.feature-container .feature-right-content:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
}
.feature-container .feature-right-content {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
max-width: 24rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.feature-container .feature-right-content {
text-align: left;
}
}
.feature-container .feature-right-content-icon {
display: block;
--tw-text-opacity: 1;
color: rgba(97, 136, 255, var(--tw-text-opacity));
font-size: 1.875rem;
line-height: 2.25rem;
}
.feature-container .feature-right-content-title {
display: block;
font-size: 1.5rem;
line-height: 2rem;
line-height: 1.5rem;
font-weight: 700;
}
.feature-container .feature-right-content-desc {
--tw-text-opacity: 1;
color: rgba(114, 114, 114, var(--tw-text-opacity));
}
.faq-container {
display: block;
width: -webkit-max-content;