Messing around

ali · Nov 23, 2013 · 0febce1 · 0febce1
1 parent aa06ed6
commit 0febce1
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -27,29 +27,18 @@
 
 <body>
 <div class="container">
-  <div class="sixteen columns">
-    <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
-    <h5>Version 1.2</h5>
-    <hr />
-  </div>
-  <div class="one-third column">
-    <h3>About Skeleton?</h3>
-    <p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
-  </div>
-  <div class="one-third column">
-    <h3>Three Core Principles</h3>
-    <p>Skeleton is built on three core principles:</p>
-    <ul class="square">
-      <li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
-      <li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
-      <li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
-    </ul>
-  </div>
-  <div class="one-third column">
-    <h3>Docs &amp; Support</h3>
-    <p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
-  </div>
 
+  <header id="cover" class="sixteen columns">
+    <h1>AUK</h1>
+  </header>
+
+  <nav class="three columns alpha clearfix">
+    Stuff
+  </nav>
+
+  <div class="twelve columns offset-by-one content">
+    H'okay
+  </div>
 </div>
 </body>
 </html>
diff --git a/stylesheets/layout.css b/stylesheets/layout.css
@@ -6,46 +6,69 @@
 * http://www.opensource.org/licenses/mit-license.php
 * 6/20/2012
 */
-
 /* Table of Content
 ==================================================
   #Site Styles
   #Page Styles
   #Media Queries
   #Font-Face */
-
 /* #Site Styles
 ================================================== */
-
+body {
+  background: #191d1f;
+  color: #fff;
+}
+a {
+  color: #bbb;
+  text-decoration: none;
+}
+a:hover {
+  color: #becccb;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: #fff;
+}
+header {
+  text-align: center;
+  height: 10em;
+}
+header h1 {
+  line-height: 3em;
+  vertical-align: middle;
+  display: inline;
+  background-size: cover;
+}
 /* #Page Styles
 ================================================== */
-
 /* #Media Queries
 ================================================== */
-
 /* Smaller than standard 960 (devices and browsers) */
-@media only screen and (max-width: 959px) {}
-
+@media only screen and (max-width: 959px) {
+}
 /* Tablet Portrait size to standard 960 (devices and browsers) */
-@media only screen and (min-width: 768px) and (max-width: 959px) {}
-
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+}
 /* All Mobile Sizes (devices and browser) */
-@media only screen and (max-width: 767px) {}
-
+@media only screen and (max-width: 767px) {
+}
 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
-@media only screen and (min-width: 480px) and (max-width: 767px) {}
-
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+}
 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
-@media only screen and (max-width: 479px) {}
-
-
+@media only screen and (max-width: 479px) {
+}
 /* #Font-Face
 ================================================== */
 /*  This is the proper syntax for an @font-face file
 Just create a "fonts" folder at the root,
 copy your FontName into code below and remove
 comment brackets */
-
 /*  @font-face {
 font-family: 'FontName';
 src: url('../fonts/FontName.eot');

diff --git a/stylesheets/layout.styl b/stylesheets/layout.styl
@@ -0,0 +1,82 @@
+/*
+* Skeleton V1.2
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 6/20/2012
+*/
+
+/* Table of Content
+==================================================
+  #Site Styles
+  #Page Styles
+  #Media Queries
+  #Font-Face */
+
+/* #Site Styles
+================================================== */
+body
+  background: #191d1f
+  color: #fff
+
+a
+  color: #bbb
+  text-decoration: none
+
+  &:hover
+    color: #becccb
+
+h1, h2, h3, h4, h5, h6, strong
+  color: #fff
+
+header
+  text-align: center
+  height: 10em
+
+  h1
+    line-height: 3em
+    vertical-align: middle
+    display: inline
+    background-size: cover
+
+
+/* #Page Styles
+================================================== */
+
+/* #Media Queries
+================================================== */
+
+/* Smaller than standard 960 (devices and browsers) */
+@media only screen and (max-width: 959px) {}
+
+/* Tablet Portrait size to standard 960 (devices and browsers) */
+@media only screen and (min-width: 768px) and (max-width: 959px) {}
+
+/* All Mobile Sizes (devices and browser) */
+@media only screen and (max-width: 767px) {}
+
+/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+@media only screen and (min-width: 480px) and (max-width: 767px) {}
+
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+@media only screen and (max-width: 479px) {}
+
+
+/* #Font-Face
+================================================== */
+/*  This is the proper syntax for an @font-face file
+Just create a "fonts" folder at the root,
+copy your FontName into code below and remove
+comment brackets */
+
+/*  @font-face {
+font-family: 'FontName';
+src: url('../fonts/FontName.eot');
+src: url('../fonts/FontName.eot?iefix') format('eot'),
+url('../fonts/FontName.woff') format('woff'),
+url('../fonts/FontName.ttf') format('truetype'),
+url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
+font-weight: normal;
+font-style: normal; }
+ */