diff --git a/assets/images/Doodles/Doodle-1.png b/assets/images/Doodles/Doodle-1.png new file mode 100644 index 000000000..19b1ee0ae Binary files /dev/null and b/assets/images/Doodles/Doodle-1.png differ diff --git a/assets/images/Doodles/Doodle-2.png b/assets/images/Doodles/Doodle-2.png new file mode 100644 index 000000000..f30b37457 Binary files /dev/null and b/assets/images/Doodles/Doodle-2.png differ diff --git a/assets/images/Doodles/code-left.png b/assets/images/Doodles/code-left.png new file mode 100644 index 000000000..8ea5a7dde Binary files /dev/null and b/assets/images/Doodles/code-left.png differ diff --git a/assets/images/Doodles/code-right.png b/assets/images/Doodles/code-right.png new file mode 100644 index 000000000..08aa9a981 Binary files /dev/null and b/assets/images/Doodles/code-right.png differ diff --git a/assets/images/icons/slack.png b/assets/images/icons/slack.png new file mode 100644 index 000000000..6931dfe0b Binary files /dev/null and b/assets/images/icons/slack.png differ diff --git a/assets/images/icons/svgs/arrow-circle-right.svg b/assets/images/icons/svgs/arrow-circle-right.svg new file mode 100644 index 000000000..f5131338f --- /dev/null +++ b/assets/images/icons/svgs/arrow-circle-right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/icons/svgs/question-mark-circle.svg b/assets/images/icons/svgs/question-mark-circle.svg new file mode 100644 index 000000000..b0d01fc66 --- /dev/null +++ b/assets/images/icons/svgs/question-mark-circle.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/profiles/charlie.svg b/assets/images/profiles/charlie.svg new file mode 100644 index 000000000..1c53269cb --- /dev/null +++ b/assets/images/profiles/charlie.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/profiles/profile.svg b/assets/images/profiles/profile.svg new file mode 100644 index 000000000..12e6bc1fe --- /dev/null +++ b/assets/images/profiles/profile.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/style/hero.css b/assets/style/hero.css index b3f12e827..9fa4b3bc7 100644 --- a/assets/style/hero.css +++ b/assets/style/hero.css @@ -1,5 +1,5 @@ .hero { - max-width: 100%; + width: 100%; margin: 0 auto; text-align: center; background-color: white; @@ -10,6 +10,7 @@ color: var(--primary-p500); } +/* disabled here due to a linting error, but we need the webkit marker for this to work */ /* stylelint-disable */ .hero mark { background: var(--gradient-brandreverse); diff --git a/assets/style/home.css b/assets/style/home.css index 84267cbd1..b005f9484 100644 --- a/assets/style/home.css +++ b/assets/style/home.css @@ -1,3 +1,277 @@ +.data-scientist-and-developer-info { + display: flex; + flex-wrap: wrap; +} + +.tab-radio { + display: none; +} + +.tab-label { + margin-top: 1.5rem; + border-radius: 8px; + padding: 12px 24px; + background: var(--neutral-n50); + cursor: pointer; +} + +.data-scientist-radio { + margin-left: auto; + margin-right: 0.4rem; +} + +.developer-radio { + margin-left: 0.4rem; + margin-right: auto; +} + +.tab-content { + order: 1; + display: none; + transition: 0.3s; + margin-top: 0.75rem; + width: 100%; + margin-bottom: 1rem; +} + +/* checked tab */ +.tab-radio:checked + .tab-label { + border: 1px solid; + border-color: var(--secondary-s75); + background: var(--secondary-s50); +} + +.tab-radio:checked + .tab-label + .tab-content { + display: block; +} + +.doodle-data-scientist-container { + display: flex; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.brand-gradient-border { + background-image: var(--gradient-brand); + border-radius: 4px; + padding: 1px; +} + +.warmcool-gradient-border { + background-image: var(--gradient-warmcool); + border-radius: 4px; + padding: 1px; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.data-scientist-container h2, +.developer-container h2 { + text-align: center; + margin-top: 24px; +} + +.data-scientist-content { + background: #fff; + padding: 2rem; + border-radius: 4px; + width: 49rem; +} + +.data-scientist-content a { + color: black; +} + +.left-doodle { + margin-left: auto; + margin-right: 18px; + display: flex; + align-items: flex-start; + height: 100%; +} + +.right-doodle { + display: flex; + align-items: center; + margin-right: auto; + margin-left: 18px; + margin-top: 280px; + height: 100%; +} + +.green-box { + background-color: var(--secondary-s50); + height: auto; + flex-direction: column; + display: flex; + justify-content: space-between; + padding: 1.25rem; + padding-bottom: 0.3rem; + padding-right: 1rem; + padding-left: 1rem; +} + +.doodle-developer-container img { + max-width: 15%; + height: 30%; +} + +.user-quote img { + margin-right: 1.5rem; +} + +.green-box p img { + vertical-align: middle; + margin-bottom: 2px; +} + +.learn-nav a { + border: 1px solid var(--primary-p75); + border-radius: 0.5rem; + padding: 1rem; + align-items: center; + text-decoration: underline; + color: inherit; + display: flex; + justify-content: space-between; + + /* gradient backgrounds are difficult to add transition */ + transition: background 0.5s ease; +} + +.join-buttons a { + width: fit-content; + text-decoration: none; +} + +.green-box p a { + vertical-align: middle; + cursor: pointer; +} + +.data-scientist-rest { + display: flex; + flex-direction: column; + padding: 1rem; +} + +.user-quote { + background: #fff; + padding: 1rem; + border-radius: 4px; + display: flex; + gap: 24px; +} + +.data-dev-chip { + background: var(--gradient-purpleblue); + color: white; + padding: 0.75rem 1rem; + border-radius: 4rem; + max-width: 51.5rem; + margin: 1rem auto; + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; +} + +.data-scientist-chip * { + vertical-align: middle; +} + +.data-scientist-chip svg { + margin-bottom: 3px; +} + +.developer-container { + margin-bottom: 2rem; +} + +.doodle-developer-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.developer-content { + padding: 1rem; + border-radius: 4px; + background: var(--code-blocks-dark); + height: 24rem; + width: 53rem; +} + +.dev-navs { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.dev-nav { + display: flex; + flex-direction: column; + flex: 1; +} + +.dev-nav p a { + text-decoration: underline; + color: #fff; +} + +.dev-nav p { + color: var(--error-e100); +} + +.dev-quote { + background: var(--misc-dark); + padding: 1rem; + border-radius: 4px; + display: flex; + align-items: center; + gap: 1.3rem; +} + +.dev-quote p { + color: #fff; +} + +.news p { + border-left: 3px solid; + border-color: var(--primary); + padding-left: 12px; + margin-top: 6px; + margin-bottom: 6px; +} + +.info p { + padding-bottom: 1rem; +} + +.dev-quote p:first-child { + line-height: 150%; +} + +.dev-quote:last-child { + font-size: 0.8125rem; + line-height: 120%; +} + +.dev-slack { + margin: auto; + max-width: 53rem; +} + +.dev-logo { + display: inherit; + gap: 0.62rem; + color: #fff; + font-size: 1.1rem; + font-weight: 700; + line-height: 130%; +} + .events { padding-top: 2rem; } @@ -87,14 +361,6 @@ text-align: start; } -.news p { - border-left: 3px solid; - border-color: var(--primary); - padding-left: 12px; - margin-top: 6px; - margin-bottom: 6px; -} - .info-section-button-padding { width: fit-content; } @@ -138,10 +404,6 @@ gap: 0.5rem; } -.info p { - padding-bottom: 1rem; -} - .learn-nav { display: flex; flex-direction: column; @@ -149,25 +411,6 @@ flex: 1; } -.learn-nav a { - border: 1px solid var(--primary-p75); - border-radius: 0.5rem; - padding: 1rem; - align-items: center; - text-decoration: underline; - color: inherit; - display: flex; - justify-content: space-between; - - /* gradient backgrounds are difficult to add transition */ - transition: background 0.5s ease; -} - -.join-buttons a { - width: fit-content; - text-decoration: none; -} - .learn-nav a:hover { background-image: var(--gradient-brand); color: #fff; @@ -195,7 +438,7 @@ width: 100%; } -/* Join section CSS */ +/* Join section CSS */ .join { background-image: var(--gradient-reversewarmcool); @@ -223,7 +466,7 @@ justify-content: space-between; } -input[type="radio"] { +input[type="radio"].tabs-join-radio { appearance: none; background-color: #fff; box-shadow: inset 1em 1em var(--primary-p50); @@ -234,7 +477,7 @@ input[type="radio"] { display: grid; } -input[type="radio"]::before { +input[type="radio"].tabs-join-radio::before { content: ""; border-radius: 50%; transform: scale(0); @@ -242,7 +485,7 @@ input[type="radio"]::before { box-shadow: inset 1em 1em var(--primary); } -input[type="radio"]:checked::before { +input[type="radio"].tabs-join-radio:checked::before { transform: scale(1); } @@ -292,6 +535,33 @@ hr { } @media (width <= 768px) { + .doodle-developer-container img, + .doodle-data-scientist-container img { + display: none; + } + + .data-scientist-content, + .developer-content { + width: fit-content; + height: auto; + display: flex; + flex-direction: column; + padding: 1rem; + } + + .dev-navs { + display: flex; + flex-direction: column; + } + + .dev-quote p { + font-size: 0.8125rem; + } + + .data-dev-chip { + display: none; + } + .learn-block { display: flex; flex-direction: column; diff --git a/assets/style/typography.css b/assets/style/typography.css index 5f453a2b1..7dc1965ca 100644 --- a/assets/style/typography.css +++ b/assets/style/typography.css @@ -60,11 +60,6 @@ a { } @media screen and (width <= 700px) { - /* 700px */ - .hero { - font-size: 2.5rem; /* 40px */ - } - h1, .text-h1 { font-size: 2.1rem; /* 34px */ @@ -94,6 +89,11 @@ a { .text-h6 { font-size: 1.1rem; /* 17px */ } + + /* 700px */ + .text-hero { + font-size: 2.5rem; /* 40px */ + } } p { diff --git a/content/index.html b/content/index.html index 5ac0cc956..0096cfc25 100644 --- a/content/index.html +++ b/content/index.html @@ -1,33 +1,248 @@
- - - - - -
- start using bioconductor now! -
-

Create bioinformatic solutions with Bioconductor

-
-
-

software, Annotation and experiment packages

-

Docker containers for Bioconductor

+
+ + +
+
+

Create bioinformatic solutions with Bioconductor

+
+
+ start using bioconductor now! +
+
+
+
+

+ + Software, + Annotation + and + Experiment + packages +

+

+ + Docker containers for Bioconductor +

+
+
+

+ 📖 Bioconductor Books: + csawBook, + OSCA + and + SingleRBook +

+

+ 📣 + + _release/"> Latest release announcement + +

+

+ 🛠️ + Use Bioconductor in the AnVIL. + See our + project updates +

+

+ 💬 Community Slack sign-up +

+

💡 Support site

+

🗓️ Events calendar

+
+
+
+ profile picture +
+

+ “Bioconductor allows me to quickly and easily experiment + with packages to help improve my RNA-Seq analysis + pipeline” +

+

+ Annalise - Data Analyst, Organisation +

+
+
+
+
+
+
+ learn more about bioconductor +
+ + question mark circle + Need some help? Ask our community on the Bioconductor Support site! + + + + +
+
-

- Bioconductor Books: csawBook, OSCA and - SingleRBook -

- Latest release announcement -

- Use Bioconductor in theAnVIL. See our project updates -

- Community Slack sigh-up - Support site - Events calendar + + +
+
+

Contribute to Bioconductor

+
+ left-side code block +
+
+
+ + +
+
+
+ profile picture +
+

+ "The bioconductor community and resources make a package + developments straightforward and rewarding!" +

+

Charlie - Package Developer

+
+
+
+
+
+ right-side code block +
+ + + + + +
- learn more about bioconductor