Skip to content

Commit 2d42259

Browse files
ctruedenmattxwang
ctrueden
authored and
mattxwang
committed
Improve front page and page footer
* Calls to action ranging from Users to Developers, with Community beneath. * Footer links to Image.sc Forum, Twitter, and GitHub. * Remove "FIJI" (wrong case) from the copyright.
1 parent 039d6dd commit 2d42259

File tree

3 files changed

+103
-89
lines changed

3 files changed

+103
-89
lines changed

‎_includes/layout/footer‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<section id="footer">
2-
<ul class="icons">
3-
<li><a href="https://github.com/imagej" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
4-
<li><a href="#" class="icon solid alt fa-envelope"><span class="label">Email</span></a></li>
5-
</ul>
6-
<ul class="copyright">
7-
<li>&copy; ImageJ/FIJI</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
8-
</ul>
2+
<ul class="icons">
3+
<li><a href="https://forum.image.sc/tag/imagej" class="icon alt"><img src="/media/icons/image-sc.png" width="24" style="vertical-align: middle; margin-top: -10px"><span class="label">Forum</span></a></li>
4+
5+
<li><a href="https://twitter.com/FijiSc" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li>
6+
<li><a href="https://github.com/imagej" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
7+
</ul>
8+
<ul class="copyright">
9+
<li>&copy; ImageJ</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
10+
</ul>
911
</section>
1012

1113
{%- comment -%}

‎assets/css/home.css‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
text-align: center;
33
}
44

5-
.resources {
6-
width: 100%;
7-
}
8-
95
#site-logo {
106
visibility: hidden;
117
}
@@ -19,8 +15,55 @@
1915
min-height: 200px;
2016
}
2117

22-
#user-resources, #dev-resources {
23-
padding-top: 1.5em;
18+
#resources {
19+
background-image: linear-gradient(90deg, #298d56, #7a55a3);
20+
padding-top: 1.5em;
21+
width: 100%;
22+
}
23+
#resources header {
24+
font-size: 1.75em;
25+
}
26+
27+
#resources table {
28+
width: 100%; max-width: 900px
29+
}
30+
#resources tr {
31+
background: none;
32+
}
33+
#resources td {
34+
white-space: nowrap;
35+
}
36+
#resources td:first-child {
37+
text-align: left;
38+
}
39+
#resources td:last-child {
40+
text-align: right;
41+
}
42+
43+
@media screen and (max-width: 900px) {
44+
#resources li { font-size: 0.9em; }
45+
}
46+
@media screen and (max-width: 820px) {
47+
#resources li { font-size: 0.8em; }
48+
}
49+
@media screen and (max-width: 720px) {
50+
#resources li { font-size: 0.7em; }
51+
#resources td { font-size: 0.9em; }
52+
}
53+
@media screen and (max-width: 620px) {
54+
#resources li { font-size: 0.6em; }
55+
#resources td { font-size: 0.8em; }
56+
}
57+
@media screen and (max-width: 520px) {
58+
#resources li { font-size: 0.5em; }
59+
#resources td { font-size: 0.7em; }
60+
}
61+
62+
.dots {
63+
width: 100%;
64+
background-image: url('/media/site/dot.png');
65+
background-repeat: repeat-x;
66+
background-position-y: center;
2467
}
2568

