From fcf5635bf56962aadb79fedb4d553e743e8ceda6 Mon Sep 17 00:00:00 2001 From: Ross Trottier Date: Mon, 1 Jul 2024 14:18:30 -0600 Subject: [PATCH] footer is responsive --- assets/js/st-nav.js | 102 +-- footer.php | 90 +-- front-page.php | 772 +++++++++++----------- functions.php | 544 ++++++++-------- header.php | 130 ++-- style.css | 1516 ++++++++++++++++++++++--------------------- 6 files changed, 1604 insertions(+), 1550 deletions(-) diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js index 51ffec3..e99843f 100644 --- a/assets/js/st-nav.js +++ b/assets/js/st-nav.js @@ -1,52 +1,52 @@ -//Nav slide in logic - -const nav = document.querySelector('.st-nav'); -const openNavButton = document.querySelector('.st-open-nav'); -const closeNavButton = document.querySelector('.st-close-nav'); - -openNavButton.addEventListener('click', () => { - nav.classList.add('st-nav-is-open'); -}); - -closeNavButton.addEventListener('click', () => { - nav.classList.remove('st-nav-is-open'); -}); - -//Search slide logic - -const searchOverlay = document.querySelector('.st-search-overlay'); -const openSearchButton = document.querySelector('.st-open-search'); -const closeSearchButton = document.querySelector('.st-close-search'); - -openSearchButton.addEventListener('click', () => { - searchOverlay.classList.add('st-search-is-open'); -}); - -closeSearchButton.addEventListener('click', () => { - searchOverlay.classList.remove('st-search-is-open'); -}); - -//Sticky nav logic - -const iconBar = document.querySelector('.st-header-icon-bar'); -const siteTitle = document.querySelector('.st-site-title'); -const header = document.querySelector('.st-header'); -let lastScrollPosition = 0; - -window.addEventListener('scroll', function(event) { - const scrollPosition = window.scrollY; - - if(scrollPosition < 5) { - iconBar.classList.remove('st-icon-bar-sticky'); - siteTitle.classList.remove('st-title-scrolled'); - header.classList.remove('st-header-scrolled'); - } else { - if(lastScrollPosition < 5) { - iconBar.classList.add('st-icon-bar-sticky'); - siteTitle.classList.add('st-title-scrolled'); - header.classList.add('st-header-scrolled'); - } - } - - lastScrollPosition = scrollPosition; +//Nav slide in logic + +const nav = document.querySelector('.st-nav'); +const openNavButton = document.querySelector('.st-open-nav'); +const closeNavButton = document.querySelector('.st-close-nav'); + +openNavButton.addEventListener('click', () => { + nav.classList.add('st-nav-is-open'); +}); + +closeNavButton.addEventListener('click', () => { + nav.classList.remove('st-nav-is-open'); +}); + +//Search slide logic + +const searchOverlay = document.querySelector('.st-search-overlay'); +const openSearchButton = document.querySelector('.st-open-search'); +const closeSearchButton = document.querySelector('.st-close-search'); + +openSearchButton.addEventListener('click', () => { + searchOverlay.classList.add('st-search-is-open'); +}); + +closeSearchButton.addEventListener('click', () => { + searchOverlay.classList.remove('st-search-is-open'); +}); + +//Sticky nav logic + +const iconBar = document.querySelector('.st-header-icon-bar'); +const siteTitle = document.querySelector('.st-site-title'); +const header = document.querySelector('.st-header'); +let lastScrollPosition = 0; + +window.addEventListener('scroll', function(event) { + const scrollPosition = window.scrollY; + + if(scrollPosition < 5) { + iconBar.classList.remove('st-icon-bar-sticky'); + siteTitle.classList.remove('st-title-scrolled'); + header.classList.remove('st-header-scrolled'); + } else { + if(lastScrollPosition < 5) { + iconBar.classList.add('st-icon-bar-sticky'); + siteTitle.classList.add('st-title-scrolled'); + header.classList.add('st-header-scrolled'); + } + } + + lastScrollPosition = scrollPosition; }); \ No newline at end of file diff --git a/footer.php b/footer.php index f650794..ddeecb0 100644 --- a/footer.php +++ b/footer.php @@ -1,46 +1,46 @@ - - - - + + + + \ No newline at end of file diff --git a/front-page.php b/front-page.php index 05944d8..5ddd44c 100644 --- a/front-page.php +++ b/front-page.php @@ -1,387 +1,387 @@ - - -
- -
-
-

