hyrious · July 2, 2018 07:44
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang=en>
 <meta charset=utf-8>
 <title>WinWord.css</title>
 <style>*{box-sizing:border-box}::selection{background-color:rgba(0,0,0,.1)}body{background-color:#f2f2f2;user-select:none}article{max-width:768px;margin:0 auto;padding:50px 72px 54px;user-select:text;background:#fff;border:1px solid #ddd}pre{white-space:pre-wrap;padding:1em;border:1px solid}h1,h2,h3,h4,p{font-weight:400}h1{text-align:center;color:#000}h1,h2,h3,h4{margin:12px 0 0;font-family:sans-serif}p{margin:0 0 12px;font-family:serif;text-indent:2em;color:#333}h2,h3{color:#222}h4,h5,h6{color:#444}</style>
 <body>
 <article>
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid obcaecati nemo aliquam maiores iure facilis vero eveniet, voluptate magni delectus animi eos, eligendi doloremque adipisci. Soluta commodi consequuntur ipsa autem?</p>
  <ol>
    <li>miaomiao</li>
    <li>wangwang</li>
  </ol>
  <h2>SubTitle</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, quos veritatis possimus earum vitae labore illum, id ut dicta necessitatibus veniam, tempore voluptates sunt incidunt aut facilis vel doloribus? Aperiam.</p>
  <h2>SubTitle</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sapiente deleniti deserunt repudiandae suscipit minus est. Totam, dolor, voluptates. Velit optio ex consectetur temporibus, aliquam eos. Officia natus consectetur expedita.</p>
  <pre>def main
  42
 end</pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, at odit nam veniam, vero animi inventore quia nihil incidunt. Vel dolores ullam obcaecati cumque nam facere voluptas perferendis impedit tempora!</p>
  <h2>End</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum impedit cum quae ipsum necessitatibus animi nemo veniam, ea obcaecati doloribus accusamus, tempore optio quos aliquam nobis eaque dignissimos mollitia?</p>
 </article>
	<!DOCTYPE html>
	<html lang=en>
	<meta charset=utf-8>
	<title>WinWord.css</title>
	<style>*{box-sizing:border-box}::selection{background-color:rgba(0,0,0,.1)}body{background-color:#f2f2f2;user-select:none}article{max-width:768px;margin:0 auto;padding:50px 72px 54px;user-select:text;background:#fff;border:1px solid #ddd}pre{white-space:pre-wrap;padding:1em;border:1px solid}h1,h2,h3,h4,p{font-weight:400}h1{text-align:center;color:#000}h1,h2,h3,h4{margin:12px 0 0;font-family:sans-serif}p{margin:0 0 12px;font-family:serif;text-indent:2em;color:#333}h2,h3{color:#222}h4,h5,h6{color:#444}</style>
	<body>
	<article>
	<h1>Title</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid obcaecati nemo aliquam maiores iure facilis vero eveniet, voluptate magni delectus animi eos, eligendi doloremque adipisci. Soluta commodi consequuntur ipsa autem?</p>
	<ol>
	<li>miaomiao</li>
	<li>wangwang</li>
	</ol>
	<h2>SubTitle</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, quos veritatis possimus earum vitae labore illum, id ut dicta necessitatibus veniam, tempore voluptates sunt incidunt aut facilis vel doloribus? Aperiam.</p>
	<h2>SubTitle</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sapiente deleniti deserunt repudiandae suscipit minus est. Totam, dolor, voluptates. Velit optio ex consectetur temporibus, aliquam eos. Officia natus consectetur expedita.</p>
	<pre>def main
	42
	end</pre>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, at odit nam veniam, vero animi inventore quia nihil incidunt. Vel dolores ullam obcaecati cumque nam facere voluptas perferendis impedit tempora!</p>
	<h2>End</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum impedit cum quae ipsum necessitatibus animi nemo veniam, ea obcaecati doloribus accusamus, tempore optio quos aliquam nobis eaque dignissimos mollitia?</p>
	</article>