mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-12 23:58:11 -07:00
Add timeline
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,9 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'jekyll'
|
||||
|
||||
group :jekyll_plugins do
|
||||
gem 'jekyll-paginate'
|
||||
gem 'jekyll-gist'
|
||||
gem 'jemoji'
|
||||
end
|
||||
@@ -0,0 +1,97 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (5.2.1)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 0.7, < 2)
|
||||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.0.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.7)
|
||||
faraday (0.15.2)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.9.25)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.0)
|
||||
html-pipeline (2.8.4)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.8.3)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-watch (2.0.0)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.10.1)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (~> 3.0)
|
||||
kramdown (1.17.0)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
ruby_dep (~> 1.2)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.3.0)
|
||||
minitest (5.11.3)
|
||||
multipart-post (2.0.0)
|
||||
nokogiri (1.8.4)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
octokit (4.11.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.1)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (3.0.3)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
rouge (3.2.1)
|
||||
ruby_dep (1.5.0)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.5.7)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
thread_safe (0.3.6)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll
|
||||
jekyll-gist
|
||||
jekyll-paginate
|
||||
jemoji
|
||||
|
||||
BUNDLED WITH
|
||||
1.16.4
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
layout: page
|
||||
title: About - Timeline
|
||||
permalink: /timeline/
|
||||
public: false
|
||||
nocomments: true
|
||||
---
|
||||
|
||||
<div class="timeline">
|
||||
|
||||
<div class="timeline__group">
|
||||
<span class="timeline__year">Now</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p>Look up at the Starry Sky<audio controls><source src="/static/2018-09/beihang.mp3 type="audio/mpeg"></audio></p>
|
||||
<img src="http://www.fsaona.com/images/imagesbigimg.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Transfered to another high school</p> -->
|
||||
<img src="http://school.zhongkao.com/style/school/pictures/school/734/73421/logo.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened high school</p> -->
|
||||
<img src="http://www.fuzhong.sd.cn/uploadfile/2015/0704/20150704044140866.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2008</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened middle school</p> -->
|
||||
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=5bc3fe5949540923be646b2cf331ba6c/3812b31bb051f819506a0330dab44aed2e73e779.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2005</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened primary school</p> -->
|
||||
<img src="http://www.sdsdfx.com:85/fxjylm/u/cms/www/201510/27194804xvgc.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1999</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">26</span>
|
||||
<span class="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p> Borned in <a href="https://en.wikipedia.org/wiki/Jinan">Jinan</a>, <a href="https://en.wikipedia.org/wiki/Shandong">Shandong Province</a>, China </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1993</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -7,6 +7,7 @@
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||
|
||||
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
|
||||
<link rel="stylesheet" href="{{ "/css/timeline.css" | prepend: site.baseurl }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
|
||||
<script>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//404.html">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -43,6 +44,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -56,6 +59,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//about/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -43,6 +44,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -56,6 +59,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -166,6 +171,10 @@ Niagara Falls, NY, USA, 2017.</p>
|
||||
|
||||
<h2 id="fun">Fun</h2>
|
||||
|
||||
<ul>
|
||||
<li>My <a href="/timeline/index.html">Timeline</a></li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta name="description" content="In this blog, I will generally talk about how to use proper tools to monitor SSL traffics of a mobile devices. Currently, I only can dealing with those SSL t...">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//archivers/charles-is-not-a-good-tool">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -42,6 +43,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -55,6 +58,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta name="description" content="">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//archivers/hello">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -42,6 +43,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -55,6 +58,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta name="description" content="I hate xv6, a stupid, useless education-oriented system. In this article, I will generally talk about how to implement system call to this operating system.">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//archivers/intro-xv6">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -42,6 +43,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -55,6 +58,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta name="description" content="This blog contains only some basic record of my works. For some details, I will write a unique blog just for some specific topics.">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//archivers/some-of-my-previews-exper-work">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -42,6 +43,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -55,6 +58,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//category/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -43,6 +44,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -56,6 +59,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
.timeline{
|
||||
--uiTimelineMainColor: var(--timelineMainColor, #35008a);
|
||||
--uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
|
||||
--uiTimelineDateColor: var(--timelineYearColor, #1470ff);
|
||||
|
||||
position: relative;
|
||||
/* padding-top: 3rem; */
|
||||
/* padding-bottom: 3rem; */
|
||||
}
|
||||
|
||||
.timeline:before{
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline__group:not(:first-of-type){
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.timeline__group:last-of-type{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.timeline__year{
|
||||
padding: .5rem 1.5rem;
|
||||
color: var(--uiTimelineSecondaryColor);
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
position: relative;
|
||||
bottom: 6rem;
|
||||
}
|
||||
|
||||
.timeline__box:not(:last-of-type){
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
content: "";
|
||||
/* width: 100%; */
|
||||
width: auto;
|
||||
height: 2px;
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
min-width: 65px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 1.5rem;
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--uiTimelineDateColor);
|
||||
color: var(--uiTimelineSecondaryColor);
|
||||
}
|
||||
|
||||
.timeline__day{
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline__month{
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.timeline__post{
|
||||
padding: 1.5rem 1rem 1.5rem 1rem;
|
||||
border-radius: 2px;
|
||||
border-left: 3px solid var(--uiTimelineMainColor);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
|
||||
background-color: var(--uiTimelineSecondaryColor);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 641px){
|
||||
|
||||
.timeline:before{
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
top: 50%;
|
||||
margin-top: -27px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px){
|
||||
|
||||
.timeline:before{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
padding-left: 20px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline{
|
||||
--timelineMainColor: #4557bb;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
html{
|
||||
font-size: 62.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
|
||||
html{
|
||||
font-size: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* demo page
|
||||
*/
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
html{
|
||||
font-size: 62.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
|
||||
html{
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
color: #222;
|
||||
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.page__demo{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.main-container{
|
||||
max-width: 960px;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.page__container{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.footer__link{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 361px){
|
||||
|
||||
.footer__container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px){
|
||||
|
||||
.melnik909{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -6,8 +6,8 @@
|
||||
</description>
|
||||
<link>https://codersherlock.github.com//</link>
|
||||
<atom:link href="https://codersherlock.github.com//feed.xml" rel="self" type="application/rss+xml"/>
|
||||
<pubDate>Wed, 29 Aug 2018 16:34:12 -0400</pubDate>
|
||||
<lastBuildDate>Wed, 29 Aug 2018 16:34:12 -0400</lastBuildDate>
|
||||
<pubDate>Sun, 09 Sep 2018 17:56:38 -0400</pubDate>
|
||||
<lastBuildDate>Sun, 09 Sep 2018 17:56:38 -0400</lastBuildDate>
|
||||
<generator>Jekyll v3.8.3</generator>
|
||||
|
||||
<item>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
@@ -43,6 +44,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
@@ -56,6 +59,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>About - Timeline « Stop Talking, Start Doing - 停止空想，开始行动</title>
|
||||
<meta name="description" content="My personal blog, with some boring research staff and some tricks I was fancy to. I'll try my best to make this blog fun and useful. Not just a place I complain about all happens in my Lab.
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//timeline/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-82637164-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({
|
||||
google_ad_client: "ca-pub-6651321038908478",
|
||||
enable_page_level_ads: true
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="wrapper">
|
||||
<a class="site-title" href="/">Stop Talking, Start Doing - 停止空想，开始行动</a>
|
||||
<nav class="site-nav">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/category/">Category</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrapper">
|
||||
<div class="col-main">
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">About - Timeline</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
<div class="timeline">
|
||||
|
||||
<div class="timeline__group">
|
||||
<span class="timeline__year">Now</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p>Look up at the Starry Sky<audio controls><source src="/static/2018-09/beihang.mp3 type="audio/mpeg"></audio></p>
|
||||
<img src="http://www.fsaona.com/images/imagesbigimg.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Transfered to another high school</p> -->
|
||||
<img src="http://school.zhongkao.com/style/school/pictures/school/734/73421/logo.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened high school</p> -->
|
||||
<img src="http://www.fuzhong.sd.cn/uploadfile/2015/0704/20150704044140866.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2008</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened middle school</p> -->
|
||||
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=5bc3fe5949540923be646b2cf331ba6c/3812b31bb051f819506a0330dab44aed2e73e779.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2005</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened primary school</p> -->
|
||||
<img src="http://www.sdsdfx.com:85/fxjylm/u/cms/www/201510/27194804xvgc.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1999</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">26</span>
|
||||
<span class="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p> Borned in <a href="https://en.wikipedia.org/wiki/Jinan">Jinan</a>, <a href="https://en.wikipedia.org/wiki/Shandong">Shandong Province</a>, China </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1993</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-second">
|
||||
<div class="col-box col-box-author">
|
||||
<img class="avatar" src="/static/avatar.jpg" alt="Pengzhan Hao - 碾子">
|
||||
<div class="col-box-title name">Pengzhan Hao - 碾子</div>
|
||||
<p></p>
|
||||
<p class="contact">
|
||||
|
||||
<a href="https://github.com/codersherlock">GitHub</a>
|
||||
|
||||
|
||||
<a href="https://twitter.com/haopengzhan">Twitter</a>
|
||||
|
||||
|
||||
<a href="mailto:haopengzhan@gmail.com">Email</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-box">
|
||||
<div class="col-box-title">Newest Posts</div>
|
||||
<ul class="post-list">
|
||||
|
||||
<li><a class="post-link" href="/archivers/intro-xv6">Xv6 introduction</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/some-of-my-previews-exper-work">Some of my previews experiment works: 2016</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/charles-is-not-a-good-tool">Using charles proxy to monitor mobile SSL traffics</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/hello">Stop Talking is the worst title of one blog</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-box post-toc hide">
|
||||
<div class="col-box-title">TOC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrapper">
|
||||
© 2016 Pengzhan Hao - 碾子
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/js/easybook.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>About - Timeline « Stop Talking, Start Doing - 停止空想，开始行动</title>
|
||||
<meta name="description" content="My personal blog, with some boring research staff and some tricks I was fancy to. I'll try my best to make this blog fun and useful. Not just a place I complain about all happens in my Lab.
|
||||
">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/timeline.css">
|
||||
<link rel="canonical" href="https://codersherlock.github.com//timeline/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Stop Talking, Start Doing - 停止空想，开始行动" href="https://codersherlock.github.com//feed.xml" />
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-82637164-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({
|
||||
google_ad_client: "ca-pub-6651321038908478",
|
||||
enable_page_level_ads: true
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="wrapper">
|
||||
<a class="site-title" href="/">Stop Talking, Start Doing - 停止空想，开始行动</a>
|
||||
<nav class="site-nav">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
|
||||
<a class="page-link" href="/category/">Category</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrapper">
|
||||
<div class="col-main">
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">About - Timeline</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
<div class="timeline">
|
||||
|
||||
<div class="timeline__group">
|
||||
<span class="timeline__year">Now</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">21</span>
|
||||
<span clas="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p>Look up at the Starry Sky</p>
|
||||
<audio controls=""><source src="/static/2018-09/beihang.mp3" type="audio/mpeg" /></audio>
|
||||
<img src="http://www.fsaona.com/images/imagesbigimg.jpg" height="auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2011</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Transfered to another high school</p> -->
|
||||
<img src="http://school.zhongkao.com/style/school/pictures/school/734/73421/logo.jpg" height="250" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened high school</p> -->
|
||||
<img src="http://www.fuzhong.sd.cn/uploadfile/2015/0704/20150704044140866.jpg" height="250" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2008</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened middle school</p> -->
|
||||
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=5bc3fe5949540923be646b2cf331ba6c/3812b31bb051f819506a0330dab44aed2e73e779.jpg" height="250" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2005</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened primary school</p> -->
|
||||
<img src="http://www.sdsdfx.com:85/fxjylm/u/cms/www/201510/27194804xvgc.jpg" height="250" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1999</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">26</span>
|
||||
<span class="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p> Borned in <a href="https://en.wikipedia.org/wiki/Jinan">Jinan</a>, <a href="https://en.wikipedia.org/wiki/Shandong">Shandong Province</a>, China </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1993</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-second">
|
||||
<div class="col-box col-box-author">
|
||||
<img class="avatar" src="/static/avatar.jpg" alt="Pengzhan Hao - 碾子">
|
||||
<div class="col-box-title name">Pengzhan Hao - 碾子</div>
|
||||
<p></p>
|
||||
<p class="contact">
|
||||
|
||||
<a href="https://github.com/codersherlock">GitHub</a>
|
||||
|
||||
|
||||
<a href="https://twitter.com/haopengzhan">Twitter</a>
|
||||
|
||||
|
||||
<a href="mailto:haopengzhan@gmail.com">Email</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-box">
|
||||
<div class="col-box-title">Newest Posts</div>
|
||||
<ul class="post-list">
|
||||
|
||||
<li><a class="post-link" href="/archivers/intro-xv6">Xv6 introduction</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/some-of-my-previews-exper-work">Some of my previews experiment works: 2016</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/charles-is-not-a-good-tool">Using charles proxy to monitor mobile SSL traffics</a></li>
|
||||
|
||||
<li><a class="post-link" href="/archivers/hello">Stop Talking is the worst title of one blog</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-box post-toc hide">
|
||||
<div class="col-box-title">TOC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrapper">
|
||||
© 2016 Pengzhan Hao - 碾子
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/js/easybook.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -68,3 +68,5 @@ The 15th ACM International Conference on Mobile Systems, Applications, and Servi
|
||||
Niagara Falls, NY, USA, 2017.
|
||||
|
||||
## Fun
|
||||
|
||||
- My [Timeline](/timeline/index.html)
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
.timeline{
|
||||
--uiTimelineMainColor: var(--timelineMainColor, #35008a);
|
||||
--uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
|
||||
--uiTimelineDateColor: var(--timelineYearColor, #1470ff);
|
||||
|
||||
position: relative;
|
||||
/* padding-top: 3rem; */
|
||||
/* padding-bottom: 3rem; */
|
||||
}
|
||||
|
||||
.timeline:before{
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline__group:not(:first-of-type){
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.timeline__group:last-of-type{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.timeline__year{
|
||||
padding: .5rem 1.5rem;
|
||||
color: var(--uiTimelineSecondaryColor);
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
position: relative;
|
||||
bottom: 6rem;
|
||||
}
|
||||
|
||||
.timeline__box:not(:last-of-type){
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
content: "";
|
||||
/* width: 100%; */
|
||||
width: auto;
|
||||
height: 2px;
|
||||
background-color: var(--uiTimelineMainColor);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
min-width: 65px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 1.5rem;
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--uiTimelineDateColor);
|
||||
color: var(--uiTimelineSecondaryColor);
|
||||
}
|
||||
|
||||
.timeline__day{
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline__month{
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.timeline__post{
|
||||
padding: 1.5rem 1rem 1.5rem 1rem;
|
||||
border-radius: 2px;
|
||||
border-left: 3px solid var(--uiTimelineMainColor);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
|
||||
background-color: var(--uiTimelineSecondaryColor);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 641px){
|
||||
|
||||
.timeline:before{
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
top: 50%;
|
||||
margin-top: -27px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px){
|
||||
|
||||
.timeline:before{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline__group{
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.timeline__box{
|
||||
padding-left: 20px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.timeline__box:before{
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.timeline__date{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline{
|
||||
--timelineMainColor: #4557bb;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
html{
|
||||
font-size: 62.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
|
||||
html{
|
||||
font-size: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* demo page
|
||||
*/
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
html{
|
||||
font-size: 62.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
|
||||
html{
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
color: #222;
|
||||
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.page__demo{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.main-container{
|
||||
max-width: 960px;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.page__container{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.footer__link{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 361px){
|
||||
|
||||
.footer__container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px){
|
||||
|
||||
.melnik909{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
layout: page
|
||||
title: About - Timeline
|
||||
permalink: /timeline/
|
||||
public: false
|
||||
nocomments: true
|
||||
---
|
||||
|
||||
<div class="timeline">
|
||||
|
||||
<div class="timeline__group">
|
||||
<span class="timeline__year">Now</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">21</span>
|
||||
<span clas="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p>Look up at the Starry Sky</p>
|
||||
<audio controls><source src="/static/2018-09/beihang.mp3" type="audio/mpeg"></audio>
|
||||
<img src="http://www.fsaona.com/images/imagesbigimg.jpg" height="auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2011</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">10</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Transfered to another high school</p> -->
|
||||
<img src="http://school.zhongkao.com/style/school/pictures/school/734/73421/logo.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2010</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened high school</p> -->
|
||||
<img src="http://www.fuzhong.sd.cn/uploadfile/2015/0704/20150704044140866.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2008</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened middle school</p> -->
|
||||
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=5bc3fe5949540923be646b2cf331ba6c/3812b31bb051f819506a0330dab44aed2e73e779.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">2005</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">1</span>
|
||||
<span clas="timeline__month">Sept</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<!-- <p> Attened primary school</p> -->
|
||||
<img src="http://www.sdsdfx.com:85/fxjylm/u/cms/www/201510/27194804xvgc.jpg" height="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1999</span>
|
||||
</div>
|
||||
|
||||
<div class="timeline__group">
|
||||
<div class="timeline__box">
|
||||
<div class="timeline__date">
|
||||
<span class="timeline__day">26</span>
|
||||
<span class="timeline__month">Aug</span>
|
||||
</div>
|
||||
<div class="timeline__post">
|
||||
<div class="timeline__content">
|
||||
<p> Borned in <a href="https://en.wikipedia.org/wiki/Jinan">Jinan</a>, <a href="https://en.wikipedia.org/wiki/Shandong">Shandong Province</a>, China </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="timeline__year">1993</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user