dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redo Grid CSS

Browse Source 
Add single page template
This commit is contained in:
Dan Head
2018-04-29 13:17:07 +01:00
parent 7281d9f94f
commit b992ca0417
4 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/article.css
View File

@@ -4,11 +4,6 @@
.Article { .Article {
border-bottom: 1px solid var(--colorLightGrey); border-bottom: 1px solid var(--colorLightGrey);
} }
/** Pull up first article */
.Article.is-first {
margin-top: -166px;
}
} }
.Article-title { .Article-title {

11
css/grid.css
View File

@@ -24,10 +24,15 @@
@media (--viewportLg) { @media (--viewportLg) {
.Grid { .Grid {
grid-template-columns: 224px 1fr; grid-template-columns: 224px 1fr;
grid-template-rows: 60px 134px;
grid-gap: var(--spaceMd); grid-gap: var(--spaceMd);
padding: 0 var(--spaceMd); padding: 0 var(--spaceMd);
} }
.Grid-logo {
grid-row: span 2;
}
.Grid-banner { .Grid-banner {
display: block; display: block;
grid-column-start: 2; grid-column-start: 2;
@@ -36,10 +41,16 @@
.Grid-article { .Grid-article {
grid-column-start: 2; grid-column-start: 2;
grid-row: span 2;
} }
.Grid-metadata { .Grid-metadata {
grid-column-start: 1; grid-column-start: 1;
grid-row: span 2;
}
.Grid-metadata.is-first {
grid-row: span 1;
} }
.Grid-footer { .Grid-footer {

4
theme/index.php
View File

@@ -5,7 +5,7 @@
</section> </section>
<?php while ( have_posts() ) : the_post(); $index++; ?> <?php while ( have_posts() ) : the_post(); $index++; ?>
<section class="Grid-article"> <section class="Grid-article">
<article class="Article<?php echo ($index === 1 ? ' is-first' : '') ?>"> <article class="Article">
<div class="Article-date"> <div class="Article-date">
<svg class="Icon"> <svg class="Icon">
<use href="#icon-calendar"></use> <use href="#icon-calendar"></use>
@@ -24,7 +24,7 @@
</div> </div>
</article> </article>
</section> </section>
<section class="Grid-metadata"> <section class="Grid-metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
<?php get_template_part('partials/metadata') ?> <?php get_template_part('partials/metadata') ?>
</section> </section>
<?php endwhile; ?> <?php endwhile; ?>

47
theme/single.php
View File

@@ -1,14 +1,49 @@
<?php get_header(); ?> <?php get_header(); ?>
<main> <main class="Grid">
<section class="Grid-logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article> <section class="Grid-article">
<h1><?php the_title(); ?></h1> <article class="Article">
<div class="Article-date">
<svg class="Icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Article-dateText">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<h1 class="Article-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys' ) ); ?>
</div>
</article> </article>
</section>
<section class="Grid-metadata is-first">
<?php get_template_part('partials/metadata') ?>
</section>
<?php endwhile; ?> <?php endwhile; ?>
<?php else: ?> <?php else: ?>
<article> <section class="Grid-article">
<h1>Sorry, nothing to display</h1> <article class="Article">
<h1 class="Article-title">Sorry, there is no article to display</h1>
<div class="Article-content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article> </article>
</section>
<?php endif; ?> <?php endif; ?>
<section class="Grid-banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<?php get_template_part('partials/footer') ?>
</section>
</main> </main>
<?php get_template_part('partials/navigation') ?>
<?php get_footer() ?>