2669
.container {

‎index.html‎

Lines changed: 45 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,71 @@ <h1>Welcome to <strong>ImageJ</strong></h1>
1212
<p>ImageJ is an open source image processing program designed for scientific
1313
multidimensional images.</p>
1414
<ul class="actions special">
15-
<li><a href="#one" class="button scrolly">Get Started</a></li>
15+
<li><a href="#resources" class="button scrolly">Get Started</a></li>
1616
</ul>
1717
</div>
1818
</section>
1919

20+
<!-- Calls to Action -->
21+
<section id="resources" class="main style3 special">
22+
<header class="minor">
23+
<table><tbody><tr>
24+
<td>Users &#9660;</td>
25+
<td class="dots"></td>
26+
<td>&#9660; Developers</td>
27+
</tr></tbody></table>
28+
</header>
29+
<ul class="actions special">
30+
<li><a href="/downloads" class="button solid icon"><span class="fas fa-download"></span> Download</a></li>
31+
<li><a href="/learn" class="button icon solid"><span class="fas fa-graduation-cap"></span> Learn</a></li>
32+
<li><a href="/extend" class="button icon solid"><span class="fas fa-wrench"></span> Extend</a></li>
33+
<li><a href="/scripting" class="button icon solid"><span class="fas fa-industry"></span> Automate</a></li>
34+
<li><a href="/develop" class="button icon solid"> <span class="fas fa-terminal"></span> Develop</a></li>
35+
</ul>
36+
<ul class="actions special" style="display: flex; flex-wrap: wrap">
37+
<li><a href="/contribute/citing" class="button icon solid"><span class="fas fa-quote-left"></span> Cite</a></li>
38+
<li><a href="/discuss" class="button icon solid"><img src="/media/icons/image-sc.png" width="24" style="vertical-align: middle; margin-top: -5px"> Discuss</a></li>
39+
<li><a href="/contribute" class="button icon solid"><span class="fas fa-hard-hat"></span> Contribute</a></li>
40+
</ul>
41+
<header class="minor"> &#9650; Community &#9650; </header>
42+
</section>
43+
44+
<div style="clear: both"></div>
45+
2046
<!-- ImageJ Introduction -->
2147
<section id="one" class="main">
2248
<div class="container">
2349
<div class="row gtr-150">
2450
<div class="col-12 col-12-medium">
2551
<header class="major">
26-
<ul class = "actions special">
27-
<li><a href="/downloads" class="button solid icon"><span class="fas fa-download"></span> Download</a></li>
28-
<li><a href="/learn" class="button icon solid"><span class="fas fa-cogs"></span> Use</a></li>
29-
<li><a href="/develop" class="button icon solid"><span class="fas fa-wrench"></span> Extend</a></li>
30-
</ul>
3152
<h1>Why ImageJ?</h1>
3253
<header class="container-whyij">
3354
<div class="row-whyij">
3455
<div class="col-4">
3556
<div class="fa-5x text-success">
36-
<span class="fas fa-check-circle"></span>
57+
<span class="fas fa-bolt"></span>
3758
</div>
38-
<h2>Easy to Use</h2>
59+
<h2>Powerful</h2>
3960
<p>
40-
Install ImageJ in one-click, Fiji installs all of its plugins, features an automatic updater, and offers comprehensive documentation.
61+
ImageJ includes tools for
62+
<a href="/imaging/image-intensity-processing">image processing</a>,
63+
<a href="/imaging/colocalization-analysis">colocalization</a>,
64+
<a href="/imaging/deconvolution">deconvolution</a>,
65+
<a href="/imaging/registration">registration</a>,
66+
<a href="/imaging/segmentation">segmentation</a>,
67+
<a href="/imaging/tracking">tracking</a>,
68+
<a href="/imaging/visualization">visualization</a>,
69+
and much more.
4170
</p>
4271
</div>
4372
<div class="col-4">
4473
<div class=" fa-5x text-primary">
4574
<span class="fas fa-cogs"></span>
4675
</div>
47-
<h2>Powerful</h2>
76+
<h2>Extensible</h2>
4877
<p>
49-
ImageJ offers robust extensibility, harnessing the power of hundreds of plugins to assist with any of your imaging needs.
78+
ImageJ offers robust extensibility, harnessing the power of
79+
hundreds of plugins to assist with any of your imaging needs.
5080
</p>
5181
</div>
5282
<div class="col-4">
@@ -55,7 +85,10 @@ <h2>Powerful</h2>
5585
</div>
5686
<h2>Free &amp; Open Source</h2>
5787
<p>
58-
ImageJ is an <a href="/Open_Source">open source</a> project hosted on <a href="https://github.com/imagej">GitHub</a>, developed and written by the community.
88+
ImageJ is an <a href="/licensing/open-source">open source</a>
89+
project hosted on
90+
<a href="https://github.com/imagej">GitHub</a>,
91+
developed by and for the scientific imaging community.
5992
</p>
6093
</div>
6194
</div>
@@ -66,70 +99,6 @@ <h2>Free &amp; Open Source</h2>
6699
</div>
67100
</section>
68101

69-
<div class="resources">
70-
<!-- User resources -->
71-
<section id="user-resources" class="main style3 special">
72-
<header class="major">
73-
<h2>User Resources</h2>
74-
</header>
75-
<ul class="actions special">
76-
<li>
77-
<a href="/plugins" class="button icon solid">
78-
<span class="fas fa-plug"></span> Plugins
79-
</a>
80-
</li>
81-
<li>
82-
<a href="/help" class="button icon solid">
83-
<span class="fas fa-hands-helping"></span> Help
84-
</a>
85-
</li>
86-
</ul>
87-
<ul class="actions special">
88-
<li>
89-
<a href="https://forum.image.sc/tag/imagej" class="button icon solid">
90-
<img src="/media/icons/image-sc.png" width="24" style="vertical-align: middle; margin-top: -5px"> Forum</a>
91-
</li>
92-
<li>
93-
<a href="/contribute/citing" class="button icon solid">
94-
<span class="fas fa-quote-left"></span> Cite
95-
</a>
96-
</li>
97-
</ul>
98-
</section>
99-
100-
<!-- Developer resources -->
101-
<section id="dev-resources" class="main style2 special">
102-
<header class="major">
103-
<h2>Developer Resources</h2>
104-
</header>
105-
<ul class="actions special">
106-
<li>
107-
<a href="https://github.com/imagej/" class="button icon solid">
108-
<span class="fas fa-code"></span> Source Code
109-
</a>
110-
</li>
111-
<li>
112-
<a href="https://github.com/imagej/imagej/issues" class="button icon solid">
113-
<span class="fas fas fa-bullhorn"></span> Report a Bug
114-
</a>
115-
</li>
116-
</ul>
117-
<ul class="actions special">
118-
<li>
119-
<a href="https://javadoc.scijava.org/SciJava/" class="button icon solid">
120-
<span class="fas fa-terminal"></span> SciJava API
121-
</a>
122-
</li>
123-
<li>
124-
<a href="https://javadoc.scijava.org/ImageJ/" class="button icon solid">
125-
<span class="fas fa-terminal"></span>ImageJ API
126-
</a>
127-
</li>
128-
</ul>
129-
130-
</section>
131-
</div>
132-
133102
<div class="col-md-8">
134103
<div class="card text-center">
135104
<div class="card-header">

0 commit comments

Comments
 (0)