some page templates
This commit is contained in:
parent
be874660e3
commit
6bac3c395b
20
category.php
Normal file
20
category.php
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<?php get_header(); ?>
|
||||
<body>
|
||||
<a class="skip-nav sr-only" href="#main-content">Skip to main</a>
|
||||
<?php get_template_part('global-head'); ?>
|
||||
<main id="main-content" class="container" role="main">
|
||||
|
||||
<h1><?php single_cat_title(); ?></h1>
|
||||
|
||||
<div class="grid col-100">
|
||||
<?php get_template_part('loop'); ?>
|
||||
</div>
|
||||
<?php get_template_part('pagination'); ?>
|
||||
|
||||
</main>
|
||||
<?php // get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
</body>
|
||||
</html>
|
83
dev/scss/components/_loop-row.scss
Normal file
83
dev/scss/components/_loop-row.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.loop-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
grid-gap: 0;
|
||||
|
||||
> div {
|
||||
flex: 1 1 100%;
|
||||
padding: $gutter;
|
||||
}
|
||||
|
||||
.loop-image {
|
||||
background-color: $di-purple;
|
||||
background-image: linear-gradient(-45deg, $di-purple, $di-purple-light);
|
||||
}
|
||||
|
||||
&:nth-of-type(even) {
|
||||
.loop-image {
|
||||
background-color: $di-orange;
|
||||
background-image: linear-gradient(-45deg, $di-orange, $di-orange-light);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4n) {
|
||||
.loop-image {
|
||||
background-color: $di-orange;
|
||||
background-image: linear-gradient(110deg, $di-purple, $di-purple-light);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
.loop-image {
|
||||
background-color: $di-orange;
|
||||
background-image: linear-gradient(-110deg, $di-orange, $di-orange-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-tablet) {
|
||||
.loop-row {
|
||||
flex-direction: row;
|
||||
min-height: 300px;
|
||||
|
||||
> div { flex: 1 1 50%; }
|
||||
|
||||
.loop-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
padding-top: 70%;
|
||||
width: 1px;
|
||||
height: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:nth-of-type(even) {
|
||||
.loop-image { order: 2; }
|
||||
}
|
||||
}
|
||||
}
|
@ -45,6 +45,7 @@
|
||||
@import 'components/header-menu';
|
||||
@import 'components/logo-banner';
|
||||
@import 'components/home-loop';
|
||||
@import 'components/loop-row';
|
||||
@import 'components/global-head';
|
||||
@import 'components/search-form';
|
||||
@import 'components/social-menu';
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
$sticky = get_option( 'sticky_posts' );
|
||||
$args = array(
|
||||
'posts_per_page' => 10,
|
||||
'posts_per_page' => 12,
|
||||
'post__in' => $sticky,
|
||||
'ignore_sticky_posts' => 1
|
||||
);
|
||||
@ -12,13 +12,14 @@
|
||||
if ( isset($sticky[0]) && $query->have_posts() ) {
|
||||
while ( $query->have_posts() ) {
|
||||
$query->the_post(); ?>
|
||||
|
||||
<section class="home-loop">
|
||||
<a href="<?php echo get_page_link(); ?>"><?php
|
||||
the_title( '<h1>', '</h1>' );
|
||||
the_post_thumbnail();
|
||||
// the_excerpt();
|
||||
?></a>
|
||||
</section>
|
||||
|
||||
<?php }
|
||||
}
|
||||
|
||||
|
8
home.php
8
home.php
@ -4,12 +4,12 @@
|
||||
<body>
|
||||
<a class="skip-nav sr-only" href="#main-content">Skip to main</a>
|
||||
<?php get_template_part('global-head'); ?>
|
||||
|
||||
<main id="main-content" class="container" role="main">
|
||||
<?php get_template_part('home-loop'); ?>
|
||||
</main>
|
||||
|
||||
<?php // get_sidebar(); ?>
|
||||
<?php get_template_part('home-loop'); ?>
|
||||
|
||||
|
||||
</main>
|
||||
<?php get_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
24
index.php
24
index.php
@ -4,31 +4,15 @@
|
||||
<body>
|
||||
<a class="skip-nav sr-only" href="#main-content">Skip to main</a>
|
||||
<?php get_template_part('global-head'); ?>
|
||||
|
||||
<main id="main-content" class="container" role="main">
|
||||
|
||||
<div class="grid col-100 grid-gutter-lg">
|
||||
<?php
|
||||
if ( have_posts() ) {
|
||||
while ( have_posts() ) {
|
||||
the_post();
|
||||
|
||||
echo "<section>";
|
||||
echo "<a href=\"".get_permalink()."\">";
|
||||
the_title( '<h1>', '</h1>' );
|
||||
echo "</a>";
|
||||
the_excerpt();
|
||||
echo "</section>";
|
||||
}
|
||||
|
||||
get_template_part('pagination');
|
||||
}
|
||||
?>
|
||||
<div class="grid col-100">
|
||||
<?php get_template_part('loop'); ?>
|
||||
</div>
|
||||
|
||||
<?php get_template_part('pagination'); ?>
|
||||
|
||||
</main>
|
||||
|
||||
<?php // get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
22
loop.php
Normal file
22
loop.php
Normal file
@ -0,0 +1,22 @@
|
||||
<?php
|
||||
if ( have_posts() ) {
|
||||
while ( have_posts() ) {
|
||||
the_post();
|
||||
|
||||
echo "<section class=\"loop-row\">";
|
||||
echo "<div class=\"loop-image\">";
|
||||
the_post_thumbnail();
|
||||
echo "</div>";
|
||||
|
||||
echo "<div class=\"loop-content\">";
|
||||
echo "<a href=\"".get_permalink()."\">";
|
||||
the_title( '<h1>', '</h1>' );
|
||||
echo "</a>";
|
||||
the_excerpt();
|
||||
echo "</div>";
|
||||
echo "</section>";
|
||||
}
|
||||
|
||||
get_template_part('pagination');
|
||||
}
|
||||
?>
|
39
single.php
Normal file
39
single.php
Normal file
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<?php get_header(); ?>
|
||||
<body>
|
||||
<a class="skip-nav sr-only" href="#main-content">Skip to main</a>
|
||||
<?php get_template_part('global-head'); ?>
|
||||
<main id="main-content" class="container" role="main">
|
||||
<section class="grid col-100 grid-gutter-lg">
|
||||
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
||||
<article class="post-article" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
|
||||
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
|
||||
<a class="post-thumbnail" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
|
||||
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<h1>
|
||||
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
|
||||
</h1>
|
||||
|
||||
<?php the_content(); ?>
|
||||
|
||||
<div class="post-details">
|
||||
<p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>
|
||||
<?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
|
||||
</div>
|
||||
|
||||
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php // get_sidebar(); ?>
|
||||
</section>
|
||||
</main>
|
||||
<?php get_footer(); ?>
|
||||
</body>
|
||||
</html>
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user