CSS improvements

fladd · Mar 31, 2020 · 94279aa · 94279aa
1 parent 1be719a
commit 94279aa
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 61 deletions.
diff --git a/docs/_resources/_stuffpages/styles/default.css b/docs/_resources/_stuffpages/styles/default.css
@@ -168,13 +168,15 @@ svg:not(:root) {
 
 figure {
     margin: 0em 0em 1em;;
-    display: table;
+    display: block;
+    width: 100%;
+    overflow: auto;
 }
 
 figcaption {
     font-size: smaller;
-    display: table-caption;
-    caption-side: bottom;
+    display: block;
+    margin-bottom: 0.4em;
 }
 
 caption {
@@ -414,6 +416,11 @@ table tr:nth-child(2n) {
     background-color: #f8f8f8;
 }
 
+iframe {
+    max-width: 100%;
+    box-sizing: content-box;
+}
+
 .footnote hr {
     width: 30%;
     margin-top: 2.1em;

diff --git a/docs/blog/2020_01_01_first_blog_post/index.html b/docs/blog/2020_01_01_first_blog_post/index.html
@@ -21,7 +21,7 @@ <h1>First blog post</h1>
 <p>
 <strong>© <a href="http://author.com">Author</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/docs/blog/2020_01_02_second_blog_post/index.html b/docs/blog/2020_01_02_second_blog_post/index.html
@@ -21,7 +21,7 @@ <h1>A second blog post</h1>
 <p>
 <strong>© <a href="http://author.com">Author</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/docs/blog/2020_01_03_third_blog_post/index.html b/docs/blog/2020_01_03_third_blog_post/index.html
@@ -21,7 +21,7 @@ <h1>Third blog post</h1>
 <p>
 <strong>© <a href="http://author.com">Author</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/docs/blog/index.html b/docs/blog/index.html
@@ -25,7 +25,7 @@ <h1>Simple Blog</h1>
 <p>
 <strong>© <a href="http://author.com">Author</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/docs/index.html b/docs/index.html
@@ -25,7 +25,7 @@ <h1>StuffPages examples</h1>
 <p>
 <strong>© <a href="http://author.com">Author</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/docs/markdown_demo/index.html b/docs/markdown_demo/index.html
@@ -403,43 +403,86 @@ <h1 id="inline-html">Inline HTML <a class="headerlink" href="#inline-html" title
 
 Use &lt;sub&gt;sub&lt;/sub&gt;sript or &lt;sup&gt;super&lt;/sup&gt;script and &lt;u&gt;underline&lt;/u&gt; text.
 
-&lt;figure markdown="span"&gt;
+&lt;figure markdown="1"&gt;
 ![cat](http://i.imgur.com/NUyttbn.gif)
-&lt;figcaption&gt;**Figure 1.** Heavy breathing cat.&lt;/figcaption&gt;
+&lt;figcaption&gt;**Figure 1.** Heavy breathing cat. And here comes a rather long descrition to test wrapping and stuff.&lt;/figcaption&gt;
 &lt;/figure&gt;
 
-&lt;table markdown="span"&gt;
-  &lt;caption&gt;**Table1**. Some numbers.&lt;/caption&gt;                                                                                                                                                                &lt;tr&gt;                                                                                                                                                                                                          &lt;th&gt;Header 1&lt;/th&gt;                                                                                                                                                                                           &lt;th&gt;Header 2&lt;/th&gt;
-    &lt;th&gt;Header 3&lt;/th&gt;                                                                                                                                                                                           &lt;th&gt;Header 4&lt;/th&gt;
-    &lt;th&gt;Header 5&lt;/th&gt;
-  &lt;/tr&gt;                                                                                                                                                                                                       &lt;tr&gt;
-    &lt;td&gt;Value 1&lt;/td&gt;                                                                                                                                                                                            &lt;td&gt;Value 2&lt;/td&gt;                                                                                                                                                                                            &lt;td&gt;Value 3&lt;/td&gt;                                                                                                                                                                                            &lt;td&gt;Value 4&lt;/td&gt;
-    &lt;td&gt;Value 5&lt;/td&gt;                                                                                                                                                                                          &lt;/tr&gt;
-&lt;/table&gt;
+&lt;figure markdown="1"&gt;
+&lt;figcaption&gt;**Table1**. Some numbers. And here comes a rather long description to test wrapping and stuff.&lt;/figcaption&gt;
 
-&lt;style&gt;.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;&lt;div class='embed-container'&gt;&lt;iframe src='https://www.youtube.com/embed/tntOCGkgt98' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | Header 10 |
+| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | --------- |
+| Value 1  | Value 2  | Value 3  | Value 4  | Value 5  | Value 6  | Value 7  | Value 8  | Value 9  | Value 10  |
+| Value 11 | Value 12 | Value 13 | Value 14 | Value 15 | Value 16 | Value 17 | Value 18 | Value 19 | Value 20  |
+
+&lt;/figure&gt;
+
+&lt;figure&gt;
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/97cWlnCZpe0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
+&lt;/figure&gt;
 </pre></div>
 <p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>
 <p>Use <sub>sub</sub>sript or <sup>super</sup>script and <u>underline</u> text.</p>
 <figure>
 <img alt="cat" src="http://i.imgur.com/NUyttbn.gif"/>
-<figcaption><strong>Figure 1.</strong> Heavy breathing cat.</figcaption></figure>
+<figcaption><strong>Figure 1.</strong> Heavy breathing cat. And here comes a rather long descrition to test wrapping and stuff.</figcaption>
+</figure>
+<figure>
+<figcaption><strong>Table1</strong>. Some numbers. And here comes a rather long description to test wrapping and stuff.</figcaption>
 <table>
-<caption><strong>Table1</strong>. Some numbers.</caption> <tr> <th>Header 1</th> <th>Header 2</th>
-<th>Header 3</th> <th>Header 4</th>
+<thead>
+<tr>
+<th>Header 1</th>
+<th>Header 2</th>
+<th>Header 3</th>
+<th>Header 4</th>
 <th>Header 5</th>
-</tr> <tr>
-<td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td>
-<td>Value 5</td> </tr></table>
-<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
-<div class="embed-container"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/tntOCGkgt98"></iframe></div>
+<th>Header 6</th>
+<th>Header 7</th>
+<th>Header 8</th>
+<th>Header 9</th>
+<th>Header 10</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Value 1</td>
+<td>Value 2</td>
+<td>Value 3</td>
+<td>Value 4</td>
+<td>Value 5</td>
+<td>Value 6</td>
+<td>Value 7</td>
+<td>Value 8</td>
+<td>Value 9</td>
+<td>Value 10</td>
+</tr>
+<tr>
+<td>Value 11</td>
+<td>Value 12</td>
+<td>Value 13</td>
+<td>Value 14</td>
+<td>Value 15</td>
+<td>Value 16</td>
+<td>Value 17</td>
+<td>Value 18</td>
+<td>Value 19</td>
+<td>Value 20</td>
+</tr>
+</tbody>
+</table>
+</figure>
+<figure>
+<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/97cWlnCZpe0" width="560"></iframe>
+</figure>
 <h1 id="extensions">Extensions <a class="headerlink" href="#extensions" title="Permanent link">#</a></h1>
 <p>You can also extend <em>StuffPages</em> with <a href="https://pythonhosted.org/Markdown/extensions/index.html">Python Markdown extensions</a>. Just install the extensions and add them to <code>extras</code> in <code>config.py</code>.</p>
 <footer>
 <p>
 <strong>© <a href="http://author.com">Florian Krause</a></strong>
 <br>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </br></p>
 </footer>
 </body>

diff --git a/docs/stuffpages/index.html b/docs/stuffpages/index.html
@@ -89,7 +89,7 @@ <h1 id="listings">Listings <a class="headerlink" href="#listings" title="Permane
 <p>
 <strong>© <a href="http://author.com">Florian Krause</a></strong>
 <br/>
-Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 11 Mar 2020
+Created with <a href="https://github.com/fladd/StuffPages">StuffPages</a> on 01 Apr 2020
 </p>
 </footer>
 </body>

diff --git a/examples/markdown_demo.md b/examples/markdown_demo.md
@@ -465,43 +465,49 @@ To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.
 
 Use <sub>sub</sub>sript or <sup>super</sup>script and <u>underline</u> text.
 
-<figure markdown="span">
+<figure markdown="1">
 ![cat](http://i.imgur.com/NUyttbn.gif)
-<figcaption>**Figure 1.** Heavy breathing cat.</figcaption>
+<figcaption>**Figure 1.** Heavy breathing cat. And here comes a rather long descrition to test wrapping and stuff.</figcaption>
 </figure>
 
-<table markdown="span">
-  <caption>**Table1**. Some numbers.</caption>                                                                                                                                                                <tr>                                                                                                                                                                                                          <th>Header 1</th>                                                                                                                                                                                           <th>Header 2</th>
-    <th>Header 3</th>                                                                                                                                                                                           <th>Header 4</th>
-    <th>Header 5</th>
-  </tr>                                                                                                                                                                                                       <tr>
-    <td>Value 1</td>                                                                                                                                                                                            <td>Value 2</td>                                                                                                                                                                                            <td>Value 3</td>                                                                                                                                                                                            <td>Value 4</td>
-    <td>Value 5</td>                                                                                                                                                                                          </tr>
-</table>
+<figure markdown="1">
+<figcaption>**Table1**. Some numbers. And here comes a rather long description to test wrapping and stuff.</figcaption>
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | Header 10 |
+| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | --------- |
+| Value 1  | Value 2  | Value 3  | Value 4  | Value 5  | Value 6  | Value 7  | Value 8  | Value 9  | Value 10  |
+| Value 11 | Value 12 | Value 13 | Value 14 | Value 15 | Value 16 | Value 17 | Value 18 | Value 19 | Value 20  |
+
+</figure>
+
+<figure>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/97cWlnCZpe0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
 
-<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/tntOCGkgt98' frameborder='0' allowfullscreen></iframe></div>
 ```
 
 To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.
 
 Use <sub>sub</sub>sript or <sup>super</sup>script and <u>underline</u> text.
 
-<figure markdown="span">
+<figure markdown="1">
 ![cat](http://i.imgur.com/NUyttbn.gif)
-<figcaption>**Figure 1.** Heavy breathing cat.</figcaption>
+<figcaption>**Figure 1.** Heavy breathing cat. And here comes a rather long descrition to test wrapping and stuff.</figcaption>
 </figure>
 
-<table markdown="span">
-  <caption>**Table1**. Some numbers.</caption>                                                                                                                                                                <tr>                                                                                                                                                                                                          <th>Header 1</th>                                                                                                                                                                                           <th>Header 2</th>
-    <th>Header 3</th>                                                                                                                                                                                           <th>Header 4</th>
-    <th>Header 5</th>
-  </tr>                                                                                                                                                                                                       <tr>
-    <td>Value 1</td>                                                                                                                                                                                            <td>Value 2</td>                                                                                                                                                                                            <td>Value 3</td>                                                                                                                                                                                            <td>Value 4</td>
-    <td>Value 5</td>                                                                                                                                                                                          </tr>
-</table>
+<figure markdown="1">
+<figcaption>**Table1**. Some numbers. And here comes a rather long description to test wrapping and stuff.</figcaption>
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | Header 10 |
+| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | --------- |
+| Value 1  | Value 2  | Value 3  | Value 4  | Value 5  | Value 6  | Value 7  | Value 8  | Value 9  | Value 10  |
+| Value 11 | Value 12 | Value 13 | Value 14 | Value 15 | Value 16 | Value 17 | Value 18 | Value 19 | Value 20  |
 
-<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/tntOCGkgt98' frameborder='0' allowfullscreen></iframe></div>
+</figure>
 
+<figure>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/97cWlnCZpe0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
 
 # Extensions
 

diff --git a/examples/stuffpages.md b/examples/stuffpages.md
@@ -10,6 +10,7 @@ Introduction
 
 I created _StuffPages_ as a quick way to publish simple web pages on my web server. Basically, it takes Markdown files from a specified directory, turns them into CSS-styeld HTML files, and saves the output in another specified directory. 
 
+Have a look at some [examples](https://fladd.github.io/StuffPages)!
 
 Installation 
 ============ 

diff --git a/stuffpages/__meta__.py b/stuffpages/__meta__.py
@@ -1 +1 @@
-__version__ = '0.6.1'
+__version__ = '0.6.2'
diff --git a/stuffpages/_stuffpages.py b/stuffpages/_stuffpages.py
@@ -193,7 +193,10 @@ def create_section(section, name):
             # Fix HTML output
             fixed_html = []
             for line in html.split("\n"):
-                if line.startswith("<p>") and \
+                if line.startswith("<p><figcaption>") and \
+                        line.endswith("</figcaption></p>"):
+                    fixed_html.append(line[3:-4])
+                elif line.startswith("<p>") and \
                         line != "<p>" and \
                         not line.endswith("</p>"):
                     fixed_html.append(line[3:])

diff --git a/stuffpages/_stuffpages/styles/default.css b/stuffpages/_stuffpages/styles/default.css
@@ -4,12 +4,13 @@
 
 body {
     min-width: 200px;
-    max-width: 902px;
+    max-width: 910px;
     margin: 0 auto;
     padding: 10px;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
-    color: #2E2E2E;
+    line-height: 1.5;
+    color: #333;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 16px;
     line-height: 1.5;
@@ -167,13 +168,15 @@ svg:not(:root) {
 
 figure {
     margin: 0em 0em 1em;;
-    display: table;
+    display: block;
+    width: 100%;
+    overflow: auto;
 }
 
 figcaption {
     font-size: smaller;
-    display: table-caption;
-    caption-side: bottom;
+    display: block;
+    margin-bottom: 0.4em;
 }
 
 caption {
@@ -264,7 +267,7 @@ pre {
 
 pre {
     margin-top: 0;
-    margin-bottom: 1.176em;
+    margin-bottom: 0;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     word-wrap: normal;
 }
@@ -318,7 +321,6 @@ pre {
     line-height: 1.45;
     background-color: #f7f7f7;
     border-radius: 3px;
-    margin-bottom: 1.176em;
 }
 
 pre code {
@@ -343,7 +345,8 @@ blockquote,
 ul,
 ol,
 dl,
-table {
+table,
+pre {
     margin-top: 0;
     margin-bottom: 1em;
 }
@@ -413,6 +416,11 @@ table tr:nth-child(2n) {
     background-color: #f8f8f8;
 }
 
+iframe {
+    max-width: 100%;
+    box-sizing: content-box;
+}
+
 .footnote hr {
     width: 30%;
     margin-top: 2.1em;