├── LICENSE
├── lately.min.js
├── README-ZH.md
├── README.md
├── lately.js
├── static
    ├── _reset.less
    ├── style.less
    └── style.css
├── index-zh.html
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Tokinx
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lately.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Lately.min.js 2.5.2
3 |  * MIT License - http://www.opensource.org/licenses/mit-license.php
4 |  * https://tokinx.github.io/lately/
5 |  */
6 | !function(){window.Lately=new function(){var t=this;this.lang={second:"秒",minute:"分钟",hour:"小时",day:"天",month:"个月",year:"年",ago:"前",error:"NaN"};var e=function(e){e=new Date(n(e));var r=new function(){this.second=(Date.now()-e.getTime())/1e3,this.minute=this.second/60,this.hour=this.minute/60,this.day=this.hour/24,this.month=this.day/30,this.year=this.month/12},i=Object.keys(r).reverse().find(function(t){return r[t]>=1});return(i?function(t,e){return Math.floor(t)+e}(r[i],t.lang[i]):t.lang.error)+t.lang.ago},n=function(t){return t=new Date(t&&("number"==typeof t?t:t.replace(/-/g,"/").replace("T"," "))),!isNaN(t.getTime())&&t.getTime()};return{init:function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r.target,a=void 0===i?"time":i,o=r.lang;o&&(t.lang=o);var u=!0,h=!1,l=void 0;try{for(var s,c=document.querySelectorAll(a)[Symbol.iterator]();!(u=(s=c.next()).done);u=!0){var f=s.value,g=n(f.dateTime)||n(f.title)||n(f.innerHTML)||0;if(!g)return;f.title=new Date(g).toLocaleString(),f.innerHTML=e(g)}}catch(t){h=!0,l=t}finally{try{!u&&c.return&&c.return()}finally{if(h)throw l}}},format:e}}}();
7 | 


--------------------------------------------------------------------------------
/README-ZH.md:
--------------------------------------------------------------------------------
 1 | # Lately.js
 2 | 
 3 | 原生 JavaScript，仅 800 字节！简单、好用的 Timeago 插件
 4 | 
 5 | [简体中文][3] / [English][4]
 6 | 
 7 | ## 获取
 8 | 
 9 | 你可以直接访问Lately.js的 GitHub 来获取最新版插件，或通过链接下载Lately.js：
10 | 
11 | [lately.js][1] or [lately.min.js][2]
12 | 
13 | ## 引用
14 | 
15 | 只需将lately.js放在您的页面上即可。
16 | 
17 |     <script src="//tokinx.github.io/lately/lately.min.js"></script>
18 | 
19 | ## 启用
20 | 
21 | 我们为您提供了非常简便的初始化方法，方便您对程序进行一些个性化设置并正确启用
22 | 
23 |     <script>
24 |         window.Lately && Lately.target('time, .lately').init();
25 |     </script>
26 | 
27 | ## 示例: https://tokinx.github.io/lately
28 | 
29 |     //datetime
30 |     <time class="lately" datetime="2016-09-28T23:49:41+00:00" itemprop="datePublished" pubdate>2016-September-28</time>
31 | 
32 |     //title
33 |     <a href="#" class="lately" title="2017-02-14 18:56">Any string</a>
34 | 
35 |     //html
36 |     <a href="#" class="lately">2017-02-12 21:39</a>
37 | 
38 | 上方代码执行效果如下：
39 | 
40 | - DateTime：3年前
41 | - Title：3年前
42 | - HTML：3年前
43 | 
44 | ## 格式
45 | 
46 | 支持可直传JavaScript `new Date()` 对象的时间格式。
47 | 
48 | ## 本地化
49 | 
50 | 插件默认为 “简体中文” 语言，但是我们提供了非常简单的接口，方便您的本地化修改。
51 | 
52 | 您可以在初始化的时候连同语言一起设置：
53 | 
54 |     <script>
55 |         window.Lately && Lately.target('time, .lately').lang({
56 |                 'second': ' Second',
57 |                 'minute': ' Minute',
58 |                 'hour': ' Hour',
59 |                 'day': ' Days',
60 |                 'month': ' Month',
61 |                 'year': ' Years',
62 |                 'ago': ' Ago',
63 |                 'error': 'NaN'
64 |             }).init();
65 |     </script>
66 | 
67 |   [1]: https://tokinx.github.io/lately/lately.js
68 |   [2]: https://tokinx.github.io/lately/lately.min.js
69 |   [3]: README-ZH.md
70 |   [4]: README.md
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Lately.js
 2 | 
 3 | Native JavaScript, only 800 Byte but simple and easy to use Timeago plugin
 4 | 
 5 | [简体中文][3] / [English][4]
 6 | 
 7 | ## Get
 8 | 
 9 | You can access Lately.js' GitHub directly to get the latest version of the plug-in, or download Lately.js via link:
10 | 
11 | [lately.js][1] or [lately.min.js][2]
12 | 
13 | ## Reference
14 | 
15 | Just put lately.js on your page.
16 | 
17 |     <script src="//tokinx.github.io/lately/lately.min.js"></script>
18 | 
19 | ## Enable
20 | 
21 | We give you a very simple initialization method so you can personalize your program and enable it correctly
22 | 
23 |     <script>
24 |         window.Lately && Lately.target('time, .lately').init();
25 |     </script>
26 | 
27 | ## Example: https://tokinx.github.io/lately
28 | 
29 |     //datetime
30 |     <time class="lately" datetime="2016-09-28T23:49:41+00:00" itemprop="datePublished" pubdate>2016-September-28</time>
31 | 
32 |     //title
33 |     <a href="#" class="lately" title="2017-02-14 18:56">Any string</a>
34 | 
35 |     //html
36 |     <a href="#" class="lately">2017-02-12 21:39</a>
37 | 
38 | The code above performs as follows:
39 | 
40 | - DateTime：3YearsAgo
41 | - Title：3YearsAgo
42 | - HTML：3YearsAgo
43 | 
44 | ## Format
45 | 
46 | Supports time formats that can be passed directly to JavaScript objects.  `new Date()`
47 | 
48 | ## Localization
49 | 
50 | The plug-in defaults to the "Chinese Simplified" language, but we provide a very simple interface for your localized modifications.
51 | 
52 | You can set it up with the language at initialization:
53 | 
54 |     <script>
55 |         window.Lately && Lately.target('time, .lately').lang({
56 |                 'second': ' Second',
57 |                 'minute': ' Minute',
58 |                 'hour': ' Hour',
59 |                 'day': ' Days',
60 |                 'month': ' Month',
61 |                 'year': ' Years',
62 |                 'ago': ' Ago',
63 |                 'error': 'NaN'
64 |             }).init();
65 |     </script>
66 | 
67 |   [1]: https://tokinx.github.io/lately/lately.js
68 |   [2]: https://tokinx.github.io/lately/lately.min.js
69 |   [3]: README-ZH.md
70 |   [4]: README.md
71 | 


