Better CSS for profile filters

This commit is contained in:
sørenpeter 2024-04-07 22:47:52 +02:00
parent 7ca2dc3793
commit ccf39b7c91
2 changed files with 48 additions and 26 deletions

View file

@ -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);
}

View file

@ -47,19 +47,28 @@ if ($is_gallery) {
<div class="profile">
<div class="profile-grid">
<a href="<?=$profile->avatar?>">
<img class="avatar" src="<?=$profile->avatar?>" onerror="this.onerror=null;this.src='<?= $baseURL ?>/media/default.png';">
</a>
<div>
<a href="<?=$profileURL?>" class="author">
<strong><?=$profile->nick?></strong>@<?=parse_url($profile->mainURL, PHP_URL_HOST);?>
</a>
<p><?=$profile->description?></p>
<small>
<span class="filters">
<!-- <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>
@ -75,8 +84,6 @@ if ($is_gallery) {
<?php include_once 'partials/tag_cloud.php'; ?>
</div>
</small>
</div>
</div>