Skip to content

Updates to the homepage - add new tagline, why scala? and use cases #1518

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

Merged
merged 10 commits into from
Jul 11, 2023
Merged

Updates to the homepage - add new tagline, why scala? and use cases #1518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d40b8d7
reword scala main resources links
bishabosha Jan 13, 2023
358c443
reword tagline; add why scala section
bishabosha Jan 13, 2023
c7ae573
remove nutshell, add use cases
bishabosha Feb 3, 2023
409747d
temporary single-item users section
bishabosha Jun 29, 2023
21ca3fa
adjust style of ecosystem section
bishabosha Jun 29, 2023
0c18b96
add link
bishabosha Jun 30, 2023
787af98
add anchors to close buttons
bishabosha Jun 30, 2023
b7f5fdf
minor text updates, demo calling client
bishabosha Jul 3, 2023
81f3260
adjust frontend section to focus on frontend
bishabosha Jul 3, 2023
2b9391e
workshopped changes
bishabosha Jul 3, 2023
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
4 changes: 4 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ defaults:
collections:
install_tabs:
output: false
why_scala_items:
output: false
scala_use_case_items:
output: false
scala_carousel_items:
output: false
scala_items:
Expand Down
2 changes: 1 addition & 1 deletion _data/awesome-scala.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
summaryText: Scala is widely used in all these areas and more.
summaryText: Have another use case? Scaladex indexes awesome Scala libraries. Search in the box below.
links:
- title: Big Data Processing
url: https://index.scala-lang.org/awesome#big-data
Expand Down
203 changes: 139 additions & 64 deletions _layouts/frontpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,12 @@
<div class="wrap">
<!-- Navigation -->
<nav class="navigation" role="menu">
<a href="/" class="navigation-bdand">
<img src="/resources/img/frontpage/[email protected]" alt="">
<div class="navigation-bdand-vfill-lg hide-lg">
<!-- spacer to substitute for hidden logo, disappears below the large breakpoint -->
</div>
<a href="/" class="navigation-bdand show-lg">
<!-- show standard nav logo below the large breakpoint -->
<img src="/resources/img/frontpage/[email protected]" alt=""/>
</a>
<div class="navigation-panel-button">
<i class="fa fa-bars"></i>
Expand All @@ -33,22 +37,26 @@
</ul>
</nav>
</div>
<div class="wrap">
<div class="wrap flex-row-align-end">
<!-- Inner Text -->
<div class="col-lg-6">
<div class="inner-text">
<h1>{{page.headerTitle}}</h1>
<p>{{page.headerSubtitle}}</p>
{% for release in site.data.scala-releases %}
{% if release.category == "current_version" %}
<a href="/download/{{ release.version }}.html" class="button">
Scala {{ release.version }}
</a>
{% endif %}
{% endfor %}
<a href="/download/all.html" class="button">
All Releases
</a>
<div class="hero-logo hide-lg"></div>
<h2>{{page.headerSubtitle}}</h2>
<div class="button-row__container">
<div class="button-row">
{% for release in site.data.scala-releases %}
{% if release.category == "current_version" %}
<a href="/download/{{ release.version }}.html" class="button">
Scala {{ release.version }}
</a>
{% endif %}
{% endfor %}
<a href="/download/all.html" class="button">
All Releases
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
Expand Down Expand Up @@ -99,68 +107,75 @@ <h1>{{page.headerTitle}}</h1>

<main id="site-main">