--------------------------------------------------------------------------------
/lately.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Lately.js - Native JavaScript, only 800Byte but simple and easy to use Timeago plugin
 3 |  *
 4 |  * @name Lately.js
 5 |  * @version 2.5.2
 6 |  * @author Tokin (Tokinx)
 7 |  * @license MIT License - http://www.opensource.org/licenses/mit-license.php
 8 |  *
 9 |  * For usage and examples, visit:
10 |  * https://tokinx.github.io/lately/
11 |  *
12 |  * Copyright (c) 2017, biji.io
13 |  */
14 | (() => {
15 |     window.Lately = new function () {
16 |         this.lang = {
17 |             second: "秒",
18 |             minute: "分钟",
19 |             hour: "小时",
20 |             day: "天",
21 |             month: "个月",
22 |             year: "年",
23 |             ago: "前",
24 |             error: "NaN"
25 |         };
26 |         const format = (date) => {
27 |             date = new Date(_val(date));
28 |             const floor = (num, _lang) => Math.floor(num) + _lang,
29 |                 obj = new function () {
30 |                     this.second = (Date.now() - date.getTime()) / 1000;
31 |                     this.minute = this.second / 60;
32 |                     this.hour = this.minute / 60;
33 |                     this.day = this.hour / 24;
34 |                     this.month = this.day / 30;
35 |                     this.year = this.month / 12
36 |                 },
37 |                 key = Object.keys(obj).reverse().find(_ => obj[_] >= 1);
38 |             return (key ? floor(obj[key], this.lang[key]) : this.lang.error) + this.lang.ago;
39 |         },
40 |             _val = (date) => {
41 |                 date = new Date(date && (typeof date === 'number' ? date : date.replace(/-/g, '/').replace('T', ' ')));
42 |                 return isNaN(date.getTime()) ? false : date.getTime();
43 |             };
44 |         return {
45 |             init: ({ target = "time", lang } = {}) => {
46 |                 if (lang) this.lang = lang;
47 |                 for (let el of document.querySelectorAll(target)) {
48 |                     const date = _val(el.dateTime) || _val(el.title) || _val(el.innerHTML) || 0;
49 |                     if (!date) return;
50 |                     el.title = new Date(date).toLocaleString();
51 |                     el.innerHTML = format(date);
52 |                 }
53 |             },
54 |             format
55 |         }
56 |     }
57 | })();


--------------------------------------------------------------------------------
/static/_reset.less:
--------------------------------------------------------------------------------
  1 | /* Reset */
  2 | html {
  3 |   -webkit-box-sizing: border-box;
  4 |   -moz-box-sizing: border-box;
  5 |   box-sizing: border-box;
  6 | }
  7 | *,
  8 | *:before,
  9 | *:after {
 10 |   -webkit-box-sizing: inherit;
 11 |   -moz-box-sizing: inherit;
 12 |   box-sizing: inherit;
 13 | }
 14 | html,
 15 | body,
 16 | div,
 17 | span,
 18 | applet,
 19 | object,
 20 | iframe,
 21 | h1,
 22 | h2,
 23 | h3,
 24 | h4,
 25 | h5,
 26 | h6,
 27 | p,
 28 | blockquote,
 29 | pre,
 30 | a,
 31 | abbr,
 32 | acronym,
 33 | address,
 34 | big,
 35 | cite,
 36 | code,
 37 | del,
 38 | dfn,
 39 | em,
 40 | img,
 41 | ins,
 42 | kbd,
 43 | q,
 44 | s,
 45 | samp,
 46 | small,
 47 | strike,
 48 | strong,
 49 | sub,
 50 | sup,
 51 | tt,
 52 | var,
 53 | b,
 54 | u,
 55 | i,
 56 | center,
 57 | dl,
 58 | dt,
 59 | dd,
 60 | ol,
 61 | ul,
 62 | li,
 63 | fieldset,
 64 | form,
 65 | label,
 66 | legend,
 67 | table,
 68 | caption,
 69 | tbody,
 70 | tfoot,
 71 | thead,
 72 | tr,
 73 | th,
 74 | td,
 75 | article,
 76 | aside,
 77 | canvas,
 78 | details,
 79 | embed,
 80 | figure,
 81 | figcaption,
 82 | footer,
 83 | header,
 84 | hgroup,
 85 | menu,
 86 | nav,
 87 | output,
 88 | ruby,
 89 | section,
 90 | summary,
 91 | time,
 92 | mark,
 93 | audio,
 94 | video,
 95 | input,
 96 | textarea,
 97 | button {
 98 |   margin: 0;
 99 |   padding: 0;
100 |   border: 0;
101 |   font-size: 100%;
102 |   font: inherit;
103 |   vertical-align: baseline;
104 | }
105 | /* HTML5 display-role reset for older browsers */
106 | article,
107 | aside,
108 | details,
109 | figcaption,
110 | figure,
111 | footer,
112 | header,
113 | hgroup,
114 | menu,
115 | nav,
116 | section {
117 |   display: block;
118 | }
119 | html {
120 |   font-size: 16px;
121 |   scroll-behavior: smooth;
122 | }
123 | body {
124 |   background: #fff;
125 |   font: 1rem/1.7 "lucida grande", "lucida sans unicode", lucida, helvetica,
126 |     "PingFang SC", "Hiragino Sans GB", "STHeiti Light", "Microsoft YaHei",
127 |     "WenQuanYi Micro Hei", sans-serif;
128 |   transition: 300ms;
129 | }
130 | input,
131 | textarea,
132 | button {
133 |   outline: none;
134 |   -webkit-appearance: none;
135 | }
136 | blockquote,
137 | q {
138 |   quotes: none;
139 | }
140 | blockquote:before,
141 | blockquote:after,
142 | q:before,
143 | q:after {
144 |   content: none;
145 | }
146 | blockquote,
147 | q {
148 |   background: #fafafa;
149 |   margin: 20px 0;
150 |   padding: 2.5rem 4rem;
151 |   position: relative;
152 |   word-wrap: break-word;
153 | }
154 | blockquote:before,
155 | q:before,
156 | blockquote:after,
157 | q:after {
158 |   content: "“";
159 |   color: #ccd1d9;
160 |   font-size: 6rem;
161 |   position: absolute;
162 |   top: 1rem;
163 |   left: 1rem;
164 |   font-family: "Arial", sans-serif;
165 | }
166 | blockquote:after,
167 | q:after {
168 |   content: "”";
169 |   top: initial;
170 |   left: initial;
171 |   bottom: -2rem;
172 |   right: 1rem;
173 | }
174 | blockquote p,
175 | q p {
176 |   margin: 0 !important;
177 |   padding: 0;
178 |   line-height: 1.8rem;
179 |   overflow: hidden;
180 | }
181 | pre {
182 |   position: relative;
183 |   white-space: pre-wrap;
184 |   word-wrap: break-word;
185 | }
186 | code {
187 |   overflow: auto;
188 |   font-size: 0.88rem;
189 |   max-height: 18rem;
190 |   border-radius: 3px;
191 |   background: rgba(152, 152, 152, 0.06);
192 |   box-shadow: 0 0 0 1px rgba(152, 152, 152, 0.1);
193 | }
194 | code {
195 |   display: inline-block;
196 |   margin: -0.36rem 0;
197 |   padding: 0 0.36rem;
198 |   color: #aab2bd;
199 |   line-height: 1.6rem;
200 | }
201 | pre code {
202 |   display: block;
203 |   -webkit-overflow-scrolling: touch;
204 |   overflow-scrolling: touch;
205 |   padding: 1rem;
206 | }
207 | strong,
208 | b {
209 |   font-weight: bold;
210 | }
211 | em,
212 | i {
213 |   font-style: italic;
214 | }
215 | table {
216 |   border-collapse: collapse;
217 | }
218 | a {
219 |   color: inherit;
220 |   text-decoration: none;
221 | }
222 | a:hover {
223 |   color: #3274ff;
224 | }
225 | sub,
226 | sup {
227 |   position: relative;
228 |   font-size: 0.8rem;
229 |   line-height: 0;
230 |   vertical-align: baseline;
231 | }
232 | sub {
233 |   bottom: -0.5rem;
234 | }
235 | sup {
236 |   top: -0.5rem;
237 | }
238 | 
239 | ::-webkit-scrollbar {
240 |   width: 10px;
241 |   height: 10px;
242 | }
243 | ::-webkit-scrollbar-thumb {
244 |   background-color: #656d78;
245 |   background-clip: padding-box;
246 |   border: 3px solid transparent;
247 |   border-radius: 5px;
248 | }
249 | 


