Fix layout issues in Webkit browsers
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
.content {
|
.content {
|
||||||
border-bottom: 1px solid var(--color-light-grey);
|
border-bottom: 1px solid var(--color-light-grey);
|
||||||
margin-bottom: var(--space-md);
|
|
||||||
padding-bottom: var(--space-md);
|
padding-bottom: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
12
css/page.css
12
css/page.css
@@ -27,7 +27,8 @@
|
|||||||
@media (--viewport-lg) {
|
@media (--viewport-lg) {
|
||||||
.page {
|
.page {
|
||||||
grid-template-columns: 224px 1fr;
|
grid-template-columns: 224px 1fr;
|
||||||
grid-template-rows: 60px 134px;
|
grid-template-rows: 60px 134px 1fr;
|
||||||
|
grid-auto-rows: auto;
|
||||||
grid-gap: var(--space-md);
|
grid-gap: var(--space-md);
|
||||||
padding: 0 var(--space-md);
|
padding: 0 var(--space-md);
|
||||||
}
|
}
|
||||||
@@ -45,16 +46,15 @@
|
|||||||
.page__content,
|
.page__content,
|
||||||
.page__article {
|
.page__article {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__content,
|
||||||
|
.page__article.is-first {
|
||||||
grid-row: span 2;
|
grid-row: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__metadata {
|
.page__metadata {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__metadata.is-first {
|
|
||||||
grid-row: span 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__pagination,
|
.page__pagination,
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<?php get_template_part('partials/logo') ?>
|
<?php get_template_part('partials/logo') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php while ( have_posts() ) : the_post(); $index++; ?>
|
<?php while ( have_posts() ) : the_post(); $index++; ?>
|
||||||
<section class="page__article">
|
<section class="page__article<?php echo ($index === 1 ? ' is-first' : '') ?>">
|
||||||
<article class="article">
|
<article class="article">
|
||||||
<div class="article__date">
|
<div class="article__date">
|
||||||
<svg class="icon">
|
<svg class="icon">
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="page__metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
|
<section class="page__metadata">
|
||||||
<?php get_template_part('partials/metadata') ?>
|
<?php get_template_part('partials/metadata') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
|
|||||||
@@ -4,27 +4,22 @@
|
|||||||
<?php get_template_part('partials/logo') ?>
|
<?php get_template_part('partials/logo') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
||||||
<section class="page__article">
|
<section class="page__content">
|
||||||
<article class="article">
|
<div class="content">
|
||||||
<div class="article__content">
|
<h1 class="title">
|
||||||
<h1 class="title">
|
<?php the_title(); ?>
|
||||||
<a href="<?php the_permalink(); ?>">
|
</h1>
|
||||||
<?php the_title(); ?>
|
<?php the_content(); ?>
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
<?php the_content(__('Continue reading <span class="meta-nav">»</span>', 'windycoys')); ?>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<section class="page__article">
|
<section class="page__content">
|
||||||
<article class="article">
|
<div class="content">
|
||||||
<h1 class="article__title">Sorry, there is no article to display</h1>
|
<h1 class="title">Sorry, there is no article to display</h1>
|
||||||
<div class="article__content">
|
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
||||||
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
</div>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<section class="page__banner">
|
<section class="page__banner">
|
||||||
|
|||||||
@@ -56,13 +56,11 @@ get_header();
|
|||||||
<?php get_template_part('partials/pagination') ?>
|
<?php get_template_part('partials/pagination') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<section class="page__article">
|
<section class="page__content">
|
||||||
<article class="article">
|
<div class="content">
|
||||||
<h1 class="article__title">Sorry, no results found.</h1>
|
<h1 class="title">Sorry, no results found.</h1>
|
||||||
<div class="article__content">
|
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
||||||
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
</div>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<section class="page__banner">
|
<section class="page__banner">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<?php get_template_part('partials/logo') ?>
|
<?php get_template_part('partials/logo') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
||||||
<section class="page__article">
|
<section class="page__article is-first">
|
||||||
<article class="article">
|
<article class="article">
|
||||||
<div class="article__date">
|
<div class="article__date">
|
||||||
<svg class="icon">
|
<svg class="icon">
|
||||||
@@ -25,14 +25,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="page__metadata is-first">
|
<section class="page__metadata">
|
||||||
<?php get_template_part('partials/metadata') ?>
|
<?php get_template_part('partials/metadata') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<section class="page__article">
|
<section class="page__article is-first">
|
||||||
<article class="article">
|
<article class="article">
|
||||||
<h1 class="article__title">Sorry, there is no article to display</h1>
|
<h1 class="title">Sorry, there is no article to display</h1>
|
||||||
<div class="article__content">
|
<div class="article__content">
|
||||||
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
|
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -57,13 +57,11 @@
|
|||||||
<?php get_template_part('partials/pagination') ?>
|
<?php get_template_part('partials/pagination') ?>
|
||||||
</section>
|
</section>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<section class="page__article">
|
<section class="page__content">
|
||||||
<article class="article">
|
<div class="content">
|
||||||
<h1 class="article__title">Sorry, no results found.</h1>
|
<h1 class="title">Sorry, no results found.</h1>
|
||||||
<div class="article__content">
|
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
||||||
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
</div>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<section class="page__banner">
|
<section class="page__banner">
|
||||||
|
|||||||
Reference in New Issue
Block a user