<!-- Scala in a Nutshell -->
<!-- Why Scala -->
<section class="nutshell">
<div class="wrap">
<div class="heading-line">
<h2><span>Scala in a Nutshell</span></h2>
<div class="call-to-action action-medium">
<p>Click the buttons to see Scala in action,
or visit the <a href="/documentation/">Scala Documentation</a> to learn more.</p>
<!-- <div class="heading-line">
<h2><span>{{page.whyScalaTitle}}</span></h2>
</div> -->
<div class="scala-items-grid">
<div class="items-menu">
{% for scalaItem in site.why_scala_items %}
<div class="scala-item scala-item_why-scala ">
<div class="scala-item_content">
<h3>{{scalaItem.shortTitle}}</h3>
<p>{{scalaItem.shortDescription}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="scala-items-list">
<div class="items-menu">
{% for scalaItem in site.scala_items %}
{% assign loopIndexMod = forloop.index | minus: 1 | modulo: 3 %}
</section>

{% if loopIndexMod == 0 %}
{% assign codeSnippets = '' | split: ',' %}
<div class="wrap">
{% endif %}
{% assign codeSnippets = codeSnippets | push: scalaItem.content %}
<div class="scala-item">
<h3>{{scalaItem.shortTitle}}</h3>
<p>{{scalaItem.shortDescription}}</p>
<div class="button button-more">More...</div>
<!-- Use cases -->
<section class="nutshell">
<div class="wrap">
<div class="heading-line">
<h2><span>{{page.useCaseTitle}}</span></h2>
</div>
<div class="wrap">
<div class="section-text ta-c">
<p>{{page.useCaseIntroduction}}</p>
</div>
</div>
<div class="scala-items-grid g-cols-4">
<div class="items-menu">
{% for scalaItem in site.scala_use_case_items %}
<div class="scala-item scala-item_use-cases ">
<div class="scala-item_content">
<img class="scala-item_icon" src="/resources/img/icons/{{scalaItem.icon}}" alt="{{scalaItem.shortTitle}}"/>
<h3>{{scalaItem.shortTitle}}</h3>
<p>{{scalaItem.shortDescription}}</p>
</div>
<a href="#{{scalaItem.anchorTarget}}" class="button button_call-to-action">{{scalaItem.expandText | default: 'See More...' }}</a>
</div>
{% if loopIndexMod == 2 or forloop.last %}
<div id="{{scalaItem.anchorTarget}}" class="items-content">
<div class="wrap">
<a id="{{scalaItem.anchorTarget}}-close" class="items-content_close" href="#{{scalaItem.anchorTarget}}-close"><i class="fa fa-close"></i></a>
</div>
<div class="items-content">
{% for snippet in codeSnippets %}
<div class="items-code">{{snippet}}</div>
{% endfor %}
<div class="items-code">
<div class="wrap">
{{scalaItem.content}}
<a href="#{{scalaItem.anchorTarget}}" class="button button_return-anchor"><i class="fa-solid fa-angle-up"></i> back to top</a>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</section>

<!-- Scala backends -->
<section class="runs">
<div class="wrap">
<h2>{{site.data.common.texts.scalaBackendsTitle}}</h2>
<ul>
{% for backend in page.scalaBackends %}
<li class="masterTooltip" title="{{backend.description}}">
<span>
<a href="{{backend.link}}"><img src="{{backend.icon}}" alt="{{backend.description}}"></a>
</span>
{% if backend.beta == 1 %}<span class="beta">beta</span>{% endif %}
</li>
{% unless forloop.last %}<li></li>{% endunless %}
{% endfor %}
</ul>
</div>
</section>

<!-- Scala Ecosystem -->
<section class="scala-ecosystem">
<div class="wrap">
<div class="heading-line">
<!-- <div class="heading-line">
<h2><span>{{page.ecosystemTitle}}</span></h2>
</div> -->
<div class="section-text ta-c">
<p>{{site.data.awesome-scala.summaryText}}</p>
</div>
<div class="browser">
<div class="header-browser">
Expand All @@ -169,24 +184,84 @@ <h2><span>{{page.ecosystemTitle}}</span></h2>
<div class="main-browser">
<div class="input-control">
<span><i class="fa fa-search"></i></span>
<input type="text" placeholder="Find an awesome Scala library" id="scaladex-search">
<input type="text" placeholder="e.g. database" id="scaladex-search">
</div>
</div>
<a class="button awesome" href="{{site.data.common.scaladexUrl}}/awesome">Awesome Scala</a>
</div>
</div>
<div class="awesome-table">
<!-- <div class="awesome-table">
<div class="wrap">
<div class="awesome-items">
{% for awesomeLink in site.data.awesome-scala.links %}
<a href="{{awesomeLink.url}}" class="content-card">
<a href="{{awesomeLink.url}}" class="button button_call-to-action content-card">
<h3><i class="fa fa-search"></i>{{awesomeLink.title}}</h3>
</a>
{% endfor %}
</div>
<div class="awesome-summary">
</div> -->
<!-- <div class="awesome-summary">
<p class="awesome-summary-text">{{site.data.awesome-scala.summaryText}}</p>
</div> -->
<!-- </div>
</div> -->
</div>
</section>

<!-- Scala backends -->
<section class="runs">
<div class="wrap">
<h2>{{site.data.common.texts.scalaBackendsTitle}}</h2>
<ul>
{% for backend in page.scalaBackends %}
<li class="masterTooltip" title="{{backend.description}}">
<span>
<a href="{{backend.link}}"><img src="{{backend.icon}}" alt="{{backend.description}}"></a>
</span>
{% if backend.beta == 1 %}<span class="beta">beta</span>{% endif %}
</li>
{% unless forloop.last %}<li></li>{% endunless %}
{% endfor %}
</ul>
</div>
</section>

<!-- Users of Scala -->
<section class="nutshell">
<div class="wrap">
<div class="heading-line">
<!-- TODO: add this title when other sub-sections are included -->
<!-- <h2><span>{{page.scalaUsersTitle}}</span></h2> -->
<h2><span>{{site.scala_items[0].shortTitle}}</span></h2>
</div>
<!-- TODO: add this summary when other sub-sections are included -->
<!-- <div class="section-text ta-c">
<p>{{page.scalaUsersIntroduction}}</p>
</div> -->
<!-- TODO: change class to `g-cols-2` when other sub-sections are included -->
<div class="scala-items-grid g-cols-1">
<div class="items-menu">
{% for scalaItem in site.scala_items %}
<div class="scala-item scala-item_scala-users ">
<div class="scala-item_content">
<img class="scala-item_icon" src="/resources/img/icons/{{scalaItem.icon}}" alt="{{scalaItem.shortTitle}}" />
<!-- TODO: add this title when other sub-sections are included -->
<!-- <h3>{{scalaItem.shortTitle}}</h3> -->
<p>{{scalaItem.shortDescription}}</p>
</div>
<!-- TODO restore if we have actual pages prepared -->
<a href="#{{scalaItem.anchorTarget}}" class="button button_call-to-action">{{scalaItem.expandText | default: 'See
More...'
}}</a>
</div>
<div id="{{scalaItem.anchorTarget}}" class="items-content">
<div class="wrap">
<a id="{{scalaItem.anchorTarget}}-close" class="items-content_close" href="#{{scalaItem.anchorTarget}}-close"><i class="fa fa-close"></i></a>
</div>
<div class="items-code">
<div class="wrap">{{scalaItem.content}}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions _sass/base/body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
//------------------------------------------------
html {
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 30vh;
}

*,
Expand Down
69 changes: 58 additions & 11 deletions _sass/base/helper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,74 @@
//------------------------------------------------

.wrap {
@include outer-container;
@include padding(0 20px);
@include outer-container;
@include padding(0 20px);
@include bp(large) {
@include outer-container(880px);
}
}

.place-inline { // add vertical margin
@include outer-container;
@include margin(20px 0);
@include outer-container;
@include margin(20px 0);
}

.wrap-inline { // add vertical padding
@include outer-container;
@include padding(20px 0);
@include outer-container;
@include padding(20px 0);
@include bp(large) {
@include outer-container(880px);
}
}

.wrap-narrow {
@include outer-container;
@include padding(0 10px);
@include outer-container;
@include padding(0 10px);
@include bp(large) {
@include outer-container(880px);
}
}

.dot {
font-size: 10px;
color: rgba($base-font-color-light, 0.6);
margin: 0 3px;
font-size: 10px;
color: rgba($base-font-color-light, 0.6);
margin: 0 3px;
}

.hide-lg {
display: block;

@include bp(large) {
display: none;
}
}

.show-lg {
display: none;

@include bp(large) {
display: block;
}
}

.col-lg-6 {
@include span-columns(6);

@include bp(large) {
@include span-columns(12);
&:not(:last-child) {
margin-bottom: 25px;
}
}
}

.flex-row-align-end {
@include display(flex);
@include flex-direction(row);
@include flex-wrap(wrap);
@include align-items(center);
}

.ta-c {
text-align: center;
}
5 changes: 4 additions & 1 deletion _sass/components/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
text-transform: uppercase;
color: #fff;
background: $brand-secondary;
border-radius: $border-radius-base;
border-radius: $border-radius-bold;
display: inline-block;

box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);


&:active,
&:focus,
&:hover {
Expand Down
2 changes: 1 addition & 1 deletion _sass/components/code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@
}

pre {
margin-top: 0;
margin: 0;
}

code {
Expand Down
Loading