front page latest section + header

assets/js/st-nav.js

@@ -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;
+});

footer.php

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

front-page.php

@@ -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() ?>

functions.php

@@ -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

header.php

@@ -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>

style.css

@@ -3,4 +3,272 @@
     Text Domain: Slowtwitch
     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;
+}