Skip to content

Commit add0632

Browse files
MariamM110bp289
MariamM110
and
bp289
authored
Homepage - Learn section (#80)
* html * hero * hero button * hero section * learn section completed * removed hero * Update fonts.css returned to normal hero * added mobile css * removed background colour to body rather than main * added border radius * added prefers reduced motion * linter * merge conflicts * linter --------- Co-authored-by: bp289 <[email protected]>
1 parent 58b61b3 commit add0632

File tree

9 files changed

+676
-161
lines changed

9 files changed

+676
-161
lines changed

‎assets/style/bioconductor-v2.css

Lines changed: 1 addition & 0 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+
background: var(--neutral-n50);
45
color: #070707;
56
}
67

‎assets/style/buttons.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,60 @@
2626
transition: none;
2727
}
2828
}
29+
30+
.brand-border-button {
31+
background-image: var(--gradient-brand);
32+
border-radius: 8rem;
33+
box-sizing: border-box;
34+
color: var(--primary-p400);
35+
display: flex;
36+
padding: 1px;
37+
}
38+
39+
.brand-border-button svg path {
40+
transition: stroke 0.5s ease;
41+
}
42+
43+
.brand-border-button:hover {
44+
color: #fff;
45+
}
46+
47+
.brand-border-button:hover svg path {
48+
stroke: #fff;
49+
}
50+
51+
.span-brand {
52+
align-items: center;
53+
border-radius: 4rem;
54+
display: flex;
55+
justify-content: center;
56+
background: #fff;
57+
color: var(--primary-p400);
58+
transition: background 0.5s ease;
59+
width: 100%;
60+
gap: 5px;
61+
margin: 1px;
62+
padding-left: 0.75rem;
63+
padding-right: 0.4rem;
64+
line-height: 100%;
65+
}
66+
67+
.brand-border-button:hover span {
68+
background: var(--primary-p400);
69+
color: #fff;
70+
}
71+
72+
@media (prefers-reduced-motion: reduce) {
73+
.brand-border-button:hover {
74+
color: var(--primary-p400);
75+
}
76+
77+
.brand-border-button:hover svg path {
78+
stroke: var(--primary);
79+
}
80+
81+
.brand-border-button:hover span {
82+
background: #fff;
83+
color: var(--primary-p400);
84+
}
85+
}

‎assets/style/footer.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ footer {
77
border-style: solid;
88
border-width: 0.625rem 0 0; /* 10px */
99
border-image: var(--gradient-brandreverse) 1;
10-
margin-top: 1.875rem; /* 30px */
10+
color: #fff;
1111
font-size: 0.7rem;
1212
height: auto;
1313
box-sizing: border-box;

‎assets/style/header.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ input:focus::placeholder {
240240
.search-container,
241241
.header-button {
242242
margin: 0.5rem 0;
243-
}
243+
}
244244

245245
.hamburger {
246246
display: block;

‎assets/style/home.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
.learn-gradient {
2+
background-image: var(--gradient-brand);
3+
border-radius: 4px;
4+
padding: 1px;
5+
margin-top: 1rem;
6+
margin-bottom: 1rem;
7+
}
8+
9+
.learn-block {
10+
background: #fff;
11+
padding: 1rem;
12+
border-radius: 4px;
13+
}
14+
15+
.learn-block h4 {
16+
margin-top: 0;
17+
}
18+
19+
.learn-content {
20+
display: flex;
21+
flex-direction: row;
22+
gap: 1rem;
23+
}
24+
25+
.info {
26+
flex: 1;
27+
gap: 0.5rem;
28+
}
29+
30+
.info p {
31+
padding-bottom: 1rem;
32+
}
33+
34+
.learn-nav {
35+
display: flex;
36+
flex-direction: column;
37+
gap: 0.625rem;
38+
flex: 1;
39+
}
40+
41+
.learn-nav a {
42+
border: 1px solid var(--primary-p75);
43+
border-radius: 0.5rem;
44+
padding: 1rem;
45+
align-items: center;
46+
text-decoration: underline;
47+
color: inherit;
48+
display: flex;
49+
justify-content: space-between;
50+
51+
/* gradient backgrounds are difficult to add transition */
52+
transition: background 0.5s ease;
53+
}
54+
55+
.learn-nav a:hover {
56+
background-image: var(--gradient-brand);
57+
color: #fff;
58+
}
59+
60+
.learn-nav svg path {
61+
transform: translateX(0);
62+
transition: transform 0.2s ease;
63+
}
64+
65+
.learn-nav a:hover svg path {
66+
stroke: #fff;
67+
transform: translateX(3px);
68+
}
69+
70+
.button-padding {
71+
width: 50%;
72+
padding-top: 1.5rem;
73+
padding-bottom: 1.5rem;
74+
}
75+
76+
.info .brand-border-button {
77+
height: 2.5rem;
78+
width: 100%;
79+
}
80+
81+
@media (width <= 768px) {
82+
.learn-block {
83+
display: flex;
84+
flex-direction: column;
85+
}
86+
87+
.learn-content {
88+
display: flex;
89+
flex-direction: column;
90+
}
91+
92+
.button-padding {
93+
width: 60%;
94+
}
95+
}
96+
97+
@media (prefers-reduced-motion: reduce) {
98+
.learn-nav a:hover {
99+
background: inherit;
100+
color: inherit;
101+
transition: none;
102+
}
103+
104+
.learn-nav a:hover svg path {
105+
stroke: var(--primary-p75);
106+
transition: none;
107+
transform: none;
108+
}
109+
}

0 commit comments

Comments
 (0)