Latest >

- post_author ); - ?> - - - 5, - 'offset' => 1, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_two_args); - ?>
post_author ); - ?> - - - -
-
-
- Ad Mock - -
-

Save Big On Gear at the Slowtwitch Shop >

- -
- - -
-

Buy and Sell Gear on Our Classifieds >

- -
- -
- -
-

Tech >

- 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_three_featured_args); - if (have_posts()) : while (have_posts()) : the_post(); - $category = get_the_category()[0]; - $author = get_userdata( $post->post_author ); - ?> - - - 5, - 'offset' => 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_two_args); - ?>
post_author ); - ?> - - -
-
- -
- - -
-

Gravel >

- 4, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_three_featured_args); - if (have_posts()) : while (have_posts()) : the_post(); - $category = get_the_category()[0]; - $author = get_userdata( $post->post_author ); - ?> - - -
- -
-
-

Lifestyle >

- 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_three_featured_args); - if (have_posts()) : while (have_posts()) : the_post(); - $category = get_the_category()[0]; - $author = get_userdata( $post->post_author ); - ?> - - - 5, - 'offset' => 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_two_args); - ?>
post_author ); - ?> - - - -
-
-
- Ad Mock - -
-

Save Big On Gear at the Slowtwitch Shop >

- -
- - -
-

Buy and Sell Gear on Our Classifieds >

- -
- -
- -
-

Opinion >

- 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_three_featured_args); - if (have_posts()) : while (have_posts()) : the_post(); - $category = get_the_category()[0]; - $author = get_userdata( $post->post_author ); - ?> - - - 5, - 'offset' => 1, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_two_args); - ?>
post_author ); - ?> - - -
-
- -
- -
-

Race Reports >

- 4, - 'category_name' => $section_category, - 'orderby' => 'post_date', - 'order' => 'DESC', - 'post_type' => 'post', - 'post_status' => 'publish' - ); - query_posts($post_section_three_featured_args); - if (have_posts()) : while (have_posts()) : the_post(); - $category = get_the_category()[0]; - $author = get_userdata( $post->post_author ); - ?> - - -
-
- + + +
+ +
+
+

Latest >

+ post_author ); + ?> + + + 5, + 'offset' => 1, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_two_args); + ?>
post_author ); + ?> + + + +
+
+
+ Ad Mock + +
+

Save Big On Gear at the Slowtwitch Shop >

+ +
+ + +
+

Buy and Sell Gear on Our Classifieds >

+ +
+ +
+ +
+

Tech >

+ 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_three_featured_args); + if (have_posts()) : while (have_posts()) : the_post(); + $category = get_the_category()[0]; + $author = get_userdata( $post->post_author ); + ?> + + + 5, + 'offset' => 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_two_args); + ?>
post_author ); + ?> + + +
+
+ +
+ + +
+

Gravel >

+ 4, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_three_featured_args); + if (have_posts()) : while (have_posts()) : the_post(); + $category = get_the_category()[0]; + $author = get_userdata( $post->post_author ); + ?> + + +
+ +
+
+

Lifestyle >

+ 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_three_featured_args); + if (have_posts()) : while (have_posts()) : the_post(); + $category = get_the_category()[0]; + $author = get_userdata( $post->post_author ); + ?> + + + 5, + 'offset' => 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_two_args); + ?>
post_author ); + ?> + + + +
+
+
+ Ad Mock + +
+

Save Big On Gear at the Slowtwitch Shop >

+ +
+ + +
+

Buy and Sell Gear on Our Classifieds >

+ +
+ +
+ +
+

Opinion >

+ 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_three_featured_args); + if (have_posts()) : while (have_posts()) : the_post(); + $category = get_the_category()[0]; + $author = get_userdata( $post->post_author ); + ?> + + + 5, + 'offset' => 1, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_two_args); + ?>
post_author ); + ?> + + +
+
+ +
+ +
+