--------------------------------------------------------------------------------
/index-zh.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 |     <title>Lately.js - 800bytes minimalist 'timeago' plugin.</title>
  8 | 
  9 |     <meta name="description" content="Based on jQuery, only 800bytes of minimalist &#39;timeago&#39; plugin.">
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 11 |     <meta name="author" content="Tokin">
 12 |     <link rel="stylesheet" href="./static/style.css">
 13 | </head>
 14 | 
 15 | <body>
 16 |     <div id="main">
 17 |         <div class="header">
 18 |             <div class="sticky">
 19 |                 <h1><b>Lately</b><b class="ext">.js</b></h1>
 20 |                 <h2>原生 JavaScript，仅 <b>800 字节</b>！却简单、好用的 Timeago 插件</h2>
 21 |                 <div class="navigate" id="navigate">
 22 |                     <a href="#navigate" class="navigate-open">菜单</a>
 23 |                     <ul class="content">
 24 |                         <li><a href="#id-get">获取</a></li=>
 25 |                         <li><a href="#id-reference">引用</a></li>
 26 |                         <li><a href="#id-enable">启用</a></li>
 27 |                         <li><a href="#id-example">示例</a></li>
 28 |                         <li><a href="#id-format">格式</a></li>
 29 |                         <li><a href="#id-localization">本地化</a></li>
 30 |                         <li><a href="https://github.com/Tokinx/lately" target="_blank">GtiHub</a></li>
 31 |                     </ul>
 32 |                 </div>
 33 |                 <a href="#close" class="navigate-close"></a>
 34 |                 <div class="l2d">
 35 |                     <span>黑暗模式：</span>
 36 |                     <input id="is-dark" name="is-dark" type="checkbox">
 37 |                     <label for="is-dark" class="pure-switch">
 38 |                         <div class="dot"></div>
 39 |                     </label>
 40 |                 </div>
 41 |             </div>
 42 |         </div>
 43 |         <div class="main">
 44 |             <div class="content">
 45 |                 <h2 id="id-get" class="content-subhead">获取</h2>
 46 |                 <p>
 47 |                     你可以直接访问Lately.js的 <a href="https://github.com/Tokinx/Lately" target="_blank"
 48 |                         class="pure-button pure-button-primary">GitHub</a>
 49 |                     来获取最新版插件，或通过链接下载Lately.js：
 50 |                 </p>
 51 |                 <p>
 52 |                     <a href="lately.js" class="pure-button" download>🚀 lately.js</a> or <a href="./lately.min.js"
 53 |                         class="pure-button" download>🚀 lately.min.js</a>
 54 |                 </p>
 55 | 
 56 |                 <h2 id="id-reference" class="content-subhead">引用</h2>
 57 |                 <p>
 58 |                     只需将lately.js放在您的页面上即可。
 59 |                 </p>
 60 |                 <pre
 61 |                     class="code prettyprint"><code>&lt;script src=&quot;//tokinx.github.io/lately/lately.min.js&quot;&gt;&lt;/script></code></pre>
 62 | 
 63 |                 <h2 id="id-enable" class="content-subhead">启用</h2>
 64 |                 <p>
 65 |                     我们为您提供了非常简便的初始化方法，方便您对程序进行一些个性化设置并正确启用
 66 |                 </p>
 67 |                 <pre class="code prettyprint"><code>&lt;script&gt;
 68 |      window.Lately && Lately.init({ target: 'time, .lately' });
 69 | &lt;/script&gt;</code></pre>
 70 |                 <h2 id="id-example" class="content-subhead">示例</h2>
 71 |                 <pre class="code prettyprint"><code>// DateTime
 72 | &lt;time class=&quot;lately&quot; datetime=&quot;2016-09-28T23:49:41+00:00&quot; itemprop=&quot;datePublished&quot; pubdate&gt;2016-September-28&lt;/time&gt;
 73 | 
 74 | // Title
 75 | &lt;a href=&quot;#&quot; class=&quot;lately&quot; title=&quot;2017-02-14 18:56&quot;&gt;Any string&lt;/a&gt;
 76 | 
 77 | // HTML
 78 | &lt;a href=&quot;#&quot; class=&quot;lately&quot;&gt;2017-02-12 21:39&lt;/a&gt;
 79 | </code></pre>
 80 | 
 81 |                 <p>上方代码执行效果如下：</p>
 82 |                 <ul>
 83 |                     <li>DateTime：<time class="lately" datetime="2016-09-28T23:49:41+00:00" itemprop="datePublished"
 84 |                             pubdate>2016-September-28</time></li>
 85 |                     <li>Title：<a href="#" class="lately" title="2017-02-14 18:56">Any string</a></li>
 86 |                     <li>HTML：<a href="#" class="lately">2017-02-12 21:39</a></li>
 87 |                 </ul>
 88 | 
 89 |                 <h2 id="id-format" class="content-subhead">格式</h2>
 90 |                 <p>
 91 |                     支持可直传JavaScript <code class="code prettyprint">new Date()</code>
 92 |                     对象的时间格式。
 93 |                 </p>
 94 | 
 95 |                 <h2 id="id-localization" class="content-subhead">本地化</h2>
 96 |                 <p>插件默认为 “简体中文” 语言，但是我们提供了非常简单的接口，方便您的本地化修改。</p>
 97 |                 <p>您可以在初始化的时候连同语言一起设置：</p>
 98 |                 <pre class="code prettyprint"><code>&lt;script&gt;
 99 |         window.Lately && Lately.init({ target: 'time, .lately', lang: {
100 |                 'second': ' Second',
101 |                 'minute': ' Minute',
102 |                 'hour': ' Hour',
103 |                 'day': ' Days',
104 |                 'month': ' Month',
105 |                 'year': ' Years',
106 |                 'ago': ' Ago',
107 |                 'error': 'NaN'
108 |             }
109 |         });
110 | &lt;/script&gt;</code></pre>
111 |             </div>
112 | 
113 | 
114 |             <div class="footer">
115 |                 <div class="legal content">
116 |                     <p class="legal-links">
117 |                         <a href="https://github.com/Tokinx/Lately" target="_blank">GitHub Project</a> /
118 |                         <a href="https://biji.io/" target="_blank">Author Blog</a> /
119 |                         <a href="./index.html#en">English</a>
120 |                     </p>
121 |                     <p class="legal-license">
122 |                         <a class="logo" href="https://biji.io/"></a> ©
123 |                         <script>document.write(new Date().getFullYear())</script> Biji.IO. All rights reserved.
124 |                     </p>
125 |                 </div>
126 | 
127 |             </div>
128 |         </div>
129 |     </div>
130 |     <script src="./lately.min.js"></script>
131 |     <script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
132 |     <script>
133 |         addEventListener("DOMContentLoaded", () => {
134 |             document.querySelector("#is-dark").addEventListener("change", (e) => {
135 |                 document.body.classList = e.target.checked ? "dark" : "light"
136 |             })
137 |             window.Lately && Lately.init({ target: 'time, .lately' });
138 |         });
139 |     </script>
140 | </body>
141 | 
142 | </html>


