-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add browser not supported page. Added meta tags. Resolves #665.
- Loading branch information
1 parent
1f627e5
commit 9d2766b
Showing
1 changed file
with
125 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,126 @@ | ||
| <html style="height: 100vh; overflow: hidden;"> | ||
| <head> | ||
| <link rel='stylesheet' href='https://use.typekit.net/qhb0geh.css'/> | ||
| <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300'/> | ||
| </head> | ||
| <body style="box-sizing: border-box; margin: 0;"> | ||
| <header style="box-sizing: border-box; height: 60px !important; margin: 0 auto; max-width: 1200px; min-height: 60px; padding: 0 30px;"> | ||
| <img src="./logo.png" alt="Data Portal" style="height: 40px; max-height: 40px; padding: 10px 0;"> | ||
| </header> | ||
| <main style="height: calc(100vh - 60px)"> | ||
| <div style="box-sizing: border-box; height: 76px; margin: 0 auto; max-width: 1200px; padding: 0 30px;"> | ||
| <div style="font-family: 'din-2014', sans-serif; font-size: 34px; font-weight: 500; line-height: 38px; padding: 19px 0;">Browser Not Supported</div> | ||
| </div> | ||
| <div style="border-bottom: 1px solid rgb(204, 204, 204); height: 24px;"></div> | ||
| <section style="background: url(./error.png) no-repeat center center fixed; background-size: cover; height: 100%; min-height: 100%; overflow: hidden;"> | ||
| <div style="box-sizing: border-box; margin: 0 auto; max-width: 1200px; padding: 0 30px;"> | ||
| <div style="padding: 36px 0; width: 100%;"> | ||
| <p style="font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; margin: 0 0 18px; max-width: 640px;"> | ||
| <span>The HCA Data Portal supports recent versions of Chrome, Firefox, Safari and Edge on MacOS, Windows and Linux. If you feel you have reached this page in error, please contact </span> | ||
| <a href="mailto: [email protected]" | ||
| target="_blank" | ||
| style="color: #1c7cc7; font: inherit; text-decoration: none;">[email protected]</a><span>.</span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| <style> | ||
| html { | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| body { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .wrapper { | ||
| box-sizing: border-box; | ||
| margin: 0 auto; | ||
| max-width: 1200px; | ||
| padding: 0 16px; | ||
| width: 100% | ||
| } | ||
|
|
||
| header { | ||
| box-sizing: border-box; | ||
| height: 60px !important; | ||
| min-height: 60px; | ||
| } | ||
|
|
||
| header img { | ||
| height: 30px; | ||
| max-height: 40px; | ||
| padding: 15px 0; | ||
| } | ||
|
|
||
| main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: calc(100vh - 60px); | ||
| } | ||
|
|
||
| main .section { | ||
| height: 76px; | ||
| } | ||
|
|
||
| main .section h1 { | ||
| font-family: "din-2014", sans-serif; | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 38px; | ||
| margin: 0; | ||
| padding: 19px 0; | ||
| } | ||
|
|
||
| main .tab { | ||
| border-bottom: 1px solid rgb(204, 204, 204); | ||
| height: 24px; | ||
| } | ||
|
|
||
| main section { | ||
| background: url("./error.png") no-repeat center center fixed; | ||
| background-size: cover; | ||
| flex: 1; | ||
| min-height: 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| main .content { | ||
| padding: 36px 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| main section p { | ||
| font-family: "Montserrat", sans-serif; | ||
| font-size: 16px; | ||
| font-weight: 300; | ||
| line-height: 28px; | ||
| margin: 0 0 18px; | ||
| max-width: 640px; | ||
| } | ||
|
|
||
| main section p a { | ||
| color: #1c7cc7; | ||
| font: inherit; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| @media screen and (min-width: 400px) { | ||
|
|
||
| .wrapper { | ||
| padding: 0 30px; | ||
| } | ||
|
|
||
| main .section h1 { | ||
| font-size: 34px; | ||
| } | ||
| } | ||
| </style> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>HCA Data Portal</title> | ||
| <base href="/"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="https://use.typekit.net/qhb0geh.css"/> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300"/> | ||
| </head> | ||
| <body> | ||
| <header class="wrapper"> | ||
| <img src="./logo.png" alt="Data Portal"> | ||
| </header> | ||
| <main> | ||
| <div class="wrapper section"> | ||
| <h1>Browser Not Supported</h1> | ||
| </div> | ||
| <div class="tab"></div> | ||
| <section> | ||
| <div class="wrapper"> | ||
| <div class="content"> | ||
| <p> | ||
| <span>The HCA Data Portal supports recent versions of Chrome, Firefox, Safari and Edge on MacOS, Windows and Linux. If you feel you have reached this page in error, please contact </span> | ||
| <a href="mailto: [email protected]" target="_blank">[email protected]</a> | ||
| <span>.</span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> |