Pixelbite-CSS · neostetic · Jul 15, 2023 · Jul 18, 2023 · Oct 7, 2023
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,9 @@
+RewriteEngine On
+RewriteBase /
+
+DirectoryIndex /www/index.html
+
+RewriteCond %{REQUEST_URI} !^/www/
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME}\.html -f
+RewriteRule ^(.+)$ /www/$1.html [L]
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/assets/component.html b/assets/component.html
diff --git a/assets/link_block.html b/assets/link_block.html
@@ -0,0 +1,34 @@
+<div class="fs-22px flexColumn flexLeft g-8px pt-12px">
+    <div class="fw-600">Include via link</div>
+</div>
+<p class="o-.8 ta-justify">
+    Include PixelbiteCSS via including link to specific version. You can select minified or classic version or try experimental version for your own project.
+    <br><br>
+    Select version:
+</p>
+<div class="dropdown zIndex-50" onclick="document.getElementById('codeIdCss').innerHTML = this.value.split('&&')[0];document.getElementById('codeIdJs').innerHTML = this.value.split('&&')[1]">
+    <select>
+        ${for(
+            object.length :: 
+            <option value="${object[i].css}&&${object[i].js}">${object[i].version}</option>
+        )}
+    </select>
+</div>
+<div class="p-12px-0 flex flexColumn g-12px">
+    <div class="foreach:ff-monospace bg-black b-none br-20px w-100% flexColumn flexLeft p-16px g-16px shadow ff-monospace">
+        <div class="flex g-8px">
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+        </div>
+<pre class="m-0 numberedLines fs-14px c-white60"><span>&lt;link rel="stylesheet" href="<code class="c-cherry70" id="codeIdCss">${object[0].css}</code>"&gt;</span></code></pre>
+    </div>
+    <div class="foreach:ff-monospace bg-black b-none br-20px w-100% flexColumn flexLeft p-16px g-16px shadow ff-monospace">
+        <div class="flex g-8px">
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+            <div class="p-6px br-50% bg-rgba(128,128,128,.5)"></div>
+        </div>
+<pre class="m-0 numberedLines fs-14px c-white60"><span>&lt;script src="<code class="c-cherry70" id="codeIdJs">${object[0].js}</code>"&gt;&lt;/script&gt;</span></code></pre>
+    </div>
+</div>
diff --git a/assets/object.json b/assets/object.json
@@ -11,6 +11,18 @@
     "css": "https://pixelbite-css.github.io/pixelbite-css/style/pixelbite.css",
     "js": "https://pixelbite-css.github.io/pixelbite-css/script/pixelbite.js"
   },
