Browse Source

first changes on theme:
Moving author infos around

Medowar 1 month ago
parent
commit
cac723cfc0

+ 9 - 0
themes/tailwind-custom/css/style.css

@@ -2,6 +2,15 @@
 	padding-right:1.5rem
 }
 
+/* Utilities missing from the prebuilt tailwind.css, used by the post header byline */
+.inline-flex {
+	display:inline-flex
+}
+
+.gap-2 {
+	gap:0.5rem
+}
+
 .anchor svg {
 	display:inline;
 }

+ 10 - 10
themes/tailwind-custom/main.html.php

@@ -28,14 +28,9 @@
     <?php $img = get_image($p->body);?>
     <li class="py-12">
         <article>
-        <div class="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
+        <div class="space-y-2<?php if ($teaserType === 'trimmed'):?> xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0<?php endif;?>">
+            <?php if ($teaserType === 'trimmed') :?>
             <dl>
-                <dt class="sr-only"><?php echo i18n('posted_on');?></dt>
-                <dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"><time><?php echo format_date($p->date);?></time>
-                <?php if (authorized($p)):?> • <span><a href="<?php echo $p->url;?>/edit?destination=post"><?php echo i18n('edit');?></a></span><?php endif;?>
-                </dd>
-                
-                <?php if ($teaserType === 'trimmed') :?>
                 <dt class="sr-only"><?php echo i18n('featured_image');?></dt>
                 <dd class="pt-4 pr-6">
                         <?php if (!empty($p->image)) {?>
@@ -57,10 +52,9 @@
                         <a class="thumbnail" href="<?php echo $p->url;?>"><img src="<?php echo $img;?>" width="100%" alt="<?php echo $p->title;?>"></a>
                         <?php } ?>
                 </dd>
-                <?php endif;?>
-                
             </dl>
-            <div class="space-y-5 xl:col-span-3">
+            <?php endif;?>
+            <div class="space-y-5<?php if ($teaserType === 'trimmed'):?> xl:col-span-3<?php endif;?>">
                 <div class="space-y-6">
                     <div>
                         <?php if (!empty($p->link)) {?>
@@ -80,6 +74,12 @@
                         <div class="flex flex-wrap">
                             <span class="mr-3 text-sm font-medium uppercase text-primary-500"><span class="tags"><?php echo $p->tag;?></span></span>
                         </div>
+                        <dl class="pt-1">
+                            <dt class="sr-only"><?php echo i18n('posted_on');?></dt>
+                            <dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"><time><?php echo format_date($p->date);?></time>
+                            <?php if (authorized($p)):?> • <span><a href="<?php echo $p->url;?>/edit?destination=post"><?php echo i18n('edit');?></a></span><?php endif;?>
+                            </dd>
+                        </dl>
                     </div>
                     <div class="prose max-w-none text-gray-500 dark:text-gray-400 dark:prose-invert">
                         <?php if ($teaserType !== 'trimmed') :?>

+ 10 - 21
themes/tailwind-custom/post.html.php

@@ -7,7 +7,12 @@
                     <dl class="space-y-10">
                         <div>
                             <dt class="sr-only"><?php echo i18n('posted_on');?></dt>
-                            <dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"><time><?php echo format_date($p->date);?></time> • <span class="text-primary-500"><?php echo $p->category;?></span>
+                            <dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"><time><?php echo format_date($p->date);?></time>
+                            • <span class="inline-flex items-center gap-2 align-middle">
+                                <img class="inline-block rounded-full" src="<?php echo $p->authorAvatar;?>" width="24" height="24" alt="<?php echo $p->authorName;?>"/>
+                                <a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" href="<?php echo $p->authorUrl;?>"><?php echo $p->authorName;?></a>
+                            </span>
+                            • <span class="text-primary-500"><?php echo $p->category;?></span>
                             <?php if (authorized($p)):?> • <span><a href="<?php echo $p->url;?>/edit?destination=post"><?php echo i18n('edit');?></a></span><?php endif;?>
                             </dd>
                         </div>
@@ -28,24 +33,8 @@
                     </div>
                 </div>
             </header>
-            <div class="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0">
-                <dl class="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
-                    <dt class="sr-only"><?php echo i18n('author');?></dt>
-                    <dd>
-                        <ul class="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
-                            <li class="flex items-center space-x-2">
-                                <img src="<?php echo $p->authorAvatar;?>" width="40" height="40"/>
-                                <dl class="whitespace-nowrap text-sm font-medium leading-5">
-                                    <dt class="sr-only"><?php echo i18n('user');?></dt>
-                                    <dd class="text-gray-900 dark:text-gray-100"><?php echo $p->authorName;?></dd>
-                                    <dt class="sr-only"><?php echo i18n('post_by_author');?></dt>
-                                    <dd><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" href="<?php echo $p->authorUrl;?>"><?php echo i18n('post_by_author');?></a></dd>
-                                </dl>
-                            </li>
-                        </ul>
-                    </dd>
-                </dl>
-                <div class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
+            <div class="divide-y divide-gray-200 pb-8 dark:divide-gray-700">
+                <div class="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0">
                     <div class="prose max-w-none pb-8 pt-10 dark:prose-invert">
                     
                         <?php if (!empty($p->image)) {?>
@@ -81,7 +70,7 @@
                     <?php endif;?>
                 </div>
                 <footer>
-                    <div class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y">
+                    <div class="divide-y divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700">
                     
                         <?php if (theme_config('post_tag')):?>
                         <div class="py-4 xl:py-8">
@@ -93,7 +82,7 @@
                         <?php endif;?>
 
                         <?php if (theme_config('post_navigation')):?>
-                        <div class="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
+                        <div class="flex justify-between gap-4 py-4 xl:py-8">
                             <?php if (!empty($prev)): ?>
                             <div>
                                 <h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400"><?php echo i18n('prev_post');?></h2>