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

[BEAM-14312] [Website] change section order, move socials to footer #17408

Merged
merged 20 commits into from
May 12, 2022
Merged

[BEAM-14312] [Website] change section order, move socials to footer #17408

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cb3779a
[BEAM-14312] [Website] change section order, move socials to footer
bullet03 Apr 20, 2022
ed4b97b
[BEAM-14312] [Website] change margin
bullet03 Apr 20, 2022
2ba7991
[BEAM-14312] [Website] change link
bullet03 Apr 20, 2022
2eef20a
[BEAM-14312] [Website] delete section, change title and links of the …
bullet03 Apr 26, 2022
4fba04c
Merge branch 'master' into BEAM-14312-reorder-sections-homepage
bullet03 Apr 27, 2022
7acc56f
[BEAM-14312] [Website] add pipelines section
bullet03 Apr 27, 2022
750fadf
[BEAM-14312] [Website] change image in graphic section
bullet03 Apr 27, 2022
cfb1f5f
[BEAM-14312] [Website] delete width of 95%, change flink link
bullet03 Apr 27, 2022
b77b3e9
[BEAM-14312] [Website] move css style, delete unused html, optimized …
bullet03 Apr 27, 2022
99a8a16
[BEAM-14312] [Website] substitute images, fix css styles for pipeline…
bullet03 Apr 28, 2022
7c81b7f
[BEAM-14312] [Website] add kinesis runner
bullet03 Apr 28, 2022
99afd9a
[BEAM-14312] [Website] add kinesis runner, add margin-right to pipeli…
bullet03 Apr 28, 2022
f685269
[BEAM-14312] [Website] change amazon kinesis logo
bullet03 Apr 29, 2022
bad54be
[BEAM-14312] change structure of logos in the footer
bullet03 May 3, 2022
dfad32b
[BEAM-14312] add license header to linkedin.svg
bullet03 May 4, 2022
ce982d8
Merge branch 'master' into BEAM-14312-reorder-sections-homepage
bullet03 May 4, 2022
d99332d
[BEAM-14312] change margin in quote section
bullet03 May 4, 2022
2c7a226
Merge branch 'master' into BEAM-14312-reorder-sections-homepage
bullet03 May 4, 2022
4f5785b
Merge branch 'master' into BEAM-14312-reorder-sections-homepage
bullet03 May 5, 2022
444dfe2
Merge branch 'master' into BEAM-14312-reorder-sections-homepage
bullet03 May 8, 2022
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
1 change: 1 addition & 0 deletions website/www/site/assets/icons/linkedin-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions website/www/site/assets/scss/_footer.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,15 @@
margin-bottom: $pad
@media (max-width: $ak-breakpoint-lg)
margin-right: 50px
a
img
width: 64px
border-radius: 50%
filter: grayscale(100%)
opacity: 0.7
&:hover, focus
filter: grayscale(0)
opacity: 1

.footer__flex_mobile
display: flex
Expand Down
87 changes: 83 additions & 4 deletions website/www/site/assets/scss/_pillars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,17 @@
.pillars-social-icons {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 45px;

div {
padding-right: 20px;

&:last-child {
padding-right: 0;
}
}

svg {
height: 41px;
width: auto;
Expand All @@ -87,17 +96,87 @@
opacity: 1;
}
}

.pillars-youtube-icon {
margin: 0 80px;
}
}

.pillars-social-text {
@extend .component-text;
max-width: 285px;
}
}

text-align: center;
Copy link
Contributor

@nausharipov nausharipov Apr 27, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

it's unclear where this property belongs. If it belongs to .pillars, move it up:
.pillars { padding: $pad; text-align: center; ...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done


h2 {
@extend .component-title;
}

.margin {
margin-top: 84px;
margin-bottom: 84px;
@media (max-width: $mobile) {
margin-top: 0;
margin-bottom: 64px;
}
}

.row {
display: flex;
justify-content: space-between;
@media (max-width: $mobile) {
flex-direction: column;
align-items: center;
}
.logos-row {
display: flex;
align-items: center;
margin-top: 20px;
max-height: 73px;
@media (max-width: $mobile) {
margin-top: 64px;
}
img {
height: auto;
width: 112px;
}
}
.first_logo {
margin-right: 18px;
}
#last_logo {
margin-left: 18px;
width: 55px;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
max-width: 306px;

h4 {
margin-top: 32px;
}
.more {
margin-top: 32px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
letter-spacing: 0.6px;
color: #f26628;
}
}
.icon {
width: 34px;
height: 44px;
margin-top: 16px;
@media (max-width: $mobile) {
margin-top: 64px;
}
}
img {
max-width: 306px;
height: 42px;
}
}
}

