Minor Update

- Added HTML elements on index.html page - Updated minor stylesheet changes
juancarloscruzd · Jun 19, 2012 · 5d8b4d5 · 5d8b4d5
1 parent eec6516
commit 5d8b4d5
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,71 @@
 <body>
 
 <div class="container">
-<div class="column one">
-<a href="#" class="button ">Submit</a>
+    <h1>Base <small>(typography, body, headings, code, tables, etc)</small></h1>
 </div>
+
+<div class="container fluid-row clear">
+    <div class="column four">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <div class="column four">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <div class="column four">
+        <h1>Heading 1.</h1>
+        <h2>Heading 2.</h2>
+        <h3>Heading 3.</h3>
+        <h4>Heading 4.</h4>
+        <h5>Heading 5.</h5>
+        <h6>Heading 6.</h6>
+    </div>
+</div>
+
+<hr>
+
+<div class="container">
+    <table>
+        <thead>
+            <tr>
+                <th>Element</th>
+                <th>Usage</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><code>&lt;strong&gt;</code></td>
+                <td>Emphasize a snippet of text with <strong>importantance</strong> </td>
+            </tr>
+            <tr>
+                <td><code>&lt;em&gt;</code></td>
+                <td>Emphasize a snippet of text with <em>stress</em> </td>
+            </tr>
+            <tr>
+                <td><code>&lt;abbr&gt;</code></td>
+                <td>Wraps abbreviations and acronyms to show the expanded version on hover <abbr title="Example :)">eg</abbr> </td>
+            </tr>
+            <tr>
+                <td><code>&lt;address&gt;</code></td>
+                <td>
+                    <address>
+                    <strong>Base Address.</strong><br>
+                    12 Base Street, Base<br>
+                    <abbr title="Contact Phone">P:</abbr> (613) 0000 - 0000
+                    </address>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<hr>
+
+<div class="container fluid-row clear">
+
+
+
 </div>
 
 </body>

diff --git a/style.css b/style.css
@@ -5,7 +5,7 @@
     Description: A base template for your next web project!
     Author: Matthew Hartman
     Author URI: http://www.matthewhartman.com.au
-    Version: 1.0 - Last Updated: 18th June, 2012
+    Version: 1.0 - Last Updated: 19th June, 2012
 
 ========================================================================== */
 
@@ -253,10 +253,24 @@ p {
     margin: 0 0 1em 0;
 }
 
+abbr {
+    border-bottom: 1px dotted #000;
+    cursor: help;
+}
+
+address {
+    font-style: normal;
+}
+small {
+    font-size: 67.5%;
+}
 /* Block Quotes */
 blockquote,
 q {
     quotes: none;
+    border-left: 4px solid #cccccc;
+    font-style: italic;
+    padding-left: 1em;
 }
 blockquote:before,
 blockquote:after,
@@ -336,9 +350,9 @@ table td {
 table thead th {
     vertical-align: bottom;
     font-weight: bold;
-    background: #000000;
-    color: #ffffff;
-    border-left: 1px solid #555555;
+    background: #ffffff;
+    color: #000000;
+    border-left: 1px solid #dddddd;
 }
 table caption + thead tr:first-child th,
 table caption + thead tr:first-child td,
@@ -369,7 +383,7 @@ table tbody tr:nth-child(odd) th {
    ========================================================================== */
 /* Sections & Content Blocks */
 .section {position: relative;}
-.container {min-width: 280px; max-width: 1140px; margin: 0 auto;}
+.container {min-width: 280px; max-width: 960px; margin: 0 auto;}
 .content-block {position: relative; display: table-cell; float: none;}
 
 /* Grid Layout */
@@ -387,6 +401,8 @@ table tbody tr:nth-child(odd) th {
     margin-left: 1%;
     margin-right: 1%;
 }
+.fluid-row .column:first-child { margin: 0; }
+
 .one { width:6.333%; }
 .two { width:14.667%; }
 .three { width:23.0%; }
@@ -426,18 +442,21 @@ table tbody tr:nth-child(odd) th {
 /* ==========================================================================
 /* -- Tablet Devices (Layout, Modifications, etc)
    ========================================================================== */
-@media only screen and (min-width: 600px) and (max-width: 959px) {
+@media only screen and (min-width: 720px) and (max-width: 959px) {
 html body {max-width: 959px; padding: 0; margin: 0;}
+
+.container {width: 720px;}
+
 .notablet {display: none;}
 }
 
 
 /* ==========================================================================
 /* -- Mobile Devices (Layout, Modifications, etc)
    ========================================================================== */
-@media only screen and (min-width: 320px) and (max-width: 599px) {
+@media only screen and (min-width: 320px) and (max-width: 719px) {
 html body {max-width: 100%; padding: 0; margin: 0;}
-html .container {margin-left: 10px; margin-right: 10px;}
+html .container {margin-left: 1em; margin-right: 1em; width: auto;}
 .one,
 .two,
 .three,