--------------------------------------------------------------------------------
/static/style.less:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | @import "_reset.less";
  3 | 
  4 | .pure-button {
  5 |   padding: 0.3rem 1rem;
  6 |   background-color: #3274ff;
  7 |   border-radius: 9rem;
  8 |   color: #fff;
  9 |   &:hover {
 10 |     color: #fff;
 11 |     text-decoration: underline;
 12 |   }
 13 | }
 14 | .pure-switch {
 15 |   position: relative;
 16 |   display: inline-block;
 17 |   width: 2rem;
 18 |   background-color: #ccc;
 19 |   box-shadow: 0 0 0 2px #ccc;
 20 |   &,
 21 |   .dot {
 22 |     height: 1rem;
 23 |     transition: 300ms;
 24 |     border-radius: 1rem;
 25 |   }
 26 |   .dot {
 27 |     width: 1rem;
 28 |     background-color: #fff;
 29 |   }
 30 | }
 31 | 
 32 | #is-dark {
 33 |   display: none;
 34 |   & + .pure-switch {
 35 |     display: inline-block;
 36 |     height: 1rem;
 37 |     cursor: pointer;
 38 |   }
 39 |   &:checked + .pure-switch {
 40 |     background-color: #3274ff;
 41 |     box-shadow: 0 0 0 2px #3274ff;
 42 |     .dot {
 43 |       transform: translateX(1rem);
 44 |     }
 45 |   }
 46 | }
 47 | 
 48 | #main {
 49 |   display: flex;
 50 |   max-width: 75rem;
 51 |   width: 96%;
 52 |   margin: 0 auto;
 53 |   .header {
 54 |     width: 18rem;
 55 |     flex-shrink: 0;
 56 |     margin-right: 5rem;
 57 |     .sticky {
 58 |       h1 {
 59 |         font-size: 3rem;
 60 |         font-weight: bold;
 61 |       }
 62 |       h2 {
 63 |         font-size: 1rem;
 64 |       }
 65 |       position: sticky;
 66 |       top: 0;
 67 |       padding: 1rem 0;
 68 |       .navigate {
 69 |         .navigate-open {
 70 |           display: none;
 71 |         }
 72 |         ul {
 73 |           margin: 1rem 0;
 74 |           padding: 0 0 0 1.5rem;
 75 |           border-left: 1px solid rgba(102, 102, 102, 0.2);
 76 |           li {
 77 |             list-style: none;
 78 |             a {
 79 |               display: block;
 80 |               padding: 0.3rem 0;
 81 |             }
 82 |           }
 83 |         }
 84 |       }
 85 |       .l2d {
 86 |         display: flex;
 87 |         align-items: center;
 88 |         .pure-switch {
 89 |           margin: 0 0.5rem;
 90 |         }
 91 |       }
 92 |     }
 93 |   }
 94 |   .main {
 95 |     width: 100%;
 96 |     .content {
 97 |       /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
 98 |       .prettyprint {
 99 |         font-family: Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco,
100 |           Consolas, monospace;
101 |         border: 0 !important;
102 |       }
103 |       .pln {
104 |         color: #8bc34a;
105 |       }
106 |       @media screen {
107 |         .str {
108 |           color: #f35561;
109 |         }
110 |         .kwd {
111 |           color: #03a9f4;
112 |         }
113 |         .com {
114 |           color: #aab2bd;
115 |         }
116 |         .typ {
117 |           color: #03a9f4;
118 |         }
119 |         .lit {
120 |           color: #ac92ec;
121 |         }
122 |         .pun {
123 |           color: #8bc34a;
124 |         }
125 |         .opn {
126 |           color: #8bc34a;
127 |         }
128 |         .clo {
129 |           color: #8bc34a;
130 |         }
131 |         .tag {
132 |           color: #ed5565;
133 |         }
134 |         .atn {
135 |           color: #cddc39;
136 |         }
137 |         .atv {
138 |           color: #f35561;
139 |         }
140 |         .dec {
141 |           color: #ac92ec;
142 |         }
143 |         .var {
144 |           color: #ccd1d9;
145 |         }
146 |         .fun {
147 |           color: #ccd1d9;
148 |         }
149 |       }
150 |       .content-subhead {
151 |         font-size: 2rem;
152 |         border-bottom: 1px solid rgba(102, 102, 102, 0.2);
153 |         margin: 2rem 0 0;
154 |         padding: 0.2rem 0;
155 |       }
156 |       p,
157 |       pre {
158 |         margin: 1rem 0;
159 |       }
160 |     }
161 | 
162 |     .footer {
163 |       font-size: 87.5%;
164 |       border-top: 1px solid rgba(102, 102, 102, 0.2);
165 |       margin-top: 3.4286em;
166 |       padding: 5% 0;
167 |     }
168 | 
169 |     .legal {
170 |       line-height: 1.6;
171 |       margin: 0 auto;
172 |     }
173 | 
174 |     .legal-license {
175 |       margin-top: 0;
176 |     }
177 | 
178 |     .legal-links {
179 |       list-style: none;
180 |       padding: 0;
181 |       margin-bottom: 0;
182 |     }
183 | 
184 |     .legal-copyright {
185 |       margin-top: 0;
186 |       margin-bottom: 0;
187 |       .logo {
188 |         display: inline-block;
189 |         width: 2rem;
190 |         height: 1rem;
191 |         background: #3274ff;
192 |         position: relative;
193 |         margin: 0 2.2rem 0 0;
194 |         top: 0.2em;
195 |         &:before,
196 |         &:after {
197 |           content: "";
198 |           background: #3274ff;
199 |           width: 1rem;
200 |           height: 1rem;
201 |           position: absolute;
202 |           right: -1rem;
203 |           opacity: 0.8;
204 |         }
205 |         &:after {
206 |           background: #3274ff;
207 |           right: -2rem;
208 |           opacity: 0.6;
209 |         }
210 |       }
211 |     }
212 |   }
213 | }
214 | @media (max-width: 65rem) {
215 |   #main {
216 |     flex-wrap: wrap;
217 |     .header {
218 |       width: 100%;
219 |       padding-bottom: 1rem;
220 |       border-bottom: 1px solid rgba(102, 102, 102, 0.2);
221 |       .sticky {
222 |         position: static;
223 |         padding: 2rem 0;
224 |         text-align: center;
225 |         .navigate {
226 |           display: flex;
227 |           justify-content: center;
228 |           align-items: center;
229 |           width: 18rem;
230 |           position: fixed;
231 |           background-color: #fff;
232 |           top: 0;
233 |           bottom: 0;
234 |           left: 0;
235 |           z-index: 9;
236 |           transform: translateX(-100%);
237 |           transition: 300ms;
238 |           &:target {
239 |             transform: translateX(0);
240 |             & + .navigate-close {
241 |               position: fixed;
242 |               z-index: 8;
243 |               background-color: rgba(0, 0, 0, 0.8);
244 |               top: 0;
245 |               bottom: 0;
246 |               left: 0;
247 |               right: 0;
248 |             }
249 |           }
250 |           .navigate-open {
251 |             display: flex;
252 |             justify-content: center;
253 |             align-items: center;
254 |             position: absolute;
255 |             top: 0;
256 |             right: -3rem;
257 |             width: 3rem;
258 |             height: 3rem;
259 |             background: #aaa;
260 |             color: #fff;
261 |           }
262 |           ul {
263 |             border: none;
264 |             padding-left: 0;
265 |           }
266 |         }
267 |         .l2d{
268 |           margin-top: 1rem;
269 |           justify-content: center;
270 |         }
271 |       }
272 |     }
273 |     .main {
274 |       .content {
275 |         .content-subhead {
276 |           margin: 0;
277 |           padding-top: 3rem;
278 |         }
279 |       }
280 |     }
281 |   }
282 | }
283 | 
284 | body.dark {
285 |   background: #15151d;
286 |   color: #ddd;
287 |   @media (max-width: 65rem) {
288 |     #main .header .sticky .navigate {
289 |       background: #15151d;
290 |     }
291 |   }
292 | }
293 | /* Dark mode */
294 | @media (prefers-color-scheme: dark) {
295 |   body {
296 |     background: #15151d;
297 |     color: #ddd;
298 |   }
299 | }
300 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 |     <title>Lately.js - 800bytes minimalist 'timeago' plugin.</title>
  8 | 
  9 |     <meta name="description" content="Based on jQuery, only 800bytes of minimalist &#39;timeago&#39; plugin.">
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 11 |     <meta name="author" content="Tokin">
 12 |     <link rel="stylesheet" href="./static/style.css">
 13 | </head>
 14 | 
 15 | <body>
 16 |     <div id="main">
 17 |         <div class="header">
 18 |             <div class="sticky">
 19 |                 <h1><b>Lately</b><b class="ext">.js</b></h1>
 20 |                 <h2>Native JavaScript, only <b>800Byte</b> but simple and easy to use Timeago plugin</h2>
 21 |                 <div class="navigate" id="navigate">
 22 |                     <a href="#navigate" class="navigate-open">Menu</a>
 23 |                     <ul class="content">
 24 |                         <li><a href="#id-get">Get</a></li=>
 25 |                         <li><a href="#id-reference">Reference</a></li>
 26 |                         <li><a href="#id-enable">Enable</a></li>
 27 |                         <li><a href="#id-example">Example</a></li>
 28 |                         <li><a href="#id-format">Format</a></li>
 29 |                         <li><a href="#id-localization">Localization</a></li>
 30 |                         <li><a href="https://github.com/Tokinx/lately" target="_blank">GtiHub</a></li>
 31 |                     </ul>
 32 |                 </div>
 33 |                 <a href="#close" class="navigate-close"></a>
 34 |                 <div class="l2d">
 35 |                     <span>Dark Mode: </span>
 36 |                     <input id="is-dark" name="is-dark" type="checkbox">
 37 |                     <label for="is-dark" class="pure-switch">
 38 |                         <div class="dot"></div>
 39 |                     </label>
 40 |                 </div>
 41 |             </div>
 42 |         </div>
 43 |         <div class="main">
 44 |             <div class="content">
 45 |                 <h2 id="id-get" class="content-subhead">Get</h2>
 46 |                 <p>
 47 |                     You can access Lately.js' <a href="https://github.com/Tokinx/Lately" target="_blank"
 48 |                         class="pure-button pure-button-primary">GitHub</a> directly to get the latest version of the
 49 |                     plug-in, or download Lately.js via link:
 50 |                 </p>
 51 |                 <p>
 52 |                     <a href="lately.js" class="pure-button" download>🚀 lately.js</a> or <a href="./lately.min.js"
 53 |                         class="pure-button" download>🚀 lately.min.js</a>
 54 |                 </p>
 55 | 
 56 |                 <h2 id="id-reference" class="content-subhead">Reference</h2>
 57 |                 <p>
 58 |                     Just put lately.js on your page.
 59 |                 </p>
 60 |                 <pre
 61 |                     class="code prettyprint"><code>&lt;script src=&quot;//tokinx.github.io/lately/lately.min.js&quot;&gt;&lt;/script></code></pre>
 62 | 
 63 |                 <h2 id="id-enable" class="content-subhead">Enable</h2>
 64 |                 <p>
 65 |                     We give you a very simple initialization method so you can personalize your program and enable it
 66 |                     correctly
 67 |                 </p>
 68 |                 <pre class="code prettyprint"><code>&lt;script&gt;
 69 |      window.Lately && Lately.init({ target: 'time, .lately' });
 70 | &lt;/script&gt;</code></pre>
 71 |                 <h2 id="id-example" class="content-subhead">Example</h2>
 72 |                 <pre class="code prettyprint"><code>// DateTime
 73 | &lt;time class=&quot;lately&quot; datetime=&quot;2016-09-28T23:49:41+00:00&quot; itemprop=&quot;datePublished&quot; pubdate&gt;2016-September-28&lt;/time&gt;
 74 | 
 75 | // Title
 76 | &lt;a href=&quot;#&quot; class=&quot;lately&quot; title=&quot;2017-02-14 18:56&quot;&gt;Any string&lt;/a&gt;
 77 | 
 78 | // HTML
 79 | &lt;a href=&quot;#&quot; class=&quot;lately&quot;&gt;2017-02-12 21:39&lt;/a&gt;
 80 | </code></pre>
 81 | 
 82 |                 <p>The code above performs as follows:</p>
 83 |                 <ul>
 84 |                     <li>DateTime：<time class="lately" datetime="2016-09-28T23:49:41+00:00" itemprop="datePublished"
 85 |                             pubdate>2016-September-28</time></li>
 86 |                     <li>Title：<a href="#" class="lately" title="2017-02-14 18:56">Any string</a></li>
 87 |                     <li>HTML：<a href="#" class="lately">2017-02-12 21:39</a></li>
 88 |                 </ul>
 89 | 
 90 |                 <h2 id="id-format" class="content-subhead">Format</h2>
 91 |                 <p>
 92 |                     Supports time formats that can be passed directly to JavaScript objects. <code
 93 |                         class="code prettyprint">new Date()</code>
 94 |                 </p>
 95 | 
 96 |                 <h2 id="id-localization" class="content-subhead">Localization</h2>
 97 |                 <p>The plug-in defaults to the "Chinese Simplified" language, but we provide a very simple interface for
 98 |                     your localized modifications.</p>
 99 |                 <p>You can set it up with the language at initialization:</p>
