diff --git a/src/content/app/about/About.module.css b/src/content/app/about/About.module.css index 7ca21c828a..83e16e7560 100644 --- a/src/content/app/about/About.module.css +++ b/src/content/app/about/About.module.css @@ -21,14 +21,17 @@ } .aside { - position: sticky; - top: 0; - display: flex; - flex-direction: column; - align-self: start; + display: grid; + grid-template-rows: 1fr [social-media-links] auto; } .asideTitle { font-weight: var(--font-weight-light); margin-bottom: 1rem; } + +.socialMediaLinks { + align-self: start; + grid-row: social-media-links; + margin-bottom: 60px; +} diff --git a/src/content/app/about/About.tsx b/src/content/app/about/About.tsx index 8a0121626a..091413e132 100644 --- a/src/content/app/about/About.tsx +++ b/src/content/app/about/About.tsx @@ -43,6 +43,7 @@ import Breadcrumbs from 'src/shared/components/breadcrumbs/Breadcrumbs'; import { CircleLoader } from 'src/shared/components/loader'; import ConversationIcon from 'src/shared/components/communication-framework/ConversationIcon'; import { NotFoundErrorScreen } from 'src/shared/components/error-screen'; +import SocialMediaLinks from 'src/shared/components/social-media-links/SocialMediaLinks'; import helpStyles from '../help/Help.module.css'; import styles from './About.module.css'; @@ -105,6 +106,7 @@ const About = () => { highlightActiveArticle={true} /> )} + diff --git a/src/content/app/tools/vep/components/vep-top-bar/EnsemblVepVersion.tsx b/src/content/app/tools/vep/components/vep-top-bar/EnsemblVepVersion.tsx index 07256c63f9..038ae56c51 100644 --- a/src/content/app/tools/vep/components/vep-top-bar/EnsemblVepVersion.tsx +++ b/src/content/app/tools/vep/components/vep-top-bar/EnsemblVepVersion.tsx @@ -22,7 +22,7 @@ const EnsemblVepVersion = () => { return (
- Variant effect predictor + Variant Effect Predictor v110
); diff --git a/src/content/app/tools/vep/components/vep-top-bar/VepTopBar.module.css b/src/content/app/tools/vep/components/vep-top-bar/VepTopBar.module.css index 86bc26471a..c0c93ed98b 100644 --- a/src/content/app/tools/vep/components/vep-top-bar/VepTopBar.module.css +++ b/src/content/app/tools/vep/components/vep-top-bar/VepTopBar.module.css @@ -61,6 +61,7 @@ column-gap: var(--standard-gutter); padding-right: 80px; } + .transcriptSetWrapper { display: flex; align-items: baseline; diff --git a/src/content/home/Home.module.css b/src/content/home/Home.module.css index f67ed886d7..450be23d85 100644 --- a/src/content/home/Home.module.css +++ b/src/content/home/Home.module.css @@ -187,19 +187,6 @@ margin-left: auto; } -.footerRight .link { - margin-right: 12px; - margin-bottom: 10px; - white-space: nowrap; - color: var(--color-blue); -} - -.footerRight .mediaIcon { - width: 24px; - height: 24px; - margin: 0 12px 10px; -} - .footerRight .gbcLogo { height: 40px; margin-left: clamp(30px, 3vw, 90px); @@ -210,3 +197,7 @@ height: 52px; margin-left: 40px; } + +.socialMediaLinks { + margin-right: 12px; +} diff --git a/src/content/home/Home.tsx b/src/content/home/Home.tsx index 5539ef4563..93eabbe533 100644 --- a/src/content/home/Home.tsx +++ b/src/content/home/Home.tsx @@ -25,6 +25,7 @@ import { SpeciesSelectorIcon, EntityViewerIcon } from 'src/shared/components/app-icon'; +import SocialMediaLinks from 'src/shared/components/social-media-links/SocialMediaLinks'; import Logotype from 'static/img/brand/logotype.svg'; @@ -32,9 +33,6 @@ import speciesStripUrl from 'static/img/home/species-strip.svg?url'; import ebiLogoUrl from 'static/img/home/EMBLEBI-logo.svg?url'; import elixirLogoUrl from 'static/img/home/elixir-logo.svg?url'; import gbcLogoUrl from 'static/img/home/gbc-logo.svg?url'; -import facebookIconUrl from 'static/icons/icon_facebook.svg?url'; -import twitterIconUrl from 'static/icons/icon_twitter.svg?url'; -import blogIconUrl from 'static/icons/icon_blog.svg?url'; import styles from './Home.module.css'; @@ -142,34 +140,7 @@ const Home = () => {
- -
Ensembl blog
- - - - - - - - - - + { Visit Facebook or Twitter for the latest breaking Ensembl news and service status updates.

-

- - Ensembl Blog{' '} - {' '} - - - {' '} - - - - -

+

Online Help

diff --git a/src/shared/components/social-media-links/SocialMediaLinks.module.css b/src/shared/components/social-media-links/SocialMediaLinks.module.css new file mode 100644 index 0000000000..6ac379d4f1 --- /dev/null +++ b/src/shared/components/social-media-links/SocialMediaLinks.module.css @@ -0,0 +1,29 @@ +/* + To style individual icons, use the following selectors: + - [data-part="blog-icon"] for the blog icon + - [data-part="facebook-icon"] for Facebook icon + - [data-part="twitter-icon"] for Twitter/X icon + */ + +@layer components { + .container { + display: inline-grid; + grid-template-columns: repeat(3, auto); + column-gap: 24px; + } + + .blog { + display: inline-flex; + align-items: center; + gap: 16px; + white-space: nowrap; + } + + .mediaIcon { + height: 24px; + } + + .mediaIcon[data-part="twitter-icon"] { + height: 22px; + } +} diff --git a/src/shared/components/social-media-links/SocialMediaLinks.tsx b/src/shared/components/social-media-links/SocialMediaLinks.tsx new file mode 100644 index 0000000000..8602e1037b --- /dev/null +++ b/src/shared/components/social-media-links/SocialMediaLinks.tsx @@ -0,0 +1,71 @@ +/** + * See the NOTICE file distributed with this work for additional information + * regarding copyright ownership. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import classNames from 'classnames'; + +import facebookIconUrl from 'static/icons/icon_facebook.svg?url'; +import twitterIconUrl from 'static/icons/icon_twitter.svg?url'; +import blogIconUrl from 'static/icons/icon_blog.svg?url'; + +import styles from './SocialMediaLinks.module.css'; + +type Props = { + className?: string; +}; + +const SocialMediaLinks = (props: Props) => { + const componentStyles = classNames(styles.container, props.className); + + return ( + + ); +}; + +export default SocialMediaLinks; diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000000..bb97284db1 --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,142 @@ +/* apply a natural box layout model */ +html { + box-sizing: border-box; + font-size: var(--body-font-size); + + --scrollbar-width: 0px; /* this is a fallback value; it will be overwritten by javascript at startup */ +} + +/* inherit the natural box layout from html; allow box-sizing to easily change if necessary */ +*, +*::before, +*::after { + box-sizing: inherit; + -webkit-tap-highlight-color: transparent; /* disable blue highlight colour that can otherwise be seen upon tapping an element with cursor: pointer in mobile browser */ +} + +body { + margin: 0; + padding: 0; + background: var(--color-off-white); + font-family: var(--font-family-body); + font-weight: normal; + line-height: var(--body-line-height); + text-size-adjust: none; /* prevent automatic text size inflation on smartphones running Chromium-based browsers */ + color: var(--color-black); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +html, +body { + height: 100%; + width: 100%; + min-width: 980px; /* when mobile phones in portrait mode scale the page down to fill the screen, they usually go to 980px */ +} + +a { + color: var(--color-blue); + text-decoration: none; +} + +img { + display: inline-block; /* Get rid of gap under images by making them display: inline-block; by default */ + vertical-align: middle; + max-width: 100%; + height: auto; +} + +/* Make sure textarea takes on height automatically */ +textarea { + height: auto; + min-height: 50px; + border-radius: 0; +} + +/* Make select elements 100% of parent's width by default */ +select { + box-sizing: border-box; + width: 100%; + border-radius: 0; +} + +ul { + margin: 0; + padding: 0; +} + +/* Reset