mirror of https://github.com/IoTcat/sakura2.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.4 KiB
125 lines
4.4 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Single post</title> |
|
<link rel="stylesheet" href="./css/bundle.css"> |
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
|
<link rel="stylesheet" href="https://at.alicdn.com/t/font_679578_dgipmwt51qb.css"> |
|
<script src="./js/bundle.js" async></script> |
|
</head> |
|
|
|
<body> |
|
<div id="root" class="root"> |
|
<!--page main content (async container)--> |
|
<header id="nav-header" class="mdc-top-app-bar mdc-top-app-bar--dense"> |
|
<!--nav mune--> |
|
<div class="mdc-top-app-bar__row"> |
|
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> |
|
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button> |
|
<span class="mdc-top-app-bar__title">Sakura</span> |
|
</section> |
|
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> |
|
<a href="/" class="material-icons mdc-top-app-bar__action-item mdc-icon-button">home</a> |
|
<a href="#" class="material-icons mdc-top-app-bar__action-item mdc-icon-button">print</a> |
|
<a href="#" class="material-icons mdc-top-app-bar__action-item mdc-icon-button">bookmark</a> |
|
</section> |
|
</div> |
|
</header> |
|
|
|
<div class="header-top"> |
|
<!--index cover image--> |
|
<figure data="mark" id="cover-img-container"> |
|
<div data="layer" id="img-view" data-depth="0.5"> |
|
<img data="cover" id="cover-img" src="https://view.moezx.cc/images/2019/10/21/1zuypi4mkggq6js5lqxt3sjaa.jpg"> |
|
</div> |
|
</figure> |
|
<div class="cover-video-container"></div> |
|
</div> |
|
|
|
<!--transparent area--> |
|
<div id="header-top-after" class="header-top-after"> |
|
<!--wave decoration--> |
|
<div id="header-top-after-deco" class="header-top-after-deco"></div> |
|
</div> |
|
|
|
<div class="page-content"> |
|
<aside class="side-bar-left">left</aside> |
|
<section class="main-center"> |
|
<div class="post-list"> |
|
<article class="markdown"> |
|
<h1>HTML that looks like markdown</h1> |
|
|
|
<p>When this section is styled by <code>markdown.css</code> it looks like plain-text, despite being HTML. |
|
Inspect it with firebug or click on <HTML/> to see the markup.</p> |
|
|
|
<p>A <strong>strong tag</strong> and an <em>em tag</em> get styled like so.</p> |
|
<p>How about a link to <a href="https://2heng.xin">my site</a>?</p> |
|
|
|
<h2>H2 header</h2> |
|
|
|
<h3>Lists</h3> |
|
<ul> |
|
<li>they look like this</li> |
|
<li>it’s how you’d format them in pure markdown, if you took the time to indent when it wrapped to a new |
|
line.</li> |
|
</ul> |
|
|
|
<h3>Ordered lists</h3> |
|
<ol> |
|
<li>here’s one line from a numbered list</li> |
|
<li>here’s another</li> |
|
<li>in markdown, the actual numbers don’t matter—you can toggle this with the class <a href="#" |
|
onclick="$('body').toggleClass('markdown-ones');return false"><code>markdown-ones</code></a></li> |
|
</ol> |
|
|
|
<h3>Block quotes</h3> |
|
<blockquote> |
|
This is a blockquote that extends<br> |
|
to multiple lines.<br><br> |
|
With repeating email-style angle brackets. |
|
</blockquote> |
|
|
|
<h3>Code blocks</h3> |
|
<pre><code>(function() { |
|
console.log('code blocks indent four spaces'); |
|
})()</code></pre> |
|
|
|
<h3>Different headers</h3> |
|
|
|
<h4>h4 header</h4> |
|
<h5>h5 header</h5> |
|
<h6>h6 header</h6> |
|
|
|
<hr> |
|
|
|
<p>That’s an hr above. It just works!</p> |
|
|
|
<p> |
|
However, images will still look like images. Deal with it. |
|
</p> |
|
|
|
<p> |
|
<img alt="kitten" src="https://view.moezx.cc/images/2019/10/21/518j34fw8n6p02epy36nqz8vy.jpg"> |
|
</p> |
|
|
|
<p> |
|
Made by <a href="https://2heng.xin">Mashiro</a> /<br> |
|
aka <a href="https://twitter.com/2hengxin">@2hengxin</a> /<br> |
|
code on <a href="https://github.com/mashirozx/sakura2">github</a> |
|
</p> |
|
</article> |
|
</div> |
|
</section> |
|
<aside class="side-bar-right">right</aside> |
|
</div> |
|
|
|
<footer> |
|
<div class="before" id="footer-before"></div> |
|
<div class="main">Copyright</div> |
|
</footer> |
|
|
|
</div> |
|
</body> |
|
|
|
</html> |