mobile appearence

web/static/css/style.css

@@ -40,6 +40,9 @@ div.reminderContent.is-collapsed .columns {
 div.reminderContent.is-collapsed input[name="name"] {
     display: inline-flex;
     flex-grow: 1;
+    border: none;
+    font-weight: 700;
+    background: none;
 }
 
 div.reminderContent.is-collapsed button.hide-box {
@@ -84,6 +87,7 @@ div.interval-group > button {
     margin-left: auto;
 }
 
+/* Interval inputs */
 div.interval-group > .interval-group-left > input {
     -webkit-appearance: none;
     border-style: none;
@@ -104,6 +108,7 @@ div.interval-group {
     display: flex;
     flex-direction: row;
 }
+/* !Interval inputs */
 
 .left-pad {
     padding-left: 1rem;
@@ -167,7 +172,7 @@ img.rounded-corners {
 
 div.brand {
     text-align: center;
-    height: 48px;
+    height: 52px;
     background-color: #8fb677;
 }
 
@@ -185,7 +190,7 @@ div.dashboard-sidebar {
 
 div.mobile-sidebar {
     z-index: 100;
-    height: 100vh;
+    min-height: 100vh;
     position: absolute;
     top: 0;
     display: none;
@@ -350,7 +355,6 @@ textarea, input {
     border-radius: 4px;
     border-left: 4px solid #fff;
     background-color: #2f3136;
-    width: 500px;
 }
 
 .embed-author-box {
@@ -447,3 +451,15 @@ textarea, input {
     border-radius: 2px;
     border-bottom: 1px solid #fff;
 }
+
+@media only screen and (max-width: 768px) {
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+
+    .customizable.is-24x24 img {
+        width: 16px;
+        height: 16px;
+    }
+}