Styling and layout

Raijinili · Aug 29, 2015 · f89169b · f89169b
1 parent 2781f2e
commit f89169b
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 17 deletions.
diff --git a/css/skeleton.css b/css/skeleton.css
@@ -172,7 +172,7 @@ input[type="button"] {
   display: inline-block;
   height: 38px;
   padding: 0 30px;
-  color: #555;
+  color: #FFF;
   text-align: center;
   font-size: 11px;
   font-weight: 600;
@@ -183,9 +183,10 @@ input[type="button"] {
   white-space: nowrap;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid #bbb;
+  border: 1px solid #FFF;
   cursor: pointer;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  text-shadow: 0 2px 4px #1e2835); }
 .button:hover,
 button:hover,
 input[type="submit"]:hover,
@@ -196,8 +197,8 @@ button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus {
-  color: #333;
-  border-color: #888;
+  color: #FFF;
+  border-color: #FFF;
   outline: 0; }
 .button.button-primary,
 button.button-primary,
@@ -206,7 +207,8 @@ input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
   background-color: #33C3F0;
-  border-color: #33C3F0; }
+  border-color: #33C3F0;
+  text-shadow:none; }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,

diff --git a/css/styles.css b/css/styles.css
@@ -1,3 +1,59 @@
+body {
+    background:url(../images/hg-hero.png) top right no-repeat;
+    background-attachment:fixed;
+    background-size: cover;
+}
+
+body:after {
+    content: "";
+    background:
+    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
+    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
+    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
+    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
+    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
+    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
+    background-color: #131313;
+    background-size: 20px 20px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: fixed;
+    z-index: -1;
+    opacity: .5;
+}
+
+header {
+    color: #fff;
+    background-color: #111;
+}
+
+.navigation {
+    list-style: none;
+    margin:0;
+}
+
+.navigation a {
+    text-decoration: none;
+    float:right;
+}
+
+.navigation li {
+    color: #33C3F0;
+    margin: 0;
+    padding: 8px 0 8px 0;
+}
+
+.navigation li:hover {
+    color: #1EAEDB;
+}
+
+.hero h2 {
+    color: #fff;
+    text-shadow: 0 2px 4px #1e2835;
+}
+
 .buttons {
     width: 180px;
     vertical-align: top;
@@ -12,14 +68,14 @@
 
 .units {
     display: inline-block;
-    max-width: 800px;
-    min-height: 220px;
+    min-height: 500px;
     margin: 0 0 0 184px;
+    text-align: center
 }
 
 .unit {
     width: 260px;
-    margin: 0 2px 0 2px;
+    margin: 0 4px 2px 4px;
     min-height: 210px;
     border-radius: 8px;
     box-shadow: 0 0 0 1px black;
@@ -110,7 +166,13 @@
 }
 
 footer {
+    color: #fff;
+    background-color: #111;
     text-align: center;
+    margin: 0;
+    padding: 8px 32px 8px 32px;
+    position: relative;
+    bottom: 0;
 }
 
 /* Action colors */

diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/hg-hero.png b/images/hg-hero.png
diff --git a/images/outline.png b/images/outline.png
diff --git a/index.html b/index.html
@@ -19,17 +19,22 @@
 </head>
 
 <body>
+  <header>
+    <div class="container">
+      <ul class="navigation row">
+        <a class="three columns" href="http://www.highgroundsgame.com">
+          <li>Play Highgrounds</li>
+        </a>
+      </ul>
+    </div>
+  </header>
   <div class="container">
-    <div class="row">
+
+
+    <div class="row hero">
       <h2 style="margin-top: 10%">Highgrounds Units</h2>
     </div>
-    <!-- Old buttons
-    <aside class="buttons">
-      <button class="resource button-primary" data-resource-type="gold">Gold</button>
-      <button class="resource button-primary" data-resource-type="crystal">Crystal</button>
-      <button class="resource button-primary" data-resource-type="wood">Wood</button>
-    </aside>
-    -->
+
     <aside class="buttons">
       <div class="cities"></div>
     </aside>