meow

app/index.html

@@ -23,10 +23,7 @@
         <p tabindex="0" class="logo" id="burgerButton"></p>
         <button tabindex="0" class="logo hidden" style="font-size: 17px;margin-left: 0;" onclick="handleGesture()" id="backButton"><img src="/static/svg/arrow-back.svg"></button>
         <div class="modernToolbar">
-            <button id="textMinusBox">-</button>
+            <button class="count" id="wordCountBox">0 words</button>
-            <button id="textSizeBox">16px</button>
-            <button id="textPlusBox">+</button>
-            <button id="wordCountBox">0 words</button>
             <button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img src="/static/svg/markdown.svg"></div></button>
             <button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
         </div>
@@ -53,6 +50,14 @@
             <h3 class="w300">Your account</h3>
             <p id="usernameThing">Cannot connect to the server</p>
             <div class="section"></div>
+            <p>Device settings</p>
+            <div class="fontManipulator">
+                <span>Font size</span>
+                <button class="textMinusBox" id="textMinusBox">-</button>
+                <button class="textSizeBox" style="background-color: var(--nonimporant-theme-color) !important;" id="textSizeBox">16px</button>
+                <button class="textPlusBox" id="textPlusBox">+</button>
+            </div>
+            <div class="section"></div>
             <p>Storage</p>
             <progress id="storageProgressThing" value="0" max="100"></progress><br>
             <p id="storageThing">Cannot connect to the server</p>

static/css/style.css

@@ -225,6 +225,38 @@ body {
     margin-right: 5px;
 }
 
+.topBar .modernToolbar .count {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    font-size: 15px;
+    transform: translateY(-5px);
+}
+
+.topBar .modernToolbar .textmod {
+    cursor: pointer;
+    filter: invert(var(--invertdm));
+    height: 41px;
+    width: 41px;
+    line-height: 41px;
+    text-align: left;
+    font-size: 16px;
+    cursor: pointer;
+    margin-top: 5px;
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 99px;
+    border: none;
+    transition: 0.125s;
+}
+
+.topBar .textmod img {
+    height: 22px;
+    filter: invert(var(--invertdm));
+}
+
+.topBar .textmod:hover {
+    background-color: var(--icon-button-hover);
+}
+
 .topBar .usernameBox {
     cursor: pointer;
     filter: invert(var(--invertdm));
@@ -421,13 +453,18 @@ iframe#markdown {
     width: 100%;
     padding: 10px;
     margin-bottom: 7px;
-    color: var(--theme-text-color);
+    background-color: var(--nonimporant-theme-color);
     border: none;
     text-decoration: none;
-    background-color: var(--theme-color);
+    color: var(--nonimportant-text-color);
     border-radius: 10px;
     cursor: pointer;
     font-size: 15px;
+    transition: 0.125s;
+}
+
+.optionsDiv button:hover {
+    background-color: var(--hover-nonimportant-theme-color);
 }
 
 .optionsDiv .normalButton {
@@ -508,7 +545,7 @@ iframe#markdown {
     left: 20px;
     scale: 1.3;
     transform: translateY(1px);
-    filter: invert(100%);
+    filter: invert(var(--invertdm))
 }
 
 .optionsDiv .section {
@@ -518,6 +555,22 @@ iframe#markdown {
     margin-bottom: 10px;
 }
 
+
+.optionsDiv .fontManipulator button {
+    width: 45px;
+    background-color: var(--nonimporant-theme-color);
+    color: var(--nonimportant-text-color);
+    transition: 0.125s;
+}
+
+.optionsDiv .fontManipulator button:hover {
+    background-color: var(--hover-nonimportant-theme-color);
+}
+
+.optionsDiv .fontManipulator .textMinusBox {
+    margin-left: 83.5px
+}
+
 .sessionDiv {
     max-height: 255px;
     overflow-y: auto;

static/svg/minus.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 7 h 10 v 2 h -10 z m 0 0" fill="#222222"/></svg>

static/svg/plus.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 7 3 v 4 h -4 v 2 h 4 v 4 h 2 v -4 h 4 v -2 h -4 v -4 z m 0 0" fill="#222222"/></svg>