BLZ

tyler-ruff · tyler-ruff · commit e32857441c6c · 2022-06-20T03:43:49.000-04:00
Initial release.
diff --git a/README.md b/README.md
@@ -1,10 +1,21 @@
 # fire-react
+![Repo Stars](https://img.shields.io/github/stars/blazed-space/fire-react?style=for-the-badge "Repo Stars")
+
+![Repo Downloads](https://img.shields.io/github/downloads/blazed-space/fire-react/total?style=for-the-badge "Repo Downloads")
+
 The Fire bootstrap &amp; framework library for ReactJS
 
+- [View Demo](https://fire-react.netlify.app/)
+- [Documentation](https://github.com/blazed-space/fire-react/wiki)
+
 ## What's Included
 This package uses:
 - [ReactJS](http://reactjs.org/)
 - [TailwindCSS](https://tailwindcss.com/)
+- [HTML Monolith Boilerplate](https://github.com/tyler-ruff/tyler-ruff/blob/main/Web-Gallery/HTML-Snippets/index.html)
+- Blazed [custom-scrollbar](https://github.com/tyler-ruff/tyler-ruff/blob/main/Web-Gallery/CSS-Snippets/custom-scrollbar.css)
+- [blink-stop](https://github.com/tyler-ruff/tyler-ruff/blob/main/Web-Gallery/CSS-Snippets/blink-stop.css)
+- Netlify.toml (for easy [Netlify](https://netlify.com/) deploy)
 - [Instant Page](https://instant.page/)
 - [HTML5 Shiv](https://github.com/aFarkas/html5shiv)
 
@@ -28,16 +39,29 @@ Then, run the following command:
 npm start
 ```
 
-## Deployment
-- **Netlify**:
-This project includes automatic setup for Netlify deployments. 
-- **Other**:
+## Deploying
+To deploy to [Netlify](https://netlify.com/), simply create a new site using this repository as a template.
+Or, you may use the following button to deploy with one click:
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg "Deploy to Netlify")](https://app.netlify.com/start/deploy?repository=https://github.com/blazed-space/fire-react)
+
+### Without Netlify
 To create a production build, run the following command:
 
 ```sh
 npm run build
 ```
 
+# Credits
+![Last Commit](https://img.shields.io/github/last-commit/blazed-space/fire-react?style=for-the-badge "Last Commit")
+## Development Team
+* Maintained by: [The Blazed Development Group](https://www.facebook.com/groups/blzdev)
+* Published by: [Blazed Publishing](https://blazed.xyz/)
+- Lead Developer, Project Management: [Tyler Ruff](https://github.com/tyler-ruff)
+- UX Testing, Project Advising: Star Dom
 ## Special Thanks
-- [Create React App](https://create-react-app.dev/)
-- [Netlify](https://netlify.com/)
+- [Facebook](https://facebook.com/) and [React](http://reactjs.org/)
+- [Netlify](https://netlify.com/)
+- [HTML Head](https://htmlhead.dev/)
+- [TailwindCSS](https://tailwindcss.com/)
+- [Create React App](https://create-react-app.dev/)
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="dns-prefetch" href="//blazed.sirv.com/">
         <link rel="preconnect" href="https://blazed.sirv.com/">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
         <link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />
         <!-- Favicon -->
         <link rel="icon" sizes="192x192" href="https://blazed.sirv.com/logo/BLZ-blue.png?w=192&h=192">
@@ -52,20 +53,69 @@
     </head>
     <body>
       <section class="blz-app">
-          <header>
-              <nav>
-                <a href="#">Home</a>
-                <a href="#">About</a>
-                <a href="#">Contact</a>
-              </nav>
-          </header>
+        <header class="text-gray-600 body-font">
+          <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+            <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
+              <img src="https://blazed.sirv.com/logo/Beaker-Red.png?h=50&w=50" alt="Logo" />
+              <span class="ml-3 text-xl">
+                React Fire
+              </span>
+            </a>
+            <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
+              <a href="#" class="mr-5 hover:text-gray-900">
+                Home
+              </a>
+              <a href="#" class="mr-5 hover:text-gray-900">
+                About
+              </a>
+              <a href="#" class="mr-5 hover:text-gray-900">
+                Contact
+              </a>
+            </nav>
+            <a href="https://github.com/blazed-space/fire-react/" target="_blank" class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
+              Repo
+              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
+                <path d="M5 12h14M12 5l7 7-7 7"></path>
+              </svg>
+            </a>
+          </div>
+        </header>
           <main>
               <div id="root"></div>
           </main>
-          <footer>
-            <div>
-              <span>
-                &copy;2022 Blazed Labs LLC. All Rights Reserved.
+          <footer class="text-gray-600 body-font">
+            <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
+              <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+                <img src="https://blazed.sirv.com/logo/Beaker-Red.png?h=50&w=50" alt="Logo" />
+              </a>
+              <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2022 Blazed Labs LLC —
+                <a href="https://github.com/blazed-space/" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">
+                  @blazed-space
+                </a>
+              </p>
+              <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+                <a href="https://www.facebook.com/blazedlabs" target="social" class="text-gray-500">
+                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                  </svg>
+                </a>
+                <a href="https://twitter.com/BlazedLabs" target="social" class="ml-3 text-gray-500">
+                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                  </svg>
+                </a>
+                <a href="https://www.instagram.com/blazed_labs/" target="social" class="ml-3 text-gray-500">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                  </svg>
+                </a>
+                <a href="https://www.linkedin.com/company/blazed-labs/" target="social" class="ml-3 text-gray-500">
+                  <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                    <circle cx="4" cy="4" r="2" stroke="none"></circle>
+                  </svg>
+                </a>
               </span>
             </div>
           </footer>
diff --git a/src/App.css b/src/App.css
@@ -6,4 +6,21 @@
 ::-moz-selection{
   background: #000;
   color: #fff;
+}
+
+main{
+  max-width: 980px;
+  position: relative;
+  margin-left:auto;
+  margin-right:auto;
+  padding:10px;
+}
+
+main h1{
+  font-size:28px;
+}
+
+main p{
+  margin-top:10px;
+  margin-bottom:20px;
 }
diff --git a/src/App.js b/src/App.js
@@ -4,9 +4,13 @@ function App() {
   return (
     <div className="App">
       <article>
-        <p>
+        <h1>
           Welcome to React Fire!
+        </h1>
+        <p>
+          Boilerplate framework for React.
         </p>
+        <img src="https://blazed.sirv.com/logo/Wallpaper-Beaker.png" />
       </article>
     </div>
   );
diff --git a/src/index.css b/src/index.css
@@ -12,4 +12,57 @@ html, body{
 
 .blz-app{
   max-width:100%;
-}
+}
+
+/*
+    @ blink-stop v1.0
+    DESC: Prevent blinking cursor. Since the ::all selector is so slow,
+          we define all HTML elements that are cross-browser supported.
+    (c) MIT Tyler Ruff; Blazed Labs LLC
+*/
+
+div, table, button, a, i, span, body, html,
+section, article, p, svg, h1, h2, h3, h4, h5, var,
+h6, hr, br, thead, tr, th, td, footer, main, header,
+aside, b, strong, blockquote, code, cite, col, colgroup,
+input[type=submit], input[type=radio], input[type=checkbox],
+input[type=color], input[type=date], input[type=file],
+input[type=hidden], input[type=image], input[type=reset],
+input[type=button], input[type=range], form, dl, dt, dd,
+iframe, label, legend, ul, li, img, caption, dfn, em, tfoot,
+fieldset, nav, ol, option, pre, select, sup, sub, tbody {
+    caret-color: rgba(0,0,0,0);
+}
+
+/*
+    Define cursor blinking color for text-based input types
+*/
+input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
+input[type=tel]:focus, input[type=text]:focus, input[type=number]:focus,
+input[type=search]:focus, input[type=url]:focus, textarea:focus {
+    caret-color: rgba(0,0,0,1);
+}
+
+/*
+    @ custom-scrollbar v1.0
+    DESC: Blazed Labs Custom Scrollbar.
+    (c) MIT Tyler Ruff; Blazed Labs LLC
+*/
+
+body::-webkit-scrollbar{
+  width:10px;
+}
+
+body::-webkit-scrollbar-track{
+  background:#727a8a;
+}
+
+body::-webkit-scrollbar-thumb{
+  background-color:#afb4bd;
+  border-radius:20px;
+  border:1px solid #5b626e;
+}
+
+body::-webkit-scrollbar-thumb:hover{
+  background-color:#5b626e;
+}
