Alpha warning. Banned list

alphagov · Apr 3, 2012 · 09f1139 · 09f1139
1 parent 0ef1f32
commit 09f1139
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css
@@ -416,10 +416,42 @@ html {
 }
 
 .header-context,
-.beta-notice{
+#footer .beta-notice{
   display:none;
 }
 
+#wrapper .beta-notice {
+  color: #000;
+  float: left;
+
+  font-family: "Gill Sans W01 Medium", "Gill Sans MT Pro", "Gill Sans", GillSans, sans-serif;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-size: 1.3rem;
+  line-height: 1.1538461538;
+  font-weight: 500;
+  letter-spacing: 0.2em;
+
+  display:block;
+  position:absolute;
+  top:40px;
+}
+#wrapper .beta-notice a{
+  display:block;
+  padding: 8px 13px;
+  padding: 0.8rem 1.3rem;
+  background-color:#d43783;
+  border: none;
+  float:left;
+  color:#fff;
+  text-decoration: none;
+}
+#wrapper .beta-notice span{
+  padding: 8px 13px;
+  padding: 0.8rem 1.3rem;
+  display:block;
+  float:left;
+}
 #wrapper article .example {
   background: transparent;
 }

diff --git a/index.html b/index.html
@@ -4,6 +4,13 @@
 ---
 
  <div id="wrapper" class="design-principles"> 
+  <div class="beta-notice">
+    <div class="inner">
+    <p>
+    <a href="http://digital.cabinetoffice.gov.uk/2012/04/03/design-principles-alpha/">ALPHA</a> <span>Last updated 3 April 2012</span>
+    </p>
+    </div>
+  </div>
   <header>
 
      <h1>Government Digital Service <strong>Design Principles</strong></h1>
@@ -837,6 +844,19 @@ <h1>More detail coming soon</h1>
                     <p>We're currently working on a broad range of transactions to create a pick'n'mix of consistent design patterns which we can choose from for use in a number of scenarios.</p>
                   </div>
                 </article>
+
+                <article class="comparison">
+                <header>
+                  <h1>Some things we've banned</h1>
+                  <p class="status experimental">Experimental</p>
+                </header>
+                <div class="example">
+                  <img class="full-width" src="/app/assets/images/content/10/type_styles.png" />
+                </div>
+                <div class="caption">
+                  <p>Try to avoid visual cliches.  Here's a few....</p>
+                </div>
+              </article>
            </div>
          </section>