Update style of index letters

This commit is contained in:
Tetrakern 2024-04-23 01:09:04 +02:00
parent 896f91d26e
commit ba4e7ac611
5 changed files with 18 additions and 16 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -69,6 +69,11 @@ if ( $stories->have_posts() ) {
ksort( $sorted_stories );
}
// Last key
end( $sorted_stories );
$last_key = key( $sorted_stories );
reset( $sorted_stories );
?>
<main id="main" class="main singular index">
@ -102,6 +107,9 @@ if ( $stories->have_posts() ) {
<section class="index-letters">
<?php foreach ( $sorted_stories as $index => $stories ) : ?>
<a href="<?php echo esc_attr( "#letter-{$index}" ); ?>" class="index-letters__letter"><?php echo strtoupper( $index ); ?></a>
<?php if ( $last_key !== $index ) : ?>
<span class="index-letters__separator">&bull;</span>
<?php endif; ?>
<?php endforeach; ?>
</section>

View File

@ -80,10 +80,6 @@ $terms = array(
<article id="singular-<?php the_ID(); ?>" class="singular__article padding-left padding-right padding-top padding-bottom">
<header class="singular__header hidden">
<h1 class="singular__title"><?php echo $title; ?></h1>
</header>
<?php if ( get_the_content() ) : ?>
<section class="singular__content content-section">
<?php the_content(); ?>

View File

@ -5,8 +5,8 @@
}
.glossary {
&:not(:last-child) {
margin-bottom: 3rem;
&:not(:first-child) {
margin-top: 3rem;
}
h2 {
@ -61,24 +61,22 @@
.index-letters {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .5rem;
padding: .5rem 0;
margin-bottom: 3rem;
border: 1px solid var(--hr-border-color, var(--layout-lineart-color));
border-width: 1px 0;
&__letter {
display: grid;
place-content: center;
font-size: var(--fs-xxs);
font-weight: var(--font-weight-strong);
font-size: var(--fs-l);
font-size: get_clamp(16, 24, 375, 768);
font-weight: 900;
line-height: 1;
border-radius: var(--layout-border-radius-small);
height: 2rem;
width: 2rem;
height: max(2rem, 1.5em);
width: max(2rem, 1.5em);
transition: color, background-color;
transition-duration: var(--transition-duration);