Test page

bartkozal · Jan 2, 2015 · 844c361 · 844c361
1 parent 98fdc38
commit 844c361
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 9 deletions.
diff --git a/test/hocus-pocus.css b/test/hocus-pocus.css
@@ -1,3 +1,7 @@
+/* Constants - don't change
+ */
+/* Private
+ */
 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 /**
  * 1. Set default font family to sans-serif.
@@ -366,9 +370,70 @@ html {
 img {
   box-sizing: content-box; }
 
+/* Source:
+ * http://www.gridlover.net
+ * https://github.com/hiulit/Sassy-Gridlover
+ */
 /* Remove margin and padding on base elements
  */
-blockquote, caption, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr,
-legend, ol, p, pre, table, td, th, ul {
+h1, h2, h3, h4, h5, h6,
+p, ul, ol, dl, dd, hr,
+blockquote, pre, table, th, td,
+form, fieldset, caption, legend {
   margin: 0;
   padding: 0; }
+
+/* Remove margin and padding on base elements
+ */
+body {
+  font-size: 1rem;
+  line-height: 1.375rem; }
+
+h1 {
+  font-size: 3.375rem;
+  line-height: 4.125rem;
+  margin-bottom: 1.375rem;
+  margin-top: 2.75rem; }
+
+h2 {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  margin-bottom: 1.375rem;
+  margin-top: 2.75rem; }
+
+h3 {
+  font-size: 1.5rem;
+  line-height: 2.75rem;
+  margin-bottom: 1.375rem;
+  margin-top: 1.375rem; }
+
+h4, h5, h6 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  margin-bottom: 1.375rem;
+  margin-top: 1.375rem; }
+
+p, ul, ol, dl, blockquote, pre, table {
+  margin-bottom: 1.375rem; }
+
+hr {
+  margin-top: -1px;
+  margin-bottom: 1.375rem;
+  border: 1px solid; }
+
+ul ul, ol ol, ul ol, ol ul {
+  margin-top: 0;
+  margin-bottom: 0; }
+
+strong, em, small, code {
+  line-height: 1; }
+
+sup, sub {
+  vertical-align: baseline;
+  position: relative; }
+
+sup {
+  top: -0.4em; }
+
+sub {
+  top: 0.4em; }
diff --git a/test/index.html b/test/index.html
@@ -7,13 +7,91 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="hocus-pocus.css">
   </head>
+
   <body>
-    <h1>Level one heading</h1>
-    <h2>Level two heading</h2>
-    <h3>Level three heading</h3>
-    <h4>Level four heading</h4>
-    <h5>Level five heading</h5>
-    <h6>Level six heading</h6>
+    <h1>HTML Ipsum Presents</h1>
+    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+    <h2>Header Level 2</h2>
+    <ol>
+      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+      <li>Aliquam tincidunt mauris eu risus.</li>
+    </ol>
+    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+    <h3>Header Level 3</h3>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Rejon d.D.UMŁ</th>
+          <th>Powierzchnia km²</th>
+          <th>Powierzchnia %</th>
+          <th>Gęstość zaludnienia os./km²</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Bałuty</td>
+          <td>78,9</td>
+          <td>26,8</td>
+          <td>2744</td>
+        </tr>
+        <tr>
+          <td>Górna</td>
+          <td>71,9</td>
+          <td>24,4</td>
+          <td>2462</td>
+        </tr>
+        <tr>
+          <td>Polesie</td>
+          <td>46,0</td>
+          <td>15,6</td>
+          <td>3179</td>
+        </tr>
+        <tr>
+          <td>Śródmieście</td>
+          <td>6,8</td>
+          <td>2,3</td>
+          <td>11307</td>
+        </tr>
+        <tr>
+          <td>Widzew</td>
+          <td>90,8</td>
+          <td>30,9</td>
+          <td>1526</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>Header Level 4</h4>
+    <p>Pellentesque habitant <sup>morbi tristique</sup> senectus et netus <sub>et malesuada fames</sub> ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+    <hr>
+
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+    <ul>
+      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+      <li>Aliquam tincidunt mauris eu risus.</li>
+    </ul>
+
+    <dl>
+      <dt>Definition list</dt>
+      <dd>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.</dd>
+      <dt>Lorem ipsum dolor sit amet</dt>
+      <dd>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.</dd>
+    </dl>
+
+    <pre><code>
+    #header h1 a {
+      display: block;
+      width: 300px;
+      height: 80px;
+    }
+    </code></pre>
   </body>
 </html>
-