Skip to content

Commit e9f37bd

Browse files
bishaboshabishabosha
authored
Merge pull request #1518 from scalacenter/front-page-q2-2023
Updates to the homepage - add new tagline, why scala? and use cases
2 parents eba88e5 + 2b9391e commit e9f37bd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2428
-539
lines changed

‎_config.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ defaults:
3636
collections:
3737
install_tabs:
3838
output: false
39+
why_scala_items:
40+
output: false
41+
scala_use_case_items:
42+
output: false
3943
scala_carousel_items:
4044
output: false
4145
scala_items:

‎_data/awesome-scala.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
summaryText: Scala is widely used in all these areas and more.
1+
summaryText: Have another use case? Scaladex indexes awesome Scala libraries. Search in the box below.
22
links:
33
- title: Big Data Processing
44
url: https://index.scala-lang.org/awesome#big-data

‎_layouts/frontpage.html

Lines changed: 139 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@
1818
<div class="wrap">
1919
<!-- Navigation -->
2020
<nav class="navigation" role="menu">
21-
<a href="/" class="navigation-bdand">
22-
<img src="/resources/img/frontpage/[email protected]" alt="">
21+
<div class="navigation-bdand-vfill-lg hide-lg">
22+
<!-- spacer to substitute for hidden logo, disappears below the large breakpoint -->
23+
</div>
24+
<a href="/" class="navigation-bdand show-lg">
25+
<!-- show standard nav logo below the large breakpoint -->
26+
<img src="/resources/img/frontpage/[email protected]" alt=""/>
2327
</a>
2428
<div class="navigation-panel-button">
2529
<i class="fa fa-bars"></i>
@@ -33,22 +37,26 @@
3337
</ul>
3438
</nav>
3539
</div>
36-
<div class="wrap">
40+
<div class="wrap flex-row-align-end">
3741
<!-- Inner Text -->
3842
<div class="col-lg-6">
3943
<div class="inner-text">
40-
<h1>{{page.headerTitle}}</h1>
41-
<p>{{page.headerSubtitle}}</p>
42-
{% for release in site.data.scala-releases %}
43-
{% if release.category == "current_version" %}
44-
<a href="/download/{{ release.version }}.html" class="button">
45-
Scala {{ release.version }}
46-
</a>
47-
{% endif %}
48-
{% endfor %}
49-
<a href="/download/all.html" class="button">
50-
All Releases
51-
</a>
44+
<div class="hero-logo hide-lg"></div>
45+
<h2>{{page.headerSubtitle}}</h2>
46+
<div class="button-row__container">
47+
<div class="button-row">
48+
{% for release in site.data.scala-releases %}
49+
{% if release.category == "current_version" %}
50+
<a href="/download/{{ release.version }}.html" class="button">
51+
Scala {{ release.version }}
52+
</a>
53+
{% endif %}
54+
{% endfor %}
55+
<a href="/download/all.html" class="button">
56+
All Releases
57+
</a>
58+
</div>
59+
</div>
5260
</div>
5361
</div>
5462
<div class="col-lg-6">
@@ -99,68 +107,75 @@ <h1>{{page.headerTitle}}</h1>
99107

100108
<main id="site-main">
101109

102-
<!-- Scala in a Nutshell -->
110+
<!-- Why Scala -->
103111
<section class="nutshell">
104112
<div class="wrap">
105-
<div class="heading-line">
106-
<h2><span>Scala in a Nutshell</span></h2>
107-
<div class="call-to-action action-medium">
108-
<p>Click the buttons to see Scala in action,
109-
or visit the <a href="/documentation/">Scala Documentation</a> to learn more.</p>
113+
<!-- <div class="heading-line">
114+
<h2><span>{{page.whyScalaTitle}}</span></h2>
115+
</div> -->
116+
<div class="scala-items-grid">
117+
<div class="items-menu">
118+
{% for scalaItem in site.why_scala_items %}
119+
<div class="scala-item scala-item_why-scala ">
120+
<div class="scala-item_content">
121+
<h3>{{scalaItem.shortTitle}}</h3>
122+
<p>{{scalaItem.shortDescription}}</p>
123+
</div>
124+
</div>
125+
{% endfor %}
110126
</div>
111127
</div>
112128
</div>
113-
<div class="scala-items-list">
114-
<div class="items-menu">
115-
{% for scalaItem in site.scala_items %}
116-
{% assign loopIndexMod = forloop.index | minus: 1 | modulo: 3 %}
129+
</section>
117130