100 |                 <pre class="code prettyprint"><code>&lt;script&gt;
101 |         window.Lately && Lately.init({ target: 'time, .lately', lang: {
102 |                 'second': ' Second',
103 |                 'minute': ' Minute',
104 |                 'hour': ' Hour',
105 |                 'day': ' Days',
106 |                 'month': ' Month',
107 |                 'year': ' Years',
108 |                 'ago': ' Ago',
109 |                 'error': 'NaN'
110 |             }
111 |         });
112 | &lt;/script&gt;</code></pre>
113 | 
114 |             </div>
115 | 
116 | 
117 |             <div class="footer">
118 |                 <div class="legal content">
119 |                     <p class="legal-links">
120 |                         <a href="https://github.com/Tokinx/Lately" target="_blank">GitHub Project</a> /
121 |                         <a href="https://biji.io/" target="_blank">Author Blog</a> /
122 |                         <a href="./index-zh.html">简体中文</a>
123 |                     </p>
124 |                     <p class="legal-license">
125 |                         <a class="logo" href="https://biji.io/"></a> ©
126 |                         <script>document.write(new Date().getFullYear())</script> Biji.IO. All rights reserved.
127 |                     </p>
128 |                 </div>
129 | 
130 |             </div>
131 |         </div>
132 |     </div>
133 |     <script src="./lately.min.js"></script>
134 |     <script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
135 |     <script>
136 |         if (navigator.language.substr(0, 2) === "zh" && location.hash !== "#en") {
137 |             window.location.replace('./index-zh.html');
138 |         }
139 |         addEventListener("DOMContentLoaded", () => {
140 |             document.querySelector("#is-dark").addEventListener("change", (e) => {
141 |                 document.body.classList = e.target.checked ? "dark" : "light"
142 |             })
143 |             window.Lately && Lately.init({ target: 'time, .lately', lang: {
144 |                     'second': ' Second',
145 |                     'minute': ' Minute',
146 |                     'hour': ' Hour',
147 |                     'day': ' Days',
148 |                     'month': ' Month',
149 |                     'year': ' Years',
150 |                     'ago': ' Ago',
151 |                     'error': 'NaN'
152 |                 }
153 |             });
154 |         });
155 |     </script>
156 | </body>
157 | 
158 | </html>