@media (max-width: $ak-breakpoint-lg) {
Expand Down
5 changes: 4 additions & 1 deletion website/www/site/data/en/pillars_social.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,12 @@
- name: pillars-github-icon
icon: icons/github-icon.svg
url: https://github.com/apache/beam
- name: pillars-linkedin-icon
icon: icons/linkedin-icon.svg
url: https://beam.apache.org/
Copy link
Contributor

Choose a reason for hiding this comment

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

is the linkedin icon supposed to lead to beam.apache.org?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

changed

- name: pillars-youtube-icon
icon: icons/youtube-icon.svg
url: https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ
- name: pillars-twitter-icon
icon: icons/twitter-icon.svg
url: https://twitter.com/apachebeam
url: https://twitter.com/apachebeam
2 changes: 1 addition & 1 deletion website/www/site/layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
{{ block "ctas-section" . }}{{ end }}
{{ block "graphic-section" . }}{{ end }}
{{ block "pillars-section" . }}{{ end }}
{{ block "playground-section" . }}{{ end }}
{{ block "logos-section" . }}{{ end }}
{{ block "playground-section" . }}{{ end }}
{{ block "quotes-section" . }}{{ end }}
{{ block "quotes-mobile-section" . }}{{ end }}
{{ block "calendar-section" . }}{{ end }}
Expand Down
63 changes: 26 additions & 37 deletions website/www/site/layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,33 @@ <h2 class="pillars-title">
{{ partial "pillars/pillars-item" (dict "logo" $pillar.icon "header" $pillar.title "text" $pillar.body) }}
{{ end }}
</div>
<div class="pillars-social">
<div class="pillars-social-icons">
{{ $data := index $.Site.Data .Site.Language.Lang }}
{{ range $pillars_social := $data.pillars_social }}
{{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon "url" $pillars_social.url "name" $pillars_social.name) }}
{{ end }}
<div class="section">
<h2 class="margin">{{ T "home-model-title2" }}</h2>
<div class="row margin">
<div class="column">
<div class="logos-row">
<img class="first_logo" src="/images/logos/runners/flink.png"/>
<img src="/images/logos/runners/spark.png"/>
<img id="last_logo" src="/images/logos/runners/amazon_kinesis.png"/>
</div>
<p class="more">{{ T "home-graphic-more" }}</p>
<div>
<h4>{{ T "home-graphic-runner-title" }}</h4>
<p>{{ T "home-graphic-runner-body" }}</p>
</div>
</div>
<div class="column">
<div class="logos-row">
<img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
<img src="/images/logos/sdks/go.png"/>
</div>
<p class="more">{{ T "home-graphic-more" }}</p>
<div>
<h4>{{ T "home-graphic-language-title" }}</h4>
<p>{{ T "home-graphic-language-body" }}</p>
</div>
</div>
</div>
<p class="pillars-social-text">
{{ T "home-pillars-social-text" }}
</p>
</div>
</div>
{{ end }}
Expand Down Expand Up @@ -105,34 +122,6 @@ <h4>{{ .title }}</h4>
</div>
</div>
</div>
<div class="section">
<h2 class="margin">{{ T "home-model-title2" }}</h2>
<div class="row margin">
<div class="column">
<div class="logos-row">
<img class="first_logo" src="/images/logos/runners/flink.png"/>
<img src="/images/logos/runners/spark.png"/>
<img id="last_logo" src="/images/logos/runners/amazon_kinesis.png"/>
</div>
<p class="more">{{ T "home-graphic-more" }}</p>
<div>
<h4>{{ T "home-graphic-runner-title" }}</h4>
<p>{{ T "home-graphic-runner-body" }}</p>
</div>
</div>
<div class="column">
<div class="logos-row">
<img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
<img src="/images/logos/sdks/go.png"/>
</div>
<p class="more">{{ T "home-graphic-more" }}</p>
<div>
<h4>{{ T "home-graphic-language-title" }}</h4>
<p>{{ T "home-graphic-language-body" }}</p>
</div>
</div>
</div>
</div>
</div>
{{ end }}

Expand Down
22 changes: 22 additions & 0 deletions website/www/site/layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,28 @@
{{ T "footer-copy" }}
</div>
</div>
<div class="footer__cols__col footer__cols__col__logos">
<div class="footer__cols__col__logo">
<a href="https://github.com/apache/beam">
<img src="/images/logos/social-icons/github-logo-150.png" class="footer__logo" alt="Github logo">
</a>
</div>
<div class="footer__cols__col__logo">
<a href="https://www.linkedin.com/company/apache-beam/">
<img src="/images/logos/social-icons/linkedin-logo-150.png" class="footer__logo" alt="Linkedin logo">
</a>
</div>
<div class="footer__cols__col__logo">
<a href="https://twitter.com/apachebeam">
<img src="/images/logos/social-icons/twitter-logo-150.png" class="footer__logo" alt="Twitter logo">
</a>
</div>
<div class="footer__cols__col__logo">
<a href="https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ">
<img src="/images/logos/social-icons/youtube-logo-150.png" class="footer__logo" alt="Youtube logo">
</a>
</div>
</div>
</div>
</div>

Expand Down
Binary file added website/www/site/static/images/logos/social-icons/github-logo-150.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/www/site/static/images/logos/social-icons/linkedin-logo-150.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/www/site/static/images/logos/social-icons/twitter-logo-150.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/www/site/static/images/logos/social-icons/youtube-logo-150.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.