Race Reports >

+ 4, + 'category_name' => $section_category, + 'orderby' => 'post_date', + 'order' => 'DESC', + 'post_type' => 'post', + 'post_status' => 'publish' + ); + query_posts($post_section_three_featured_args); + if (have_posts()) : while (have_posts()) : the_post(); + $category = get_the_category()[0]; + $author = get_userdata( $post->post_author ); + ?> + + +
+
+ \ No newline at end of file diff --git a/functions.php b/functions.php index 3c75884..f3bcffa 100644 --- a/functions.php +++ b/functions.php @@ -1,273 +1,273 @@ -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 - -add_action( 'init', 'slowtwitch_menus' ); - -function slowtwitch_menus() { - $locations = array( - 'primary' => 'Primary Menu', - 'footer' => 'Footer Menu' - ); - - register_nav_menus($locations); -} - -add_action( 'widgets_init', 'my_widgets_init' ); - -function my_widgets_init() { - - register_sidebar( array( - 'id' => 'slowtwitch-front-page', - 'name' => 'Widgets for Front Page', - ) ); - -} - -// Breadcrumbs -function custom_breadcrumbs() { - - // Settings - $separator = '>'; - $breadcrums_id = 'breadcrumbs'; - $breadcrums_class = 'breadcrumbs'; - $home_title = 'Homepage'; - - // If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat) - $custom_taxonomy = 'product_cat'; - - // Get the query & post information - global $post,$wp_query; - - // Do not display on the homepage - if ( !is_front_page() ) { - - // Build the breadcrums - echo ''; - - } - +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 + +add_action( 'init', 'slowtwitch_menus' ); + +function slowtwitch_menus() { + $locations = array( + 'primary' => 'Primary Menu', + 'footer' => 'Footer Menu' + ); + + register_nav_menus($locations); +} + +add_action( 'widgets_init', 'my_widgets_init' ); + +function my_widgets_init() { + + register_sidebar( array( + 'id' => 'slowtwitch-front-page', + 'name' => 'Widgets for Front Page', + ) ); + +} + +// Breadcrumbs +function custom_breadcrumbs() { + + // Settings + $separator = '>'; + $breadcrums_id = 'breadcrumbs'; + $breadcrums_class = 'breadcrumbs'; + $home_title = 'Homepage'; + + // If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat) + $custom_taxonomy = 'product_cat'; + + // Get the query & post information + global $post,$wp_query; + + // Do not display on the homepage + if ( !is_front_page() ) { + + // Build the breadcrums + echo ''; + + } + } \ No newline at end of file diff --git a/header.php b/header.php index 0f13a68..b7c912c 100644 --- a/header.php +++ b/header.php @@ -1,66 +1,66 @@ - - - - - - - - - - - - - - - - - - - - -
- -
- forum - - join - - - - -
- -

Slowtwitch

- - - -
- -
-
- - -
-
-
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ forum + + join + + + + +
+ +

Slowtwitch

