Skip to content

Commit 4b56cb9

Browse files
Thomas StrombergThomas Stromberg
Thomas Stromberg
authored and
Thomas Stromberg
committed
push it real good
1 parent 7995d61 commit 4b56cb9

File tree

8 files changed

+152
-11
lines changed

8 files changed

+152
-11
lines changed

‎src/about/index.njk‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ title: About
55

66
<section class="about-hero">
77
<div class="about-hero__container">
8-
<h1 class="about-hero__title">About us</h1>
9-
<p class="about-hero__subtitle">An independent software publisher focused on productivity and security.</p>
8+
<div class="about-hero__content">
9+
<div class="about-hero__text">
10+
<h1 class="about-hero__title">About us</h1>
11+
<p class="about-hero__subtitle">An independent software publisher focused on productivity and security.</p>
12+
</div>
13+
<div class="about-hero__image">
14+
<img src="/assets/about-goose.png" alt="About">
15+
</div>
16+
</div>
1017
</div>
1118
</section>
1219

‎src/assets/about-goose.png‎

161 KB
Loading

‎src/assets/blog-goose.png‎

161 KB
Loading

‎src/assets/css/style.css‎

Lines changed: 125 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3080,6 +3080,47 @@ hr.text-separator {
30803080
font-weight: 600;
30813081
}
30823082

3083+
.about-hero__content {
3084+
display: flex;
3085+
align-items: center;
3086+
gap: calc(var(--space) * 4);
3087+
max-width: 1400px;
3088+
margin: 0 auto;
3089+
}
3090+
3091+
.about-hero__text {
3092+
flex: 1;
3093+
}
3094+
3095+
.about-hero__image {
3096+
flex-shrink: 0;
3097+
width: 160px;
3098+
height: 160px;
3099+
background: var(--white);
3100+
border-radius: 50%;
3101+
overflow: hidden;
3102+
}
3103+
3104+
.about-hero__image img {
3105+
width: 100%;
3106+
height: 100%;
3107+
object-fit: cover;
3108+
display: block;
3109+
}
3110+
3111+
@media (max-width: 768px) {
3112+
.about-hero__content {
3113+
flex-direction: column;
3114+
text-align: center;
3115+
gap: calc(var(--space) * 4);
3116+
}
3117+
3118+
.about-hero__image {
3119+
width: 160px;
3120+
height: 160px;
3121+
}
3122+
}
3123+
30833124
/* About Story Section */
30843125
.about-story {
30853126
padding: calc(var(--space) * 6) calc(var(--space) * 3);
@@ -3424,6 +3465,47 @@ hr.text-separator {
34243465
font-weight: 600;
34253466
}
34263467

3468+
.products-hero__content {
3469+
display: flex;
3470+
align-items: center;
3471+
gap: calc(var(--space) * 4);
3472+
max-width: 1400px;
3473+
margin: 0 auto;
3474+
}
3475+
3476+
.products-hero__text {
3477+
flex: 1;
3478+
}
3479+
3480+
.products-hero__image {
3481+
flex-shrink: 0;
3482+
width: 160px;
3483+
height: 160px;
3484+
background: var(--white);
3485+
border-radius: 50%;
3486+
overflow: hidden;
3487+
}
3488+
3489+
.products-hero__image img {
3490+
width: 100%;
3491+
height: 100%;
3492+
object-fit: cover;
3493+
display: block;
3494+
}
3495+
3496+
@media (max-width: 768px) {
3497+
.products-hero__content {
3498+
flex-direction: column;
3499+
text-align: center;
3500+
gap: calc(var(--space) * 4);
3501+
}
3502+
3503+
.products-hero__image {
3504+
width: 160px;
3505+
height: 160px;
3506+
}
3507+
}
3508+
34273509
/* Products Main Section */
34283510
.products-main {
34293511
padding: calc(var(--space) * 8) calc(var(--space) * 3);
@@ -4107,16 +4189,13 @@ hr.text-separator {
41074189
height: 160px;
41084190
background: var(--white);
41094191
border-radius: 50%;
4110-
display: flex;
4111-
align-items: center;
4112-
justify-content: center;
4113-
padding: calc(var(--space) * 2);
4192+
overflow: hidden;
41144193
}
41154194

41164195
.support-hero__image img {
41174196
width: 100%;
41184197
height: 100%;
4119-
object-fit: contain;
4198+
object-fit: cover;
41204199
display: block;
41214200
}
41224201

@@ -5317,6 +5396,47 @@ hr.text-separator {
53175396
opacity: 0.9;
53185397
}
53195398

5399+
.blog-hero__content {
5400+
display: flex;
5401+
align-items: center;
5402+
gap: calc(var(--space) * 4);
5403+
max-width: 80rem;
5404+
margin: 0 auto;
5405+
}
5406+
5407+
.blog-hero__text {
5408+
flex: 1;
5409+
}
5410+
5411+
.blog-hero__image {
5412+
flex-shrink: 0;
5413+
width: 160px;
5414+
height: 160px;
5415+
background: var(--white);
5416+
border-radius: 50%;
5417+
overflow: hidden;
5418+
}
5419+
5420+
.blog-hero__image img {
5421+
width: 100%;
5422+
height: 100%;
5423+
object-fit: cover;
5424+
display: block;
5425+
}
5426+
5427+
@media (max-width: 768px) {
5428+
.blog-hero__content {
5429+
flex-direction: column;
5430+
text-align: center;
5431+
gap: calc(var(--space) * 4);
5432+
}
5433+
5434+
.blog-hero__image {
5435+
width: 160px;
5436+
height: 160px;
5437+
}
5438+
}
5439+
53205440
/* Blog Content */
53215441
.blog-content {
53225442
padding: calc(var(--space) * 8) calc(var(--space) * 3);

‎src/assets/logo.png‎

448 KB
Loading

‎src/assets/products-goose.png‎

121 KB
Loading

‎src/blog/index.njk‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,15 @@ eleventyExcludeFromCollections: true
77

88
<section class="blog-hero">
99
<div class="blog-hero__container">
10-
<h1 class="blog-hero__title">BLOG</h1>
11-
<p class="blog-hero__subtitle">Updates, insights, and stories from the codeGROOVE team.</p>
10+
<div class="blog-hero__content">
11+
<div class="blog-hero__text">
12+
<h1 class="blog-hero__title">BLOG</h1>
13+
<p class="blog-hero__subtitle">Updates, insights, and stories from the codeGROOVE team.</p>
14+
</div>
15+
<div class="blog-hero__image">
16+
<img src="/assets/blog-goose.png" alt="Blog">
17+
</div>
18+
</div>
1219
</div>
1320
</section>
1421

‎src/products/index.njk‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ title: Products
55

66
<section class="products-hero">
77
<div class="products-hero__container">
8-
<h1 class="products-hero__title">What we make</h1>
9-
<p class="products-hero__subtitle">Tools that solve real problems. No fluff.</p>
8+
<div class="products-hero__content">
9+
<div class="products-hero__text">
10+
<h1 class="products-hero__title">What we make</h1>
11+
<p class="products-hero__subtitle">Tools that solve real problems. No fluff.</p>
12+
</div>
13+
<div class="products-hero__image">
14+
<img src="/assets/products-goose.png" alt="Products">
15+
</div>
16+
</div>
1017
</div>
1118
</section>
1219

0 commit comments

Comments
 (0)