Add announcement banner to documentation site (#31)

* Add announcement banner to documentation site * Move css to the file * Remove css from inline
TextureGroup · Apr 18, 2017 · e727d9a · e727d9a
1 parent fdb54a0
commit e727d9a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -7,22 +7,22 @@
     <link rel='stylesheet' href='/static/media.css' type='text/css'/>
     <link rel="stylesheet" href='/static/pygments.css' type='text/css'/>
     <link rel="apple-touch-icon" sizes="57x57" href="/static/images/favicon/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="/static/images/favicon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="/static/images/favicon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="/static/images/favicon/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="/static/images/favicon/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="/static/images/favicon/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicon/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicon/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicon/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192"  href="/static/images/favicon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon/favicon-16x16.png">
-	<link rel="manifest" href="/static/images/favicon/manifest.json">
-	<meta name="msapplication-TileColor" content="#ffffff">
-	<meta name="msapplication-TileImage" content="/static/images/favicon/ms-icon-144x144.png">
-	<meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="60x60" href="/static/images/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/static/images/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/static/images/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/static/images/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/static/images/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/static/images/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/static/images/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/static/images/favicon/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
     <meta name='viewport' content='width=480'>
     <meta property="og:title" content="{{ page.title }}" />
     <meta property="og:site_name" content="Texture">
@@ -39,6 +39,11 @@
     {% endif %}
 </head>
 <body>
+<div class="texture-banner">
+  <div class="container">
+    <p class="announcement">AsyncDisplayKit is now Texture! <a class="learn-more-link" href="https://medium.com/@Pinterest_Engineering/introducing-texture-a-new-home-for-asyncdisplaykit-e7c003308f50" rel="noopener noreferrer" target="_blank">LEARN MORE</a></p>
+  </div>
+</div>
 <header>
 	<div class="container">
 		<h1 id="logo"><a href="/"><img src="../static/images/Texturelogo.png" alt="Texture" width="186" height="40"></a></h1>

diff --git a/docs/static/main.css b/docs/static/main.css
@@ -529,3 +529,35 @@ footer {
 footer p {
 	text-align: center;
 }
+
+/** Banner */
+.texture-banner {
+  padding: 20px 0 20px 0;
+  width: 100%;
+  background-color: #0e1e28;
+  box-shadow: inset 0 -2px 20px 0 rgba(0,0,0,0.5);
+  text-align: center;
+}
+
+.texture-banner .announcement {
+  font-stretch: normal;
+  font-size: 16px;
+  line-height: 1.75;
+  letter-spacing: 0.1px;
+  text-align: center;
+  color: #d7e2e9;
+  font-weight: bold;
+  margin: 0;
+}
+
+.texture-banner .learn-more-link {
+  font-size: 12px;
+  font-weight: bold;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.17;
+  letter-spacing: 0.5px;
+  color: #0484f2;
+  margin-left: 10px;
+}
+