+ + + +
+ +
+
+ + +
+
+
\ No newline at end of file diff --git a/style.css b/style.css index b61c9be..6b65231 100644 --- a/style.css +++ b/style.css @@ -1,732 +1,786 @@ -/* - Theme Name: Slowtwitch News Theme - 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; - transform: scale(1, 1); - transition: transform 300ms; - transform-origin: top left; -} - -.st-title-scrolled { - transform: scale(0,0); -} - -@media (min-width: 760px) { - .st-site-title { - font-size: 6.9rem; - } -} - -@media (min-width: 1200px) { - .st-site-title { - font-size: 11rem; - } -} - -@media (min-width: 1400px) { - .st-site-title { - font-size: 13.3rem; - } -} - -/* -============================ -LAYOUT -============================ -*/ - -.st-main-grid { - display: grid; - grid-template-columns: minmax(1em, 1fr) minmax(260px, 725px) minmax(1em, 1fr); -} - -.st-main-grid > * { - grid-column: 2; -} - -@media (min-width: 760px) { - .st-main-grid { - grid-template-columns: minmax(1em, 1fr) minmax(500px, 1400px) minmax(1em, 1fr); - } -} - -/* -============================ -SECTIONS -============================ -*/ - -/* header bar */ -.st-header { - position: sticky; - top: 0; -} - -.st-header-scrolled { - pointer-events: none; -} - -.st-header-icon-bar { - width: 100%; - 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; -} - -.st-icon-bar-sticky a { - display: none; -} - -.st-icon-bar-sticky .st-open-nav { - border-radius: 20%; - padding: .1em .4em; - background: #fff; - box-shadow: 0 0 3px rgb(0 0 0 / 30%); - margin-left: auto; - pointer-events: auto; -} - -.st-icon-bar-sticky .st-open-search { - border-radius: 20%; - padding: .1em .4em; - background: #fff; - box-shadow: 0 0 3px rgb(0 0 0 / 30%); - margin-right: auto; - pointer-events: auto; -} - -/* nav */ -.st-search-overlay, -.st-nav { - position: fixed; - 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; - pointer-events: auto; -} - -.st-nav-is-open, -.st-search-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, -.st-close-search { - text-align: right; - font-size: 2rem; - height: 3rem; -} - -.st-search-form { - margin-top: 2em; -} - -.st-searchbar-container { - display: flex; - flex-direction: row; - justify-content: center; -} - -.st-search-box { - outline: none; - border: none; - border-bottom: 2px solid #0b4fa0; - color: #0b4fa0; -} - -.st-btn-search { - margin-left: 1em; -} - -.st-btn-search i { - color: #0b4fa0; - font-size: 1.25em; -} - -/* footer */ - -.st-footer { - color: white; - background: #0b4fa0; - display: grid; - grid-template-columns: minmax(1em, 1fr) minmax(130px, 250px) minmax(130px, 250px) minmax(1em, 1fr); - grid-template-areas: - "lpad socials partners rpad" - "lpad menu logo rpad" - "lpad copy copy rpad"; - grid-auto-rows: max-content; -} - -.st-footer-socials { - grid-area: socials; - display: flex; - flex-direction: column; -} - -.st-footer-icon { - font-size: 1.5rem; - color: #fff; - margin-top: 1.5em; - color: #270BA1; -} - -.st-footer-icon:hover, -.st-footer-icon:active { - color: #FFDB12; -} - -.st-footer-copyright { - grid-area: copy; - font-size: .6rem; - text-align: right; - background: #270BA1; - padding: .2em .5em .2em; - margin-bottom: 0; -} - -.st-footer-site-title { - grid-area: logo; - text-transform: uppercase; - writing-mode: vertical-lr; - align-self: end; - justify-self: end; - margin: 0; - line-height: 1; - color: #270BA1; -} - -.st-footer-partners { - grid-area: partners; - text-align: right; -} - -.st-footer-partners__title { - margin-bottom: 0; -} - -.st-footer-partners__list { - list-style: none; - margin-top: .2em; -} - -.st-footer-partners__list-item { - font-size: .80rem; -} - -.st-footer-partners__list-item a, -.st-footer-nav-links a { - text-decoration: none; - color: #fff; -} - -.st-footer-partners__list-item a:hover, -.st-footer-partners__list-item a:active, -.st-footer-nav-links a:hover, -.st-footer-nav-links a:active { - color: #FFDB12; -} - -.st-footer-menu { - grid-area: menu; -} - -.st-footer-nav-links { - list-style: none; - margin: 0; - padding: 0; -} - -/* article section */ - -.st-article-section, -.st-ad-section { - border-bottom: 1px #cec9c2 solid; - padding-bottom: 2em; - margin-bottom: 2em; -} - -.st-article-section:last-of-type, -.st-ad-section:last-of-type { - border-bottom: none; - padding-bottom: 0; -} - -.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; -} - -@media (min-width: 760px) { - .st-article-section-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1em; - } - - .st-article-section-highlight, - .st-article-section-bottom { - grid-column: 1 / span 3; - } - - .st-article-section-highlight { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 1em; - justify-self: flex-start; - align-content: flex-start; - } - - .st-article-section-title { - width: 100%; - margin-bottom: 0; - } - - .st-article-section { - border: none; - margin-bottom: 0; - } - - .st-article-section-bottom { - grid-column: 1 / span 4; - display: flex; - flex-wrap: wrap; - gap: 1em; - } - - .st-article-section-main-article__bottom { - display: none; - } - - .st-article-section-wide { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1em; - } - - .st-article-section-wide .st-article-section-title { - grid-column: 1 / span 2; - } -} - -@media (min-width: 1200px) { - .st-article-section-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-areas: - "article-main article-main article-main ad" - "article-main article-main article-main ad" - "article-secondary article-secondary article-secondary ad" - "article-secondary article-secondary article-secondary ad"; - gap: 1em; - } - - .st-article-section-highlight{ - flex-direction: row; - grid-area: article-main; - padding-bottom: 0; - } - - .st-article-section-bottom { - grid-area: article-secondary; - } - - .st-article-section-wide { - grid-template-columns: repeat(4, 1fr); - } - - .st-article-section-wide .st-article-section-title { - grid-column: 1 / span 4; - } -} - -/* ad section */ - -.st-ad-section { - display: flex; - flex-direction: column; - justify-content: center; -} - - - -@media (min-width: 760px) { - .st-ad-section { - margin-top: 3.2em; - justify-content: flex-start; - border-bottom: none; - padding-left: 1em; - border-left: 1px #0b4fa0 solid; - margin-bottom: 0; - } -} - -@media (min-width: 1200px) { - .st-ad-section { - grid-area: ad; - } -} - -/* -============================ -COMPONENTS -============================ -*/ -/* main article card */ - -.st-article-section-main-article__image-link img { - width: 100%; - object-fit: cover; - border-radius: 5px; -} - -.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; - font-weight: 600; -} - -.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; -} - -@media (min-width: 760px) { - .st-article-section-main-article { - width: 100%; - } - - .st-article-section-main-article__image-link img { - height: 500px; - } - - .st-article-section-bottom .st-article-section-main-article { - width: 45%; - } - - .st-article-section-bottom .st-article-section-sub-article-stack { - width: 50%; - } -} - -@media (min-width: 1200px) { - .st-article-section-main-article, - .st-article-section-bottom .st-article-section-main-article { - width: 55%; - } -} - -/* 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; - font-weight: 600; -} - -.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; -} - -@media (min-width: 760px) { - .st-article-section-sub-article-stack { - margin-top: 0; - } - - .st-article-section-sub-article:first-of-type { - margin-top: 0; - } -} - -@media (min-width: 1200px) { - .st-article-section-sub-article-stack, - .st-article-section-bottom .st-article-section-sub-article-stack { - width: 40%; - } -} - -/* sub article wide card */ - -.st-article-section-wide-article { - display: flex; - flex-direction: column; - margin-top: 1em; -} - -.st-article-section-wide-article__image-link img { - max-width: 100%; - height: auto; - aspect-ratio: 1.5; - object-fit: cover; - object-position: center; - border-radius: 5px; -} - -.st-article-section-wide-article__category-link { - text-decoration: none; - color: #fff; - padding: .3em .75em; - background: #0b4fa0; - font-size: .8rem; - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 600; -} - -.st-article-section-wide-article__title { - text-decoration: none; - color: #454545; - font-size: 1.2rem; - line-height: 1.2; -} - -.st-article-section-wide-article__title h3 { - margin: .25em 0; -} - -.st-article-section-wide-article__excerpt { - font-size: .75em; - margin: 0; -} - -.st-article-section-wide-article__author-link { - text-decoration: none; - color: #8b8680; - font-size: .5em; -} - -/* chips */ - -.st-chip { - padding: .25em .75em; - font-size: 1rem; - text-decoration: none; - cursor: pointer; - border-radius: 100px; - color: white; - font-weight: 500; - letter-spacing: 1px; -} - -.st-chip-primary { - background: #0b4fa0; -} - -.st-chip-secondary { - background: #FFDB12; - color: #454545; -} - -.st-chip-secondary:hover, -.st-chip-secondary:active { - background: #270BA1; - color: #fff; -} - -.st-chip-primary:hover, -.st-chip-primary:active { - background: #FFF; - color: #454545; -} - -/* shop card */ - -.st-ad-section-shop-card, -.st-ad-section-classifieds-card { - background-color: #FFDB12; - margin-top: 1em; - border-radius: 5px; - padding: .3em .5em; - padding-bottom: 0; - flex-direction: column; - display: flex; - justify-content: center; -} - -.st-ad-section-shop-card__title, -.st-ad-section-classifieds-card__title { - display: flex; - justify-content: space-between; - font-size: 1.5rem; - letter-spacing: 1px; - margin-top: 0; -} - -.st-ad-section-shop-card-link, -.st-ad-section-classifieds-card-link { - text-decoration: none; - color: #414b4c; -} - -.st-ad-section-shop-card__img, -.st-ad-section-classifieds-card__img { - max-width: 100%; - margin-bottom: 0; -} - -.st-ad-section-classifieds-card { - background-color: #270BA1; -} - -.st-ad-section-classifieds-card__title { - color: white; +/* + Theme Name: Slowtwitch News Theme + 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; + transform: scale(1, 1); + transition: transform 300ms; + transform-origin: top left; +} + +.st-title-scrolled { + transform: scale(0,0); +} + +@media (min-width: 760px) { + .st-site-title { + font-size: 6.9rem; + } +} + +@media (min-width: 1200px) { + .st-site-title { + font-size: 11rem; + } +} + +@media (min-width: 1400px) { + .st-site-title { + font-size: 13.3rem; + } +} + +/* +============================ +LAYOUT +============================ +*/ + +.st-main-grid { + display: grid; + grid-template-columns: minmax(1em, 1fr) minmax(260px, 725px) minmax(1em, 1fr); +} + +.st-main-grid > * { + grid-column: 2; +} + +@media (min-width: 760px) { + .st-main-grid { + grid-template-columns: minmax(1em, 1fr) minmax(500px, 1400px) minmax(1em, 1fr); + } +} + +/* +============================ +SECTIONS +============================ +*/ + +/* header bar */ +.st-header { + position: sticky; + top: 0; +} + +.st-header-scrolled { + pointer-events: none; +} + +.st-header-icon-bar { + width: 100%; + 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; +} + +.st-icon-bar-sticky a { + display: none; +} + +.st-icon-bar-sticky .st-open-nav { + border-radius: 20%; + padding: .1em .4em; + background: #fff; + box-shadow: 0 0 3px rgb(0 0 0 / 30%); + margin-left: auto; + pointer-events: auto; +} + +.st-icon-bar-sticky .st-open-search { + border-radius: 20%; + padding: .1em .4em; + background: #fff; + box-shadow: 0 0 3px rgb(0 0 0 / 30%); + margin-right: auto; + pointer-events: auto; +} + +/* nav */ +.st-search-overlay, +.st-nav { + position: fixed; + 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; + pointer-events: auto; +} + +.st-nav-is-open, +.st-search-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, +.st-close-search { + text-align: right; + font-size: 2rem; + height: 3rem; +} + +.st-search-form { + margin-top: 2em; +} + +.st-searchbar-container { + display: flex; + flex-direction: row; + justify-content: center; +} + +.st-search-box { + outline: none; + border: none; + border-bottom: 2px solid #0b4fa0; + color: #0b4fa0; +} + +.st-btn-search { + margin-left: 1em; +} + +.st-btn-search i { + color: #0b4fa0; + font-size: 1.25em; +} + +/* footer */ + +.st-footer { + color: white; + background: #0b4fa0; + display: grid; + grid-template-columns: minmax(1em, 1fr) minmax(130px, 500px) minmax(130px, 500px) minmax(1em, 1fr); + grid-template-areas: + "lpad socials partners rpad" + "lpad menu logo rpad" + "lpad copy copy rpad"; + grid-auto-rows: max-content; +} + +.st-footer-socials { + grid-area: socials; + display: flex; + flex-direction: column; +} + +.st-footer-icon { + font-size: 1.5rem; + color: #fff; + margin-top: 1.5em; + color: #270BA1; +} + +.st-footer-icon:hover, +.st-footer-icon:active { + color: #FFDB12; +} + +.st-footer-copyright { + grid-area: copy; + font-size: .6rem; + text-align: right; + background: #270BA1; + padding: .2em .5em .2em; + margin-bottom: 0; +} + +.st-footer-site-title { + grid-area: logo; + text-transform: uppercase; + writing-mode: vertical-lr; + align-self: end; + justify-self: end; + margin: 0; + line-height: 1; + color: #270BA1; +} + +.st-footer-partners { + grid-area: partners; + text-align: right; +} + +.st-footer-partners__title { + margin-bottom: 0; +} + +.st-footer-partners__list { + list-style: none; + margin-top: .2em; +} + +.st-footer-partners__list-item { + font-size: .80rem; +} + +.st-footer-partners__list-item a, +.st-footer-nav-links a { + text-decoration: none; + color: #fff; +} + +.st-footer-partners__list-item a:hover, +.st-footer-partners__list-item a:active, +.st-footer-nav-links a:hover, +.st-footer-nav-links a:active { + color: #FFDB12; +} + +.st-footer-menu { + grid-area: menu; +} + +.st-footer-nav-links { + list-style: none; + margin: 0; + padding: 0; +} + +@media (min-width: 760px) { + .st-footer { + background-color: white; + grid-template-columns: minmax(1em, 1fr) minmax(50px, 80px) repeat(2, minmax(130px, 725px)) minmax(1em, 1fr); + grid-template-areas: + "lpad socials empty partners rpad" + "lpad menu empty partners rpad" + "lpad logo logo logo rpad" + "lpad copy copy copy rpad"; + align-items: end; + } + + .st-footer-partners__title, + .st-footer-partners__list-item a, + .st-footer-nav-links a { + color: #270BA1; + } + + .st-footer-partners__list-item a:hover, + .st-footer-partners__list-item a:active, + .st-footer-nav-links a:hover, + .st-footer-nav-links a:active { + color: #0b4fa0; + } + + .st-footer-partners ul { + margin-bottom: 0; + } + + .st-footer-site-title { + writing-mode: horizontal-tb; + justify-self: center; + margin-top: .5em; + font-size: 6.8rem; + } + + .st-footer-copyright { + font-size: 1rem; + } + + .st-footer-partners__list-item { + font-size: 1.2rem; + } + + .st-footer-icon { + font-size: 2rem; + margin-top: 0; + } + + .st-footer-nav-links a { + font-size: 2rem; + } +} + +/* article section */ + +.st-article-section, +.st-ad-section { + border-bottom: 1px #cec9c2 solid; + padding-bottom: 2em; + margin-bottom: 2em; +} + +.st-article-section:last-of-type, +.st-ad-section:last-of-type { + border-bottom: none; + padding-bottom: 0; +} + +.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; +} + +@media (min-width: 760px) { + .st-article-section-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1em; + } + + .st-article-section-highlight, + .st-article-section-bottom { + grid-column: 1 / span 3; + } + + .st-article-section-highlight { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 1em; + justify-self: flex-start; + align-content: flex-start; + } + + .st-article-section-title { + width: 100%; + margin-bottom: 0; + } + + .st-article-section { + border: none; + margin-bottom: 0; + } + + .st-article-section-bottom { + grid-column: 1 / span 4; + display: flex; + flex-wrap: wrap; + gap: 1em; + } + + .st-article-section-main-article__bottom { + display: none; + } + + .st-article-section-wide { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; + } + + .st-article-section-wide .st-article-section-title { + grid-column: 1 / span 2; + } +} + +@media (min-width: 1200px) { + .st-article-section-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-areas: + "article-main article-main article-main ad" + "article-main article-main article-main ad" + "article-secondary article-secondary article-secondary ad" + "article-secondary article-secondary article-secondary ad"; + gap: 1em; + } + + .st-article-section-highlight{ + flex-direction: row; + grid-area: article-main; + padding-bottom: 0; + } + + .st-article-section-bottom { + grid-area: article-secondary; + } + + .st-article-section-wide { + grid-template-columns: repeat(4, 1fr); + } + + .st-article-section-wide .st-article-section-title { + grid-column: 1 / span 4; + } +} + +/* ad section */ + +.st-ad-section { + display: flex; + flex-direction: column; + justify-content: center; +} + + + +@media (min-width: 760px) { + .st-ad-section { + margin-top: 3.2em; + justify-content: flex-start; + border-bottom: none; + padding-left: 1em; + border-left: 1px #0b4fa0 solid; + margin-bottom: 0; + } +} + +@media (min-width: 1200px) { + .st-ad-section { + grid-area: ad; + } +} + +/* +============================ +COMPONENTS +============================ +*/ +/* main article card */ + +.st-article-section-main-article__image-link img { + width: 100%; + object-fit: cover; + border-radius: 5px; +} + +.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; + font-weight: 600; +} + +.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; +} + +@media (min-width: 760px) { + .st-article-section-main-article { + width: 100%; + } + + .st-article-section-main-article__image-link img { + height: 500px; + } + + .st-article-section-bottom .st-article-section-main-article { + width: 45%; + } + + .st-article-section-bottom .st-article-section-sub-article-stack { + width: 50%; + } +} + +@media (min-width: 1200px) { + .st-article-section-main-article, + .st-article-section-bottom .st-article-section-main-article { + width: 55%; + } +} + +/* 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; + font-weight: 600; +} + +.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; +} + +@media (min-width: 760px) { + .st-article-section-sub-article-stack { + margin-top: 0; + } + + .st-article-section-sub-article:first-of-type { + margin-top: 0; + } +} + +@media (min-width: 1200px) { + .st-article-section-sub-article-stack, + .st-article-section-bottom .st-article-section-sub-article-stack { + width: 40%; + } +} + +/* sub article wide card */ + +.st-article-section-wide-article { + display: flex; + flex-direction: column; + margin-top: 1em; +} + +.st-article-section-wide-article__image-link img { + max-width: 100%; + height: auto; + aspect-ratio: 1.5; + object-fit: cover; + object-position: center; + border-radius: 5px; +} + +.st-article-section-wide-article__category-link { + text-decoration: none; + color: #fff; + padding: .3em .75em; + background: #0b4fa0; + font-size: .8rem; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; +} + +.st-article-section-wide-article__title { + text-decoration: none; + color: #454545; + font-size: 1.2rem; + line-height: 1.2; +} + +.st-article-section-wide-article__title h3 { + margin: .25em 0; +} + +.st-article-section-wide-article__excerpt { + font-size: .75em; + margin: 0; +} + +.st-article-section-wide-article__author-link { + text-decoration: none; + color: #8b8680; + font-size: .5em; +} + +/* chips */ + +.st-chip { + padding: .25em .75em; + font-size: 1rem; + text-decoration: none; + cursor: pointer; + border-radius: 100px; + color: white; + font-weight: 500; + letter-spacing: 1px; +} + +.st-chip-primary { + background: #0b4fa0; +} + +.st-chip-secondary { + background: #FFDB12; + color: #454545; +} + +.st-chip-secondary:hover, +.st-chip-secondary:active { + background: #270BA1; + color: #fff; +} + +.st-chip-primary:hover, +.st-chip-primary:active { + background: #FFF; + color: #454545; +} + +/* shop card */ + +.st-ad-section-shop-card, +.st-ad-section-classifieds-card { + background-color: #FFDB12; + margin-top: 1em; + border-radius: 5px; + padding: .3em .5em; + padding-bottom: 0; + flex-direction: column; + display: flex; + justify-content: center; +} + +.st-ad-section-shop-card__title, +.st-ad-section-classifieds-card__title { + display: flex; + justify-content: space-between; + font-size: 1.5rem; + letter-spacing: 1px; + margin-top: 0; +} + +.st-ad-section-shop-card-link, +.st-ad-section-classifieds-card-link { + text-decoration: none; + color: #414b4c; +} + +.st-ad-section-shop-card__img, +.st-ad-section-classifieds-card__img { + max-width: 100%; + margin-bottom: 0; +} + +.st-ad-section-classifieds-card { + background-color: #270BA1; +} + +.st-ad-section-classifieds-card__title { + color: white; } \ No newline at end of file