bl-css 0.11.0 → 0.11.2

package/README.md

@@ -1,24 +1,24 @@
 # bl CSS
-A *lightweight*, **blueviolet**, ***small*** CSS framework!
+A *lightweight*, **blueviolet**, ***ultra lightweight*** CSS framework!
 
-# 0.11.1 - Release notes(by Dev)
-FINALLY :D! `.hero` and `.navbar`!! This update is just straight up fire (imo)
+bl-css is supposed to be a CSS framework that is Ultra Lightweight, even while being readable!
+Currently its <6KB (Unminified, With Comments, and Readable)! exactly 5.36KB [from tooltilities.com](https://tooltilities.com/toolset/text-size-calculator)
+# 0.11.2 - Release notes(by Dev)
+## THE CATS HAVE TAKEN OVER! (And its good :D)
+So if Aliens are green, purple is the opposite, and purple is very near to blueviolet, so Cats are purple/blueviolet!
 
-## Classes Added
- `.hero`: A hero section with 100vh :O
-`.navbar`: A floating pill navbar :P
- `.h1-hero`: An outline stroked text :O
-`.navtitle`: The title on the left of the navbar :D
-`.navlinks`: Links on the right of the navbar :D
+The CLI is now even better (even if it does nothing new lol), you can request a feature in the [issues of github repo](https://github.com/fg-xd/bl-CSS/issues) and use `npx bl-css` to run it
+
+### Note: This update is only for NPM (the CLI)
 
 ## [Preview](https://fg-xd.github.io/bl-CSS)
 # How to Change Accent Color?
 To change from the **original** blueviolet theme you have to open the main```bl.css``` file and you can change the following:
 ```css
 :root{
-	--_: rgb(/* Your accent's RGB here */)
-	--_4: rgba(/* Your RGB */, 0.4)
-	--_6: rgba(/* Your RGB */, 0.6)
+  --_: rgb(/* Your accent's RGB here */);
+  --_4: rgba(/* Your RGB */, 0.4);
+  --_6: rgba(/* Your RGB */, 0.6);
 }
 ```
 # Repo
@@ -26,6 +26,32 @@ The bl-css repo is on [GitHub](https://github.com/fg-xd/bl-CSS)
 
 You can also make an issue on GitHub to request features
 
+# How to use?
+## Plug 'n' Play (not recommended for big sites)
+Add this to your HTML for the latest&greatest version:
+```html
+<link rel='stylesheet' href='https://esm.sh/bl-css' />
+```
+Its a very short URL too! (credit to [esm.sh](https://esm.sh))
+
+## Download
+### 1. NPM
+This is the most recommended method
+
+Run this in your terminal(for latest version):
+```bash
+npm install bl-css
+```
+If you'd want, you can target a specific version:
+```bash
+npm install bl-css@version
+# note: version to be replaced with actual version or the alien will eat bl-css
+```
+### 2. GitHub
+This is not recommended as I most of the time forget to make a release on github T-T
+
+Go to the official [GitHub repo releases](https://github.com/fg-xd/bl-CSS/releases) and download a certain version you want.
+
 Have a Nice day Using it **:D**
 
 Forever Free **:D**

package/bin/sc.js

@@ -1,4 +1,13 @@
 #!/usr/bin/env node
+function helpMenu(){
+  console.log('===== bl-css =====\n Usage: npx bl-css <flag>\n npx bl-css --help === show this menu\n npx bl-css --copy === copy bl.css from the alien trench to your beautiful website');
+}
+const arg = process.argv.slice(2);
+if(arg.length === 0 || arg.includes('--help')){
+  helpMenu();
+  process.exit(0);
+}
+else if(arg.includes('--copy')){
 const fs = require('fs');
 const path = require('path');
 console.log("Extracting bl CSS...");
@@ -12,6 +21,13 @@ try {
 }
 catch (e) {
     console.log("The Alien has hidden the package!");
-    console.log("run 'npm install bl-css' if you haven't yet")
+    console.log("run 'npm install bl-css' if you haven't yet");
     console.log("And don't you dare make it 'Global' bruh");
+} process.exit(0);
+}
+else{
+  console.log("I hope you are not an alien!");
+  console.log("run 'npx bl-css' or 'npx bl-css --help to see the commands!'")
+  console.log("Cats hate Aliens >:(")
+  process.exit(1);
 }

package/bl.css

@@ -111,35 +111,54 @@ body{
 .link{
 	display: table;
 	font-family: "Cause";
-	text-decoration: underline;
-	color: white;
-	text-decoration-color: white;
+	text-decoration: none;
+	color: var(--_);
 	transition: 0.1s ease;
+	cursor: default;
 }
 .link:hover{
 	color: var(--_);
 	text-decoration-color: var(--_);
+	text-decoration: underline;
 }
-.linkbtn{
+.btn{
 	display: table;
-	color: white;
 	font-family: "Cause";
-	padding: 5px;
-	border: rgba(128,128,128,0.6) 2px solid;
-	background-color: rgba(255,255,255,0.4);
 	border-radius: 7px;
+	border: 2px solid var(--_);
+	background-color: var(--_);
 	transform: translateY(0px);
+	padding: 5px;
 	transition: 0.4s ease;
 }
-.linkbtn:hover{
-	color: white;
+.btn:hover{
 	transform: translateY(2px);
-	border: var(--_6) 2px solid;
 	background-color: transparent;
+	border: 2px solid var(--_);
 }
-.linkbtn:active{
+.btn:active{
 	transform: translateY(3px);
-	color: var(--_);
+	background-color: transparent;
+	border: 2px solid var(--_);
+	transition: 0.1s ease;
+}
+.btn2{
+	display: table;
+	font-family: "Cause";
+	border-radius: 7px;
+	border: 2px solid var(--_);
+	background-color: transparent;
+	transform: translateY(0px);
+	padding: 5px;
+	transition: 0.4s ease;
+}
+.btn2:hover{
+	transform: translateY(2px);
+	background-color: var(--_);
+}
+.btn2:active{
+	transform: translateY(3px);
+	background-color: var(--_);
 	transition: 0.1s ease;
 }
 .card{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bl-css",
-  "version": "0.11.0",
-  "description": "black - blueviolet lightweight CSS framework",
+  "version": "0.11.2",
+  "description": "Lightweight and Super Hackable CSS framework(by a Kid)",
   "main": "bl.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"