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

added first ad mock section

Browse Source
This commit is contained in:
Ross Trottier 2024-06-28 11:33:16 -06:00
parent 1e4d014afc
commit d50a7cae3e
3 changed files with 170 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/slowtwitch-shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

20
front-page.php
View File

@ -2,7 +2,7 @@
<main class="st-main st-main-grid"> <main class="st-main st-main-grid">
<!-- LATEST SECTION --> <!-- LATEST SECTION -->
<section class="st-article-section"> <section class="st-article-section st-article-section__top">
<h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2> <h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
<?php <?php
query_posts('showposts=1'); query_posts('showposts=1');
@ -57,9 +57,16 @@
endif; endif;
wp_reset_postdata(); wp_reset_postdata();
?> ?>
<!-- TODO: Insert section sidebar here -->
</section> </section>
<!-- TODO: Insert flat section for newsletter signup --> <section class="st-ad-section st-ad-section__top">
<img src="/wp-content/themes/slowtwitch-news/assets/images/vertical-ad-mock.jpg" alt="Ad Mock" class="st-ad-section-vertical-ad">
<a href="https://shop.slowtwitch.com/" class="st-ad-section-shop-card-link">
<div class="st-ad-section-shop-card">
<h3 class="st-ad-section-shop-card__title">Save Big On Gear at the Slowtwitch Shop <span>></span></h3>
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img">
</div>
</a>
</section>
<!-- TECH SECTION --> <!-- TECH SECTION -->
<section class="st-article-section"> <section class="st-article-section">
<h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2> <h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
@ -97,7 +104,7 @@
wp_reset_postdata(); wp_reset_postdata();
$post_section_two_args = array( $post_section_two_args = array(
'showposts' => 5, 'showposts' => 3,
'offset' => 1, 'offset' => 1,
'category_name' => 'Tech', 'category_name' => 'Tech',
'orderby' => 'post_date', 'orderby' => 'post_date',
@ -123,9 +130,10 @@
<?php <?php
endwhile; endwhile;
endif; ?> endif; ?>
<!-- TODO: Insert section sidebar here -->
</section> </section>
<!-- PRODUCTS SECTION --> <section class="st-newsletter-signup">
<!-- TODO: Insert flat section for newsletter signup -->
</section>
<section class="st-article-section"> <section class="st-article-section">
<h2 class="st-article-section-title">Products <a href="<?php echo home_url() . '/products'; ?>" class="st-article-section-category-link">></a></h2> <h2 class="st-article-section-title">Products <a href="<?php echo home_url() . '/products'; ?>" class="st-article-section-category-link">></a></h2>
<?php <?php

50
style.css
View File

@ -308,6 +308,19 @@ COMPONENTS
*/ */
/* main article card */ /* main article card */
.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 { .st-article-section-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -445,3 +458,40 @@ COMPONENTS
background: #FFF; background: #FFF;
color: #454545; color: #454545;
} }
/* ad section */
.st-ad-section {
display: flex;
flex-direction: column;
justify-content: center;
}
.st-ad-section-shop-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 {
display: flex;
justify-content: space-between;
font-size: 1.5rem;
letter-spacing: 1px;
margin-top: 0;
}
.st-ad-section-shop-card-link {
text-decoration: none;
color: #414b4c;
}
.st-ad-section-shop-card__img {
max-width: 100%;
margin-bottom: 0;
}