Skip to content

Commit

Permalink
feat: completed better responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@lmammino
lmammino committed Jan 5, 2024
1 parent 4fdc07e commit 4010931
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 45 deletions.
50 changes: 26 additions & 24 deletions src/index.html.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ og_type:
<div class="bg-green">
<section id="who-is-it-for" class="section bg-white bd-rd is-medium">
<div class="container is-max-desktop">
<div class="container bg-green px-6 py-6 bd-all-small" style="max-width: 800px;">
<div id="who-is-it-for-main" class="container bg-green bd-all-small" style="max-width: 800px;">
<h2 class="title underline-bright is-2 has-text-centered mb-6">
<span>Who is <em>Node.js Design Patterns</em> for?</span>
</h2>
Expand All @@ -425,37 +425,39 @@ og_type:
</div>
</div>

<h2 class="title is-2 underline has-text-centered mt-6">
<span>Why shouldn&apos;t you Miss this book?</span>
</h2>
<div id="who-is-it-for-why">
<h2 class="title is-2 underline has-text-centered mt-6">
<span>Why shouldn&apos;t you Miss this book?</span>
</h2>

<div class="container is-max-desktop">
<div class="columns is-centered">
<div class="column is-6">
<div class="container">
<p>
<strong>Much more than just a textbook!</strong>
</p>
<div class="container is-max-desktop">
<div class="columns is-centered">
<div class="column is-6">
<div class="container">
<p>
<strong>Much more than just a textbook!</strong>
</p>

<p>
<em>Node.js Design Patterns</em> is a <strong>specific manual</strong> covering Node.js topics from A to Z.
<p>
<em>Node.js Design Patterns</em> is a <strong>specific manual</strong> covering Node.js topics from A to Z.
</p>
<p>You will have the opportunity of <strong>applying what you are learning</strong> with lots of exercises.</p>
<p>It is much more practical than a regular manual, just to make sure you <strong>understand actual market needs</strong>.</p>
<p>You will also have the possibility of <strong>connecting with</strong> an entire <strong>developers community on GitHub</strong> and the authors.</p>
<p>You will have the opportunity of <strong>applying what you are learning</strong> with lots of exercises.</p>
<p>It is much more practical than a regular manual, just to make sure you <strong>understand actual market needs</strong>.</p>
<p>You will also have the possibility of <strong>connecting with</strong> an entire <strong>developers community on GitHub</strong> and the authors.</p>
</div>
</div>
</div>
<div class="column is-6">
<div>
{% responsiveImage './img/node-js-design-patterns-open-book-with-reactor-patterns-diagrams.png', 'Node.js Design Patterns. open book showing some of the diagrams about the reactor pattern' %}
<div class="column is-6">
<div>
{% responsiveImage './img/node-js-design-patterns-open-book-with-reactor-patterns-diagrams.png', 'Node.js Design Patterns. open book showing some of the diagrams about the reactor pattern' %}
</div>
</div>
</div>
</div>
</div>

<h2 class="subtitle is-4 has-text-centered mt-6">
<span>Are you ready to take your Node.js knowledge to the <strong>next level</strong>?</span>
</h2>
<h2 class="subtitle is-4 has-text-centered mt-6">
<span>Are you ready to take your Node.js knowledge to the <strong>next level</strong>?</span>
</h2>
</div>

<div class="mt-6">
<div class="buttons is-justify-content-center">
Expand Down
142 changes: 121 additions & 21 deletions src/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,8 +318,6 @@ nav.navbar {
}
}



h3 {
font-size: 1.5rem;
margin: 0 0 3rem 0;
Expand Down Expand Up @@ -381,33 +379,69 @@ nav.navbar {

#benefits {
section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

h2 {
font-size: 2rem;
}

@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}

h2 {
font-size: 2.5rem;
}
}
}

#authors {

section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

h2 {
line-height: 3rem;
line-height: 2.5rem;
margin: 0;
padding: 0;
}

h3.subtitle {
h3.title {
margin: 3rem 0 1.5rem 0;
padding: 0;
line-height: 3rem;
text-align: center;
}

h3.subtitle {
line-height: 2rem;
font-size: 1.5rem;
padding: 3rem 0 0 0;
}

h3.title {
margin: 3rem 0 1.5rem 0;
padding: 0;
line-height: 3rem;
text-align: left;

@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}

h2 {
line-height: 2.5rem;
margin: 0;
padding: 0;
}

h3.title {
text-align: left;
}

h3.subtitle {
line-height: 2.5rem;
font-size: 1.5rem;
padding: 3rem 0 0 0;
}
}

p {
Expand Down Expand Up @@ -449,7 +483,13 @@ nav.navbar {

#reviews {
section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}
}

h2 {
Expand All @@ -464,7 +504,32 @@ nav.navbar {
}

#who-is-it-for {
padding: 4.5rem;
padding: 4.5rem 0rem;

h2 {
font-size: 2rem;
}

#who-is-it-for-main {
padding: 2rem 1rem;
}

#who-is-it-for-why {
padding: 2rem 1rem;
}


@media screen and (min-width: 769px) {
padding: 4.5rem;

h2 {
font-size: 2.5rem;
}

#who-is-it-for-main {
padding: 3rem;
}
}

ul li {
font-size: 1.25rem;
Expand All @@ -483,27 +548,58 @@ nav.navbar {

#final-cta {
section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

h2 {
line-height: 3rem;
font-size: 2rem;
}

h3 {
line-height: 2rem;
@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}

h2 {
font-size: 2.5rem;
line-height: 3rem;
}

h3 {
line-height: 2rem;
}
}
}

#amazon-reviews {
section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

h2 {
font-size: 2rem;
}

@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}

h2 {
font-size: 2.5rem;
}
}
}

#faq {
section {
padding: 4.5rem;
padding: 4.5rem 1rem;
}

@media screen and (min-width: 769px) {
section {
padding: 4.5rem;
}
}

dt {
Expand Down Expand Up @@ -576,7 +672,11 @@ nav.navbar {
}

#sample-chapter {
padding: 4.5rem;
padding: 4.5rem 1rem;

@media screen and (min-width: 769px) {
padding: 4.5rem;
}

h2,
h3 {
Expand Down

0 comments on commit 4010931

Please sign in to comment.