Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Mobile homepage updates
Sync TODOs with Issues / sync_todos (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-06-16 06:38:17 -05:00
parent ffaecf2874
commit 743aef0eec
7 changed files with 310 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/site-footer.css
+32
View File
@@ -19,3 +19,35 @@
a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
}
}
@media (max-width: 767px) {
.site-footer {
padding-block: 2.25rem 1.25rem;
}
.site-footer > .container {
gap: 1.5rem 1rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-inline: 1rem;
}
.site-footer .site-footer__logo {
max-width: 6rem;
}
.site-footer .widget li {
font-size: var(--text-14px);
line-height: 1.1;
margin-bottom: 0.4rem;
}
.site-footer .widget h4 {
font-size: var(--text-16px);
margin-bottom: 0.5rem;
}
.site-footer .text-right {
align-items: flex-start;
text-align: left;
}
}
styles/components/site-header.css
+67
View File
@@ -28,3 +28,70 @@
#globalSearch { @apply text-14px text-light; }
}
}
@media (max-width: 767px) {
.site-header {
overflow: hidden;
width: 100%;
}
.site-header .nav-aux__container {
display: none;
}
.site-header .header__nav-main {
display: grid;
gap: 0.75rem;
grid-template-columns: minmax(0, 1fr) auto !important;
min-height: 4.375rem;
padding: 0.85rem 1rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
width: 100%;
}
.site-header__logo {
height: 2.25rem;
margin-left: 1rem;
min-width: 0;
overflow: hidden;
width: 7.25rem;
}
.site-header__logo img {
height: 2.25rem;
max-width: none;
width: auto;
}
.site-header .nav-main {
align-items: center;
display: flex;
justify-content: flex-end;
min-width: 0;
}
.site-header .nav-main__toggle {
align-items: center;
background: var(--color-secondary);
border-radius: 0.375rem;
display: inline-flex;
height: 2.25rem;
justify-content: center;
margin-right: 1rem;
padding: 0.45rem;
width: 2.25rem;
}
.site-header .nav-main__toggle svg {
height: 1.15rem;
width: 1.15rem;
}
.site-header .nav-main__toggle svg,
.site-header .nav-main__toggle path,
.site-header .nav-main__toggle line {
fill: var(--color-white);
stroke: var(--color-white);
}
}
views/blocks/contact-block/contact-block.css
+46
View File
@@ -42,3 +42,49 @@
z-index: 30;
}
}
@media (max-width: 767px) {
.contact-block {
border-bottom-width: 0.75rem;
border-radius: 0.75rem 0.75rem 0 0;
}
.contact-block .contact-block__media {
inset: 0;
mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%);
}
.contact-block .contact-block__bg-image {
object-fit: cover;
}
.contact-block .contact-block__linework {
bottom: 0.75rem;
height: auto;
max-width: 112%;
right: -32%;
width: 22rem;
}
.contact-block .contact-block__content {
min-height: 18.5rem;
padding: 2.25rem 1.5rem 2.75rem !important;
}
.contact-block .contact-block__text {
font-size: clamp(1.9rem, 8.7vw, 2.45rem);
line-height: 1.02;
max-width: 16rem !important;
}
.contact-block.home-contact {
bottom: auto;
left: 50%;
margin: 2.5rem auto -3.75rem;
max-width: none;
position: relative;
transform: translateX(-50%);
width: min(calc(100vw - 2rem), 22.5rem);
}
}
views/blocks/homepage-hero/homepage-hero.css
+62
View File
@@ -50,3 +50,65 @@
}
}
}
@media (max-width: 767px) {
.homepage-hero {
--hgtHero: 20.75rem;
min-height: var(--hgtHero);
}
.homepage-hero .content-wrapper {
padding-inline: 1rem;
}
.homepage-hero .content-wrapper > div {
max-width: 20rem;
padding-top: 2.25rem;
text-align: left;
}
.homepage-hero .intro h1 {
font-size: clamp(1.8rem, 8vw, 2.2rem);
letter-spacing: 0;
line-height: 0.98;
margin-bottom: 0.75rem;
}
.homepage-hero .intro h1 strong {
font-size: inherit;
line-height: inherit;
}
.homepage-hero .intro p {
font-size: var(--text-14px);
line-height: 1.3;
margin: 0;
max-width: 16rem;
}
.homepage-hero .reset {
gap: 0.7rem;
justify-content: flex-start;
margin-top: 1rem;
}
.homepage-hero .button {
font-size: var(--text-14px);
min-height: 2.25rem;
min-width: 6.35rem;
padding: 0.5rem 0.8rem;
}
.homepage-hero .heroVector .vector {
bottom: 0.15rem;
left: 50%;
transform: translateX(-50%);
width: 170%;
}
.homepage-hero .heroMedia img,
.homepage-hero .heroMedia video {
object-position: center top;
}
}
views/blocks/our-work/our-work.css
+36 -6
View File
@@ -190,20 +190,21 @@
@media (max-width: 640px) {
.our-work {
margin-bottom: 3.5rem;
padding-top: 3rem;
margin-bottom: 2rem;
padding-top: 3.25rem;
}
.our-work__inner {
gap: 2rem;
gap: 1.4rem;
}
.our-work__content {
max-width: 20rem;
text-align: left;
}
.our-work__content .acf-innerblocks-container {
gap: 1.25rem;
gap: 1rem;
}
.our-work__content h1,
@@ -212,14 +213,43 @@
.our-work__content h4,
.our-work__content h5,
.our-work__content h6 {
font-size: var(--text-40px);
font-size: clamp(2rem, 9vw, 2.45rem);
}
.our-work__content p {
font-size: var(--text-14px);
line-height: 1.35;
}
.our-work__content .wp-block-acf-buttons > div {
gap: 0.75rem;
justify-content: flex-start;
}
.our-work__content .button {
font-size: var(--text-14px);
min-height: 2.25rem;
min-width: 6.35rem;
padding: 0.5rem 0.8rem;
}
.our-work__media--left {
justify-self: start;
margin: 0 0 -3.25rem;
max-width: 9.5rem;
position: relative;
z-index: 2;
}
.our-work__media--bottom {
margin-bottom: -3rem;
justify-self: end;
margin-bottom: -2.35rem;
max-width: 20.5rem;
width: calc(100% - 2.25rem);
}
.our-work:not(.has-left-image) .our-work__media--bottom {
justify-self: center;
width: 100%;
}
}
views/blocks/recent-posts/recent-posts.css
+66 -9
View File
@@ -233,35 +233,92 @@
@media (max-width: 640px) {
.recent-posts {
padding-top: clamp(15.5rem, 64vw, 17rem);
padding: 6.25rem 0 3.25rem;
}
.recent-posts__background {
height: clamp(45rem, 192vw, 49rem);
height: 30rem;
}
.recent-posts__vector {
min-height: clamp(45rem, 192vw, 49rem);
min-height: 30rem;
object-position: center top;
}
.recent-posts__header {
margin-bottom: 2rem;
text-align: left;
gap: 1rem;
margin-bottom: 1.75rem;
text-align: center;
}
.recent-posts__heading {
font-size: var(--text-54px);
font-size: var(--text-40px);
}
.recent-posts__intro {
font-size: var(--text-14px);
line-height: 1.35;
max-width: 20rem;
}
.recent-posts__grid {
grid-template-columns: minmax(0, 397px);
grid-template-columns: minmax(0, 18.25rem);
margin-inline: auto;
max-width: 18.25rem;
}
.recent-posts__grid::before {
top: min(250px, calc(100cqw * 250 / 397));
height: 0.75rem;
top: min(184px, calc(100cqw * 250 / 397));
}
.recent-posts__card:nth-child(n + 2) {
display: none;
}
.recent-posts__image-link {
border-radius: 0.5rem 0.5rem 0 0;
}
.recent-posts__body {
padding: 1.5rem;
padding: 1.25rem;
}
.recent-posts__title {
font-size: var(--text-24px);
margin-bottom: 1rem;
}
.recent-posts__excerpt,
.recent-posts__read-more {
font-size: var(--text-14px);
}
.recent-posts__read-more {
padding-top: 1.75rem;
text-decoration-thickness: 3px;
}
.recent-posts__footer {
align-items: center;
flex-direction: column;
gap: 1.25rem;
margin-top: 1.4rem;
}
.recent-posts__footer::before {
background:
radial-gradient(circle, var(--color-cwc-blue-01) 0 0.2rem, transparent 0.22rem) left center / 0.75rem 0.5rem repeat-x;
content: "";
display: block;
height: 0.5rem;
width: 2.25rem;
}
.recent-posts__blog-link.button {
font-size: var(--text-14px);
min-height: 2.25rem;
min-width: 8.5rem;
padding: 0.5rem 0.85rem;
}
}
views/blocks/recent-posts/recent-posts.php
+1 -1
View File
@@ -108,7 +108,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<?php if ( $blog_url ) : ?>
<div class="recent-posts__footer">
<a class="recent-posts__blog-link button" href="<?php echo esc_url( $blog_url ); ?>" data-button-color="secondary" data-button-variant="outline">
<?php echo esc_html__( 'View Blog', 'cwc' ); ?>
<?php echo esc_html__( 'View All News', 'cwc' ); ?>
</a>
</div>
<?php endif; ?>