ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

front page latest section + header

Browse Source
This commit is contained in:
Ross Trottier 2024-06-20 16:15:11 -06:00
parent 636e8fd849
commit c88602dad1
7 changed files with 419 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/st-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

19
assets/js/st-nav.js Normal file
View 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
View File

@ -0,0 +1,7 @@
<footer class="st-footer st-main-grid">
</footer>
<?php wp_footer() ?>
</body>
</html>

60
front-page.php Normal file
View 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() ?>

13
functions.php
View File

@ -1,11 +1,20 @@
<?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
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( '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

53
header.php Normal file
View 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">&#9776;</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">&times;</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
View File

@ -4,3 +4,271 @@
Version: 1.0.0
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;
}