a bit of design

Johann-S · Sep 22, 2018 · 1bc7b63 · 1bc7b63
1 parent 3ea967e
commit 1bc7b63
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 11 deletions.
diff --git a/dist/bs-customizer.min.css b/dist/bs-customizer.min.css
diff --git a/dist/bs-customizer.min.js b/dist/bs-customizer.min.js
diff --git a/index-test.html b/index-test.html
@@ -7,9 +7,14 @@
     <title>Bootstrap Customizer</title>
   </head>
   <body>
+    <div id="github-link" class="d-inline">
+      <a href="https://github.com/Johann-S/bs-customizer">
+        <i class="bx bxl-github bx-md"></i>
+      </a>
+    </div>
 		<div class="container">
 			<div class="row">
-				<div class="col-12">
+				<div class="col-12 mt-3">
           <h1>Bootstrap Customizer</h1>
 				</div>
 				<div class="col-12 mt-3">
@@ -141,10 +146,19 @@ <h2>Options</h2>
           </div>
         </div>
         <div class="col-12">
-          <button id="btnSubmit" type="button" class="btn btn-primary mt-3">Build</button>
+          <button id="btnSubmit" type="button" class="btn btn-primary mt-3">
+            <i class='bx bx-download'></i> Download
+          </button>
         </div>
 			</div>
-		</div>
+    </div>
+    <footer class="footer">
+      <div class="container">
+        <p class="text-muted text-center mb-0">
+          Made with <i class="bx bxs-heart"></i> by <a href="https://github.com/Johann-S">Johann-S</a>
+        </p>
+      </div>
+    </footer>
 		<script src="dist/bs-customizer.js"></script>
 	</body>
 </html>
diff --git a/index.html b/index.html
@@ -7,10 +7,15 @@
     <title>Bootstrap Customizer</title>
   </head>
   <body>
+    <div id="github-link" class="d-inline">
+      <a href="https://github.com/Johann-S/bs-customizer">
+        <i class="bx bxl-github bx-md"></i>
+      </a>
+    </div>
 		<div class="container">
 			<div class="row">
-				<div class="col-12">
-					<h1>Bootstrap Customizer</h1>
+				<div class="col-12 mt-3">
+          <h1>Bootstrap Customizer</h1>
 				</div>
 				<div class="col-12 mt-3">
 					<h2>Plugins</h2>
@@ -123,7 +128,7 @@ <h2>Options</h2>
           <div class="row">
             <div class="col-3">
               <div class="form-check">
-                <input id="checkboxPopper" class="form-check-input" type="checkbox" name="popper">
+                <input id="checkboxPopper" class="form-check-input" type="checkbox">
                 <label class="form-check-label" for="checkboxPopper">
                   Include Popper.js
                 </label>
@@ -141,10 +146,19 @@ <h2>Options</h2>
           </div>
         </div>
         <div class="col-12">
-          <button id="btnSubmit" type="button" class="btn btn-primary mt-3">Build</button>
+          <button id="btnSubmit" type="button" class="btn btn-primary mt-3">
+            <i class='bx bx-download'></i> Download
+          </button>
         </div>
 			</div>
-		</div>
+    </div>
+    <footer class="footer">
+      <div class="container">
+        <p class="text-muted text-center mb-0">
+          Made with <i class="bx bxs-heart"></i> by <a href="https://github.com/Johann-S">Johann-S</a>
+        </p>
+      </div>
+    </footer>
 		<script src="dist/bs-customizer.min.js"></script>
 	</body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import { formatList } from './util'
 import { createModal, showModal, hideModal } from './dialog-loader'
 
 import 'bootstrap/dist/css/bootstrap.css'
+import './main.css'
 
 const bsCDN = 'https://unpkg.com/bootstrap/js/dist/'
 const popperCDN = 'https://unpkg.com/popper.js/dist/umd/popper.js'

diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,31 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: 60px;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px; /* Set the fixed height of the footer here */
+  line-height: 60px; /* Vertically center the text there */
+  background-color: #f5f5f5;
+}
+
+i.bx.bxs-heart {
+  color: red;
+}
+
+#github-link {
+  position: absolute;
+  right: 0;
+  opacity: 0.8;
+}
+
+#github-link:hover {
+  opacity: 1;
+}