Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement/home page content formatting and banner responsiveness #101

Merged
merged 3 commits into from
Oct 4, 2024
Merged

enhancement/home page content formatting and banner responsiveness #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab3841f
hero banner responsiveness tweaks
thescientist13 Oct 2, 2024
8109382
capabilities formatting
thescientist13 Oct 2, 2024
f6fe084
internal design feedback and more responsive tweaks
thescientist13 Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/get-started/get-started.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default class GetStarted extends HTMLElement {
<h3 class="${styles.heading}">Get started in seconds 🚀</h3>

<div class="${styles.snippet}">
<pre>${code}</pre>
<pre>&dollar; ${code}</pre>
<app-ctc content="${code}">
</app-ctc>
</div>
Expand Down
32 changes: 19 additions & 13 deletions src/components/get-started/get-started.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.container {
padding: var(--size-fluid-3) var(--size-fluid-2);
padding: var(--size-fluid-3) var(--size-fluid-1);
color: var(--color-white);
background-color: var(--color-tertiary);
text-align: center;
Expand All @@ -19,12 +19,21 @@
background-color: var(--color-white);
color: var(--color-black);
margin: 10px 0;
max-width: 98%;
}

.snippet pre {
font-size: 10px;
font-size: 13px;
text-align: center;
display: inline-block;
padding: var(--size-px-4) 0;
background-color: transparent;
color: var(--color-black);
}

.snippet app-ctc {
display: none;
vertical-align: middle;
}

.buttonBlitz {
Expand Down Expand Up @@ -65,22 +74,19 @@
color: var(--color-black) !important;
}

.snippet pre {
padding: var(--size-px-4) var(--size-px-1);
background-color: transparent;
color: var(--color-black);
}

.snippet app-ctc {
vertical-align: middle;
}

@media (min-width: 1024px) {
.snippet {
max-width: 60%;
max-width: fit-content;
padding: var(--size-2);
display: inline-block;
}

.snippet pre {
font-size: var(--font-size-1);
width: fit-content;
}

.snippet app-ctc {
display: inline-block;
}
}
2 changes: 1 addition & 1 deletion src/components/hero-banner/hero-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class HeroBanner extends HTMLElement {

<div class="${styles.snippetContainer}">
<div class="${styles.snippet}">
<pre>${code}</pre>
<pre>&dollar; ${code}</pre>
<app-ctc content="${code}">
</app-ctc>
</div>
Expand Down
55 changes: 40 additions & 15 deletions src/components/hero-banner/hero-banner.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
.heading {
font-family: var(--font-primary-bold);
font-size: var(--font-size-6);
padding: 0 var(--size-4);
margin-block-start: 0;
margin-block-end: 0;
}
Expand All @@ -21,6 +22,7 @@
font-size: var(--font-size-4);
letter-spacing: var(--font-letterspacing-2);
margin: var(--size-px-2) 0;
padding: var(--size-3);
}

.ctaContainer {
Expand All @@ -32,7 +34,7 @@
display: inline-block;
border-radius: var(--radius-3);
background-color: transparent;
padding: var(--size-fluid-2);
padding: var(--size-3);
border: 1px solid var(--color-border);
width: 100%;
height: fit-content;
Expand All @@ -44,7 +46,7 @@
.buttonStarted {
display: inline-block;
border-radius: var(--radius-3);
padding: var(--size-fluid-2);
padding: var(--size-3);
background-color: var(--color-primary);
width: 100%;
color: var(--color-white) !important;
Expand Down Expand Up @@ -76,27 +78,24 @@
box-shadow: var(--shadow-4);
margin: var(--size-px-2) 0;
text-align: center;
padding: var(--size-fluid-1);
padding: var(--size-2);
display: block;
}

.snippet pre {
font-size: 18px;
font-size: 16px;
display: inline-block;
height: 46px;
align-content: center;
display: inline;
vertical-align: text-top;
background-color: transparent;
color: var(--color-black);
vertical-align: middle;
}

.snippet app-ctc {
display: inline-block;
text-align: right;
vertical-align: baseline;
position: relative;
cursor: pointer;
display: none;
Copy link
Member Author

@thescientist13 thescientist13 Oct 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a $ just for now and then refine in conjunction with #96
Screenshot 2024-10-02 at 7 42 16 PM

also, move content about static prerendering output up to the text
Screenshot 2024-10-03 at 8 46 44 PM

}

.emphasisCorner {
Expand All @@ -111,6 +110,16 @@
font-size: var(--font-size-7);
}

.ctaContainer {
padding: 0 0 0 var(--size-1);
}

.heading,
.headingSub {
width: 98%;
margin: 0 auto;
}

.buttonBlitz,
.buttonStarted {
width: 45%;
Expand All @@ -124,19 +133,26 @@
.snippet pre {
padding: 0 10px;
}

.snippet app-ctc {
display: inline-block;
}
}

/* use 1025 as a quick tweak for iPad Pro breakpoint */
@media (min-width: 1025px) {
@media (min-width: 1024px) {
.container {
text-align: left;
}

.ctaContainer {
width: 98%;
margin: 0 auto;
text-align: left;
}

.buttonBlitz,
.buttonStarted {
max-width: fit-content;
padding: var(--size-fluid-1);
}

.snippet {
Expand All @@ -152,15 +168,19 @@
display: inline-block;
width: fit-content;
}
}

@media (min-width: 1100px) {
.emphasisCorner {
display: inline-block;
}
}

@media (min-width: 1440px) {
.container {
max-width: 90%;
.heading,
.headingSub {
padding: 0;
margin: 0;
}

.headingSub {
Expand All @@ -173,10 +193,15 @@

.snippetContainer {
display: inline-block;
width: 50%;
width: 60%;
}

.emphasisCorner {
display: inline-block;
}

.ctaContainer {
padding: 0;
margin: 0;
}
}
4 changes: 2 additions & 2 deletions src/components/latest-post/latest-post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export default class LatestPost extends HTMLElement {

this.innerHTML = `
<div class="${styles.pill}">
<span class="${styles.new}">🎉 New</span>
<a class="${styles.link}" href="${link}" title="Read our latest post">${title} &#8594</a>
<span class="new">🎉 New</span>
<a href="${link}" title="Read our latest post">${title} &#8594</a>
</div>
`;
}
Expand Down
20 changes: 10 additions & 10 deletions src/components/latest-post/latest-post.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
border: var(--radius-1) solid var(--color-gray-background);
box-shadow: var(--shadow-2);
text-align: left;
}

.new {
background-color: var(--color-green-pale);
border-radius: var(--radius-4);
padding: var(--size-2);
margin-right: var(--size-fluid-1);
}
& .new {
background-color: var(--color-green-pale);
border-radius: var(--radius-4);
padding: var(--size-2);
margin-right: var(--size-fluid-1);
}

.link {
line-height: var(--size-px-8);
color: var(--color-black);
& a {
line-height: var(--size-px-8);
color: var(--color-black);
}
}
10 changes: 5 additions & 5 deletions src/pages/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ imports:
<div class="capabilities-content item1">
<span>Hybrid Routing</span>
<i>html.svg</i>
<p>Greenwood is HTML first by design. Start from just an <em>index.html</em> file or leverage <strong>hybrid, file-system based routing</strong> to easily achieve static and dynamic pages side-by-side. Single Page Applications (SPA) also supported.</p>
<p>Greenwood is HTML first by design. Start from just an <code>index.html</code> file or leverage <strong>hybrid, file-system based routing</strong> to easily achieve static and dynamic pages side-by-side. Single Page Applications (SPA) and pre-rendering also supported.</p>

```shell
src/
pages/
api/
search.js # API route
index.html # Static (SSG)
products.js # Dynamic (SSR), or emit as static with pre-rendering
products.js # Dynamic (SSR)
about.md # markdown also supported
```
</div>
Expand All @@ -39,7 +39,7 @@ imports:
<div class="capabilities-content item2">
<span>Server Rendering</span>
<i>build-ssg.svg</i>
<p>Web Components are not only a great component model, but also a great templating model for generating static HTML. Below is a dynamic page in Greenwood powered by the <em>Custom Elements</em> API and server-rendering an imported custom element.</p>
<p>Web Components are not only a great component model, but also a great templating model for generating static HTML. Below is a dynamic page in Greenwood powered by the <strong>Custom Elements</strong> API and server-rendering an imported custom element.</p>

```js
// src/pages/products.js
Expand Down Expand Up @@ -79,7 +79,7 @@ imports:
<div class="capabilities-content item3">
<span>Web Components</span>
<i>web-components.svg</i>
<p>Greenwood makes it possible to author real isomorphic Web Components, using Light or Shadow DOM, re-using that same definition across the server and client side. Combined with Web APIs like <em>Constructable Stylesheets</em> and <em>Import Attributes</em>, Web Components make for a compelling solution as the web's own component model.</p>
<p>Greenwood makes it possible to author real isomorphic Web Components, using Light or Shadow DOM, re-using that same definition across the client <em>and</em> the server. Combined with Web APIs like <strong>Constructable Stylesheets</strong> and <strong>Import Attributes</strong>, Web Components make for a compelling solution as the web's own component model.</p>

```js
// src/components/card.js
Expand Down Expand Up @@ -119,7 +119,7 @@ imports:
<div class="capabilities-content item4">
<span>API Routes</span>
<i>api-routes.svg</i>
<p>Need client side data fetching or mutations? Greenwood provides API routes out of the box that are fully invested in web standards like <em>Fetch</em> and <em>FormData</em>. Of course it is all fully compatible with server-rendering Web Components; a perfect companion for HTML over the wire solutions!</p>
<p>Need client side data fetching or mutations? Greenwood provides API routes out of the box that are fully invested in web standards like <code>Fetch</code> and <code>FormData</code>. Of course it is all fully compatible with server-rendering Web Components; a perfect companion for HTML over the wire solutions!</p>

```js
// src/pages/api/search.js
Expand Down
17 changes: 8 additions & 9 deletions src/styles/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@ app-hero-banner {
margin: var(--size-2) auto;
}

app-latest-post {
width: 92%;
margin: 0 auto;
}

.capabilities-content {
display: none;
}

@media (min-width: 760px) {
@media (min-width: 768px) {
app-hero-banner,
app-latest-post {
padding: var(--size-2);
}
}

@media (min-width: 1024px) {
app-hero-banner,
app-latest-post {
width: 80%;
}
}

@media (min-width: 1440px) {
app-hero-banner,
app-latest-post {
width: 70%;
width: 80%;
padding-left: 0;
}
}
Loading