118-
{% if loopIndexMod == 0 %}
119-
{% assign codeSnippets = '' | split: ',' %}
120-
<div class="wrap">
121-
{% endif %}
122-
{% assign codeSnippets = codeSnippets | push: scalaItem.content %}
123-
<div class="scala-item">
124-
<h3>{{scalaItem.shortTitle}}</h3>
125-
<p>{{scalaItem.shortDescription}}</p>
126-
<div class="button button-more">More...</div>
131+
<!-- Use cases -->
132+
<section class="nutshell">
133+
<div class="wrap">
134+
<div class="heading-line">
135+
<h2><span>{{page.useCaseTitle}}</span></h2>
136+
</div>
137+
<div class="wrap">
138+
<div class="section-text ta-c">
139+
<p>{{page.useCaseIntroduction}}</p>
140+
</div>
141+
</div>
142+
<div class="scala-items-grid g-cols-4">
143+
<div class="items-menu">
144+
{% for scalaItem in site.scala_use_case_items %}
145+
<div class="scala-item scala-item_use-cases ">
146+
<div class="scala-item_content">
147+
<img class="scala-item_icon" src="/resources/img/icons/{{scalaItem.icon}}" alt="{{scalaItem.shortTitle}}"/>
148+
<h3>{{scalaItem.shortTitle}}</h3>
149+
<p>{{scalaItem.shortDescription}}</p>
150+
</div>
151+
<a href="#{{scalaItem.anchorTarget}}" class="button button_call-to-action">{{scalaItem.expandText | default: 'See More...' }}</a>
127152
</div>
128-
{% if loopIndexMod == 2 or forloop.last %}
153+
<div id="{{scalaItem.anchorTarget}}" class="items-content">
154+
<div class="wrap">
155+
<a id="{{scalaItem.anchorTarget}}-close" class="items-content_close" href="#{{scalaItem.anchorTarget}}-close"><i class="fa fa-close"></i></a>
129156
</div>
130-
<div class="items-content">
131-
{% for snippet in codeSnippets %}
132-
<div class="items-code">{{snippet}}</div>
133-
{% endfor %}
157+
<div class="items-code">
158+
<div class="wrap">
159+
{{scalaItem.content}}
160+
<a href="#{{scalaItem.anchorTarget}}" class="button button_return-anchor"><i class="fa-solid fa-angle-up"></i> back to top</a>
161+
</div>
134162
</div>
135-
{% endif %}
136-
{% endfor %}
163+
</div>
164+
{% endfor %}
165+
</div>
137166
</div>
138167
</div>
139168
</section>
140169

141-
<!-- Scala backends -->
142-
<section class="runs">
143-
<div class="wrap">
144-
<h2>{{site.data.common.texts.scalaBackendsTitle}}</h2>
145-
<ul>
146-
{% for backend in page.scalaBackends %}
147-
<li class="masterTooltip" title="{{backend.description}}">
148-
<span>
149-
<a href="{{backend.link}}"><img src="{{backend.icon}}" alt="{{backend.description}}"></a>
150-
</span>
151-
{% if backend.beta == 1 %}<span class="beta">beta</span>{% endif %}
152-
</li>
153-
{% unless forloop.last %}<li></li>{% endunless %}
154-
{% endfor %}
155-
</ul>
156-
</div>
157-
</section>
158170

159171
<!-- Scala Ecosystem -->
160172
<section class="scala-ecosystem">
161173
<div class="wrap">
162-
<div class="heading-line">
174+
<!-- <div class="heading-line">
163175
<h2><span>{{page.ecosystemTitle}}</span></h2>
176+
</div> -->
177+
<div class="section-text ta-c">
178+
<p>{{site.data.awesome-scala.summaryText}}</p>
164179
</div>
165180
<div class="browser">
166181
<div class="header-browser">
@@ -169,24 +184,84 @@ <h2><span>{{page.ecosystemTitle}}</span></h2>
169184
<div class="main-browser">
170185
<div class="input-control">
171186
<span><i class="fa fa-search"></i></span>
172-
<input type="text" placeholder="Find an awesome Scala library" id="scaladex-search">
187+
<input type="text" placeholder="e.g. database" id="scaladex-search">
173188
</div>
174189
</div>
175190
<a class="button awesome" href="{{site.data.common.scaladexUrl}}/awesome">Awesome Scala</a>
176191
</div>
177192
</div>
178-
<div class="awesome-table">
193+
<!-- <div class="awesome-table">
179194
<div class="wrap">
180195
<div class="awesome-items">
181196
{% for awesomeLink in site.data.awesome-scala.links %}
182-
<a href="{{awesomeLink.url}}" class="content-card">
197+
<a href="{{awesomeLink.url}}" class="button button_call-to-action content-card">
183198
<h3><i class="fa fa-search"></i>{{awesomeLink.title}}</h3>
184199
</a>
185200
{% endfor %}
186-
</div>
187-
<div class="awesome-summary">
201+
</div> -->
202+
<!-- <div class="awesome-summary">
188203
<p class="awesome-summary-text">{{site.data.awesome-scala.summaryText}}</p>
204+
</div> -->
205+
<!-- </div>
206+
</div> -->
207+
</div>
208+
</section>
209+
210+
<!-- Scala backends -->
211+
<section class="runs">
212+
<div class="wrap">
213+
<h2>{{site.data.common.texts.scalaBackendsTitle}}</h2>
214+
<ul>
215+
{% for backend in page.scalaBackends %}
216+
<li class="masterTooltip" title="{{backend.description}}">
217+
<span>
218+
<a href="{{backend.link}}"><img src="{{backend.icon}}" alt="{{backend.description}}"></a>
219+
</span>
220+
{% if backend.beta == 1 %}<span class="beta">beta</span>{% endif %}
221+
</li>
222+
{% unless forloop.last %}<li></li>{% endunless %}
223+
{% endfor %}
224+
</ul>
225+
</div>
226+
</section>
227+
228+
<!-- Users of Scala -->
229+
<section class="nutshell">
230+
<div class="wrap">
231+
<div class="heading-line">
232+
<!-- TODO: add this title when other sub-sections are included -->
233+
<!-- <h2><span>{{page.scalaUsersTitle}}</span></h2> -->
234+
<h2><span>{{site.scala_items[0].shortTitle}}</span></h2>
235+
</div>
236+
<!-- TODO: add this summary when other sub-sections are included -->
237+
<!-- <div class="section-text ta-c">
238+
<p>{{page.scalaUsersIntroduction}}</p>
239+
</div> -->
240+
<!-- TODO: change class to `g-cols-2` when other sub-sections are included -->
241+
<div class="scala-items-grid g-cols-1">
242+
<div class="items-menu">
243+
{% for scalaItem in site.scala_items %}
244+
<div class="scala-item scala-item_scala-users ">
245+
<div class="scala-item_content">
246+
<img class="scala-item_icon" src="/resources/img/icons/{{scalaItem.icon}}" alt="{{scalaItem.shortTitle}}" />
247+
<!-- TODO: add this title when other sub-sections are included -->
248+
<!-- <h3>{{scalaItem.shortTitle}}</h3> -->
249+
<p>{{scalaItem.shortDescription}}</p>
250+
</div>
251+
<!-- TODO restore if we have actual pages prepared -->
252+
<a href="#{{scalaItem.anchorTarget}}" class="button button_call-to-action">{{scalaItem.expandText | default: 'See
253+
More...'
254+
}}</a>
255+
</div>
256+
<div id="{{scalaItem.anchorTarget}}" class="items-content">
257+
<div class="wrap">
258+
<a id="{{scalaItem.anchorTarget}}-close" class="items-content_close" href="#{{scalaItem.anchorTarget}}-close"><i class="fa fa-close"></i></a>
259+
</div>
260+
<div class="items-code">
261+
<div class="wrap">{{scalaItem.content}}</div>
262+
</div>
189263
</div>
264+
{% endfor %}
190265
</div>
191266
</div>
192267
</div>

