diff --git a/wp-content/themes/vf-wp-news/archive.php b/wp-content/themes/vf-wp-news/archive.php index 1273ed626..b0beb58a3 100644 --- a/wp-content/themes/vf-wp-news/archive.php +++ b/wp-content/themes/vf-wp-news/archive.php @@ -27,11 +27,9 @@ ?> -<section class="vf-inlay"> - <div class="vf-inlay__content" style="background-color: #fff;"> - <main class="vf-inlay__content--full-width category-container"> - <div> - <h3 class="vf-section-header__heading vf-u-margin__bottom--md"><?php wp_title(''); ?></h3> + + <div class="vf-grid"> + <h3 class="vf-text vf-text-heading--1 | vf-u-margin__bottom--xl" style="font-weight: 400;"><?php wp_title(''); ?></h3> </div> <div class="vf-grid vf-grid__col-3 category-latest"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); @@ -39,9 +37,12 @@ <?php include(locate_template('partials/vf-summary--article.php', false, false)); ?> <?php endwhile; endif; ?> </div> - <?php vf_pagination();?> - </main> - </div> + <div class="vf-grid" style="margin: 4%"> <?php vf_pagination(); + ?> +</div> + +<section class="vf-inlay"> + <?php include(locate_template('partials/archive-container.php', false, false)); ?> diff --git a/wp-content/themes/vf-wp-news/author.php b/wp-content/themes/vf-wp-news/author.php index c990dd113..31f2a8e1c 100644 --- a/wp-content/themes/vf-wp-news/author.php +++ b/wp-content/themes/vf-wp-news/author.php @@ -27,30 +27,24 @@ } ?> -<section class="vf-inlay"> - <div class="vf-inlay__content | vf-u-background-color--green--dark | vf-u-padding__top--0 | author-container"> - <main class="vf-inlay__content--full-width"> - <div class="vf-grid | pow-article"> - <div class="vf-content | pow-article-summary"> - <h3 class="vf-links__heading | vf-u-margin__top--sm | author-heading">About the author</h3> + <div class="vf-grid | vf-u-background-color--green--dark | vf-u-padding__bottom--md | vf-u-margin__bottom--xxl"> + <div class="vf-u-margin__right--xl vf-u-margin__left--xl"> + <h3 class="vf-text vf-text-heading--2 | vf-u-margin__top--sm" style="font-weight: 200; color: #d0d0ce;"><em>About the author</em></h3> <div class="vf-grid | vf-u-padding--0 | author-summary" style="max-width: fit-content;"> <div class="author-avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 90 ); ?> </div> <div class="vf-content | author-description"> - <h4 class="author-name"><?php the_author(); ?></h4> - <p class="vf-summary__text"><?php echo nl2br(get_the_author_meta('description')); ?> </p> - <i class="fas fa-envelope" style="font-size: 16px;"></i><p class="vf-summary__text" style="display: inline-block;"><?php echo nl2br(get_the_author_meta('email')); ?></p> + <h2 class="vf-u-text-color--ui--white | vf-u-margin__top--0" style="font-weight: 400;"><?php the_author(); ?></h2> + <p class="vf-u-text-color--grey--lightest"><?php echo nl2br(get_the_author_meta('description')); ?> </p> + <i class="fas fa-envelope" style="font-size: 14px;"></i><p class="vf-text--body vf-text-body--5 | vf-u-text-color--ui--white" style="display: inline-block;"><?php echo nl2br(get_the_author_meta('email')); ?></p> </div> </div> </div> - </div> - </main> </div> - <div class="vf-inlay__content | vf-u-background-color-ui--white"> - <main class="vf-inlay__content--full-width"> - <div> + + <div class="vf-grid"> <h3 class="vf-section-header__heading vf-u-margin__bottom--md">Articles by <?php the_author(); ?></h3> </div> <div class="vf-grid | vf-grid__col-3 | category-latest"> @@ -66,30 +60,29 @@ <?php include(locate_template('partials/vf-summary--article.php', false, false)); ?> <?php endwhile; endif; ?> </div> - <?php vf_pagination(); + <div class="vf-grid" style="margin: 4%"> <?php vf_pagination(); ?> - </main> - </div> +</div> + - <div class="vf-inlay__content vf-u-background-color-ui--off-white"> + + +<section class="vf-inlay"> + <div class="vf-inlay__content | vf-u-background-color-ui--off-white | vf-u-margin__bottom--xs"> <main class="vf-inlay__content--full-width"> - <div class="embl-grid | category-latest | category-top-stories"> - <div style="min-width: 141px;"> - <h3 class="vf-section-header__heading">Popular</h3> - </div> - <div class="vf-grid vf-grid__col-3"> - <?php $popular = new WP_Query(array('posts_per_page'=>3, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC', 'author__in' => $user_id)); + <h3 class="vf-section-header__heading | vf-u-margin__bottom--md">Popular</h3> + <div class="vf-grid vf-grid__col-3"> + <?php $popular = new WP_Query(array('posts_per_page'=>3, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC', 'author__in' => $user_id)); while ($popular->have_posts()) : $popular->the_post(); - include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false));?> + include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false));?> <?php endwhile; wp_reset_postdata(); ?> - </div> </div> </main> </div> - + <?php include(locate_template('partials/embletc-container.php', false, false)); ?> - + <?php include(locate_template('partials/newsletter-container.php', false, false)); ?> - + </section> <?php get_template_part('partials/footer'); ?> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/category.php b/wp-content/themes/vf-wp-news/category.php index 23fb1eb7b..79b8ea520 100644 --- a/wp-content/themes/vf-wp-news/category.php +++ b/wp-content/themes/vf-wp-news/category.php @@ -26,35 +26,30 @@ } ?> -<section class="vf-inlay"> - <div class="vf-inlay__content | vf-u-background-color-ui--white"> - <main class="vf-inlay__content--full-width | category-container"> - <div> - <h2 class="vf-text vf-text-heading--1 | vf-u-margin__bottom--xl"><?php wp_title(''); ?></h2> + <div class="vf-grid"> + <h2 class="vf-text vf-text-heading--1 | vf-u-margin__bottom--xl" style="font-weight: 400;"><?php wp_title(''); ?></h2> </div> - <div class="vf-section-header vf-u-margin__bottom--md"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php site_url(); ?>/archive"> Latest <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> <div class="vf-grid vf-grid__col-3 | category-latest"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); if ( $post->ID == $do_not_duplicate ) continue; ?> <?php include(locate_template('partials/vf-summary--article.php', false, false)); ?> <?php endwhile; endif; ?> </div> + <div class="vf-grid" style="margin: 4%"> + <?php vf_pagination(); ?> - </main> - </div> +</div> - <div class="vf-inlay__content vf-u-background-color-ui--off-white"> + +<section class="vf-inlay"> + <div class="vf-inlay__content | vf-u-background-color-ui--off-white | vf-u-margin__bottom--xs"> <main class="vf-inlay__content--full-width"> - <div class="embl-grid | category-latest | category-top-stories"> - <div style="min-width: 150px;"> - <h3 class="vf-section-header__heading ">Popular</h3> - </div> - <div class="vf-grid vf-grid__col-3"> - <?php $popular = new WP_Query(array('posts_per_page'=>3, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC', 'cat' => get_query_var('cat'))); + <h3 class="vf-section-header__heading | vf-u-margin__bottom--md">Popular</h3> + <div class="vf-grid vf-grid__col-3"> + <?php $popular = new WP_Query(array('posts_per_page'=>3, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC', 'cat' => get_query_var('cat'))); while ($popular->have_posts()) : $popular->the_post(); - include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> + include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; wp_reset_postdata(); ?> - </div> </div> </main> </div> @@ -62,6 +57,8 @@ <?php include(locate_template('partials/embletc-container.php', false, false)); ?> <?php include(locate_template('partials/newsletter-container.php', false, false)); ?> + + </section> + -</section> <?php get_template_part('partials/footer');?> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/functions.php b/wp-content/themes/vf-wp-news/functions.php index bc8f89887..b58aef7c4 100644 --- a/wp-content/themes/vf-wp-news/functions.php +++ b/wp-content/themes/vf-wp-news/functions.php @@ -58,11 +58,8 @@ function add_slug_class_wp_list_categories($list) { return $list; } - ?> -<?php - // POPULAR POSTS function shapeSpace_popular_posts($post_id) { @@ -104,7 +101,7 @@ function add_class_to_category( $thelist, $separator, $parents){ function mag1_widgets_init() { register_sidebar( array( - 'name' => 'Magazine right', + 'name' => 'Magazine cover right', 'id' => 'magazine_cover_1', 'before_widget' => '<div>', 'after_widget' => '</div>', diff --git a/wp-content/themes/vf-wp-news/index.php b/wp-content/themes/vf-wp-news/index.php index 630c8c3aa..698cd772d 100644 --- a/wp-content/themes/vf-wp-news/index.php +++ b/wp-content/themes/vf-wp-news/index.php @@ -42,9 +42,10 @@ ?> -<section class="vf-inlay | vf-u-background-color--white"> - <section class="vf-inlay__content | vf-u-background-color-ui--grey | hero-container"> - <main class="vf-inlay__content--main | hero-left-column | vf-content vf-u-margin--0"> +<section class="vf-inlay | vf-u-background-color--white vf-u-margin__bottom--xxl"> + +<section class="vf-inlay__content | vf-u-background-color-ui--grey | hero-container"> + <main class="vf-inlay__content--main | hero-left-column | vf-content | vf-u-margin__bottom--md"> <?php $mainPostLoop = new WP_Query (array('posts_per_page' => 1, 'meta_key' => 'featured', 'meta_value' => '1' )); $ids = array(); @@ -61,109 +62,112 @@ 'meta_value' => '1' )); while ($cardsPostLoop->have_posts()) : $cardsPostLoop->the_post(); $ids[] = get_the_ID(); ?> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> </main> </section> - <div class="vf-inlay__content vf-u-background-color-ui--white"> - <main class="vf-inlay__content--full-width | latest-posts-container"> - <div class="embl-grid latest"> - <div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php site_url(); ?>archive.php"> Latest <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> - <div class="vf-grid vf-grid__col-3"> - <?php - $latestPostLoop = new WP_Query(array('post__not_in' => $ids, 'posts_per_page' => 3, 'category__not_in' => 487)); +</section> +<!-- Latest --> +<section class="vf-summary-container | embl-grid" style="grid-column-gap: 0;"> + +<div class="vf-section-header | vf-u-margin__bottom--md"> +<a href="<?php site_url(); ?>/archive" class="vf-section-header__heading vf-section-header__heading--is-link">Latest <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"/></svg></a></div> + +<div class="vf-section-content | vf-grid vf-grid__col-3"> +<?php + $latestPostLoop = new WP_Query(array('post__not_in' => $ids, 'posts_per_page' => 6, 'category__not_in' => 487)); while ($latestPostLoop->have_posts()) : $latestPostLoop->the_post(); ?> <?php $ids[] = get_the_ID(); ?> - <?php include(locate_template('partials/vf-summary--article.php', false, false)); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> - </div> - </div> - - <div class="embl-grid latest"> - <div> - </div> - <div class="vf-grid vf-grid__col-3"> - <?php - $latestPostLoop2 = new WP_Query(array('post__not_in' => $ids, 'posts_per_page' => 3, 'category__not_in' => 487)); - while ($latestPostLoop2->have_posts()) : $latestPostLoop2->the_post(); ?> - <?php $ids[] = get_the_ID(); ?> - <?php include(locate_template('partials/vf-summary--article.php', false, false)); ?> - <?php endwhile; ?> - <?php wp_reset_postdata(); ?> +</div> + +</section> - </div> - </div> - <hr class="vf-divider"> +<hr style="grid-column: 1 / -1; height: 1px; background: #d0d0ce; width: 100%; border: 0; margin-bottom: 48px;"> - <div class="embl-grid latest"> - <div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php echo esc_url( $science_link ); ?>"> Science <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> - <div class="vf-grid vf-grid__col-3"> - <?php - $scienceLoop = new WP_Query(array('category_name' => 'science', 'post__not_in' => $ids, 'posts_per_page' => 3)); - while ($scienceLoop->have_posts()) : $scienceLoop->the_post(); ?> - <?php $ids[] = get_the_ID(); ?> +<!-- Science --> +<section class="vf-summary-container | embl-grid" style="grid-column-gap: 0;"> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> +<div class="vf-section-header | vf-u-margin__bottom--md"> +<a href="<?php echo esc_url( $science_link ); ?>" class="vf-section-header__heading vf-section-header__heading--is-link">Science <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"/></svg></a></div> + +<div class="vf-section-content | vf-grid vf-grid__col-3"> +<?php + $latestPostLoop = new WP_Query(array('category_name' => 'science','post__not_in' => $ids, 'posts_per_page' => 3)); + while ($latestPostLoop->have_posts()) : $latestPostLoop->the_post(); ?> + <?php $ids[] = get_the_ID(); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> - </div> - </div> - <hr class="vf-divider"> +</div> - <div class="embl-grid latest"> - <div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php echo esc_url( $lab_link ); ?>"> Lab Matters <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> +</section> +<hr style="grid-column: 1 / -1; height: 1px; background: #d0d0ce; width: 100%; border: 0; margin-bottom: 48px;"> +<!-- Lab Matters --> +<section class="vf-summary-container | embl-grid" style="grid-column-gap: 0;"> - <div class="vf-grid vf-grid__col-3"> - <?php - $labMattersLoop = new WP_Query(array('category_name' => 'lab-matters','post__not_in' => $ids, 'posts_per_page' => 3)); - while ($labMattersLoop->have_posts()) : $labMattersLoop->the_post(); ?> - <?php $ids[] = get_the_ID(); ?> +<div class="vf-section-header | vf-u-margin__bottom--md"> +<a href="<?php echo esc_url( $lab_link ); ?>" class="vf-section-header__heading vf-section-header__heading--is-link">Lab Matters <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"/></svg></a></div> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> +<div class="vf-section-content | vf-grid vf-grid__col-3"> +<?php + $latestPostLoop = new WP_Query(array('category_name' => 'lab-matters','post__not_in' => $ids, 'posts_per_page' => 3)); + while ($latestPostLoop->have_posts()) : $latestPostLoop->the_post(); ?> + <?php $ids[] = get_the_ID(); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> - </div> - </div> - <hr class="vf-divider"> +</div> + +</section> +<hr style="grid-column: 1 / -1; height: 1px; background: #d0d0ce; width: 100%; border: 0; margin-bottom: 48px;"> - <div class="embl-grid latest"> - <div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php echo esc_url( $alumni_link ); ?>"> Alumni <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> +<!-- Alumni --> +<section class="vf-summary-container | embl-grid" style="grid-column-gap: 0;"> - <div class="vf-grid vf-grid__col-3"> - <?php - $alumniLoop = new WP_Query(array('category_name' => 'alumni','post__not_in' => $ids, 'posts_per_page' => 3)); - while ($alumniLoop->have_posts()) : $alumniLoop->the_post(); ?> - <?php $ids[] = get_the_ID(); ?> +<div class="vf-section-header | vf-u-margin__bottom--md"> +<a href="<?php echo esc_url( $alumni_link ); ?>" class="vf-section-header__heading vf-section-header__heading--is-link">Alumni <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"/></svg></a></div> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> +<div class="vf-section-content | vf-grid vf-grid__col-3"> +<?php + $latestPostLoop = new WP_Query(array('category_name' => 'alumni','post__not_in' => $ids, 'posts_per_page' => 3)); + while ($latestPostLoop->have_posts()) : $latestPostLoop->the_post(); ?> + <?php $ids[] = get_the_ID(); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> - </div> - </div> - <hr class="vf-divider"> +</div> + +</section> +<hr style="grid-column: 1 / -1; height: 1px; background: #d0d0ce; width: 100%; border: 0; margin-bottom: 48px;"> - <div class="embl-grid latest"> - <div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="<?php echo esc_url( $events_link ); ?>"> Events <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a></div> +<!-- Events --> +<section class="vf-summary-container | embl-grid" style="grid-column-gap: 0;"> - <div class="vf-grid vf-grid__col-3"> - <?php - $eventsLoop = new WP_Query(array('category_name' => 'events','post__not_in' => $ids, 'posts_per_page' => 3)); - while ($eventsLoop->have_posts()) : $eventsLoop->the_post(); ?> +<div class="vf-section-header | vf-u-margin__bottom--md"> +<a href="<?php echo esc_url( $events_link ); ?>" class="vf-section-header__heading vf-section-header__heading--is-link">Events <svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"/></svg></a></div> + +<div class="vf-section-content | vf-grid vf-grid__col-3"> +<?php + $latestPostLoop = new WP_Query(array('category_name' => 'events','post__not_in' => $ids, 'posts_per_page' => 3)); + while ($latestPostLoop->have_posts()) : $latestPostLoop->the_post(); ?> <?php $ids[] = get_the_ID(); ?> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> - </div> - </div> - </main> - </div> + +</div> + +</section> + <?php include(locate_template('partials/pow-container.php', false, false)); ?> diff --git a/wp-content/themes/vf-wp-news/partials/archive-container.php b/wp-content/themes/vf-wp-news/partials/archive-container.php index d417be7fa..1a466aa4b 100644 --- a/wp-content/themes/vf-wp-news/partials/archive-container.php +++ b/wp-content/themes/vf-wp-news/partials/archive-container.php @@ -2,10 +2,9 @@ <main class="vf-inlay__content--full-width | vf-u-margin--0"> <div class="vf-grid" style="--page-grid-gap: 0px;"> <div class="vf-links vf-links--tight vf-links__list--s"> - <h3 class="vf-links__heading">Last 6 months</h3> <i - class="fas fa-arrow-circle-right"></i> + <h3 class="vf-links__heading">Last 6 months:</h3> </div> - <div class="vf-links vf-links--tight vf-links__list--s | border-right"> + <div class="vf-links vf-links--tight vf-links__list--s"> <ul class="vf-links__list vf-links__list--secondary | vf-list"> <?php $args = array( @@ -23,7 +22,7 @@ class="fas fa-arrow-circle-right"></i> </div> <div class="vf-links vf-links--tight vf-links__list--s | vf-u-padding__left--lg"> - <h3 class="vf-links__heading">By year</h3> <i class="fas fa-arrow-circle-right"></i> + <h3 class="vf-links__heading">By year:</h3> </div> <div class="vf-links vf-links--tight vf-links__list--s | vf-u-background-color--gre | "> <ul class="vf-links__list vf-links__list--secondary | vf-list"> @@ -42,8 +41,8 @@ class="fas fa-arrow-circle-right"></i> </ul> </div> - <div class="vf-links vf-links--tight vf-links__list--s| vf-u-padding__left--lg | border-left"> - <h3 class="vf-links__heading">By topics</h3> <i class="fas fa-arrow-circle-right"></i> + <div class="vf-links vf-links--tight vf-links__list--s| vf-u-padding__left--lg"> + <h3 class="vf-links__heading">By topics:</h3> </div> <div class="vf-links vf-links--tight vf-links__list--s"> <ul class="vf-links__list vf-links__list--secondary | vf-list"> @@ -58,4 +57,4 @@ class="fas fa-arrow-circle-right"></i> </div> </div> </main> - </div> \ No newline at end of file + </div> diff --git a/wp-content/themes/vf-wp-news/partials/embletc-container.php b/wp-content/themes/vf-wp-news/partials/embletc-container.php index 411629f01..a201d6c1e 100644 --- a/wp-content/themes/vf-wp-news/partials/embletc-container.php +++ b/wp-content/themes/vf-wp-news/partials/embletc-container.php @@ -1,38 +1,35 @@ <div class="embl-grid | vf-u-padding__top--xs | vf-u-margin__bottom--xs | embl-etc-container" style="grid-column-gap: 0"> <div class="embl-etc-left-col | vf-u-background-color--blue--dark | vf-u-margin__right--0"> - <h3 class="vf-text vf-text-heading--2 | embl-etc | embl-etc-heading">EMBLetc.</h3> + <h3 class="vf-text vf-text-heading--2 | vf-u-text-color--ui--white |embl-etc | embl-etc-heading">EMBLetc.</h3> </div> - <div class="embl-etc-right-col | vf-u-background-color--blue | vf-u-padding--md"> + <div class="embl-etc-right-col | vf-u-background-color--blue | vf-u-text-color--ui--white | vf-u-padding--md"> <h3 class="vf-text vf-text-heading--4 | embl-etc">Read the latest Issues of our magazine - <span style="font-style: italic;">EMBLetc.</span></h3> <div class="vf-grid | vf-grid__col-2"> <div class="magazine"> - <?php if ( is_active_sidebar( 'magazine_cover_1' ) ) : ?> + <?php if ( is_active_sidebar( 'magazine_cover_2' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> - <?php dynamic_sidebar( 'magazine_cover_1' ); ?> + <?php dynamic_sidebar( 'magazine_cover_2' ); ?> </div><?php endif; ?> <?php if ( is_active_sidebar( 'topics_left' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'topics_left' ); ?> </div><?php endif; ?> - - <a class="vf-link | magazine-download" href="https://www.embl.de/aboutus/communication_outreach/publications/newsletter/issues/issue93.pdf">Download PDF</a> </div> <div class="magazine"> - <?php if ( is_active_sidebar( 'magazine_cover_2' ) ) : ?> + <?php if ( is_active_sidebar( 'magazine_cover_1' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> - <?php dynamic_sidebar( 'magazine_cover_2' ); ?> + <?php dynamic_sidebar( 'magazine_cover_1' ); ?> </div><?php endif; ?> <?php if ( is_active_sidebar( 'topics_right' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'topics_right' ); ?> </div><?php endif; ?> - <a class="vf-link | magazine-download" href="https://www.embl.de/aboutus/communication_outreach/publications/newsletter/issues/issue92.pdf">Download PDF</a> </div> </div> <p class="vf-text--body">Looking for past print editions of <span style="font-style: italic;">EMBLetc.</span>? Browse our archive, going back 20 years. </p> - <a class="vf-link | magazine-download" href="https://www.embl.de/aboutus/communication_outreach/publications/newsletter/index.html?_ga=2.67662041.995063798.1574846519-497306958.1561211067"><span style="font-style: italic;">EMBLetc.</span> Archive</a> + <a class="vf-link | magazine-download" href="https://www.embl.de/aboutus/communication_outreach/publications/newsletter/index.html?_ga=2.67662041.995063798.1574846519-497306958.1561211067" style="color: white;"><em>EMBLetc. </em>archive</a> </div> </div> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/partials/newsletter-container.php b/wp-content/themes/vf-wp-news/partials/newsletter-container.php index 6b7f549c8..bbbce1182 100644 --- a/wp-content/themes/vf-wp-news/partials/newsletter-container.php +++ b/wp-content/themes/vf-wp-news/partials/newsletter-container.php @@ -1,4 +1,4 @@ -<div class="vf-grid | vf-u-background-color--grey--dark | newsletter-container" style="--page-grid-gap: 0; border-top: solid 8px #A8A99E"> +<div class="vf-grid | vf-u-background-color--grey--dark | vf-u-text-color--ui--white | newsletter-container" style="--page-grid-gap: 0; border-top: solid 8px #A8A99E"> <div class="vf-u-background-color--grey--dark| vf-u-padding--md"> <h3 class="vf-text vf-text-heading--4 | newsletter-title">Subscribe to our monthly e-newsletter</h3> <form action="" class="vf-form"> @@ -12,16 +12,16 @@ </form> </div> <div class="vf-u-background-color--grey--dark | vf-u-padding--md"> - <h3 class="vf-text vf-text-heading--4 | newsletter-title">Newsletter Archive</h3> + <h3 class="vf-text vf-text-heading--4">Newsletter Archive</h3> <a href="https://us19.campaign-archive.com/home/?u=0e036bd015172d9634dbdba98&id=35e7ef8d6f" class="vf-link press-link" style="color: white;">Read past editions of our monthly e-newsletter</a> </div> <div class="vf-u-background-color--grey--dark | vf-u-padding--md"> - <h3 class="vf-text vf-text-heading--4 | newsletter-title">For press</h3> + <h3 class="vf-text vf-text-heading--4">For press</h3> <a href="http://www.embl.de/aboutus/communication_outreach/media_relations/index.html?_ga=2.70344536.995063798.1574846519-497306958.1561211067" class="vf-link | vf-u-padding__bottom--sm | press-link" style="color: white;">Press release archive</a> <a href="https://www.embl.de/aboutus/communication_outreach/media_relations/index.html" class="vf-link | vf-u-padding__bottom--sm | press-link" style="color: white;">Contact Press Office</a> </div> <div class="vf-u-background-color--grey--dark | vf-u-padding--md"> - <h3 class="vf-text vf-text-heading--4 | newsletter-title">Follow us</h3> + <h3 class="vf-text vf-text-heading--4">Follow us</h3> <a href="https://twitter.com/embl"><i class="social fab fa-twitter-square"></i></a> <a href="https://www.facebook.com/embl.org/"><i class="social fab fa-facebook-square"></i></a> <a href="https://www.linkedin.com/company/embl/"><i class="social fab fa-linkedin"></i></a> diff --git a/wp-content/themes/vf-wp-news/partials/pow-container.php b/wp-content/themes/vf-wp-news/partials/pow-container.php index dd5ea2bce..f592ddbd3 100644 --- a/wp-content/themes/vf-wp-news/partials/pow-container.php +++ b/wp-content/themes/vf-wp-news/partials/pow-container.php @@ -4,13 +4,17 @@ while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <div class="vf-grid | vf-grid__col-2 | pow-article"> - <div class="pow-article-summary | vf-u-padding__top--xl"> - <a href="<?php echo esc_url( $pow_link ); ?>" class="vf-links__heading | pow-heading vf-section-header__heading--is-link">Picture of the - week<svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" style="color: #18974C;" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a> - <div class="vf-u-margin__top--xl | vf-u-margin__bottom--md | pow-title"> - <a href="<?php the_permalink(); ?>" class="vf-summary__link"><?php echo the_title(); ?></a> + <div class="vf-u-padding__top--xl"> + <a href="<?php echo esc_url( $pow_link ); ?>" class="vf-links__heading | vf-section-header__heading--is-link | vf-text vf-text-heading--2" style="font-weight: 200; color: #d0d0ce;"><em>Picture of the + week</em><svg class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" style="color: #18974C;" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></a> + <div class="vf-u-margin__top--xl | vf-u-margin__bottom--md"> + <a href="<?php the_permalink(); ?>" class="vf-text--body vf-text-body--2 | vf-link vf-link--secondary" style="color: white;"><?php echo the_title(); ?></a> </div> - <p class="vf-summary__text"><?php echo get_the_excerpt(); ?></p> + <p class="vf-summary__text | vf-u-text-color--grey--lightest"><?php echo get_the_excerpt(); ?></p> + <span class="vf-summary__meta | vf-u-margin__bottom--xs vf-u-margin__top--xs"> + <p class="vf-summary__meta vf-u-text-color--ui--white">By + <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>" style="color: #18974C;"><?php the_author(); ?></a></p> + </span> </div> <a href="<?php the_permalink(); ?>" style="margin-top: auto; margin-bottom: auto;"> <div class="post-image" style="display: flex;"><?php the_post_thumbnail(); ?></div> diff --git a/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt-no-border.php b/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt-no-border.php new file mode 100644 index 000000000..ae5a21aaa --- /dev/null +++ b/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt-no-border.php @@ -0,0 +1,23 @@ +<?php + +$title = esc_html(get_the_title()); +$author_url = get_author_posts_url(get_the_author_meta('ID')); + +?> +<div class="vf-card vf-card--very-easy | vf-u-margin__bottom--md"> +<a style="display: flex;" href="<?php the_permalink(); ?>"> +<?php the_post_thumbnail( 'full', array( 'class' => 'vf-card__image' ) ); ?> + </a> + <div class="vf-card__content"> + <h3 class="vf-card__title"> + <a href="<?php the_permalink(); ?>" class="vf-link vf-link--secondary"><?php echo $title; ?></a> + </h3> + <time class="vf-summary__date vf-u-text-color--grey" style="margin-left: 0;" title="<?php the_time('c'); ?>" + datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time> + <span class="vf-summary__meta | vf-u-margin__bottom--xs "> + <p class="vf-summary__meta vf-u-margin__bottom--xs vf-u-margin__top--xs">By <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>" + ><?php the_author(); ?></a></p> + <p class="vf-summary__meta vf-u-margin__bottom--xs"><a class="vf-link"><?php echo get_the_category_list(','); ?> </a><?php echo reading_time(); ?> read</p> + </span> + </div> +</div> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt.php b/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt.php new file mode 100644 index 000000000..830159a9d --- /dev/null +++ b/wp-content/themes/vf-wp-news/partials/vf-card--article-no-excerpt.php @@ -0,0 +1,23 @@ +<?php + +$title = esc_html(get_the_title()); +$author_url = get_author_posts_url(get_the_author_meta('ID')); + +?> +<div class="vf-card vf-card--normal vf-card-theme--primary vf-u-margin__bottom--md"> +<a style="display: flex;" href="<?php the_permalink(); ?>"> +<?php the_post_thumbnail( 'full', array( 'class' => 'vf-card__image' ) ); ?> + </a> + <div class="vf-card__content"> + <h3 class="vf-card__title"> + <a href="<?php the_permalink(); ?>" class="vf-link vf-link--secondary"><?php echo $title; ?></a> + </h3> + <time class="vf-summary__date vf-u-text-color--grey" style="margin-left: 0;" title="<?php the_time('c'); ?>" + datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time> + <span class="vf-summary__meta | vf-u-margin__bottom--xs "> + <p class="vf-summary__meta vf-u-margin__bottom--xs vf-u-margin__top--xs">By <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>" + ><?php the_author(); ?></a></p> + <p class="vf-summary__meta vf-u-margin__bottom--xs"><a class="vf-link"><?php echo get_the_category_list(','); ?> </a><?php echo reading_time(); ?> read</p> + </span> + </div> +</div> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/partials/vf-masthead.php b/wp-content/themes/vf-wp-news/partials/vf-masthead.php index 347515171..368e9f634 100644 --- a/wp-content/themes/vf-wp-news/partials/vf-masthead.php +++ b/wp-content/themes/vf-wp-news/partials/vf-masthead.php @@ -7,7 +7,7 @@ <div data-vf-js-masthead class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreground-default) );"> <div class="vf-masthead__inner"> - <div class="vf-masthead__title" style="margin-left: 12px;"> + <div class="vf-masthead__title"> <h1 class="vf-masthead__heading"> <a class="vf-masthead__heading__link" href="<?php echo get_home_url(); ?>">EMBL News</a> </h1> diff --git a/wp-content/themes/vf-wp-news/partials/vf-summary--article--color.php b/wp-content/themes/vf-wp-news/partials/vf-summary--article--color.php index 2ed38fb9a..71d447d77 100644 --- a/wp-content/themes/vf-wp-news/partials/vf-summary--article--color.php +++ b/wp-content/themes/vf-wp-news/partials/vf-summary--article--color.php @@ -4,34 +4,41 @@ $author_url = get_author_posts_url(get_the_author_meta('ID')); ?> -<article class="vf-summary vf-summary--article" style="background-color: <?php the_field('color'); ?>"> - <div class="post-image"> - <a style="display: grid;" href="<?php the_permalink(); ?>"> + +<style> + .category-link-color a.vf-link:visited, + .category-link-color a.vf-link:hover, + .category-link-color a.vf-link { + color: <?php the_field('link_color'); ?> + } +</style> + +<article class="vf-summary vf-summary--article vf-u-margin__bottom--md" style="background-color: <?php the_field('color'); ?>; min-height: 100%;"> + <!-- <div class="post-image"> --> + <a style="display: flex;" href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(); ?> </a> - <div class="overlay"> + <!-- <div class="overlay"> <p class="vf-u-margin--0"> - <?php the_field('image_caption'); ?> </p> - </div> + </div> --> </div> - <div class="article-summary" style="background-color: <?php the_field('color'); ?>"> + <div class="article-summary" style="background-color: <?php the_field('color'); ?>; padding: 0 16px 0 16px;"> <h2 class="vf-summary__title | vf-u-margin__top--sm"> - <a href="<?php the_permalink(); ?>" class="vf-summary__link"><?php echo $title; ?></a> + <a href="<?php the_permalink(); ?>" class="vf-link vf-link--secondary | vf-text vf-text-heading--2" style="color: white;"><?php echo $title; ?></a> </h2> - <p class="vf-summary__text"><?php echo get_the_excerpt(); ?></p> - <time class="vf-summary__date" style="margin-left: 0; color: #d0d0ce;" title="<?php the_time('c'); ?>" + <p class="vf-summary__text vf-u-text-color--ui--white"><?php echo get_the_excerpt(); ?></p> + <time class="vf-summary__date vf-u-text-color--ui--grey" style="margin-left: 0;" title="<?php the_time('c'); ?>" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time> <span class="vf-summary__meta | vf-u-margin__bottom--xs vf-u-margin__top--xs"> - <p class="vf-summary__meta">By </p> + <p class="vf-summary__meta vf-u-text-color--ui--white">By </p> <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>" style="color: <?php the_field('link_color'); ?>"><?php the_author(); ?></a> </span> - <div class="vf-summary__meta topics-info"> - <p class="vf-summary__meta">Topics: </p><a class="vf-link" - style="color: <?php the_field('link_color'); ?>"><?php the_category(); ?> </a> - <p class="vf-summary__meta"><?php echo reading_time(); ?> read</p> - - </div> + <span class="vf-summary__meta | category-link-color"> + <a class="vf-summary__meta" style="color: <?php the_field('link_color'); ?>"><?php echo get_the_category_list(','); ?> </a> + <p class="vf-summary__meta vf-u-text-color--ui--white"><?php echo reading_time(); ?> read</p> + </span> </div> -</article> \ No newline at end of file +</article> + diff --git a/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-excerpt.php b/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-excerpt.php index 01669f294..9cab3a542 100644 --- a/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-excerpt.php +++ b/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-excerpt.php @@ -5,25 +5,24 @@ ?> <article class="vf-summary vf-summary--article"> - <div class="post-image"> - <a style="display: grid;" href="<?php the_permalink(); ?>"> - <?php the_post_thumbnail(); ?> - </a> - </div> + <div class="post-image"> + <a style="display: grid;" href="<?php the_permalink(); ?>"> + <?php the_post_thumbnail(); ?> +</a> + </div> <div class="article-summary"> - <h3 class="vf-summary__title | vf-u-margin__bottom--sm vf-u-margin__top--sm"> + <h2 class="vf-summary__title | vf-u-margin__bottom--sm vf-u-margin__top--sm"> <a href="<?php the_permalink(); ?>" class="vf-summary__link"><?php echo $title; ?></a> - </h3> - <time class="vf-summary__date" style="margin-left: 0; margin-bottom: 4px; display: block;" title="<?php the_time('c'); ?>" + </h2> + <time class="vf-summary__date" style="margin-left: 0;" title="<?php the_time('c'); ?>" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time> <span class="vf-summary__meta | vf-u-margin__bottom--xs vf-u-margin__top--xs"> - <p class="vf-summary__meta">By </p> + <p class="vf-summary__meta">By </p> <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>"><?php the_author(); ?></a> </span> <div class="vf-summary__meta | topics-info"> - <p class="vf-summary__meta">Topics: </p><a class="vf-link"><?php the_category(); ?> </a> - <p class="vf-summary__meta"><?php echo reading_time(); ?> read</p> - + <p class="vf-summary__meta"><a class="vf-link"><?php the_category(); ?> </a></p> + <p class="vf-summary__meta"><?php echo reading_time(); ?> read</p> </div> </div> </article> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-thumbnail.php b/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-thumbnail.php index 9e58cdac1..9c1f05bef 100644 --- a/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-thumbnail.php +++ b/wp-content/themes/vf-wp-news/partials/vf-summary--article-no-thumbnail.php @@ -24,4 +24,5 @@ </span> </div> </article> -<!--/vf-summary--> \ No newline at end of file +<!--/vf-summary--> + diff --git a/wp-content/themes/vf-wp-news/partials/vf-summary--article.php b/wp-content/themes/vf-wp-news/partials/vf-summary--article.php index d59328308..99bc33b94 100644 --- a/wp-content/themes/vf-wp-news/partials/vf-summary--article.php +++ b/wp-content/themes/vf-wp-news/partials/vf-summary--article.php @@ -4,12 +4,14 @@ $author_url = get_author_posts_url(get_the_author_meta('ID')); ?> + + <article class="vf-summary vf-summary--article"> - <div class="post-image"> - <a style="display: grid;" href="<?php the_permalink(); ?>"> - <?php the_post_thumbnail(); ?> + <div> + <a style="display: grid;" href="<?php the_permalink(); ?>"> + <?php the_post_thumbnail(); ?> </a> - </div> + </div> <div class="article-summary"> <h2 class="vf-summary__title | vf-u-margin__bottom--sm vf-u-margin__top--sm"> <a href="<?php the_permalink(); ?>" class="vf-summary__link"><?php echo $title; ?></a> @@ -18,12 +20,13 @@ <time class="vf-summary__date" style="margin-left: 0;" title="<?php the_time('c'); ?>" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time> <span class="vf-summary__meta | vf-u-margin__bottom--xs vf-u-margin__top--xs"> - <p class="vf-summary__meta">By </p> + <p class="vf-summary__meta">By </p> <a class="vf-summary__author vf-summary__link" href="<?php echo $author_url; ?>"><?php the_author(); ?></a> </span> <div class="vf-summary__meta | topics-info"> - <p class="vf-summary__meta">Topics: </p><a class="vf-link"><?php the_category(); ?> </a> - <p class="vf-summary__meta"><?php echo reading_time(); ?> read</p> + <p class="vf-summary__meta"><a class="vf-link"><?php the_category(); ?> </a></p> + <p class="vf-summary__meta"><?php echo reading_time(); ?> read</p> </div> </div> </article> + diff --git a/wp-content/themes/vf-wp-news/single.php b/wp-content/themes/vf-wp-news/single.php index 35b26b984..6765a71b6 100644 --- a/wp-content/themes/vf-wp-news/single.php +++ b/wp-content/themes/vf-wp-news/single.php @@ -26,9 +26,7 @@ <p class="vf-meta__date | vf-text-body--5"><?php echo reading_time(); ?> read</p> </div> <div class="vf-meta__details"> - <p class="vf-meta__topics | vf-text-body--5">Topics: - <a class="vf-meta__topics | vf-text-body--6"><?php the_category(); ?></a> - </p> + <p class="vf-meta__topics | vf-text-body--6"><?php the_category(); ?></p> </div> </div> </div> @@ -46,7 +44,24 @@ </figcaption> </figure> <?php the_content(); ?> - <p class="vf-text--body vf-text-body--3"><?php the_tags(); ?></p> + + <hr class="vf-divider"> + + <div class="vf-links vf-links--tight vf-links__list--s | vf-u-margin__top--xxl"> + <?php if( have_rows('related_links') ): ?> + <p class="vf-text--body vf-text-body--3">Related links:</p> + <?php while( have_rows('related_links') ): the_row(); + + $source = get_sub_field('related_link'); + $description = get_sub_field('description');?> + <ul class="vf-links__list vf-links__list--secondary | vf-list"> + <li class="vf-list__item"> + <a class="vf-list__link" href="<?php echo esc_url( $source ); ?>"><?php echo esc_html($description) ?></a> + </li> + </ul> + <?php endwhile; ?> + <?php endif; ?> + </div> <div class="vf-links vf-links--tight vf-links__list--s | vf-u-margin__top--xxl"> <?php if( have_rows('article_sources') ): ?> @@ -63,6 +78,7 @@ <?php endwhile; ?> <?php endif; ?> </div> + <p class="vf-text--body vf-text-body--3"><?php the_tags(); ?></p> </div> <div class="social-share-box"> @@ -72,9 +88,9 @@ </main> <section class="vf-inlay"> - <div class="vf-inlay__content | related-posts-container vf-u-background-color-ui--off-white"> + <div class="vf-inlay__content | vf-u-background-color-ui--off-white | vf-u-margin__bottom--xs"> <main class="vf-inlay__content--full-width"> - <h3 class="vf-section-header__heading">More from this category</h3> + <h3 class="vf-section-header__heading | vf-u-margin__bottom--md">More from this category</h3> <div class="vf-grid vf-grid__col-3"> <?php $args = array( @@ -96,18 +112,18 @@ foreach( $query->posts as $post ) : setup_postdata( $post ); ?> - <?php include(locate_template('partials/vf-summary--article-no-excerpt.php', false, false)); ?> + <?php include(locate_template('partials/vf-card--article-no-excerpt-no-border.php', false, false)); ?> <?php endforeach; wp_reset_postdata(); ?> </div> </main> </div> - <?php include(locate_template('partials/pow-container.php', false, false)); ?> - + <?php include(locate_template('partials/embletc-container.php', false, false)); ?> - + <?php include(locate_template('partials/newsletter-container.php', false, false)); ?> - + </section> + <?php get_template_part('partials/footer');?> \ No newline at end of file diff --git a/wp-content/themes/vf-wp-news/style.css b/wp-content/themes/vf-wp-news/style.css index 1deb063b0..bf77a7997 100644 --- a/wp-content/themes/vf-wp-news/style.css +++ b/wp-content/themes/vf-wp-news/style.css @@ -10,22 +10,13 @@ Text Domain: vf-wp-news-main */ -/* ------ IMAGE HOVER ------ */ -.overlay { - position: absolute; - bottom: 0; - background: rgb(0, 0, 0); - color: #fff; - max-width: 100%; - transition: .1s ease; - opacity:0; - padding: 16px; - text-align: left; - } - - .post-image:hover .overlay { - opacity: 1; - } + /* ------ POW photo hover effect ------ */ + + .post-image { + position: relative; + overflow: hidden; + background-color: #000; + } .post-image img { transition: transform .1s linear; @@ -37,44 +28,29 @@ Text Domain: vf-wp-news-main filter: alpha(opacity=40); } - .post-image { - position: relative; - overflow: hidden; - background-color: #000; - } - - - /* ------ ARCHIVE ------ */ - - .border-right { - border-right: solid 1px #707372; - } - - .border-left { - border-left: solid 1px #D0D0CE; - } - + /* ------ Archive page ------ */ + .archive-container i { font-size: 19px; } - .archive-container .cat-item { - font-size: 14px; - font-weight: 400; - line-height: 1.57; - margin-bottom: 8px; - } - .archive-container { border-bottom: 8px solid #18974C; } + /* Can't add vf-link to the list generated by WP - Ask David */ + .archive-container, .archive-container a { - color: #fff; + color: #fff; + text-decoration: none; + } + + .archive-container a:hover { + text-decoration: underline; } - /* ------ NEWSLETTER ------ */ + /* ------ Newsletter ------ */ .social:hover { color: #A8A99E; @@ -84,21 +60,12 @@ Text Domain: vf-wp-news-main display: block; } - .newsletter-container .vf-link { - color: #fff; - } - .newsletter-container i { font-size: 32px; padding-right:5px; color: #fff; } - .newsletter-container .newsletter-title { - font-weight: 300; - color: #fff; - } - /* ------ EMBL ETC ------ */ .magazine { @@ -127,14 +94,6 @@ Text Domain: vf-wp-news-main box-shadow: 1px 1px 2px #333; } - .embl-etc, - .embl-etc-right-col, - .embl-etc-right-col a:hover, - .embl-etc-right-col a:visited, - .embl-etc-right-col a:visited:hover { - color: #fff; - } - .embl-etc-left-col .embl-etc-heading { margin: 5px 0 0 10px; font-size: 40px; @@ -145,69 +104,19 @@ Text Domain: vf-wp-news-main body .embl-grid > .embl-etc-left-col { margin-right: 0; } - - /* ------ AUTHOR PAGE ------ */ - - .related-posts-container .article-summary, - .category-top-stories .article-summary { - background-color: #fafafa; - } - + + /* ---Author----*/ + .author-avatar img { border-radius: 500px; } - - .author-description h4 { - color: #fff; - } - - .author-description i { + + .author-description i { color: #fff; font-size: 28px; padding-right: 10px; } - .author-heading { - color: #fff; - } - - .vf-content .author-description .author-name { - margin-top: 0; - } - - .vf-pagination { - margin: 4%; - } - - .author-latest-container .vf-summary__title { - font-size: 19px; - font-weight: 400; - margin: 16px 0; - } - - .author-latest-container .vf-summary__text { - font-size: 16px; - } - - /* ----- CATEGORY PAGE ----*/ - - article .vf-summary { - padding: 0; - } - - .category-container h2 { - font-weight: 400; - } - - .category-latest .vf-summary__title { - font-size: 24px; - font-weight: 500; - } - - .category-latest .vf-summary__text { - font-size: 19px; - } - /* ---CONTENT PAGE----*/ .vf-figure img { @@ -226,202 +135,27 @@ Text Domain: vf-wp-news-main margin-right: auto; } - .post-categories a { + /* Can't add vf-link to the list generated by WP - Ask David */ + + .post-categories a { font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.57; } - .related-posts-container .vf-summary__title { - font-size: 24px; - font-weight: 500; - margin: 16px 0; - } - - .related-posts-container .vf-summary__text { - font-size: 16px; - } - - /* ----HOME PAGE---- */ - - - .icon-green { - font-size: 32px; - color: #18974C; - } - - .latest-title-column { - color: #3B6FB6; - min-width: 150px; - } - - .latest-title-column h3 { - color: #3B6FB6; - } - - .vf-inlay__content h3 { - display: inline-block; - } - - i { - font-size: 21px; - } - - .magazine-archive { - max-width: 300px; - grid-column-gap: 56px; - } - - - .magazine-box-content { - margin-top: 4%; - } - .magazine-box-cover .vf-text-body--3 { - font-style: italic; - color: #707372; - } - - .magazine-summary-content .vf-text-heading--5 { - font-size: 16px; - } - - .topics-info { - margin-bottom: 0; - } - - .latest-posts-container .vf-summary__title { - font-size: 24px; - font-weight: 500; - } - - .latest-posts-container .vf-summary__text { - font-size: 19px; - } - - .pow-container .post-image { - box-shadow: none; - } - - - .hero-right-column article, - .pow-container, - .author-container { - border-bottom: 8px solid #18974C; - } - - .hero-left-column .article-summary { - min-height: 277px; - color: #fff; - } - - /* Grow the main news article to match the sidebar */ - .hero-left-column .vf-summary--article { - display: flex; - flex-direction: column; - height: 100%; - } - - /* gap between news items on homepage */ - .hero-right-column { - grid-gap: 10px 0; - display: grid; - } - .hero-right-column article { - margin-bottom: 0; - } - - /* equalize the height of the articles beneath the large screen width */ - @media (max-width: 1024px) { - .hero-right-column article { - display: flex; - flex-direction: column; - height: 96%; - background: white; - } - } - - .hero-right-column .vf-summary__title { - font-size: 19px; - } - .hero-left-column .vf-summary__title { - font-size: 32px; - color: #fff; - margin-bottom: 16px; - } - .hero-left-column .vf-summary__title:hover { - color: #fff; - } - - .hero-left-column .vf-link:visited, - .hero-left-column .vf-link:visited:hover, - .hero-left-column .vf-link, - .hero-left-column a.vf-summary__link:hover, - .hero-left-column .vf-summary__link, - .hero-left-column .vf-summary__link:visited, - .hero-left-column .vf-summary__link:visited:hover, - .hero-left-column .vf-summary__date { - color: #fff; - } - - .hero-left-column .vf-summary__text { - margin-bottom: 32px; - } - - .pow-title .vf-summary__link, - .pow-title .vf-summary__link:visited, - .pow-title .vf-summary__link:hover, - .pow-title .vf-summary__link:visited:hover { - font-size: 24px; - color: #ffffff; - } - - .pow-article-summary .vf-summary__link, - .pow-article-summary .vf-summary__link:visited, - .pow-article-summary .vf-summary__date { - color: #ffffff; - } - - .pow-article-summary .vf-section-header__heading--is-link:visited, - .pow-article-summary .vf-section-header__heading--is-link:visited:hover { - color: #D0D0CE; - } - - .pow-article-summary .vf-summary__text { - font-size: 19px; - color: #D0D0CE; - } - - .pow-article-summary .vf-links__heading { - font-size: 32px; - font-weight: 200; - font-style: italic; - } - .pow-container img { max-width: 100%; height: auto; display: flex; } - .pow-summary-title, - .pow-summary-date { - color: #fff; - } - - .pow-heading, - .pow-summary-text { - color: #D0D0CE; - } - - .article-summary { - background-color: #fff; - } - .vf-summary--article img { max-width: 100%; height: auto; } + /* For the lists generated by WP */ + li, ul { margin: 0; @@ -434,10 +168,6 @@ Text Domain: vf-wp-news-main padding: 0; } - .hero-container .article-summary { - padding: 0 16px 0 16px; - } - .vf-masthead .vf-masthead__heading__link:hover, .vf-masthead .vf-masthead__heading__link:visited { color: #000; @@ -451,19 +181,25 @@ Text Domain: vf-wp-news-main font-size: 14px; } - /* narrows the first embl-grid column on the homepage latest news */ - - .embl-grid.latest { - --embl-grid-spacing-normaliser: -30px; - --embl-grid-module--prime: 140px; - margin-bottom: 0; - + .vf-card img { + height: auto; + } + + +/* ------ IMAGE HOVER ------ */ +/* .overlay { + position: absolute; + bottom: 0; + background: rgb(0, 0, 0); + color: #fff; + max-width: 100%; + transition: .1s ease; + opacity:0; + padding: 16px; + text-align: left; } - .embl-grid.category-latest, - .embl-grid.related-posts-container { - --embl-grid-module--prime: 95px; - margin-bottom: 0; - + .post-image:hover .overlay { + opacity: 1; } \ No newline at end of file