bl-css 0.10.0 → 0.11.0

package/README.md

@@ -1,9 +1,17 @@
 # bl CSS
 A *lightweight*, **blueviolet**, ***small*** CSS framework!
-# 0.10.0 - Release notes(by Dev)
-FORMS IN BL-CSS :D
-Now you can finally make your own form... with bl-css style :D
-```.form``` for form tag, ```.label``` for label tag and ```.in``` for input with a pretty nice placeholder! Now your sites can have **forms**
+
+# 0.11.1 - Release notes(by Dev)
+FINALLY :D! `.hero` and `.navbar`!! This update is just straight up fire (imo)
+
+## 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
+
+## [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

package/bl.css

@@ -1,3 +1,10 @@
+/*!
+* bl-css
+* (c) 2026 __fg_xd
+* Licensed under LGPLv2.1 License
+* https://github.com/fg-xd/bl-CSS
+* https://npmjs.com/package/bl-css
+*/
 @import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Cause:wght@700&display=swap);
 @layer low{
@@ -25,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;
@@ -161,7 +167,6 @@ body{
 	flex-direction: column;
 	gap: 10px;
 }
-/* Form (NEW) */
 .form{
 	display: table;
 	padding: 12px;
@@ -206,4 +211,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.0",
+  "version": "0.11.0",
   "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": {
@@ -23,5 +23,5 @@
   },
   "keywords": ["css", "framework", "dark", "blueviolet", "lightweight", "simple"],
   "author": "__fg_xd",
-  "license": "MIT"
+  "license": "LGPL-2.1-only"
 }