+  {
+    "version": "1.6-min",
+    "text": "Components support + Github Markdown (minified)",
+    "css": "https://pixelbite-css.github.io/pixelbite-css/style/1.6/pixelbite-min.css",
+    "js": "https://pixelbite-css.github.io/pixelbite-css/script/1.6/pixelbite-min.js"
+  },
+  {
+    "version": "1.6",
+    "text": "Components support + Github Markdown",
+    "css": "https://pixelbite-css.github.io/pixelbite-css/style/1.6/pixelbite.css",
+    "js": "https://pixelbite-css.github.io/pixelbite-css/script/1.6/pixelbite.js"
+  },
   {
     "version": "1.5.2-min",
     "text": "Components support + Github Markdown (minified)",

diff --git a/assets/title_icon.html b/assets/title_icon.html
@@ -0,0 +1,3 @@
+<div class="bg-cherry90 c-cherry40 dark:bg-cherry20 dark:c-cherry60 p-12px br-8px ar-1/1 flexMiddle flexCenter">
+    <i class="${icon} fs-22px"></i>
+</div>
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -6,15 +6,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="index.css">
 </head>
-<body class="bg-white96 dark:bg-purple6 c-white0 dark:c-white100">
+<body class="bg-white dark:bg-cherry3 c-white0 dark:c-white100">
 <div class="w-100%">
-    <div class="auto-width p-24px flexColumn g-12px">
-        <div class="flexColumn w-1000px g-12px flexLeft">
-            <div class="fw-500 fs-24px">Select version</div>
-            <component path="./assets/component.html" object[object]="./assets/object.json"></component>
-            <button onclick="changeThemeMode()" class="fs-12px p-12px-16px">Change theme</button>
+    <div class="auto-width flexCenter flexMiddle flexColumn p-64px-14px" id="getting_started">
+        <div class="flexRow flexWrap-wrap flexCenter flexLeft w-100% p-12px-32px g-48px">
+            <img src="https://Pixelbite-CSS.github.io/assets/pixelbitecss.svg" width="700"/>
         </div>
-        <a href="https://pixelbite-css.github.io">Go back</a>
+        <div class="flexRow flexWrap-wrap flexCenter flexLeft w-100% p-32px g-48px">
+            <div class="w-820px flexColumn flexLeft bg-cherry98 dark:bg-cherry6 br-16px p-12px-28px">
+                <component path="./assets/link_block.html" object:object="./assets/object.json"></component>
+            </div>
+        </div>
+        <p class="ta-center o-.8 w-500px">
+            Start using <span class="c-primary">PixelbiteCSS</span> now by selecting version you want to use or you can optionally donwload library via <a href="https://www.jsdelivr.com/package/npm/pixelbite-css" target="_blank">npm</a> or <a href="https://github.com/Pixelbite-CSS/pixelbite-css" target="_blank">Github</a>.
+            <br><br>
+            <a href="./docs">Read installation docs</a>
+        </p>
     </div>
 </div>
 <script src="index.js"></script>

diff --git a/index.js b/index.js
diff --git a/pixelbite.conf b/pixelbite.conf
@@ -1,35 +1,29 @@
-[informations]
-# author = "neostetic"
-# author_url = "https://github.com/neostetic"
-# description = "Just your basic theme idea"x`
-# theme_name = "General"
-# theme_version = "1.0"
-# theme_date = "7/12/2023"
-# theme_url = "https://github.com/neostetic"
-# style = "color:red"
-
 [general]
-configs = []
 fontawesome = "https://kit.fontawesome.com/f474ae69e7.js"
 # debug = true
 
 [components]
-# TODO: Make it work!
-adam = "./pixelbite_componentTest.html"
+customButton = "./assets/customButton.html"
 
 [aliases]
-headerRoundedButton = "flexMiddle flexCenter fs-16px c-black dark:c-white td-none g-12px b-1px-solid-black dark:b-1px-solid-white br-400px p-8px-20px"
-headerRoundedFullButton = "br-400px bg-black dark:bg-white w-44px flexMiddle flexCenter"
+darkmodeFont = "c-black dark:c-white"
+darkmodeClassics = "darkmodeFont bg-white dark:bg-cherry4"
+headerBorderRadius = "br-6px"
+headerRoundedButton = "flexMiddle flexCenter fs-14px c-cherry40 dark:c-cherry90 td-none g-12px bg-cherry90 dark:bg-cherry40 p-8px-14px headerBorderRadius"
+headerRoundedFullButton = "headerBorderRadius bg-black dark:bg-white w-36px flexMiddle flexCenter"
+headerLink = "td-none c-black dark:c-white d-block p-4px-4px fs-13px"
 
 [variables]
-# primary = "#ff0000"
-# secondary = "#ff5555"
+primary = "#FA2A55"
+secondary = "#b51838"
+transparent = "rgba(0,0,0,0)"
+fontCustom = "url(https://fonts.gstatic.com/s/sedgwickavedisplay/v19/xfuu0XPgU3jZPUoUo3ScvmPi-NapQ8OxM1c0fec.woff2)"
 
 [colors]
-# purple = "#ff0000"
+cherry = "#FA2A55"
 
 [markdowns]
-# code2text = [
-#     { pattern: /</g, replacement: "&lt;" },
-#     { pattern: />/g, replacement: "&gt;" }
-# ]
+code2text = [
+    { pattern: /</g, replacement: "&lt;" },
+    { pattern: />/g, replacement: "&gt;" }
+]
diff --git a/script/1.6/pixelbite-min.js b/script/1.6/pixelbite-min.js