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

docs: tablet mode paddings #1572

Merged
merged 7 commits into from
Nov 18, 2020
Merged

docs: tablet mode paddings #1572

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
11f17a9
docs: tablet mode
stefanoScalzo Nov 3, 2020
77cb17e
docs: fix arrows
stefanoScalzo Nov 4, 2020
0c7b29d
docs: fix linebreak
stefanoScalzo Nov 4, 2020
594a908
docs:arrow padding
stefanoScalzo Nov 6, 2020
b4aef8a
docs: mobile arrows
stefanoScalzo Nov 10, 2020
3db9666
docs: fatures section padding
stefanoScalzo Nov 16, 2020
0d89212
docs: equal arrows
stefanoScalzo Nov 17, 2020
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
49 changes: 44 additions & 5 deletions docs/_sass/_landingPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -711,9 +711,20 @@ $learn-section-side-margin: 0 2rem;
}
}

.libraries-section,.features-section,.about-section,.community-section, .section {
padding: 140px 44px;
}

.community-section {
&__text {
width: 100%;
text-align: left;
}
}

.section {
flex-direction: column;
padding: 140px 120px;
padding: 140px 44px;

&--learn {
padding-top: 0;
Expand Down Expand Up @@ -757,7 +768,7 @@ $learn-section-side-margin: 0 2rem;
&__container {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
align-items: center;
padding: 0;
min-width: 100%;
margin-left: -24px;
Expand Down Expand Up @@ -786,7 +797,6 @@ $learn-section-side-margin: 0 2rem;

&__item {
margin-bottom: 0;
padding: 0 24px;
max-width: 100%;

&--learn {
Expand Down Expand Up @@ -838,6 +848,31 @@ $learn-section-side-margin: 0 2rem;
font-size: 20px;
line-height: normal;
margin: 0;
max-width: 450px;

&--full-width {
max-width: 100%;
}
}

&__testemonial {
.testemonial-inner {
padding: 0 44px;
}
}

&__testemonial-arrows {
top: 120px;

.left-arrow, .right-arrow {
font-size: 48px;
}
.left-arrow {
margin-left: -44px;
}
.right-arrow {
margin-left: -44px;
}
}

&__title {
Expand All @@ -848,6 +883,12 @@ $learn-section-side-margin: 0 2rem;
}

@media (min-width: 1024px) {
.community-section {
&__text {
max-width: 66.66%;
}
}

.section {

&--testemonials {
Expand Down Expand Up @@ -1347,8 +1388,6 @@ body {

@media (max-width: 900px) {
.libraries-section {
padding: 80px 120px;

&__container {
grid-template-columns: auto;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h2 class="about-section__title">More about Fundamental Library</h2>

<section class="section" id="design">
<h2 class="section__title">Design</h2>
<p class="section__text">
<p class="section__text section__text--full-width">
Our UI Kit bundle includes ready-to-use, state-of-the-art drafts of SAP layouts, patterns and components in Sketch. You are welcome to use the UI kit to visualize your SAP app. They are easy to use and will provide a realistic impression of your final designs.
</p>
<div class="section__container-button">
Expand Down Expand Up @@ -260,7 +260,7 @@ <h3>Blog Post</h3>
<section class="section section--testemonials">
<h1 class="section__title">Testimonials</h1>
<div class="section__button-container">
<p class="section__text">Learn about what other companies have to say about their experience with Fundamental Library.</p>
<p class="section__text section__text--full-width">Learn about what other companies have to say about their experience with Fundamental Library.</p>
</div>
<div class="section__testemonial section__testemonial--outer" id="testemonial">
<div class="section__testemonial-arrows">
Expand Down