Merge pull request #56 from ZediWards/master

Manifesto button added

Author: yochannah

content/_index.md

@@ -2,7 +2,10 @@
   "title" : "Code Is Science : Home"
 }
 
-# Code is science!
+<header class="flex_header">
+<h1 class="flex_header_h1">Code is science!</h1>
+<a class="manifesto_CTA"href="/manifesto" target="blank">Read and Sign<br>the Manifesto!</a>
+</header>
 
 ## Premise
 

themes/codeisscience/static/css/style.css

@@ -11,6 +11,7 @@ body {
   flex-direction: column;
   min-height: 100vh;
 }
+
 /*Main*/
 * {
   box-sizing: border-box;
@@ -23,6 +24,58 @@ main {
   display: flex;
   flex-grow: 1;
 }
+
+/*flex_Header*/
+.flex_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex_header_h1 {
+  margin-bottom: 0px;
+  text-transform: uppercase;
+}
+
+.manifesto_CTA {
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  letter-spacing: .05em;
+  font-size: 1.5em;
+  color: #ffffff;
+  background-color: #f47a37;
+  margin: .38em 1em .38em 0;  
+  padding: 1em 1.5em;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16),
+0px 3px 6px 0px rgba(0, 0, 0, 0.23);
+    
+}
+
+/*border setup for hover/ focus state*/
+.manifesto_CTA{
+  border: solid 1px transparent;
+  border-radius: 10px;
+}
+
+.manifesto_CTA:hover,
+.manifesto_CTA:focus    
+{
+  color: #f47a37;
+  background: #ffffff;
+  border-color: currentColor;
+  outline: none;
+}
+
+.manifesto_CTA:active {          
+  transform: translateY(1px);
+  filter: saturate(150%);
+  box-shadow: none;
+}
+/**********************************************************/
+
 main article {
   margin: 0.5em;
   flex: 1 1;
@@ -65,11 +118,13 @@ main .side-menu {
 /*Media Queries*/
 @media only screen and (max-width: 700px) {
   /* For mobile phones: */
+  .flex_header_h1,
   .main,
   .side-menu {
     width: 100%;
   }
-  main {
+  main,
+  .flex_header {
     flex-direction: column;
   }
 }