malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add letter selection to index

Browse Source
This commit is contained in:
Tetrakern 2024-04-23 00:42:57 +02:00
parent ba62165973
commit 896f91d26e
4 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

10
singular-index.php
View File

@ -93,16 +93,22 @@ if ( $stories->have_posts() ) {
<article id="singular-<?php echo $post_id; ?>" class="singular__article padding-left padding-right padding-top padding-bottom">
<header class="singular__header">
<header class="singular__header hidden">
<h1 class="singular__title"><?php echo $title; ?></h1>
</header>
<section class="singular__content content-section"><?php the_content(); ?></section>
<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 endforeach; ?>
</section>
<?php foreach ( $sorted_stories as $index => $stories ) : ?>
<section class="glossary">
<h2 id="letter-<?php echo $index; ?>"><?php echo strtoupper( $index ); ?></h2>
<h2 id="<?php echo esc_attr( "letter-{$index}" ); ?>"><?php echo strtoupper( $index ); ?></h2>
<div class="glossary__columns">

53
src/scss/_singular.scss
View File

@ -59,39 +59,32 @@
}
}
.index-wrapper {
column-gap: 2rem;
@include bp(640px) {
columns: 2;
}
}
.index-group {
display: grid;
gap: 1.5rem;
.index-letters {
display: flex;
align-items: flex-start;
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;
&__header {
--heading-margin-bottom: .5rem;
}
&__letter {
display: grid;
place-content: center;
font-size: var(--fs-xxs);
font-weight: var(--font-weight-strong);
line-height: 1;
border-radius: var(--layout-border-radius-small);
height: 2rem;
width: 2rem;
transition: color, background-color;
transition-duration: var(--transition-duration);
&__item {
font-size: var(--fs-dxs);
line-height: 1.3;
}
&__title {
color: var(--heading-link-color);
font-weight: var(--font-weight-heading);
&:hover {
color: var(--heading-link-color-hover);
&:not([disabled]):hover {
background: var(--pagination-background);
color: var(--pagination-color);
}
}
&__meta {
color: var(--fg-700);
margin-top: 0.25rem;
}
}