front page latest section + header
This commit is contained in:
parent
636e8fd849
commit
c88602dad1
BIN
assets/images/st-logo.png
Normal file
BIN
assets/images/st-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
19
assets/js/st-nav.js
Normal file
19
assets/js/st-nav.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const nav = document.querySelector('.st-nav');
|
||||||
|
const openButton = document.querySelector('.st-open-nav');
|
||||||
|
const closeButton = document.querySelector('.st-close-nav');
|
||||||
|
|
||||||
|
openButton.addEventListener('click', () => {
|
||||||
|
nav.classList.add('st-nav-is-open');
|
||||||
|
});
|
||||||
|
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
nav.classList.remove('st-nav-is-open');
|
||||||
|
});
|
||||||
|
|
||||||
|
let lastScrollPosition = 0;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function(event) {
|
||||||
|
const scrollPosition = window.scrollY;
|
||||||
|
console.log(scrollPosition);
|
||||||
|
lastScrollPosition = scrollPosition;
|
||||||
|
});
|
||||||
7
footer.php
Normal file
7
footer.php
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<footer class="st-footer st-main-grid">
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
<?php wp_footer() ?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
60
front-page.php
Normal file
60
front-page.php
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<?php get_header() ?>
|
||||||
|
|
||||||
|
<main class="st-main st-main-grid">
|
||||||
|
<section class="st-article-section">
|
||||||
|
<h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
|
||||||
|
<?php
|
||||||
|
query_posts('showposts=1');
|
||||||
|
if (have_posts()) : while (have_posts()) : the_post();
|
||||||
|
$category = get_the_category()[0];
|
||||||
|
$author = get_userdata( $post->post_author );
|
||||||
|
?>
|
||||||
|
<article class="st-article-section-main-article">
|
||||||
|
<a href="<?php the_permalink(); ?>" class="st-article-section-main-article__image-link">
|
||||||
|
<?php the_post_thumbnail(); ?>
|
||||||
|
</a>
|
||||||
|
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-main-article__category-link"><?php echo $category->name; ?></a>
|
||||||
|
<a class="st-article-section-main-article__title" href="<?php the_permalink(); ?>">
|
||||||
|
<h3><?php the_title(); ?></h3>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p class="st-article-section-main-article__excerpt"><?php echo get_the_excerpt(); ?></p>
|
||||||
|
<a href="<?php echo get_author_posts_url( $post->post_author ); ?>" class="st-article-section-main-article__author-link">by <?php echo $author->display_name; ?>, <?php the_time('F j, Y'); ?></a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
endwhile;
|
||||||
|
endif;
|
||||||
|
|
||||||
|
wp_reset_postdata();
|
||||||
|
|
||||||
|
$post_section_two_args = array(
|
||||||
|
'showposts' => 5,
|
||||||
|
'offset' => 1,
|
||||||
|
'orderby' => 'post_date',
|
||||||
|
'order' => 'DESC',
|
||||||
|
'post_type' => 'post',
|
||||||
|
'post_status' => 'publish'
|
||||||
|
);
|
||||||
|
query_posts($post_section_two_args);
|
||||||
|
if (have_posts()) : while (have_posts()) : the_post();
|
||||||
|
$category = get_the_category()[0];
|
||||||
|
$author = get_userdata( $post->post_author );
|
||||||
|
?>
|
||||||
|
<article class="st-article-section-sub-article">
|
||||||
|
<a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
|
||||||
|
<?php the_post_thumbnail(); ?>
|
||||||
|
</a>
|
||||||
|
<div class="st-article-section-sub-article__text-container">
|
||||||
|
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-sub-article__category-link"><?php echo $category->name; ?></a>
|
||||||
|
<a class="st-article-section-sub-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
<?php
|
||||||
|
endwhile;
|
||||||
|
endif; ?>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php get_footer() ?>
|
||||||
@ -1,11 +1,20 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
//Add Title Tag Theme support
|
||||||
|
add_action('after_setup_theme', 'slowtwitch_theme_support');
|
||||||
|
|
||||||
|
function slowtwitch_theme_support() {
|
||||||
|
add_theme_support('title-tag');
|
||||||
|
}
|
||||||
|
|
||||||
// enqueue styles
|
// enqueue styles
|
||||||
|
|
||||||
add_action('wp_enqueue_scripts', 'slowtwitch_register_styles');
|
add_action('wp_enqueue_scripts', 'slowtwitch_register_styles_scripts');
|
||||||
|
|
||||||
function slowtwitch_register_styles() {
|
function slowtwitch_register_styles_scripts() {
|
||||||
wp_enqueue_style('slowtwitch-styles', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get('version'), 'all');
|
wp_enqueue_style('slowtwitch-styles', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get('version'), 'all');
|
||||||
|
wp_enqueue_style( 'rubik font', 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap' );
|
||||||
|
wp_enqueue_script( 'slowtwitch-nav-script', get_template_directory_uri() . '/assets/js/st-nav.js', NULL, NULL, true );
|
||||||
}
|
}
|
||||||
|
|
||||||
// set up menu areas
|
// set up menu areas
|
||||||
|
|||||||
53
header.php
Normal file
53
header.php
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
|
||||||
|
<?php wp_head() ?>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="st-header st-main-grid">
|
||||||
|
|
||||||
|
<div class="st-header-icon-bar">
|
||||||
|
<a href="#" class="st-chip st-chip-primary">forum</a>
|
||||||
|
<a href="#" class="st-chip st-chip-secondary">join</a>
|
||||||
|
<a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
|
||||||
|
<a href="" class="st-header-icon"><i class="fa fa-search"></i></a>
|
||||||
|
<button class="st-nav-btn st-open-nav" aria-label="Open Navigation">☰</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="st-site-title">Slowtwitch</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="st-nav st-main-grid">
|
||||||
|
<button class="st-nav-btn st-close-nav" aria-label="Close Navigation">×</button>
|
||||||
|
<?php
|
||||||
|
wp_nav_menu(
|
||||||
|
array(
|
||||||
|
'menu' => 'primary',
|
||||||
|
'container' => '',
|
||||||
|
'theme_location' => 'primary',
|
||||||
|
'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="st-search-overlay">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
268
style.css
268
style.css
@ -4,3 +4,271 @@
|
|||||||
Version: 1.0.0
|
Version: 1.0.0
|
||||||
Author: Ross Trottier
|
Author: Ross Trottier
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
============================
|
||||||
|
CSS RESETS + GLOBALS
|
||||||
|
============================
|
||||||
|
*/
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, textarea, select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
============================
|
||||||
|
TYPOGRAPHY
|
||||||
|
============================
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-site-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #0b4fa0;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 3.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
============================
|
||||||
|
LAYOUT
|
||||||
|
============================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.st-main-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(1em, 1fr) minmax(260px, 500px) minmax(1em, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-main-grid > * {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
============================
|
||||||
|
SECTIONS
|
||||||
|
============================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* header bar */
|
||||||
|
|
||||||
|
.st-header-icon-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: black;
|
||||||
|
margin-top: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-header-logo {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-header-icon {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nav */
|
||||||
|
|
||||||
|
.st-nav {
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: -100%;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: transform ease-in-out 250ms;
|
||||||
|
grid-template-rows: minmax(2.25rem, 3rem) 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-sticky {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-is-open {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-btn {
|
||||||
|
background: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-links {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-links,
|
||||||
|
.st-nav-links ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-links .menu-item a {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #0b4fa0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-nav-links .menu-item a:hover,
|
||||||
|
.st-nav-links .menu-item a:hover:active {
|
||||||
|
color: #d3d3d3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-close-nav {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 2rem;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
============================
|
||||||
|
COMPONENTS
|
||||||
|
============================
|
||||||
|
*/
|
||||||
|
/* main article card */
|
||||||
|
|
||||||
|
.st-article-section-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
color: black;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-title > a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__image-link img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__category-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
padding: .3em .75em;
|
||||||
|
background: #0b4fa0;
|
||||||
|
font-size: .8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__title {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #454545;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__title h3 {
|
||||||
|
margin: .25em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__excerpt {
|
||||||
|
font-size: .75em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__author-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #8b8680;
|
||||||
|
font-size: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-main-article__datetime {
|
||||||
|
color: #8b8680;
|
||||||
|
font-size: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sub article card */
|
||||||
|
|
||||||
|
.st-article-section-sub-article {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-sub-article__image-link img {
|
||||||
|
width: 160px;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 1.5;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: bottom right;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-sub-article__category-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
padding: .3em .75em;
|
||||||
|
background: #0b4fa0;
|
||||||
|
font-size: .6rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-sub-article__text-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-left: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-sub-article__title {
|
||||||
|
font-size: .75rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #454545;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-article-section-sub-article__title h3 {
|
||||||
|
margin-top: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* chips */
|
||||||
|
|
||||||
|
.st-chip {
|
||||||
|
padding: .25em .75em;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-chip-primary {
|
||||||
|
background: #0b4fa0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-chip-secondary {
|
||||||
|
background: #A05C0B;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user