bl-css 0.10.1 → 0.11.1

package/README.md

@@ -1,15 +1,29 @@
 # bl CSS
-A *lightweight*, **blueviolet**, ***small*** CSS framework!
+A *lightweight*, **blueviolet**, ***ultra lightweight*** CSS framework!
 
-# 0.10.1 - Release notes(by Dev)
-License Update! I don't have much to include here, you can read the license on [github](https://github.com/fg-xd/bl-CSS/blob/main/LICENSE). It is a GNU LGPLv2.1 license, which basically means if you build a website, you can optionally credit me, but if you are editing the main bl-css file you must credit me and keep it open source.
+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.1 - Release notes(by Dev)
+A yeah last version was actually 0.11.0, sorry for the error!
+## What's New?
+This is the first *Named* update, the **Link&Button** update!!
+## Classes
+`.link`: Yeah, same thing, but updated to look more modern!
+
+`.linkbtn`: DELETED! switch to .btn or .btn2
+
+`.btn`: A more themed alternative to .linkbtn
+
+`.btn2`: secondary button, based on .btn
+
+## [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
@@ -17,6 +31,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/bl.css

@@ -32,8 +32,7 @@ body{
 .h1{
 	font-family: "Lilita One";
 	display: table;
-	padding: 10px;
-	font-size: 2rem;
+	padding: 10px; /* No more 2rem */
 	border-bottom: 0.5px solid;
 	border-bottom-color: rgba(255,255,255,0.3);
 	transition: 0.4s ease;
@@ -112,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{
@@ -168,7 +186,6 @@ body{
 	flex-direction: column;
 	gap: 10px;
 }
-/* Form (NEW) */
 .form{
 	display: table;
 	padding: 12px;
@@ -213,4 +230,49 @@ body{
 .label:focus-within{
 	color: var(--_);
 }
+/* navbar and splash screen! (New!) */
+.hero{
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: black;
+	flex-direction: column;
+	gap: 10px;
+}
+.navbar{
+	height: auto;
+	min-height: fit-content;
+	display: grid;
+	padding: 0 5px;
+	grid-template-columns: auto 1fr;
+	top: 15px;
+	right: 15%;
+	left: 15%;
+	border-radius: 9999px;
+	background-color: rgba(0,0,0,0.6);
+	border: 2px solid rgb(50,50,50);
+	position: fixed;
+}
+.navtitle{
+	grid-column: 1;
+	align-items: center;
+	/* Use with h1 */
+}
+.navlinks{
+	grid-column: 2;
+	display: flex;
+	gap: 5px;
+	justify-content: end;
+	align-items: center;
+	/* add your links to the right */
+}
+.h1-hero{
+	font-family: "Lilita One";
+	display: table;
+	padding: 10px;
+	color: transparent;
+	-webkit-text-stroke: 1px var(--_);
+	text-stroke: 1px var(--_);
+}
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "bl-css",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "black - blueviolet lightweight CSS framework",
   "main": "bl.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "repository":{
+  "repository": {
     "type": "git",
     "url": "https://github.com/fg-xd/bl-CSS.git"
   },
   "bin": {
     "bl-css": "./bin/sc.js",
-     "bl": "./bin/sc.js"
+    "bl": "./bin/sc.js"
   },
   "files": ["bl.css", "README.md", "sc.js"],
   "exports": {