Add project status banners, re-style blockquotes

This commit is contained in:
Ben Goldsworthy 2021-02-14 13:26:05 +00:00
parent 5d4d85a69f
commit d92a493315
2 changed files with 53 additions and 6 deletions

View file

@ -264,11 +264,30 @@ html {
article.tile > header { article.tile > header {
grid-area: tile-details; grid-area: tile-details;
grid-template-columns: 5px auto 5px; grid-template-columns: 5px auto 5px;
grid-template-rows: auto auto; grid-template-rows: 0 1.2em auto auto;
grid-template-areas: grid-template-areas:
". . ."
". banner ."
". tile-title ." ". tile-title ."
". tile-subtitle ."; ". tile-subtitle .";
} }
article.tile > header > .status-banner {
grid-area: banner;
width: 80%;
margin: auto;
border-radius: 0px 0px 10px 10px;
text-align: center;
text-decoration: none !important;
}
article.tile > header > .status-banner--ongoing {
background-color: #cfea6b;
}
article.tile > header > .status-banner--on-hold {
background-color: #e8963e;
}
article.tile > header > .status-banner--cancelled {
background-color: #a54a4a;
}
article.tile > header > h1 { article.tile > header > h1 {
grid-area: tile-title; grid-area: tile-title;
align-self: end; align-self: end;
@ -805,13 +824,33 @@ q, blockquote {
q.guillemets { q.guillemets {
quotes: "«" "»" "«" "»"; quotes: "«" "»" "«" "»";
} }
q:before, blockquote:not(.no-first-quote) p:first-of-type::before { q:before, blockquote:not(.no-first-quote) > p:first-of-type::before {
content: open-quote; content: open-quote;
} }
q:after, blockquote:not(.no-last-quote) p:last-of-type::after { q:after, blockquote:not(.no-last-quote) > p:last-of-type::after {
content: close-quote; content: close-quote;
} }
blockquote.script {
display: grid;
grid-template-columns: auto 1fr;
padding-bottom: 0.4em;
}
blockquote.script > p::before,
blockquote.script > p::after {
content: none !important;
}
blockquote.script > .script-line__character {
grid-column: 1;
margin-right: 1.25em;
}
blockquote.script > .script-line__text {
grid-column: 2;
}
i, em { i, em {
font-style: italic; font-style: italic;
} }
@ -1127,7 +1166,7 @@ main#split-page > #wrapper > .body {
text-align: left; text-align: left;
padding: 0 2em 2em 2em; padding: 0 2em 2em 2em;
} }
main#split-page > #wrapper > .body blockquote:first-of-type:not(.no-first-blockquote) { main#split-page > #wrapper:not(.quotes) > .body blockquote:first-of-type:not(.no-first-blockquote) {
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
margin: 0; margin: 0;

View file

@ -14,7 +14,9 @@
$has_one_external_link = count( get_post_meta( get_the_ID(), 'External_Link', false ) ) === 1; $has_one_external_link = count( get_post_meta( get_the_ID(), 'External_Link', false ) ) === 1;
$has_body_content = ! ! get_the_content(); $has_body_content = ! ! get_the_content();
$links_externally = $has_one_external_link && ! $has_body_content; $links_externally = $has_one_external_link && ! $has_body_content;
$post_link = ( $links_externally ) ? get_post_meta( get_the_ID(), 'External_Link', true ) : get_the_permalink(); $split_link = explode( ';;', get_post_meta( get_the_ID(), 'External_Link', true ) );
$link_href = ( count( $split_link ) > 1 ) ? $split_link[1] : $split_link[0];
$post_link = ( $links_externally ) ? $link_href : get_the_permalink( get_the_ID() );
?> ?>
<a class="item" href="<?php echo esc_url( $post_link ); ?>"<?php echo ( $links_externally ) ? ' target="_blank" rel="noopener noreferrer"' : ''; ?>> <a class="item" href="<?php echo esc_url( $post_link ); ?>"<?php echo ( $links_externally ) ? ' target="_blank" rel="noopener noreferrer"' : ''; ?>>
<article id="post-<?php the_ID(); ?>" class="tile col-m-6 col-4 col-w-3" style="background-image: url('<?php the_post_thumbnail_url(); ?>');"> <article id="post-<?php the_ID(); ?>" class="tile col-m-6 col-4 col-w-3" style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
@ -28,6 +30,12 @@
} }
?> ?>
<header> <header>
<?php
$post_status = get_post_meta( get_the_ID(), 'Status', true );
if ( $post_status ) :
?>
<span class="status-banner status-banner--<?php echo esc_attr( lcfirst( $post_status ) ); ?>"><?php echo wp_kses_post( $post_status ); ?></span>
<?php endif; ?>
<h1 class="<?php echo esc_attr( $small ); ?> post-title"> <h1 class="<?php echo esc_attr( $small ); ?> post-title">
<?php echo wp_kses_post( get_the_title() ); ?> <?php echo wp_kses_post( get_the_title() ); ?>
</h1> </h1>