merging

src/index.html

@@ -164,7 +164,7 @@ code here, escape it yourself.
         </main>
         <br><br><br>
         <br><br><br>
-        <script src="js/steevcss.js"></script>
+        <!-- <script src="js/steevcss.js"></script> -->
         <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
         <script>hljs.highlightAll();</script>
     </body>

src/js/steevcss.js

@@ -1,6 +1,8 @@
 var code = document.querySelectorAll("code");
 
-// code embed
+// TODO: Split a html tag by character 
+// current way taking 1:1 html and changing how it is setup
+// problem: this endsup in breaking once the file itself should be inside the display area
 code.forEach(c => {
     let code = c.innerHTML.toString();
     var output = "";

src/sass/button.sass

@@ -4,7 +4,10 @@
 .btn
     border-radius: $border_radius
     border-width: $border_width
+    border: $border_width solid #d1d1d1
     padding: $padding
+    font-size: 12pt
+    min-width: 100px
     transition: 50ms
 .btn-primary
     background-color: $primary 

src/sass/selector.sass

@@ -1,5 +1,5 @@
 @import variables
-
+/* todo: make the sliders smaller */
 /* The switch - the box around the slider */
 .switch 
     position: relative

src/sass/variables.sass

@@ -1,4 +1,4 @@
-$border_width: 2px
+$border_width: 1px
 $border_radius: 5px
 $padding: 5px
 $columns: 12
@@ -7,7 +7,8 @@ $navgap: 1em
 /* Colours */
 $navhovcolor: #a5a5a5   
 $navdefcolor: #2e2e2e
-$primBG: rgb(248, 248, 248)
+$default: rgb(248, 248, 248)
+$default_dark: #d1d1d1
 $primary: #3498db
 $primary_dark: #2980b9
 $danger: #e74c3c