--------------------------------------------------------------------------------
/static/style.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | /* Reset */
  3 | html {
  4 |   -webkit-box-sizing: border-box;
  5 |   -moz-box-sizing: border-box;
  6 |   box-sizing: border-box;
  7 | }
  8 | *,
  9 | *:before,
 10 | *:after {
 11 |   -webkit-box-sizing: inherit;
 12 |   -moz-box-sizing: inherit;
 13 |   box-sizing: inherit;
 14 | }
 15 | html,
 16 | body,
 17 | div,
 18 | span,
 19 | applet,
 20 | object,
 21 | iframe,
 22 | h1,
 23 | h2,
 24 | h3,
 25 | h4,
 26 | h5,
 27 | h6,
 28 | p,
 29 | blockquote,
 30 | pre,
 31 | a,
 32 | abbr,
 33 | acronym,
 34 | address,
 35 | big,
 36 | cite,
 37 | code,
 38 | del,
 39 | dfn,
 40 | em,
 41 | img,
 42 | ins,
 43 | kbd,
 44 | q,
 45 | s,
 46 | samp,
 47 | small,
 48 | strike,
 49 | strong,
 50 | sub,
 51 | sup,
 52 | tt,
 53 | var,
 54 | b,
 55 | u,
 56 | i,
 57 | center,
 58 | dl,
 59 | dt,
 60 | dd,
 61 | ol,
 62 | ul,
 63 | li,
 64 | fieldset,
 65 | form,
 66 | label,
 67 | legend,
 68 | table,
 69 | caption,
 70 | tbody,
 71 | tfoot,
 72 | thead,
 73 | tr,
 74 | th,
 75 | td,
 76 | article,
 77 | aside,
 78 | canvas,
 79 | details,
 80 | embed,
 81 | figure,
 82 | figcaption,
 83 | footer,
 84 | header,
 85 | hgroup,
 86 | menu,
 87 | nav,
 88 | output,
 89 | ruby,
 90 | section,
 91 | summary,
 92 | time,
 93 | mark,
 94 | audio,
 95 | video,
 96 | input,
 97 | textarea,
 98 | button {
 99 |   margin: 0;
100 |   padding: 0;
101 |   border: 0;
102 |   font-size: 100%;
103 |   font: inherit;
104 |   vertical-align: baseline;
105 | }
106 | /* HTML5 display-role reset for older browsers */
107 | article,
108 | aside,
109 | details,
110 | figcaption,
111 | figure,
112 | footer,
113 | header,
114 | hgroup,
115 | menu,
116 | nav,
117 | section {
118 |   display: block;
119 | }
120 | html {
121 |   font-size: 16px;
122 |   scroll-behavior: smooth;
123 | }
124 | body {
125 |   background: #fff;
126 |   font: 1rem/1.7 "lucida grande", "lucida sans unicode", lucida, helvetica, "PingFang SC", "Hiragino Sans GB", "STHeiti Light", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
127 |   transition: 300ms;
128 | }
129 | input,
130 | textarea,
131 | button {
132 |   outline: none;
133 |   -webkit-appearance: none;
134 | }
135 | blockquote,
136 | q {
137 |   quotes: none;
138 | }
139 | blockquote:before,
140 | blockquote:after,
141 | q:before,
142 | q:after {
143 |   content: none;
144 | }
145 | blockquote,
146 | q {
147 |   background: #fafafa;
148 |   margin: 20px 0;
149 |   padding: 2.5rem 4rem;
150 |   position: relative;
151 |   word-wrap: break-word;
152 | }
153 | blockquote:before,
154 | q:before,
155 | blockquote:after,
156 | q:after {
157 |   content: "“";
158 |   color: #ccd1d9;
159 |   font-size: 6rem;
160 |   position: absolute;
161 |   top: 1rem;
162 |   left: 1rem;
163 |   font-family: "Arial", sans-serif;
164 | }
165 | blockquote:after,
166 | q:after {
167 |   content: "”";
168 |   top: initial;
169 |   left: initial;
170 |   bottom: -2rem;
171 |   right: 1rem;
172 | }
173 | blockquote p,
174 | q p {
175 |   margin: 0 !important;
176 |   padding: 0;
177 |   line-height: 1.8rem;
178 |   overflow: hidden;
179 | }
180 | pre {
181 |   position: relative;
182 |   white-space: pre-wrap;
183 |   word-wrap: break-word;
184 | }
185 | code {
186 |   overflow: auto;
187 |   font-size: 0.88rem;
188 |   max-height: 18rem;
189 |   border-radius: 3px;
190 |   background: rgba(152, 152, 152, 0.06);
191 |   box-shadow: 0 0 0 1px rgba(152, 152, 152, 0.1);
192 | }
193 | code {
194 |   display: inline-block;
195 |   margin: -0.36rem 0;
196 |   padding: 0 0.36rem;
197 |   color: #aab2bd;
198 |   line-height: 1.6rem;
199 | }
200 | pre code {
201 |   display: block;
202 |   -webkit-overflow-scrolling: touch;
203 |   overflow-scrolling: touch;
204 |   padding: 1rem;
205 | }
206 | strong,
207 | b {
208 |   font-weight: bold;
209 | }
210 | em,
211 | i {
212 |   font-style: italic;
213 | }
214 | table {
215 |   border-collapse: collapse;
216 | }
217 | a {
218 |   color: inherit;
219 |   text-decoration: none;
220 | }
221 | a:hover {
222 |   color: #3274ff;
223 | }
224 | sub,
225 | sup {
226 |   position: relative;
227 |   font-size: 0.8rem;
228 |   line-height: 0;
229 |   vertical-align: baseline;
230 | }
231 | sub {
232 |   bottom: -0.5rem;
233 | }
234 | sup {
235 |   top: -0.5rem;
236 | }
237 | ::-webkit-scrollbar {
238 |   width: 10px;
239 |   height: 10px;
240 | }
241 | ::-webkit-scrollbar-thumb {
242 |   background-color: #656d78;
243 |   background-clip: padding-box;
244 |   border: 3px solid transparent;
245 |   border-radius: 5px;
246 | }
247 | .pure-button {
248 |   padding: 0.3rem 1rem;
249 |   background-color: #3274ff;
250 |   border-radius: 9rem;
251 |   color: #fff;
252 | }
253 | .pure-button:hover {
254 |   color: #fff;
255 |   text-decoration: underline;
256 | }
257 | .pure-switch {
258 |   position: relative;
259 |   display: inline-block;
260 |   width: 2rem;
261 |   background-color: #ccc;
262 |   box-shadow: 0 0 0 2px #ccc;
263 | }
264 | .pure-switch,
265 | .pure-switch .dot {
266 |   height: 1rem;
267 |   transition: 300ms;
268 |   border-radius: 1rem;
269 | }
270 | .pure-switch .dot {
271 |   width: 1rem;
272 |   background-color: #fff;
273 | }
274 | #is-dark {
275 |   display: none;
276 | }
277 | #is-dark + .pure-switch {
278 |   display: inline-block;
279 |   height: 1rem;
280 |   cursor: pointer;
281 | }
282 | #is-dark:checked + .pure-switch {
283 |   background-color: #3274ff;
284 |   box-shadow: 0 0 0 2px #3274ff;
285 | }
286 | #is-dark:checked + .pure-switch .dot {
287 |   transform: translateX(1rem);
288 | }
289 | #main {
290 |   display: flex;
291 |   max-width: 75rem;
292 |   width: 96%;
293 |   margin: 0 auto;
294 | }
295 | #main .header {
296 |   width: 18rem;
297 |   flex-shrink: 0;
298 |   margin-right: 5rem;
299 | }
300 | #main .header .sticky {
301 |   position: sticky;
302 |   top: 0;
303 |   padding: 1rem 0;
304 | }
305 | #main .header .sticky h1 {
306 |   font-size: 3rem;
307 |   font-weight: bold;
308 | }
309 | #main .header .sticky h2 {
310 |   font-size: 1rem;
311 | }
312 | #main .header .sticky .navigate .navigate-open {
313 |   display: none;
314 | }
315 | #main .header .sticky .navigate ul {
316 |   margin: 1rem 0;
317 |   padding: 0 0 0 1.5rem;
318 |   border-left: 1px solid rgba(102, 102, 102, 0.2);
319 | }
320 | #main .header .sticky .navigate ul li {
321 |   list-style: none;
322 | }
323 | #main .header .sticky .navigate ul li a {
324 |   display: block;
325 |   padding: 0.3rem 0;
326 | }
327 | #main .header .sticky .l2d {
328 |   display: flex;
329 |   align-items: center;
330 | }
331 | #main .header .sticky .l2d .pure-switch {
332 |   margin: 0 0.5rem;
333 | }
334 | #main .main {
335 |   width: 100%;
336 | }
337 | #main .main .content {
338 |   /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
339 | }
340 | #main .main .content .prettyprint {
341 |   font-family: Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco,
342 |           Consolas, monospace;
343 |   border: 0 !important;
344 | }
345 | #main .main .content .pln {
346 |   color: #8bc34a;
347 | }
348 | @media screen {
349 |   #main .main .content .str {
350 |     color: #f35561;
351 |   }
352 |   #main .main .content .kwd {
353 |     color: #03a9f4;
354 |   }
355 |   #main .main .content .com {
356 |     color: #aab2bd;
357 |   }
358 |   #main .main .content .typ {
359 |     color: #03a9f4;
360 |   }
361 |   #main .main .content .lit {
362 |     color: #ac92ec;
363 |   }
364 |   #main .main .content .pun {
365 |     color: #8bc34a;
366 |   }
367 |   #main .main .content .opn {
368 |     color: #8bc34a;
369 |   }
370 |   #main .main .content .clo {
371 |     color: #8bc34a;
372 |   }
373 |   #main .main .content .tag {
374 |     color: #ed5565;
375 |   }
376 |   #main .main .content .atn {
377 |     color: #cddc39;
378 |   }
379 |   #main .main .content .atv {
380 |     color: #f35561;
381 |   }
382 |   #main .main .content .dec {
383 |     color: #ac92ec;
384 |   }
385 |   #main .main .content .var {
386 |     color: #ccd1d9;
387 |   }
388 |   #main .main .content .fun {
389 |     color: #ccd1d9;
390 |   }
391 | }
392 | #main .main .content .content-subhead {
393 |   font-size: 2rem;
394 |   border-bottom: 1px solid rgba(102, 102, 102, 0.2);
395 |   margin: 2rem 0 0;
396 |   padding: 0.2rem 0;
397 | }
398 | #main .main .content p,
399 | #main .main .content pre {
400 |   margin: 1rem 0;
401 | }
402 | #main .main .footer {
403 |   font-size: 87.5%;
404 |   border-top: 1px solid rgba(102, 102, 102, 0.2);
405 |   margin-top: 3.4286em;
406 |   padding: 5% 0;
407 | }
408 | #main .main .legal {
409 |   line-height: 1.6;
410 |   margin: 0 auto;
411 | }
412 | #main .main .legal-license {
413 |   margin-top: 0;
414 | }
415 | #main .main .legal-links {
416 |   list-style: none;
417 |   padding: 0;
418 |   margin-bottom: 0;
419 | }
420 | #main .main .legal-copyright {
421 |   margin-top: 0;
422 |   margin-bottom: 0;
423 | }
424 | #main .main .legal-copyright .logo {
425 |   display: inline-block;
426 |   width: 2rem;
427 |   height: 1rem;
428 |   background: #3274ff;
429 |   position: relative;
430 |   margin: 0 2.2rem 0 0;
431 |   top: 0.2em;
432 | }
433 | #main .main .legal-copyright .logo:before,
434 | #main .main .legal-copyright .logo:after {
435 |   content: "";
436 |   background: #3274ff;
437 |   width: 1rem;
438 |   height: 1rem;
439 |   position: absolute;
440 |   right: -1rem;
441 |   opacity: 0.8;
442 | }
443 | #main .main .legal-copyright .logo:after {
444 |   background: #3274ff;
445 |   right: -2rem;
446 |   opacity: 0.6;
447 | }
448 | @media (max-width: 65rem) {
449 |   #main {
450 |     flex-wrap: wrap;
451 |   }
452 |   #main .header {
453 |     width: 100%;
454 |     padding-bottom: 1rem;
455 |     border-bottom: 1px solid rgba(102, 102, 102, 0.2);
456 |   }
457 |   #main .header .sticky {
458 |     position: static;
459 |     padding: 2rem 0;
460 |     text-align: center;
461 |   }
462 |   #main .header .sticky .navigate {
463 |     display: flex;
464 |     justify-content: center;
465 |     align-items: center;
466 |     width: 18rem;
467 |     position: fixed;
468 |     background-color: #fff;
469 |     top: 0;
470 |     bottom: 0;
471 |     left: 0;
472 |     z-index: 9;
473 |     transform: translateX(-100%);
474 |     transition: 300ms;
475 |   }
476 |   #main .header .sticky .navigate:target {
477 |     transform: translateX(0);
478 |   }
479 |   #main .header .sticky .navigate:target + .navigate-close {
480 |     position: fixed;
481 |     z-index: 8;
482 |     background-color: rgba(0, 0, 0, 0.8);
483 |     top: 0;
484 |     bottom: 0;
485 |     left: 0;
486 |     right: 0;
487 |   }
488 |   #main .header .sticky .navigate .navigate-open {
489 |     display: flex;
490 |     justify-content: center;
491 |     align-items: center;
492 |     position: absolute;
493 |     top: 0;
494 |     right: -3rem;
495 |     width: 3rem;
496 |     height: 3rem;
497 |     background: #aaa;
498 |     color: #fff;
499 |   }
500 |   #main .header .sticky .navigate ul {
501 |     border: none;
502 |     padding-left: 0;
503 |   }
504 |   #main .header .sticky .l2d {
505 |     margin-top: 1rem;
506 |     justify-content: center;
507 |   }
508 |   #main .main .content .content-subhead {
509 |     margin: 0;
510 |     padding-top: 3rem;
511 |   }
512 | }
513 | body.dark {
514 |   background: #15151d;
515 |   color: #ddd;
516 | }
517 | @media (max-width: 65rem) {
518 |   body.dark #main .header .sticky .navigate {
519 |     background: #15151d;
520 |   }
521 | }
522 | /* Dark mode */
523 | @media (prefers-color-scheme: dark) {
524 |   body {
525 |     background: #15151d;
526 |     color: #ddd;
527 |   }
528 | }
529 | 


--------------------------------------------------------------------------------