From ccf39b7c91ee53a48dc15b6dd60670beb5db911f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?s=C3=B8renpeter?= <sp@darch.dk>
Date: Sun, 7 Apr 2024 22:47:52 +0200
Subject: [PATCH] Better CSS for profile filters

---
 libs/timeline.css    | 25 +++++++++++++++++-----
 partials/profile.php | 49 +++++++++++++++++++++++++-------------------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/libs/timeline.css b/libs/timeline.css
index 9dcb814..9dd5a0d 100644
--- a/libs/timeline.css
+++ b/libs/timeline.css
@@ -144,10 +144,13 @@ a.author {
 
 .profile {
     padding: 0 1rem;
+    margin-bottom: 2rem;
+}
+
+.profile-grid {
     display: grid;
     grid-template-columns: 4rem 1fr;
     grid-gap: 1rem;
-    margin-bottom: 2rem;
 }
 
 .profile img.avatar {
@@ -157,11 +160,12 @@ a.author {
 
 .profile .author {
     font-size: larger;
+    line-height: 1;
 }
 
 
 .profile p {
-    margin: 0.5rem 0;
+    margin: 0.2rem 0;
     color: var(--text-light);
 }
 
@@ -174,10 +178,19 @@ a.author {
     color: var(--accent);
 }
 
-.profile .filters a {
+.profile-nav {
+    margin-top: 1rem;
+    font-size: smaller;    
+}
+
+.profile-filters {
+    padding: 0.25rem;
+}
+
+.profile-filters a {
     text-decoration: none;
-    font-weight: bold;
     padding-right: 0.5rem;
+    font-weight: bold;    
 }
 
 .profile a.active {
@@ -189,7 +202,8 @@ a.author {
 .tagcloud {
     margin-top: 0.75rem;
     border-top: thin solid var(--border);
-    padding: 0.2rem;
+    padding: 0.5rem 0.25rem;
+    text-align: justify;
 }
 
 .tagcloud a,
@@ -200,6 +214,7 @@ a.author {
     color: var(--text-light);
 }
 
+
 .tagcloud a.active {
     color: var(--accent);
 }
diff --git a/partials/profile.php b/partials/profile.php
index aa3759b..5332176 100644
--- a/partials/profile.php
+++ b/partials/profile.php
@@ -47,36 +47,43 @@ if ($is_gallery) {
 
 <div class="profile">
 
-  <a href="<?=$profile->avatar?>">
-	<img class="avatar" src="<?=$profile->avatar?>" onerror="this.onerror=null;this.src='<?= $baseURL ?>/media/default.png';">
-  </a>
+	<div class="profile-grid">
 
-  <div>
-	  <a href="<?=$profileURL?>" class="author">
-		<strong><?=$profile->nick?></strong>@<?=parse_url($profile->mainURL, PHP_URL_HOST);?>
+	  <a href="<?=$profile->avatar?>">
+		<img class="avatar" src="<?=$profile->avatar?>" onerror="this.onerror=null;this.src='<?= $baseURL ?>/media/default.png';">
 	  </a>
 
-	<p><?=$profile->description?></p>
+	  <div>
 
-	<small>
-	  <span class="filters">
-		<a <?=$posts_active?> href="<?=$profileURL?>" >Posts</a>
-		<a <?=$replies_active?> href="<?=$baseURL?>/replies?profile=<?=$profile->mainURL?>" >Replies</a>
-		<a <?=$gallery_artive?> href="<?=$baseURL?>/gallery?profile=<?=$profile->mainURL?>" >Gallery</a>
+		  <a href="<?=$profileURL?>" class="author">
+			<strong><?=$profile->nick?></strong>@<?=parse_url($profile->mainURL, PHP_URL_HOST);?>
+		  </a>
+
+			<p><?=$profile->description?></p>
+
+			<!-- <p>Links: (TODO)</p> -->
+
+	  </div>
+
+	</div>
+	<div class="profile-nav">
+
+	  <span class="profile-filters">
+			<a <?=$posts_active?> href="<?=$profileURL?>" >Posts</a>
+			<a <?=$replies_active?> href="<?=$baseURL?>/replies?profile=<?=$profile->mainURL?>" >Replies</a>
+			<a <?=$gallery_artive?> href="<?=$baseURL?>/gallery?profile=<?=$profile->mainURL?>" >Gallery</a>
 	  </span>
 
 	  <span class="right">
-		<!-- <a href="following.php">Following <?php echo count($twtFollowingList); ?></a> |  -->
-		<a target="_blank" href="<?=$profile->mainURL?>"><?=$profile->mainURL?></a>
-		(<a href="https://yarn.social">How to follow</a>)
+			<!-- <a href="following.php">Following <?php echo count($twtFollowingList); ?></a> |  -->
+			<a target="_blank" href="<?=$profile->mainURL?>"><?=$profile->mainURL?></a>
+			(<a href="https://yarn.social">How to follow</a>)
 	  </span>
 
 	  <div class="tagcloud">
-		<?php include_once 'partials/tag_cloud.php'; ?>
-	  </div>
+			<?php include_once 'partials/tag_cloud.php'; ?>
+		</div>
 
-	</small>
+	</div>
 
-  </div>
-
-</div>
\ No newline at end of file
+</div>