started desktop grid area

This commit is contained in:
Ross Trottier 2024-06-28 11:48:19 -06:00
parent d50a7cae3e
commit 4504f9852a
2 changed files with 142 additions and 123 deletions

View File

@ -2,7 +2,8 @@
<main class="st-main st-main-grid">
<!-- LATEST SECTION -->
<section class="st-article-section st-article-section__top">
<section class="st-article-section-grid">
<section class="st-article-section st-article-section-highlight">
<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');
@ -68,7 +69,7 @@
</a>
</section>
<!-- TECH SECTION -->
<section class="st-article-section">
<section class="st-article-section st-article-section-bottom">
<h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
<?php
$post_section_three_featured_args = array(
@ -134,6 +135,7 @@
<section class="st-newsletter-signup">
<!-- TODO: Insert flat section for newsletter signup -->
</section>
</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>
<?php

View File

@ -66,6 +66,23 @@ LAYOUT
grid-column: 2;
}
@media (min-width: 550px) {
.st-main-grid {
grid-template-columns: minmax(1em, 1fr) minmax(500px, 1280px) minmax(1em, 1fr);
}
.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;
}
}
/*
============================
SECTIONS