update design

vue-json/src/assets/jsondata.json

@@ -60,13 +60,13 @@
         "img": "image_10.jpg"
     },
     {
-        "title":"Nadpis2",
-        "content": "Obsah2",
+        "title":"Nadpis23",
+        "content": "lorem Ipsum dante lante",
         "date":"23. 3. 2022",
         "img": "image_11.jpg"
     },
     {
-        "title":"Nadpis2",
+        "title":"Nadpis24",
         "content": "Obsah2",
         "date":"24. 3. 2022",
         "img": "image_12.jpg"

vue-json/src/components/jsonview.vue

@@ -1,23 +1,23 @@
  <template>
 <div>
-  <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
-  <div id="jsonhead">
-    <h1>JSON</h1>
-    <p>Použi navigační tlačítka pro změnu datumu</p>
-    <button class="navigace" @click="increment()">+</button>
-    <button class="navigace" @click="resetdate()">RESET</button>    
-    <button class="navigace" @click="decrement()">-</button>
-  </div>
+  
 <!-- jsonmain -> div pro zobrazeni hlavní části-->
 <div id="jsonmain">  
   <div v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
-    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i> <br>
-    <img :src="getImgUrl(data1.img)" v-bind:alt="data1.img">  
-</div>
+    <div class="jsonTitle">{{data1.title}}</div> <br>
+    <img class="jsonImg" :src="getImgUrl(data1.img)" v-bind:alt="data1.img"> 
+    <div class="jsonContent">{{data1.content}}</div> 
+    <div class="jsonDate">{{data1.date}}</div>
+  </div>
 </div>
-
+  <!-- jsonhead -> hlavička pro navigaci a změnu datumu-->
+<div id="jsonhead">
+    <button class="navigace" @click="decrement()">-</button>
+    <button class="navigace" @click="resetdate()">RESET</button>    
+    <button class="navigace" @click="increment()">+</button>
+  </div>
   <!-- DEBUG SEKCE -->
-  <button @click="showdebug()"> DEBUG</button>
+  <button @click="showdebug()" style="display:none"> DEBUG</button>
 <div id="jsondebug" style="display:none"> 
 
     <!-- Test Proměných -->
@@ -114,7 +114,33 @@ export default {
 </script>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Inspiration&family=Palette+Mosaic&family=Roboto:ital,wght@1,100&family=Titillium+Web:wght@900&display=swap');
+
 h4{
     color: blue;
 }
+
+.jsonTitle{
+font-size: 72px;
+font-family: 'Palette Mosaic', cursive;
+}
+.jsonImg{
+max-height: 50vh;
+}
+.jsonContent{
+font-size: 64px;
+font-family: 'Inspiration', cursive;
+}
+.jsonDate{
+font-size: 32px;
+font-family: 'Roboto', sans-serif;
+}
+.navigace{
+  font-size: 40px;
+  margin: 10px;
+  padding: 20px;
+  font-family: 'Titillium Web', sans-serif;
+}
+
+
 </style>