css updates

CHANGELOG.md

+# 0.1.33
+
+_4th November 2020_
+
+### Changed
+
+- made width of nodes wider in card view
+- made typing wider in all modes
+- links (a tag elements) are now much bigger on small screens (under 600px) to add with tapping
+
 # 0.1.32
 
 _30th October 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/CardsLayer.vue

@@ -14,17 +14,13 @@
                 @input="editNode"
                 :id="nodeid"
                 ref="nodetext"
-                placeholder="Idea goes here!"
+                placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
               ></textarea>
             </div>
             <p class="info">*markdown supported &amp; autosaves</p>
           </div>
-          <div v-if="value.read_mode && deleted == false">
-            <p
-              class="readmode"
-              :id="nodeid"
-              :inner-html.prop="nodetext | marked"
-            ></p>
+          <div class="readmode" v-if="value.read_mode && deleted == false">
+            <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
           </div>
           <div class="allemoji">
             <div
@@ -142,12 +138,9 @@ export default {
 </script>
 
 <style lang="css" scoped>
-h2 {
-  color: red;
-}
-
 .nodes {
-  max-width: 300px;
+  min-width: 320px;
+  max-width: 450px;
   border: 2px dashed black;
   background-color: rgb(155, 194, 216);
   margin-top: 1em;
@@ -157,10 +150,11 @@ h2 {
 .readmode {
   margin-top: 1em;
   margin-left: 1em;
+  padding-right: 1em;
 }
 
 textarea {
-  width: 90%;
+  width: 100%;
   height: 175px;
   resize: none;
   font-size: 18px;
@@ -168,7 +162,7 @@ textarea {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin: 1em;
+
   border: none;
   outline: none;
   background-color: rgb(187, 227, 255);
@@ -195,4 +189,10 @@ textarea {
 .eachemoji p {
   margin: 0em;
 }
+
+@media only screen and (max-width: 600px) {
+  .readmode >>> a {
+    font-size: 2em;
+  }
+}
 </style>

app/src/components/ListLayer.vue

@@ -14,17 +14,13 @@
                 @input="editNode"
                 :id="nodeid"
                 ref="nodetext"
-                placeholder="Idea goes here!(auto saved every keystroke)"
+                placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
               ></textarea>
             </div>
             <p class="info">*markdown supported &amp; autosaves</p>
           </div>
-          <div v-if="value.read_mode && deleted == false">
-            <p
-              class="readmode"
-              :id="nodeid"
-              :inner-html.prop="nodetext | marked"
-            ></p>
+          <div class="readmode" v-if="value.read_mode && deleted == false">
+            <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
           </div>
 
           <div class="allemoji">
@@ -140,10 +136,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-h2 {
-  color: red;
-}
-
 .nodes {
   width: 95%;
   border: 2px dashed black;
@@ -158,7 +150,7 @@ h2 {
 }
 
 textarea {
-  width: 90%;
+  width: 100%;
   height: 175px;
   resize: none;
   box-sizing: border-box;
@@ -166,7 +158,7 @@ textarea {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin: 1em;
+
   border: none;
   outline: none;
   background-color: rgb(187, 227, 255);
@@ -193,4 +185,10 @@ textarea {
 .eachemoji p {
   margin: 0em;
 }
+
+@media only screen and (max-width: 600px) {
+  .readmode >>> a {
+    font-size: 2em;
+  }
+}
 </style>

app/src/components/NodesLayer.vue

@@ -29,7 +29,7 @@
                   :id="nodeid"
                   class="drag-cancel"
                   ref="nodetext"
-                  placeholder="Idea goes here! (auto saved every keystroke)"
+                  placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
                 ></textarea>
               </div>
               <p class="info">*markdown supported &amp; autosaves</p>
@@ -115,7 +115,7 @@
                     :id="nodeid"
                     class="drag-cancel"
                     ref="nodetext"
-                    placeholder="Idea goes here! (auto saved every keystroke)"
+                    placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
                   >
                   </textarea>
                 </div>
@@ -419,7 +419,7 @@ textarea {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-top: 1em;
+  margin-top: 0.5em;
   border: none;
   outline: none;
   background-color: rgb(187, 227, 255);
@@ -451,7 +451,13 @@ textarea {
 img {
   width: 100%;
 }
+
+li {
+  font-size: 6em;
+}
 /* .dragging {
   transform: scale(0.7);
 } */
+
+
 </style>

app/src/components/OtherCardslayer.vue

@@ -53,7 +53,8 @@ h2 {
 }
 
 .nodes {
-  width: 300px;
+  min-width: 320px;
+  max-width: 450px;
   border: 2px solid black;
   background-color: rgb(205, 234, 255);
   margin-top: 1em;

app/src/views/Cards.vue

@@ -176,6 +176,8 @@ export default {
   cursor: pointer;
 }
 
+
+
 .a {
   fill: #333;
   stroke: #707070;