style updates to static site

brc_static/css/styles.css

@@ -152,6 +152,7 @@ p:last-of-type {
     font-weight: 300;
     display: block;
     font-size: 0.9em;
+    margin: 10px;
 }
 
 .title-cta {
@@ -206,12 +207,14 @@ p:last-of-type {
 .button-accent {
     color: #ffffff;
     border-color: #ffffff;
-    cursor:pointer
+    cursor:pointer;
+    background: rgba(0,0,0,0.4);
+    box-shadow: 0px 0px 15px 5px #fff;
 }
 
 .button-accent:hover,
 .button-accent:focus {
-    background: #ffffff;
+    background: #fff;
     color: #232323;
 }
 
@@ -258,9 +261,37 @@ p:last-of-type {
 }
 /* header
 =================== */
-
+@media only screen and (min-width: 1000px) {
     header {
-    margin: 1rem 0;
+       z-index: 1;
+	   position: absolute;
+	   top: 0px;
+	   width: 100%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .nav li {
+        margin-left: 2px !important;
+        margin-right: 2px !important;
+        width: 20vw;
+    }
+}
+@media only screen and (min-width: 501px) and (max-width: 999px) {
+    .nav li {
+        margin-left: 2px !important;
+        margin-right: 2px !important;
+        width: 100px;
+    }
+}
+@media only screen and (min-width: 1000px) {
+    .nav li {
+        width: 100px;
+    }
+}
+header {
+	background: rgba(0,0,0,0.4);
+	margin: 0px;
 }
 
 .nav ul {
@@ -272,21 +303,24 @@ header {
 .nav li {
     display: inline-block;
     margin: 1em;
+    text-align: center;
 }
 
 .nav a {
     font-weight: 900;
     text-decoration: none;
-    padding: 0.5em;
+    /*! padding: 0.5em; */
     text-transform: uppercase;
     color: white;
-    font-size: 0.8rem;
+    font-size: 10pt;
+    /*! font-weight: bold; */
 }
 
 
-.nav a:hover,
-.nav a:focus {
+.nav a:hover {
     color: #ddd;
+    font-size: 11pt;
+    /*! font-weight: bold; */
 }
 
 .logo {
@@ -301,6 +335,7 @@ header {
     background-size: cover;
     background-position: center;
     padding: 10em 0;
+	top: 0px;
     color: #fff;
 }
 

brc_static/index.html

@@ -25,7 +25,7 @@
 
 <section class="home-hero parallax--bg">
 	<div class="container">
-		<h1 class="title parallax--box"><span><img src="img/title.png" alt="title"></span>
+		<h1 class="title parallax--box"><span><img src="img/title.png" alt="bricabracomania metalworks"></span>
 		</h1>
 		<a href="/projects" class="button button-accent">See Our Work</a>
 	</div>