nk_jtb 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +1 -75
- package/package.json +1 -1
- package/src/functions/_colorFunctions.scss +10 -4
- package/src/play.scss +7 -4
package/index.html
CHANGED
|
@@ -10,81 +10,7 @@
|
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
|
|
13
|
-
<body
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<style>
|
|
17
|
-
@keyframes pulse {
|
|
18
|
-
50% {
|
|
19
|
-
opacity: .5
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.animate-pulse-slow {
|
|
24
|
-
animation: pulse 13s ease-in-out infinite;
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<section class="light bdr-0">
|
|
30
|
-
|
|
31
|
-
<div class="container flex gg-5">
|
|
32
|
-
<div class="relative">
|
|
33
|
-
<img src="/images/naykel-400.png" alt="naykel">
|
|
34
|
-
<img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 44s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
35
|
-
</div>
|
|
36
|
-
<div>
|
|
37
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vel ratione eius veniam sapiente corporis quod nihil, quos perspiciatis expedita!</p>
|
|
38
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda reiciendis, mollitia sed non corporis ex quasi vel aperiam sequi autem consectetur adipisci eligendi ipsum labore aliquid est at nesciunt quia porro neque nihil impedit. Ipsam dolorem libero consectetur ut expedita.</p>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
</section>
|
|
43
|
-
|
|
44
|
-
<div class="relative overflow-x-clip h-24">
|
|
45
|
-
|
|
46
|
-
<img style=" position: absolute; width: 700px; height: 700px; left: -5%; bottom: -240px; animation-duration: 4s; " src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
47
|
-
<img style="
|
|
48
|
-
position: absolute;
|
|
49
|
-
width: 700px;
|
|
50
|
-
height: 700px;
|
|
51
|
-
right: 200px;
|
|
52
|
-
bottom: -120px;
|
|
53
|
-
animation-duration: 5s;
|
|
54
|
-
animation-delay: 1.5s;
|
|
55
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<div class="relative overflow-x-clip h-24 light">
|
|
60
|
-
|
|
61
|
-
<img style="
|
|
62
|
-
position: absolute;
|
|
63
|
-
width: 700px;
|
|
64
|
-
height: 700px;
|
|
65
|
-
right: -5%;
|
|
66
|
-
bottom: -240px;
|
|
67
|
-
animation-duration: 4s;
|
|
68
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
69
|
-
|
|
70
|
-
<img style="
|
|
71
|
-
position: absolute;
|
|
72
|
-
width: 700px;
|
|
73
|
-
height: 700px;
|
|
74
|
-
right: 200px;
|
|
75
|
-
bottom: -120px;
|
|
76
|
-
animation-duration: 5s;
|
|
77
|
-
animation-delay: 1.5s;
|
|
78
|
-
" src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
79
|
-
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<!-- <img src="/svg/blur-red.svg" class="animate-pulse-slow">
|
|
85
|
-
|
|
86
|
-
<img style=" animation-duration: 30s; " src="/svg/blur.svg" class="animate-pulse-slow"> -->
|
|
87
|
-
|
|
13
|
+
<body>
|
|
88
14
|
<div>
|
|
89
15
|
<header id="nk-header" class="container py">
|
|
90
16
|
<div class="container flex space-between">
|
package/package.json
CHANGED
|
@@ -4,8 +4,14 @@
|
|
|
4
4
|
// set text colour based on the background
|
|
5
5
|
// ------------------------------------------------------------------
|
|
6
6
|
|
|
7
|
-
@function setTextColor($
|
|
8
|
-
|
|
7
|
+
@function setTextColor($bg) {
|
|
8
|
+
|
|
9
|
+
// return the default color if transparent
|
|
10
|
+
@if alpha($bg) == 0 {
|
|
11
|
+
@return $text;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
$color-brightness: round((red($bg) * 299) + (green($bg) * 587) + calc((blue($bg) * 114) / 1000));
|
|
9
15
|
$light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + calc((blue(#ffffff) * 114) / 1000));
|
|
10
16
|
// if background is dark, then the text color should be light
|
|
11
17
|
@if abs($color-brightness) < calc($light-color / 2) {
|
|
@@ -32,8 +38,8 @@
|
|
|
32
38
|
// have a low lightness, and visa-versa, but it is good enough.
|
|
33
39
|
//
|
|
34
40
|
|
|
35
|
-
@function setBorderShadeColor($
|
|
36
|
-
$lightness: lightness($
|
|
41
|
+
@function setBorderShadeColor($bg, $opacity: 0.15) {
|
|
42
|
+
$lightness: lightness($bg);
|
|
37
43
|
@if ($lightness > 50) {
|
|
38
44
|
@return rgba(0, 0, 0, $opacity); // Black
|
|
39
45
|
} @else {
|
package/src/play.scss
CHANGED
|
@@ -12,20 +12,23 @@
|
|
|
12
12
|
// @use "./color/shades" as *;
|
|
13
13
|
// @use "./color/tailwind-colors" as *;
|
|
14
14
|
// @use "./color/themes" as *;
|
|
15
|
-
// @use "./functions/colorFunctions" as *;
|
|
16
15
|
// @use "./functions/colorShades" as *;
|
|
17
|
-
@use "./functions/helpers" as *;
|
|
18
16
|
// @use "./mixins/basicColorScheme" as *;
|
|
19
17
|
// @use "./mixins/extendedThemeClass" as *;
|
|
20
|
-
@use "./mixins/helpers" as *;
|
|
21
|
-
@use "./mixins/utilityClassCreators" as *;
|
|
22
18
|
// @use "./mixins/media" as *;
|
|
23
19
|
// @use "./mixins/responsiveClassCreators" as *;
|
|
24
20
|
// @use "./scss/components/button"as *;
|
|
25
21
|
// @use "./scss/utilities/spacing" as *;
|
|
26
22
|
// @use "./utilities/grid" as *;
|
|
27
23
|
// @use "./utilities/text" as *;
|
|
24
|
+
@use "./functions/colorFunctions" as *;
|
|
25
|
+
@use "./functions/helpers" as *;
|
|
26
|
+
@use "./mixins/helpers" as *;
|
|
27
|
+
@use "./mixins/utilityClassCreators" as *;
|
|
28
28
|
@use "sass:list";
|
|
29
29
|
@use "sass:map";
|
|
30
30
|
@use "sass:string";
|
|
31
31
|
|
|
32
|
+
$x: setTextColor(transparent) !default;
|
|
33
|
+
|
|
34
|
+
@debug $x;
|