‎_sass/base/body.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
//------------------------------------------------
44
html {
55
box-sizing: border-box;
6+
scroll-behavior: smooth;
7+
scroll-padding-top: 30vh;
68
}
79

810
*,

‎_sass/base/helper.scss

Lines changed: 58 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,74 @@
33
//------------------------------------------------
44

55
.wrap {
6-
@include outer-container;
7-
@include padding(0 20px);
6+
@include outer-container;
7+
@include padding(0 20px);
8+
@include bp(large) {
9+
@include outer-container(880px);
10+
}
811
}
912

1013
.place-inline { // add vertical margin
11-
@include outer-container;
12-
@include margin(20px 0);
14+
@include outer-container;
15+
@include margin(20px 0);
1316
}
1417

1518
.wrap-inline { // add vertical padding
16-
@include outer-container;
17-
@include padding(20px 0);
19+
@include outer-container;
20+
@include padding(20px 0);
21+
@include bp(large) {
22+
@include outer-container(880px);
23+
}
1824
}
1925

2026
.wrap-narrow {
21-
@include outer-container;
22-
@include padding(0 10px);
27+
@include outer-container;
28+
@include padding(0 10px);
29+
@include bp(large) {
30+
@include outer-container(880px);
31+
}
2332
}
2433

2534
.dot {
26-
font-size: 10px;
27-
color: rgba($base-font-color-light, 0.6);
28-
margin: 0 3px;
35+
font-size: 10px;
36+
color: rgba($base-font-color-light, 0.6);
37+
margin: 0 3px;
38+
}
39+
40+
.hide-lg {
41+
display: block;
42+
43+
@include bp(large) {
44+
display: none;
45+
}
46+
}
47+
48+
.show-lg {
49+
display: none;
50+
51+
@include bp(large) {
52+
display: block;
53+
}
54+
}
55+
56+
.col-lg-6 {
57+
@include span-columns(6);
58+
59+
@include bp(large) {
60+
@include span-columns(12);
61+
&:not(:last-child) {
62+
margin-bottom: 25px;
63+
}
64+
}
65+
}
66+
67+
.flex-row-align-end {
68+
@include display(flex);
69+
@include flex-direction(row);
70+
@include flex-wrap(wrap);
71+
@include align-items(center);
72+
}
73+
74+
.ta-c {
75+
text-align: center;
2976
}

‎_sass/components/buttons.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
text-transform: uppercase;
99
color: #fff;
1010
background: $brand-secondary;
11-
border-radius: $border-radius-base;
11+
border-radius: $border-radius-bold;
1212
display: inline-block;
1313

14+
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
15+
16+
1417
&:active,
1518
&:focus,
1619
&:hover {

‎_sass/components/code.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
}
169169

170170
pre {
171-
margin-top: 0;
171+
margin: 0;
172172
}
173173

174174
code {

0 commit comments

Comments
 (0)