Unified Diff: html/content.html
Issue 29361647:
Issue 4607 - Default content styles (Closed)
Patch Set: Removed missing grid dependency.
Created Nov. 3, 2016, 5:48 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« README.md ('K')
|
« gulpfile.js ('k')
|
package.json » ('j')
|
package.json » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: html/content.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/html/content.html |
| @@ -0,0 +1,250 @@ |
| +<!DOCTYPE html> |
| +<!-- |
| + This file is part of universal-design-language |
| + Copyright (C) 2016 Eyeo GmbH |
| + |
| + universal-design-language is free software: you can redistribute it and/or |
| + modify it under the terms of the GNU General Public License as published by |
| + the Free Software Foundation, either version 3 of the License, or |
| + (at your option) any later version. |
| + |
| + universal-design-language is distributed in the hope that it will be useful, |
| + but WITHOUT ANY WARRANTY; without even the implied warranty of |
| + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| + GNU General Public License for more details. |
| + |
| + You should have received a copy of the GNU General Public License |
| + along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. |
| +--> |
| +<html dir="ltr"> |
| +<head> |
| + <meta charset="utf-8"> |
| + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| + <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| + <title>HTML Content</title> |
| + <link rel="stylesheet" href="/css/main.css"> |
| + <style> |
| + body |
| + { |
| + margin-bottom: 4em; |
| + } |
| + |
| + header |
| + { |
| + border-bottom: 1px solid lightgray; |
| + margin: 4em 0 1em 0; |
| + } |
| + </style> |
| +</head> |
| +<body> |
| + <main class="container"> |
| + |
| + <header> |
| + <h1>HTML Content</h1> |
| + </header> |
| + <ol> |
| + <li><a href="#headings">Headings</a></li> |
| + <li><a href="#inline">Inline</a></li> |
| + <li><a href="#blockquotes">Blockquotes</a></li> |
| + <li><a href="#code-blocks">Code Blocks</a></li> |
| + <li><a href="#ordered-lists">Ordered Lists</a></li> |
| + <li><a href="#unordered-lists">Unordered Lists</a></li> |
| + <li><a href="#unstyled-lists">Unstyled Lists</a></li> |
| + <li><a href="#definition-lists">Definition Lists</a></li> |
| + <li><a href="#tables">Tables</a></li> |
| + <li><a href="#image-alignment">Image Alignment</a></li> |
| + <li><a href="#embeds">Embeds</a></li> |
| + </ol> |
| + |
| + <section> |
| + <header> |
| + <h2 id="headings">Headings</h2> |
| + </header> |
| + <h1>Heading 1</h1> |
| + <h2>Heading 2</h2> |
| + <h3>Heading 3</h3> |
| + <h4>Heading 4</h4> |
| + <h5>Heading 5</h5> |
| + <h6>Heading 6</h6> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="inline">Inline</h2> |
| + </header> |
| + <p>This is a normal.</p> |
| + <p>This is <em>emphasized</em>.</p> |
| + <p>This is <strong>strong</strong>.</p> |
| + <p>This is inline <code>code</code>.</p> |
| + <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p> |
| + <p>This is a <a href="#">link</a>.</p> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="blockquotes">Blockquotes</h2> |
| + </header> |
| + <blockquote> |
| + <p>This is a blockquote</p> |
| + </blockquote> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="code-blocks">Code blocks</h2> |
| + </header> |
| + <pre><code> |
| +#include<stdio.h> |
| + |
| +int main(void) { |
| + printf("Hello World\n"); |
| + return 0; |
| +} |
| + </code></pre> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="ordered-lists">Ordered Lists</h2> |
| + </header> |
| + <ol> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item |
| + <ol> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + </ol> |
| + </li> |
| + <li>This is a list item</li> |
| + </ol> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="unordered-lists">Unoredered Lists</h2> |
| + </header> |
| + <ul> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item |
| + <ul> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + </ul> |
| + </li> |
| + <li>This is a list item</li> |
| + </ul> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="unstyled-lists">Unstyled Lists</h2> |
| + </header> |
| + <ul class="unstyled-list"> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item |
| + <ul> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + <li>This is a list item</li> |
| + </ul> |
| + </li> |
| + <li>This is a list item</li> |
| + </ul> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="definition-lists">Definition Lists</h2> |
| + </header> |
| + <dl> |
| + <dt>This is a question?</dt> |
| + <dd>This is an answer.</dd> |
| + <dt>This is a <dfn>term</dfn>.</dt> |
| + <dd>This is that term's definition.</dd> |
| + </dl> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="tables">Tables</h2> |
| + </header> |
| + <table> |
| + <thead> |
| + <th>Heading 1</th> |
| + <th>Heading 2</th> |
| + <th>Heading 3</th> |
| + <th>Heading 4</th> |
| + </thead> |
| + <tbody> |
| + <tr> |
| + <td>Item 1:1</td> |
| + <td>Item 1:2</td> |
| + <td>Item 1:3</td> |
| + <td>Item 1:4</td> |
| + </tr> |
| + <tr> |
| + <td>Item 2:1</td> |
| + <td>Item 2:2</td> |
| + <td>Item 2:3</td> |
| + <td>Item 2:4</td> |
| + </tr> |
| + <tr> |
| + <td>Item 3:1</td> |
| + <td>Item 3:2</td> |
| + <td>Item 3:3</td> |
| + <td>Item 3:4</td> |
| + </tr> |
| + <tr> |
| + <td>Item 4:1</td> |
| + <td>Item 4:2</td> |
| + <td>Item 4:3</td> |
| + <td>Item 4:4</td> |
| + </tr> |
| + </tbody> |
| + </table> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="image-alignment">Image alignment</h2> |
| + </header> |
| + <p class="block"> |
| + This <img src="//placehold.it/100x100?text=Image"> appears inline |
| + </p> |
| + <p class="block"> |
| + This image appears |
| + <img class="block" src="//placehold.it/480x100?text=Full+width"> |
| + </p> |
| + <p class="block"> |
| + This image appears |
| + <img class="sol" src="//placehold.it/100x100?text=Left"> |
| + </p> |
| + <p class="block"> |
| + This image appears |
| + <img class="eol" src="//placehold.it/100x100?text=Right"> |
| + </p> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="embeds">Embeds</h2> |
| + </header> |
| + <div class="embed"> |
| + <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> |
| + </div> |
| + </section> |
| + |
| + </main> |
| + |
| + <script src="/node_modules/anchor-js/anchor.js"></script> |
|
saroyanm
2016/11/03 19:41:13
I'll suggest not to load script that generates anc
juliandoucette
2016/11/03 22:59:37
What's wrong with this solution?
https://github.c
saroyanm
2016/11/04 16:01:17
We need to check the SEO implication of deeplinks
juliandoucette
2016/11/04 17:32:26
We'll leave this out of next patchset.
juliandoucette
2016/11/08 15:51:57
Done.
|
| + <script>anchors.add("header h2");</script> |
| +</body> |
| +</html> |
