bl-css 0.7.3 → 0.8.0

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.
Files changed (4) hide show
  1. package/README.md +12 -3
  2. package/bin/sc.js +17 -0
  3. package/bl.css +22 -21
  4. package/package.json +7 -3
package/README.md CHANGED
@@ -1,6 +1,15 @@
1
1
  # bl CSS
2
2
  A *lightweight*, **blueviolet**, ***small*** CSS framework!
3
- # 0.7.2 - Release notes(by Dev)
4
- I added ```clearp``` class!!! its opposite to alertp, and its in BLUEVIOLET :D!!
3
+ # 0.8.0 - Release notes(by Dev)
4
+ A long way of 4 patches and a new minor release! This release targets the 'custom color' aspect. I updated bl-css so that you can FINALLY, use your own custom colors... yeah you need to download it and change the original file, but its EASY!
5
+ # How to Change Accent Color?
6
+ To change from the **original** blueviolet theme you have to open the main```bl.css``` file and you can change the following:
7
+ ```css
8
+ :root{
9
+ --_: rgb(// Your accent's RGB here)
10
+ --_4: rgba(// Your RGB, 0.4)
11
+ --_6: rgba(// Your RGB, 0.6)
12
+ }
13
+ ```
5
14
 
6
- Have a Nice day Using it **:D**
15
+ Have a Nice day Using it **:D**
package/bin/sc.js ADDED
@@ -0,0 +1,17 @@
1
+ #!/usr/bin/env node
2
+ const fs = require('fs');
3
+ const path = require('path');
4
+ console.log("Extracting bl CSS...");
5
+ // Getting the paths
6
+ const src = path.join(__dirname, '..', 'bl.css');
7
+ const dest = path.join(process.cwd(), 'bl.css');
8
+ // Actually doing the code lol
9
+ try {
10
+ fs.copyFileSync(src, dest);
11
+ console.log("bl CSS extracted from the Alien Trenches 🤣");
12
+ }
13
+ catch (e) {
14
+ console.log("The Alien has hidden the package!");
15
+ console.log("run 'npm install bl-css' if you haven't yet")
16
+ console.log("And don't you dare make it 'Global' bruh");
17
+ }
package/bl.css CHANGED
@@ -1,5 +1,12 @@
1
1
  @import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
2
2
  @import url(https://fonts.googleapis.com/css2?family=Cause:wght@700&display=swap);
3
+
4
+ :root{
5
+ --_: rgb(138, 43, 226);
6
+ --_4: rgba(138, 43, 226, 0.4);
7
+ --_6: rgba(138, 43, 226, 0.6);
8
+ }
9
+
3
10
  body{
4
11
  background-color: black;
5
12
  color: white;
@@ -7,11 +14,10 @@ body{
7
14
  .purpl{
8
15
  font-family: "Cause";
9
16
  background: linear-gradient(
10
- to bottom,
11
- rgba(138, 43, 226, 0.4),
12
- rgba(138,43,226,1),
13
- rgba(138,43,226,0.4)
14
- );
17
+ to bottom,
18
+ var(--_4),
19
+ var(--_),
20
+ var(--_4));
15
21
  background-clip: text;
16
22
  -webkit-background-clip: text;
17
23
  color: transparent;
@@ -27,15 +33,10 @@ body{
27
33
  }
28
34
  .h1:hover{
29
35
  color: transparent;
30
- background:linear-gradient(
31
- to bottom,
32
- rgba(138, 43, 226, 0.4),
33
- rgba(138,43,226,1),
34
- rgba(138,43,226,0.4)
35
- );
36
+ background: linear-gradient(to bottom, var(--_4), var(--_), var(--_4));
36
37
  background-clip: text;
37
38
  -webkit-background-clip: text;
38
- border-bottom-color: blueviolet;
39
+ border-bottom-color: var(--_);
39
40
  }
40
41
  .normalp{
41
42
  display: table;
@@ -61,8 +62,8 @@ body{
61
62
  font-family: "Cause";
62
63
  color: white;
63
64
  padding: 3px;
64
- background-color: rgba(138, 43, 226,0.4);
65
- border-left: rgba(138, 43, 226,1) 1px solid;
65
+ background-color: var(--_4);
66
+ border-left: var(--_) 1px solid;
66
67
  border-right: transparent 1px solid;
67
68
  border-bottom: transparent 1px solid;
68
69
  border-top: transparent 1px solid;
@@ -70,8 +71,8 @@ body{
70
71
  transition: 0.4s ease;
71
72
  }
72
73
  .clearp:hover{
73
- border: rgba(138, 43, 226,1) 1px solid;
74
- background-color: rgba(138,43,226,0.6);
74
+ border: var(--_) 1px solid;
75
+ background-color: var(--_6);
75
76
  }
76
77
  .alertp{
77
78
  display: table;
@@ -110,8 +111,8 @@ body{
110
111
  transition: 0.1s ease;
111
112
  }
112
113
  .link:hover{
113
- color: blueviolet;
114
- text-decoration-color: blueviolet;
114
+ color: var(--_);
115
+ text-decoration-color: var(--_);
115
116
  }
116
117
  .linkbtn{
117
118
  display: table;
@@ -127,11 +128,11 @@ body{
127
128
  .linkbtn:hover{
128
129
  color: white;
129
130
  transform: translateY(2px);
130
- border: rgba(138, 43, 226,0.6) 2px solid;
131
+ border: var(--_6) 2px solid;
131
132
  background-color: transparent;
132
133
  }
133
134
  .linkbtn:active{
134
135
  transform: translateY(3px);
135
- color: blueviolet;
136
+ color: var(--_);
136
137
  transition: 0.1s ease;
137
- }
138
+ }
package/package.json CHANGED
@@ -1,12 +1,16 @@
1
1
  {
2
2
  "name": "bl-css",
3
- "version": "0.7.3",
3
+ "version": "0.8.0",
4
4
  "description": "black - blueviolet lightweight CSS framework",
5
5
  "main": "bl.css",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
8
8
  },
9
- "files": ["bl.css", "README.md"],
9
+ "bin": {
10
+ "bl-css": "./bin/sc.js",
11
+ "bl": "./bin/sc.js"
12
+ },
13
+ "files": ["bl.css", "README.md", "sc.js"],
10
14
  "exports": {
11
15
  ".": "./bl.css",
12
16
  "./info": "./README.md",
@@ -16,4 +20,4 @@
16
20
  "keywords": ["css", "framework", "black", "blueviolet", "lightweight"],
17
21
  "author": "__fg_xd",
18
22
  "license": "MIT"
19
- }
23
+ }