Skip to content

Commit 58b61b3

Browse files
bp289bp289
authored
Homepage - Hero (#73)
* hero section finished for home page * linter changes * linter changes * linter changes * changed text classes to use elsewhere * button inherits font * button changed to classes and no buttons inside a tags * button changed to classes and no buttons inside a tags * responsive design changes * responsive design changes * linter changes * color fixes * changing back fonts * Update buttons.css * linting errors fixed * feedback * pr reviews * linter errors * Update hero.css * button update * reduced motion
1 parent 511166e commit 58b61b3

File tree

9 files changed

+131
-37
lines changed

9 files changed

+131
-37
lines changed

‎assets/images/chevron_right.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎assets/images/icons/svgs/chevron-right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/style/bioconductor-v2.css‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
body {
22
font-family: "Atkinson Hyperlegible", sans-serif;
33
margin: 0;
4+
color: #070707;
45
}
56

67
.container {
@@ -13,8 +14,7 @@ main > .container.main-subnav {
1314
display: grid;
1415
gap: 2rem;
1516
grid-template-columns: 300px 1fr;
16-
grid-template-areas:
17-
"left-col .";
17+
grid-template-areas: "left-col .";
1818
}
1919

2020
.left-col {
@@ -45,13 +45,15 @@ main > .container.main-subnav {
4545
margin: 0;
4646
}
4747

48-
nav.subnav, .shaded_box {
48+
nav.subnav,
49+
.shaded_box {
4950
border-radius: 0.5rem;
5051
border: 1px solid var(--primary-p75);
5152
padding: 0.5rem;
5253
}
5354

54-
nav.subnav a, .shaded_box ul li {
55+
nav.subnav a,
56+
.shaded_box ul li {
5557
text-decoration: underline;
5658
display: block;
5759
padding: 0.5rem;
@@ -61,7 +63,8 @@ nav.subnav a, .shaded_box ul li {
6163
background-position: right center;
6264
}
6365

64-
nav.subnav a, .shaded_box ul li a {
66+
nav.subnav a,
67+
.shaded_box ul li a {
6568
color: black;
6669
}
6770

@@ -94,11 +97,12 @@ nav.subnav a, .shaded_box ul li a {
9497
display: block;
9598
}
9699

97-
.left-col {
98-
display: none;
99-
}
100+
.left-col {
101+
display: none;
102+
}
100103

101-
.site-container {
102-
margin: 0 auto; /* floats the design center */
103-
max-width: 1400px; /* change the site design width here */
104+
.site-container {
105+
margin: 0 auto; /* floats the design center */
106+
max-width: 1400px; /* change the site design width here */
107+
}
104108
}

‎assets/style/buttons.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.button-hero {
2+
padding: 1rem 1.625rem;
3+
border-radius: 16rem;
4+
background: var(--gradient-brandreverse);
5+
margin: auto auto 0.3rem;
6+
transition: 0.3s;
7+
color: #fff;
8+
cursor: pointer;
9+
display: block;
10+
width: fit-content;
11+
}
12+
13+
.button-hero img {
14+
width: 1rem;
15+
height: 1rem;
16+
vertical-align: middle;
17+
}
18+
19+
.button-hero:hover {
20+
background: var(--gradient-brand);
21+
box-shadow: 0 5px 4px 0 rgba(0 0 0 / 18%) inset;
22+
}
23+
24+
@media (prefers-reduced-motion: reduce) {
25+
.button-hero {
26+
transition: none;
27+
}
28+
}

‎assets/style/fonts.css‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,73 +21,92 @@ h2,
2121
h3,
2222
h4,
2323
h5,
24-
h6 {
24+
h6,
25+
.text-h1,
26+
.text-h2,
27+
.text-h3,
28+
.text-h4,
29+
.text-h5,
30+
.text-h6 {
2531
line-height: 120%;
2632
margin-bottom: 0.3rem; /* 5px */
2733
}
2834

29-
h1 {
35+
h1,
36+
.text-h1 {
3037
font-size: 2.25rem; /* 36px */
3138
}
3239

33-
h2 {
40+
h2,
41+
.text-h2 {
3442
font-size: 2rem; /* 32px */
3543
}
3644

37-
h3 {
45+
h3,
46+
.text-h3 {
3847
font-size: 1.6rem; /* 25px */
3948
}
4049

41-
h4 {
50+
h4,
51+
.text-h4 {
4252
font-size: 1.5rem; /* 23px */
4353
}
4454

45-
h5 {
55+
h5,
56+
.text-h5 {
4657
font-size: 1.2rem; /* 19px */
4758
}
4859

49-
h6 {
60+
h6,
61+
.text-h6 {
5062
font-size: 1.1rem; /* 18px */
5163
}
5264

53-
.hero {
65+
.text-hero {
5466
font-size: 5rem; /* 80px */
5567
line-height: 105%;
5668
}
5769

5870
@media screen and (width <= 700px) {
5971
/* 700px */
60-
.hero {
72+
.text-hero {
6173
font-size: 2.5rem; /* 40px */
6274
}
6375

64-
h1 {
76+
h1,
77+
.text-h1 {
6578
font-size: 2.1rem; /* 34px */
6679
}
6780

68-
h2 {
81+
h2,
82+
.text-h2 {
6983
font-size: 1.5rem; /* 24px */
7084
}
7185

72-
h3 {
86+
h3,
87+
.text-h3 {
7388
font-size: 1.4rem; /* 22px */
7489
}
7590

76-
h4 {
91+
h4,
92+
.text-h4 {
7793
font-size: 1.25rem; /* 20px */
7894
}
7995

80-
h5 {
96+
h5,
97+
.text-h5 {
8198
font-size: 1.125rem; /* 18px */
8299
}
83100

84-
h6 {
101+
h6,
102+
.text-h6 {
85103
font-size: 1.1rem; /* 17px */
86104
}
87105
}
88106

89107
p,
90-
a {
108+
a,
109+
.base {
91110
margin-top: 0;
92111
margin-bottom: 0;
93112
font-size: 1rem; /* 16px */

‎assets/style/footer.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ footer {
88
border-width: 0.625rem 0 0; /* 10px */
99
border-image: var(--gradient-brandreverse) 1;
1010
margin-top: 1.875rem; /* 30px */
11-
color: #fff;
1211
font-size: 0.7rem;
1312
height: auto;
1413
box-sizing: border-box;
1514
}
1615

17-
footer a {
16+
footer * {
1817
color: #fff;
1918
}
19+
2020
.footer-container {
2121
max-width: 1400px;
2222
margin: auto;
@@ -38,7 +38,7 @@ footer a {
3838
flex-direction: column;
3939
align-items: start;
4040
gap: 0.625rem;
41-
padding-inline-start: 0px;
41+
padding-inline-start: 0;
4242
margin-right: auto;
4343
}
4444

@@ -60,8 +60,8 @@ footer a {
6060
}
6161

6262
.socials {
63-
margin-top: 0.5rem;
6463
margin-top: 1.5rem;
64+
margin-bottom: 0.5rem;
6565
}
6666

6767
.footer-logo {
@@ -83,7 +83,7 @@ footer a {
8383

8484
:is(.link-container-inner nav) {
8585
min-width: 10rem;
86-
margin-inline-end: 0px;
86+
margin-inline-end: 0;
8787
}
8888

8989
.list-container-inner {
@@ -106,7 +106,7 @@ footer a {
106106

107107
.socials-logo-container {
108108
display: block;
109-
padding: 1rem 0rem;
109+
padding: 1rem 0;
110110
}
111111

112112
.socials {

‎assets/style/hero.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.hero {
2+
max-width: 100%;
3+
margin: 4.5rem auto;
4+
text-align: center;
5+
}
6+
7+
.hero h1 {
8+
color: var(--primary-p500);
9+
}
10+
11+
/* stylelint-disable */
12+
.hero mark {
13+
background: var(--gradient-brandreverse);
14+
-webkit-background-clip: text;
15+
-webkit-text-fill-color: transparent;
16+
}
17+
/* stylelint-enable */
18+
19+
.hero p {
20+
margin-top: 24px;
21+
margin-bottom: 40px;
22+
}
23+
24+
@media screen and (width <= 768px) {
25+
.hero p {
26+
font-size: 1rem;
27+
}
28+
}

‎layouts/_sitehead.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- htmllint preset="none" -->
12
<head>
23
<meta name="viewport" content="width=device-width, initial-scale=1.0">
34
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -29,8 +30,10 @@
2930
<title>Bioconductor<%= title %></title>
3031
<link rel="stylesheet" type="text/css" href="/style/fonts.css" media="screen" />
3132
<link rel="stylesheet" type="text/css" href="/style/colors.css" media="screen" />
33+
<link rel="stylesheet" type="text/css" href="/style/buttons.css" media="screen" />
3234
<link rel="stylesheet" type="text/css" href="/style/announcement.css" media="screen" />
3335
<link rel="stylesheet" type="text/css" href="/style/header.css" media="screen" />
36+
<link rel="stylesheet" type="text/css" href="/style/hero.css" media="screen" />
3437
<link rel="stylesheet" type="text/css" href="/style/bioconductor-v2.css" media="screen" />
3538
<link rel="stylesheet" type="text/css" href="/style/bioconductor.css" media="screen" /><% if item.identifier =~ /^\/help\/workflows\/.*\// %>
3639
<link rel="stylesheet" type="text/css" href="/style/workflows.css" media="screen" /><% end %>

‎layouts/components/index_hero.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
<p>hello, world</p>
1+
<h1 class="text-hero format-bold">
2+
Open source software for <mark>Bioinformatics</mark>
3+
</h1>
4+
<p class="text-large">
5+
The Bioconductor project aims to develop and share open source software for
6+
precise and repeatable analysis of biological data.<br />
7+
We foster an inclusive and collaborative community of developers and data
8+
scientists.
9+
</p>
10+
<a class="button button-hero text-h6 format-bold" href="/install/">
11+
Get started
12+
<img src="images/icons/svgs/chevron-right.svg" alt="chevron-right" />
13+
</a>

0 commit comments

Comments
 (0)