mirror of
https://github.com/safing/web
synced 2025-09-04 12:09:03 +00:00
Update safingTailwind-1.6
This commit is contained in:
Luke
parent
34d3e30a00
commit
8ec9d497b3
8 changed files with 431 additions and 218 deletions
|
|
@ -30,5 +30,5 @@
|
||||||
<meta name="theme-color" content="#f7f7f7">
|
<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 }}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">
|
<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
|
||||||
|
|
|
||||||
BIN
vendor/safingTailwind-1.5.1.zip
vendored
BIN
vendor/safingTailwind-1.5.1.zip
vendored
Binary file not shown.
BIN
vendor/safingTailwind-1.6.zip
vendored
Normal file
BIN
vendor/safingTailwind-1.6.zip
vendored
Normal file
Binary file not shown.
16
vendor/safingTailwind/docs/docs.html
vendored
16
vendor/safingTailwind/docs/docs.html
vendored
|
|
@ -6,7 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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/highlight.min.css">
|
||||||
<link rel="stylesheet" href="../docs/css/style.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.min.js" type="text/javascript"></script>
|
||||||
<script src="../docs/js/vendor/jquery-resizable.js"></script>
|
<script src="../docs/js/vendor/jquery-resizable.js"></script>
|
||||||
<script src="../docs/js/vendor/highlight.min.js"></script>
|
<script src="../docs/js/vendor/highlight.min.js"></script>
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased font-sans font-medium">
|
<body class="antialiased font-sans font-medium">
|
||||||
<div class="alert-primary rounded-none text-md">
|
<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>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
|
<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">
|
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
|
||||||
<i class="icon-warning text-lg"></i>
|
<i class="icon-warning text-lg"></i>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div class="space-y-7">
|
<div class="space-y-7">
|
||||||
|
|
@ -1136,6 +1142,12 @@
|
||||||
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
|
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
|
||||||
<i class="icon-warning text-lg"></i>
|
<i class="icon-warning text-lg"></i>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div class="space-y-7">
|
<div class="space-y-7">
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ function SetUpIframeData() {
|
||||||
innerHtml = iframeContents.find('html');
|
innerHtml = iframeContents.find('html');
|
||||||
innerBody = iframeContents.find('body');
|
innerBody = iframeContents.find('body');
|
||||||
innerHead = iframeContents.find('head');
|
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)
|
innerBody.append(data)
|
||||||
});
|
});
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
|
|
|
||||||
BIN
vendor/safingTailwind/fonts/safing-icons.ttf
vendored
BIN
vendor/safingTailwind/fonts/safing-icons.ttf
vendored
Binary file not shown.
BIN
vendor/safingTailwind/fonts/safing-icons.woff
vendored
BIN
vendor/safingTailwind/fonts/safing-icons.woff
vendored
Binary file not shown.
|
|
@ -2153,7 +2153,17 @@ em {
|
||||||
content: var(--icon-mac);
|
content: var(--icon-mac);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-scales:before {
|
||||||
|
content: var(--icon-scales);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-chart:before {
|
||||||
|
content: var(--icon-chart);
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
--icon-scales: "\e91c";
|
||||||
|
--icon-chart: "\e91d";
|
||||||
--icon-fedora: "\e901";
|
--icon-fedora: "\e901";
|
||||||
--icon-ubuntu: "\e902";
|
--icon-ubuntu: "\e902";
|
||||||
--icon-windows: "\e903";
|
--icon-windows: "\e903";
|
||||||
|
|
@ -5896,6 +5906,411 @@ em {
|
||||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
|
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 {
|
.showcase-container-reverse {
|
||||||
flex-direction: row-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 {
|
.faq-container {
|
||||||
display: block;
|
display: block;
|
||||||
width: -webkit-max-content;
|
width: -webkit-max-content;
|
||||||
Loading…
Add table
Reference in a new issue