commit 15a79e9207faedb681a63d191f553b67a4ad5e82 · finxol.io/blog

+13 -3
app/components/content/Bookmark.vue
···

       9
       9
        
               :to="url"

     

       10
       10
        
               :class="[

     

       11
       11
        
                   'flex flex-row items-center justify-start gap-4',

     

       12
       12
       -
                   'px-2 py-4 md:px-4 md:py-6 not-prose',

     

       12
       12
       +
                   'px-4 py-4 md:px-6 md:py-6 not-prose',

     

       13
       13
        
                   'border border-gray-300 dark:border-gray-700 border-solid border-2 rounded-lg',

     

       14
       14
        
                   'bg-stone-200/25 hover:bg-stone-200/50 dark:bg-stone-700/25 dark:hover:bg-stone-700/50',

     

       15
       15
       -
                   'transition-colors duration-200'

     

       15
       15
       +
                   'transition-colors duration-200',

     

       16
       16
       +
                   'bookmark-link'

     

       16
       17
        
               ]"

     

       17
       18
        
           >

     

       18
       19
        
               <Icon name="ri:bookmark-fill" size="1.5rem" class="text-yellow-700" />

     

       19
       19
       -
               <div class="flex flex-col items-start justify-start">

     

       20
       20
       +
               <div class="bookmark-content flex flex-col items-start justify-start font-bold">

     

       20
       21
        
                   <slot />

     

       21
       22
        
                   <span class="text-xs text-gray-400 dark:text-gray-600">

     

       22
       23
        
                       {{props.url}}

     
···

       24
       25
        
               </div>

     

       25
       26
        
           </NuxtLink>

     

       26
       27
        
       </template>

     

       28
       28
       +
       

     

       29
       29
       +
       <style scope>

     

       30
       30
       +
       @media print {

     

       31
       31
       +
           a.bookmark-link::after {

     

       32
       32
       +
               content: "";

     

       33
       33
       +
               display: none;

     

       34
       34
       +
           }

     

       35
       35
       +
       }

     

       36
       36
       +
       </style>