mobile layout updated

index.html

@@ -18,7 +18,7 @@
   <meta property="twitter:image" content="/logo.png" />
   <title>bbgo</title>
   <link rel="icon" href="/favicon.ico" />
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="apple-touch-icon" href="/logo.png">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
 </head>
 

src/styles/contents.scss

@@ -18,6 +18,7 @@
     margin-bottom: 0.2rem;
     padding: 0.5rem 0.7rem;
     border-radius: 5px;
+    background: #282922;
     color: #ffffff;
     font-size: 0.8rem;
     overflow-x: auto;

src/views/blog/Blogs.vue

@@ -59,7 +59,7 @@
           <v-card
             v-for="blog in blogs"
             :key="blog.id"
-            class="my-5 pa-0"
+            class="mb-5 pa-0"
             variant="flat"
             hover
           >

src/views/blog/ReadBlog.vue

@@ -13,7 +13,8 @@
           {{ blog.category }}
         </div>
         <div
-          class="text-h4 font-weight-medium"
+          class="font-weight-medium"
+          :class="smAndUp ? 'text-h4' : 'text-h5'"
         >
           {{ blog.title }}
         </div>
@@ -69,8 +70,7 @@
         />
       </v-col>
     </v-row>
-    <v-row
-    >
+    <v-row>
       <v-col
         class="text-center"
       >
@@ -147,13 +147,15 @@
 
 <script>
 import { useFormatDate } from '@/composables/datetime'
+import { useDisplay } from 'vuetify'
 import Comment from '@/components/Comment'
 import TagChips from '@/components/TagChips'
 
 export default {
   setup() {
     const { formatDate } = useFormatDate()
-    return { formatDate }
+    const { smAndUp } = useDisplay()
+    return { formatDate, smAndUp }
   },
   components: {
     Comment,