bl-css 0.10.1 → 0.11.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.
- package/README.md +11 -2
- package/bin/sc.js +0 -0
- package/bl.css +46 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
# bl CSS
|
|
2
2
|
A *lightweight*, **blueviolet**, ***small*** CSS framework!
|
|
3
3
|
|
|
4
|
-
# 0.
|
|
5
|
-
|
|
4
|
+
# 0.11.1 - Release notes(by Dev)
|
|
5
|
+
FINALLY :D! `.hero` and `.navbar`!! This update is just straight up fire (imo)
|
|
6
|
+
|
|
7
|
+
## Classes Added
|
|
8
|
+
`.hero`: A hero section with 100vh :O
|
|
9
|
+
`.navbar`: A floating pill navbar :P
|
|
10
|
+
`.h1-hero`: An outline stroked text :O
|
|
11
|
+
`.navtitle`: The title on the left of the navbar :D
|
|
12
|
+
`.navlinks`: Links on the right of the navbar :D
|
|
13
|
+
|
|
14
|
+
## [Preview](https://fg-xd.github.io/bl-CSS)
|
|
6
15
|
# How to Change Accent Color?
|
|
7
16
|
To change from the **original** blueviolet theme you have to open the main```bl.css``` file and you can change the following:
|
|
8
17
|
```css
|
package/bin/sc.js
CHANGED
|
File without changes
|
package/bl.css
CHANGED
|
@@ -32,8 +32,7 @@ body{
|
|
|
32
32
|
.h1{
|
|
33
33
|
font-family: "Lilita One";
|
|
34
34
|
display: table;
|
|
35
|
-
padding: 10px;
|
|
36
|
-
font-size: 2rem;
|
|
35
|
+
padding: 10px; /* No more 2rem */
|
|
37
36
|
border-bottom: 0.5px solid;
|
|
38
37
|
border-bottom-color: rgba(255,255,255,0.3);
|
|
39
38
|
transition: 0.4s ease;
|
|
@@ -168,7 +167,6 @@ body{
|
|
|
168
167
|
flex-direction: column;
|
|
169
168
|
gap: 10px;
|
|
170
169
|
}
|
|
171
|
-
/* Form (NEW) */
|
|
172
170
|
.form{
|
|
173
171
|
display: table;
|
|
174
172
|
padding: 12px;
|
|
@@ -213,4 +211,49 @@ body{
|
|
|
213
211
|
.label:focus-within{
|
|
214
212
|
color: var(--_);
|
|
215
213
|
}
|
|
214
|
+
/* navbar and splash screen! (New!) */
|
|
215
|
+
.hero{
|
|
216
|
+
height: 100vh;
|
|
217
|
+
display: flex;
|
|
218
|
+
justify-content: center;
|
|
219
|
+
align-items: center;
|
|
220
|
+
background-color: black;
|
|
221
|
+
flex-direction: column;
|
|
222
|
+
gap: 10px;
|
|
223
|
+
}
|
|
224
|
+
.navbar{
|
|
225
|
+
height: auto;
|
|
226
|
+
min-height: fit-content;
|
|
227
|
+
display: grid;
|
|
228
|
+
padding: 0 5px;
|
|
229
|
+
grid-template-columns: auto 1fr;
|
|
230
|
+
top: 15px;
|
|
231
|
+
right: 15%;
|
|
232
|
+
left: 15%;
|
|
233
|
+
border-radius: 9999px;
|
|
234
|
+
background-color: rgba(0,0,0,0.6);
|
|
235
|
+
border: 2px solid rgb(50,50,50);
|
|
236
|
+
position: fixed;
|
|
237
|
+
}
|
|
238
|
+
.navtitle{
|
|
239
|
+
grid-column: 1;
|
|
240
|
+
align-items: center;
|
|
241
|
+
/* Use with h1 */
|
|
242
|
+
}
|
|
243
|
+
.navlinks{
|
|
244
|
+
grid-column: 2;
|
|
245
|
+
display: flex;
|
|
246
|
+
gap: 5px;
|
|
247
|
+
justify-content: end;
|
|
248
|
+
align-items: center;
|
|
249
|
+
/* add your links to the right */
|
|
250
|
+
}
|
|
251
|
+
.h1-hero{
|
|
252
|
+
font-family: "Lilita One";
|
|
253
|
+
display: table;
|
|
254
|
+
padding: 10px;
|
|
255
|
+
color: transparent;
|
|
256
|
+
-webkit-text-stroke: 1px var(--_);
|
|
257
|
+
text-stroke: 1px var(--_);
|
|
258
|
+
}
|
|
216
259
|
}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bl-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.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
|
-
"repository":{
|
|
9
|
+
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "https://github.com/fg-xd/bl-CSS.git"
|
|
12
12
|
},
|
|
13
13
|
"bin": {
|
|
14
14
|
"bl-css": "./bin/sc.js",
|
|
15
|
-
|
|
15
|
+
"bl": "./bin/sc.js"
|
|
16
16
|
},
|
|
17
17
|
"files": ["bl.css", "README.md", "sc.js"],
|
|
18
18
|
"exports": {
|