website changes

src/css/style.css

 svg {
+  margin: 1rem;
   fill: black;
 }
 
@@ -6,19 +7,21 @@ svg:hover {
   fill: olivedrab;
 }
 
-svg:disabled {
+.i {
   fill: gray;
 }
 
+.i:hover {
+  fill: red;
+}
+
 input[type="checkbox"] + label {
-  width: 2em;
-  height: 1em;
-  margin-left: 0.5em;
+  width: 4rem;
+  height: 2rem;
+  margin-left: 1em;
   background-size: cover;
   background-repeat: no-repeat;
   display: inline-block;
-  fill: var(--slider-fill-off);
-  stroke: var(--slider-stroke-off);
   cursor: pointer;
 }
 
@@ -26,4 +29,9 @@ input[type="checkbox"]:checked + label {
   transform: scaleX(-1);
   fill: olivedrab;
   stroke: olivedrab;
+}
+
+div {
+  margin: auto;
+  max-width: 60%;
 }
\ No newline at end of file

src/icons/text.svg

-<svg viewBox="0 0 100 100"
+<svg viewBox="0 0 200 20"
      xmlns="http://www.w3.org/2000/svg">
     <text x="15" y="15">This is example text.</text>
 </svg>
\ No newline at end of file

src/ts/icon-definitions.ts

@@ -28,7 +28,7 @@ export const settings_icon = `<svg viewBox="0 0 100 100"
  xmlns:xlink="http://w
 
 export const slider_icon = `<svg viewBox="0 0 100 50"
  xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="round" x1="20" y1="25" x2="80" y2="25" stroke-width="30"/>
<circle cx="25" cy="25" r="23" stroke-width="3"/>
</svg>`;
 
-export const text_icon = `<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
    <text x="15" y="15">This is example text.</text>
</svg>`;
+export const text_icon = `<svg viewBox="0 0 200 20"
     xmlns="http://www.w3.org/2000/svg">
    <text x="15" y="15">This is example text.</text>
</svg>`;
 
 export const toc_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<line x1="5" y1="10" x2="5" y2="95" stroke-dasharray="15, 15" style="stroke-width:20"/>
<line x1="25" y1="17.5" x2="100" y2="17.5" style="stroke-width:10"/>
<line x1="25" y1="47.5" x2="100" y2="47.5" style="stroke-width:10"/>
<line x1="25" y1="77.5" x2="100" y2="77.5" style="stroke-width:10"/>
</svg>`;
 

src/ts/page.ts

@@ -13,12 +13,18 @@ export const Content = `
     <input id="submit" type="button" value="Change Font">
     <label id="text-svg" for="submit">` + i.text_icon + `</label>
   </form>
+  
+  <div><div><div><div>
+  <i class="i">` + i.overview_icon + `</i>
+  <i>` + i.overview_icon + i.overview_icon + i.overview_icon + `</i>
+  </div></div></div></div>
+
 `
 
 function start() {
   const body = document.getElementById("body");
   const content = document.createElement("div");
-  content.style.width = "100%";
+  content.style.textAlign = "center"
   content.innerHTML = Content;
   body.appendChild(content);