fleshed out stylesheer more

diff --git a/index.html b/index.html
index bfa2cac9117eba94604911d2b9b82f4073fc75f9..2aa85f5eac8aaf5c5120ceb0058dc94d681f7b31 100644 (file)
--- a/index.html
+++ b/index.html
@@ -19,37 +19,42 @@
                 <h1>Heading 1</h1>
                 <h2>Heading 2</h2>
                 <h3>Heading 3</h3>
-                <h4>Heading 4</h4>
-                <h5>Heading 5</h5>
-                <h6>Heading 6</h6>
-                <p>Paragraph text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl tellus, lacinia lobortis feugiat eu, fermentum sit amet nulla. Donec tincidunt feugiat tortor, sit amet varius nisi posuere ultrices. Suspendisse feugiat, massa in dictum ultricies, mauris neque tincidunt ex, sit amet pharetra risus urna vel velit. Phasellus mattis magna vitae mollis venenatis. Vestibulum pulvinar sem quis efficitur tincidunt. Morbi tempor neque id erat placerat, ac iaculis ex venenatis. Duis porttitor euismod augue, et ullamcorper quam sodales nec. Vestibulum ultricies pellentesque mattis. Nulla sit amet felis auctor, pellentesque nunc a, suscipit ligula. Praesent in justo dolor. Nullam eleifend tempus mi ac malesuada. Mauris et libero lacus.</p>
-                unordered list:
+                <a href="http://google.com">This is a link</a><br/>
+                <p>blockqoute:</p>
+                <blockquote>
+                this is a block quote<br/>
+                and it's multi-line
+                </blockquote>
+                <p>unordered list:</p>
                 <ul>
                     <li>foo</li>
                 </ul>
-                ordered list:
+                <p>ordered list:</p>
                 <ol>
                     <li>foo</li>
                 </ol>
-                table:
-                <table><tbody>
-                    <tr>
-                        <th>Header 1</th>
-                        <th>Header 2</th>
-                    </tr>
-                    <tr>
-                        <td>Header 1</td>
-                        <td>Header 2</td>
-                    </tr>
+                               <p>table:</p>
+                <table>
+                       <thead>
+                               <tr>
+                               <th>Header 1</th>
+                               <th>Header 2</th>
+                               </tr>
+                       </thead>
+                       <tbody>
+                       <tr>
+                               <td>Header 1</td>
+                               <td>Header 2</td>
+                       </tr>
+                       </tbody>
                 </table>
-                code block:
+
+                <p>code block:</p>
                 <pre><code>void main(int argc, char** argv) {
     return 0;
 }</code></pre>
-                blockqoute:
-                <blockquote>
-                this is a block quote
-                </blockquote>
+                <p>Paragraph text:<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl tellus, lacinia lobortis feugiat eu, fermentum sit amet nulla. Donec tincidunt feugiat tortor, sit amet varius nisi posuere ultrices. Suspendisse feugiat, massa in dictum ultricies, mauris neque tincidunt ex, sit amet pharetra risus urna vel velit. Phasellus mattis magna vitae mollis venenatis. Vestibulum pulvinar sem quis efficitur tincidunt. Morbi tempor neque id erat placerat, ac iaculis ex venenatis. Duis porttitor euismod augue, et ullamcorper quam sodales nec. Vestibulum ultricies pellentesque mattis. Nulla sit amet felis auctor, pellentesque nunc a, suscipit ligula. Praesent in justo dolor. Nullam eleifend tempus mi ac malesuada. Mauris et libero lacus.</p>
+                <br/>
             </article>
         </section>
     </body>

diff --git a/style.css b/style.css
index 43d9f7397313dc974bca9de4f85088f173217c17..928ace67a2179d16ed6afd24a6ec8c65c69987a0 100644 (file)
--- a/style.css
+++ b/style.css
@@ -38,8 +38,66 @@ pre > code {
 
 code {
     margin: 0.2rem;
-    font-size: 90%;
     background: #F1F1F1;
     border: 1px solid #E1E1E1;
     border-radius: 4px;
 }
+
+/* code blocks */
+blockquote {
+    display: block;
+    border-left: 4px solid deepskyblue;
+    margin-left: -19px;
+    padding-left: 15px;
+    margin-right: 0px;
+}
+
+/* link styling */
+a {
+    color: deepskyblue;
+}
+
+/* table formatting */
+table {
+    width: 100%;
+    display: table;
+    border-collapse: separate;
+    border-spacing: 2px;
+    border-color: grey;
+}
+
+thead {
+    display: table-header-group;
+    vertical-align: middle;
+    border-color: inherit;
+}
+
+tbody {
+    display: table-row-group;
+    vertical-align: middle;
+    border-color: inherit;
+}
+
+tr {
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+}
+
+
+th:first-child, td:first-child {
+    padding-left: 0;
+}
+
+
+th, td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #E1E1E1;
+    display: table-cell;
+    vertical-align: inherit;
+}
+
+th { font-weight: bold; }
+
+