Skip to content

Commit 7ef30c0

Browse files
bp289bp289
authored
Feat/homepage events (#83)
* html * hero * hero button * hero section * page content added * flex on the content section * added svgs * set margins for headings * finished responsive design * finished responsive design * finished with events section * events section done * linitng * hiding scrollbar * liner fixes * linter changes * Update bioconductor-v2.css
1 parent cdfae84 commit 7ef30c0

File tree

4 files changed

+193
-50
lines changed

4 files changed

+193
-50
lines changed

‎assets/style/bioconductor-v2.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
body {
22
font-family: "Atkinson Hyperlegible", sans-serif;
33
margin: 0;
4-
background: var(--neutral-n50);
54
color: #070707;
65
}
76

7+
main {
8+
background: var(--neutral-n50);
9+
}
10+
811
.container {
912
margin: 0 auto;
1013
width: calc(100% - 3rem);

‎assets/style/buttons.css

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
1+
.white-button {
2+
background: var(--neutral-n50);
3+
color: var(--primary-p400);
4+
min-height: 20px;
5+
max-height: 20px;
6+
cursor: pointer;
7+
display: block;
8+
width: fit-content;
9+
transition: 0.3s;
10+
padding: 0.6rem 0.8rem;
11+
border-radius: 8rem;
12+
}
13+
14+
.white-button:hover {
15+
background: var(--primary-p50);
16+
}
17+
18+
.white-button:active {
19+
background: var(--primary-p200);
20+
}
21+
22+
.white-button * {
23+
vertical-align: middle;
24+
}
25+
26+
.white-button svg {
27+
margin-bottom: 1px;
28+
}
29+
30+
.white-button svg:hover {
31+
background: var(--primary-p50);
32+
stroke: black;
33+
}
34+
135
.button-hero {
236
padding: 1rem 1.625rem;
337
border-radius: 16rem;
@@ -64,10 +98,11 @@
6498
}
6599

66100
@media (prefers-reduced-motion: reduce) {
101+
.button-hero,
102+
.white-button,
67103
.brand-border-button,
68104
.brand-border-button svg path,
69-
.brand-border-button span,
70-
.button-hero {
105+
.brand-border-button span {
71106
transition: none;
72107
}
73108
}

‎assets/style/home.css

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,64 @@
1+
.events-header {
2+
display: flex;
3+
justify-content: space-between;
4+
margin-right: 6.25rem;
5+
margin-bottom: 1rem;
6+
}
7+
8+
.events-header h3 {
9+
margin-left: 1rem;
10+
}
11+
12+
.events-container {
13+
display: flex;
14+
overflow-x: scroll;
15+
gap: 1.56rem;
16+
margin-bottom: 1.5rem;
17+
-ms-overflow-style: none; /* disable scrollbar for IE and Edge */
18+
scrollbar-width: none; /* disable scrollbar for Firefox */
19+
}
20+
21+
.events-container::-webkit-scrollbar {
22+
display: none; /* disable scrollbar for chrome */
23+
}
24+
25+
.event-card-container {
26+
display: inline-block;
27+
background-color: white;
28+
padding: 0.875rem;
29+
min-width: 17.5rem;
30+
max-width: 17.5rem;
31+
max-height: 12.25rem;
32+
}
33+
34+
.event-card {
35+
height: 100%;
36+
width: 100%;
37+
}
38+
39+
.event-card .format-bold {
40+
margin-top: 0;
41+
margin-bottom: 1.5rem;
42+
width: 100%;
43+
flex: 1 0 0;
44+
align-self: stretch;
45+
height: 4.75rem;
46+
color: var(--primary-p500);
47+
max-width: 12.8rem;
48+
}
49+
50+
.event-date-location {
51+
padding-top: 1rem;
52+
border-top: 1px solid;
53+
border-color: var(--primary-p-50, #ebf4f7);
54+
}
55+
56+
.event-date-location * {
57+
margin-block-start: 0;
58+
margin-block-end: 0;
59+
color: var(--neutral-n400);
60+
}
61+
162
.information-container {
263
display: grid;
364
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@@ -133,6 +194,10 @@
133194
width: 60%;
134195
}
135196

197+
.events-header {
198+
margin: auto;
199+
}
200+
136201
.information-container {
137202
display: flex;
138203
flex-direction: column;

‎content/index.html

Lines changed: 87 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -351,62 +351,102 @@ <h2>Join 1 Million + people using Bioconductor</h2>
351351
</div>
352352

353353
<section class="events">
354-
<span>
355-
<h3>Events</h3>
356-
<a>see all events</a>
354+
<span class="events-header">
355+
<h3>🗓️ Events</h3>
356+
<a class="button white-button format-bold" href="/help/events/"
357+
>See all events
358+
<svg
359+
xmlns="http://www.w3.org/2000/svg"
360+
width="14"
361+
height="15"
362+
viewBox="0 0 14 15"
363+
fill="none">
364+
<path
365+
d="M5.25 3.66665L9.33333 7.74998L5.25 11.8333"
366+
stroke="#3792AD"
367+
stroke-width="2.2"
368+
stroke-linecap="round"
369+
stroke-linejoin="round" />
370+
</svg>
371+
</a>
357372
</span>
358-
<div class="event-container">
359-
<div class="event-card">
360-
<p>CSHL course: Statistical Analysis of Genome Scale Data</p>
361-
<div class="event-date-location">
362-
<span>
363-
<time datetime="2023-06-30">30 June</time> -
364-
<time datetime="2023-07-13">13 July 2023</time>
365-
</span>
366-
New York, USA
373+
<div class="events-container">
374+
<div class="event-card-container">
375+
<div class="event-card">
376+
<p class="format-bold">
377+
CSHL course: Statistical Analysis of Genome Scale Data
378+
</p>
379+
<div class="event-date-location">
380+
<span>
381+
<time class="text-small" datetime="2023-06-30">30 June</time> -
382+
<time class="text-small" datetime="2023-07-13"
383+
>13 July 2023</time
384+
>
385+
</span>
386+
<p class="text-small">New York, USA</p>
387+
</div>
367388
</div>
368389
</div>
369-
<div class="event-card">
370-
<p>
371-
ISMB/ECCB 2023 tutorial: Orchestrating Large-Scale Single-Cell
372-
Analysis with Bioconductor
373-
</p>
374-
<div class="event-date-location">
375-
<span class="event-date-location">
376-
<time datetime="2023-07-23">23 July 2023</time>
377-
</span>
378-
<p>Lyon, France</p>
390+
<div class="event-card-container">
391+
<div class="event-card">
392+
<p class="format-bold">
393+
ISMB/ECCB 2023 tutorial: Orchestrating Large-Scale Single-Cell
394+
Analysis with Bioconductor
395+
</p>
396+
<div class="event-date-location">
397+
<span>
398+
<time class="text-small" datetime="2023-07-23"
399+
>23 July 2023</time
400+
>
401+
</span>
402+
<p class="text-small">Lyon, France</p>
403+
</div>
379404
</div>
380405
</div>
381-
<div class="event-card">
382-
<p>RNA-seq analysis with Bioconductor</p>
383-
<div class="event-date-location">
384-
<span class="event-date-location">
385-
<time datetime="2023-07-31">31 June</time> -
386-
<time datetime="2023-08-01">01 August 2023</time>
387-
</span>
388-
389-
<p>Boston, USA</p>
406+
<div class="event-card-container">
407+
<div class="event-card">
408+
<p class="format-bold">RNA-seq analysis with Bioconductor</p>
409+
<div class="event-date-location">
410+
<span class="event-date-location">
411+
<time class="text-small" datetime="2023-07-31">31 June</time> -
412+
<time class="text-small" datetime="2023-08-01"
413+
>01 August 2023</time
414+
>
415+
</span>
416+
<p class="text-small">Boston, USA</p>
417+
</div>
390418
</div>
391419
</div>
392-
<div class="event-card">
393-
<p>BioC2023: Where Software and Biology Connect</p>
394-
<div class="event-date-location">
395-
<span class="event-date-location">
396-
<time datetime="2023-08-02">02</time> -
397-
<time datetime="2023-08-04">04 August 2023</time>
398-
</span>
399-
<p>Boston, USA and Virtual Conference</p>
420+
<div class="event-card-container">
421+
<div class="event-card">
422+
<p class="format-bold">
423+
BioC2023: Where Software and Biology Connect
424+
</p>
425+
<div class="event-date-location">
426+
<span class="event-date-location">
427+
<time class="text-small" datetime="2023-08-02">02</time> -
428+
<time class="text-small" datetime="2023-08-04"
429+
>04 August 2023</time
430+
>
431+
</span>
432+
<p class="text-small">Boston, USA and Virtual Conference</p>
433+
</div>
400434
</div>
401435
</div>
402-
<div class="event-card">
403-
<p>EuroBioC2023: European Bioconductor cONFERENCE</p>
404-
<div class="event-date-location">
405-
<span>
406-
<time datetime="2023-08-02">02</time> -
407-
<time datetime="2023-08-04">04 August 2023</time>
408-
</span>
409-
<p>Ghent, Belgium</p>
436+
<div class="event-card-container">
437+
<div class="event-card">
438+
<p class="format-bold">
439+
EuroBioC2023: European Bioconductor Conference
440+
</p>
441+
<div class="event-date-location">
442+
<span>
443+
<time class="text-small" datetime="2023-08-02">02</time> -
444+
<time class="text-small" datetime="2023-08-04"
445+
>04 August 2023</time
446+
>
447+
</span>
448+
<p class="text-small">Ghent, Belgium</p>
449+
</div>
410450
</div>
411451
</div>
412452
</div>

0 commit comments

Comments
 (0)