diff --git a/add-on/src/landing-pages/welcome/page.js b/add-on/src/landing-pages/welcome/page.js index 64e5a7523..1cac3a1ec 100644 --- a/add-on/src/landing-pages/welcome/page.js +++ b/add-on/src/landing-pages/welcome/page.js @@ -23,12 +23,12 @@ function createWelcomePage (i18n) { return html`
${i18n.getMessage('page_landingWelcome_logo_title')}
${i18n.getMessage('page_landingWelcome_installSteps_title')}
${renderTranslatedLinks('page_landingWelcome_installSteps_install', ['https://docs.ipfs.io/introduction/install/'], `target="_blank" class="${anchorClass}"`)}
${i18n.getMessage('page_landingWelcome_installSteps_run')}
diff --git a/add-on/src/landing-pages/welcome/welcome.css b/add-on/src/landing-pages/welcome/welcome.css index 0b6fc7930..867fc74aa 100644 --- a/add-on/src/landing-pages/welcome/welcome.css +++ b/add-on/src/landing-pages/welcome/welcome.css @@ -1,7 +1,7 @@ @import url('../../../ui-kit/tachyons.css'); @import url('../../../ui-kit/ipfs.css'); -#hero { +#left-col { background-image: url('../../../images/stars.png'), linear-gradient(to bottom, #041727 0%, #043b55 100%); background-size: 100%; background-repeat: repeat; @@ -16,3 +16,34 @@ opacity: 0; filter: blur( .15em ); } + +/* + https://github.com/tachyons-css/tachyons-queries + Tachyons: $point == large +*/ +@media (min-width: 64em) { + #left-col { + position: fixed; + top: 0; + right: 50%; + width: 50%; + background-image: url('../../../images/stars.png'), linear-gradient(to bottom, #041727 0%, #043b55 100%); + background-size: 100%; + background-repeat: repeat; + } + + #right-col { + margin-left: 50%; + } +} + +@media (max-height: 800px) { + #left-col img { + width: 98px !important; + height: 98px !important; + } + + #left-col svg { + width: 60px; + } +}