editorConfig
This commit is contained in:
parent
e27dfef736
commit
960f7b1b0d
|
|
@ -0,0 +1,20 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 4
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.js]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
[{*.html,*.css,*.json}]
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 4
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
208
doc.html
208
doc.html
|
|
@ -1,109 +1,109 @@
|
||||||
<!--
|
<!--
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
-->
|
-->
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Scribbler Documentation - a code documentation page template for codrops</title>
|
<title>Scribbler Documentation - a code documentation page template for codrops</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="scribbler-global.css">
|
<link rel="stylesheet" href="scribbler-global.css">
|
||||||
<link rel="stylesheet" href="scribbler-doc.css">
|
<link rel="stylesheet" href="scribbler-doc.css">
|
||||||
<link rel="author" href="humans.txt">
|
<link rel="author" href="humans.txt">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="doc__bg"></div>
|
<div class="doc__bg"></div>
|
||||||
<nav class="header">
|
<nav class="header">
|
||||||
<h1 class="logo">Scribbler <span class="logo__thin">Doc</span></h1>
|
<h1 class="logo">Scribbler <span class="logo__thin">Doc</span></h1>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<div class="menu__item toggle"><span></span></div>
|
<div class="menu__item toggle"><span></span></div>
|
||||||
<li class="menu__item"><a href="index.html" class="link link--dark"><i class="fa fa-home"></i> Home</a></li>
|
<li class="menu__item"><a href="index.html" class="link link--dark"><i class="fa fa-home"></i> Home</a></li>
|
||||||
<li class="menu__item"><a href="" class="link link--dark"><i class="fa fa-code-fork"></i> Source Code</a></li>
|
<li class="menu__item"><a href="" class="link link--dark"><i class="fa fa-code-fork"></i> Source Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<aside class="doc__nav">
|
<aside class="doc__nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="js-btn selected">Get Started</li>
|
<li class="js-btn selected">Get Started</li>
|
||||||
<li class="js-btn">Configuration</li>
|
<li class="js-btn">Configuration</li>
|
||||||
<li class="js-btn">Keybindings</li>
|
<li class="js-btn">Keybindings</li>
|
||||||
<li class="js-btn">Issues</li>
|
<li class="js-btn">Issues</li>
|
||||||
</ul>
|
</ul>
|
||||||
</aside>
|
</aside>
|
||||||
<article class="doc__content">
|
<article class="doc__content">
|
||||||
<section class="js-section">
|
<section class="js-section">
|
||||||
<h3 class="section__title">Get Started</h3>
|
<h3 class="section__title">Get Started</h3>
|
||||||
<p>Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.</p>
|
<p>Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.</p>
|
||||||
<h3 class="section__title">Installation</h3>
|
<h3 class="section__title">Installation</h3>
|
||||||
<div class="code__block code__block--notabs">
|
<div class="code__block code__block--notabs">
|
||||||
<pre class="code code--block">
|
<pre class="code code--block">
|
||||||
<code>
|
<code>
|
||||||
$ scribbler ——config
|
$ scribbler ——config
|
||||||
{
|
{
|
||||||
“encryption”: true,
|
“encryption”: true,
|
||||||
“highlighting“: true,
|
“highlighting“: true,
|
||||||
“prettyTable”: false,
|
“prettyTable”: false,
|
||||||
“font”: [“Helvetica”, “sans-serif”],
|
“font”: [“Helvetica”, “sans-serif”],
|
||||||
“folder”: “~/Desktop“
|
“folder”: “~/Desktop“
|
||||||
}
|
}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="js-section">
|
<section class="js-section">
|
||||||
<h3 class="section__title">Configuration</h3>
|
<h3 class="section__title">Configuration</h3>
|
||||||
<p>Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.</p>
|
<p>Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.</p>
|
||||||
<table id="customers">
|
<table id="customers">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Options</th>
|
<th>Options</th>
|
||||||
<th>Value</th>
|
<th>Value</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>encryption</td>
|
<td>encryption</td>
|
||||||
<td>encrypt all notes before saving. If turned on, it requires password to open the file.</td>
|
<td>encrypt all notes before saving. If turned on, it requires password to open the file.</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>highlighting</td>
|
<td>highlighting</td>
|
||||||
<td>Show syntax highlight on markdown text.</td>
|
<td>Show syntax highlight on markdown text.</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>prettyTable</td>
|
<td>prettyTable</td>
|
||||||
<td>Render table with Scribbler’s pretty table style.</td>
|
<td>Render table with Scribbler’s pretty table style.</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
||||||
<hr />
|
<hr />
|
||||||
</section>
|
</section>
|
||||||
<section class="js-section">
|
<section class="js-section">
|
||||||
<h3 class="section__title">Keybindings</h3>
|
<h3 class="section__title">Keybindings</h3>
|
||||||
<p>Lorem ipsum dolor sit amet, scripta tibique indoctum sit ei, mel inani aeterno ad. Facer oratio ex per. At eam movet verear, in sea brute patrioque disputando, usu nonumes torquatos an. Ex his quaerendum intellegebat, ut vel homero accusam. Eum at debet tibique, in vocibus temporibus adversarium sed. Porro verear eu vix, ne usu tation vituperata.</p>
|
<p>Lorem ipsum dolor sit amet, scripta tibique indoctum sit ei, mel inani aeterno ad. Facer oratio ex per. At eam movet verear, in sea brute patrioque disputando, usu nonumes torquatos an. Ex his quaerendum intellegebat, ut vel homero accusam. Eum at debet tibique, in vocibus temporibus adversarium sed. Porro verear eu vix, ne usu tation vituperata.</p>
|
||||||
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
||||||
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
||||||
<hr />
|
<hr />
|
||||||
</section>
|
</section>
|
||||||
<section class="js-section">
|
<section class="js-section">
|
||||||
<h3 class="section__title">Issues</h3>
|
<h3 class="section__title">Issues</h3>
|
||||||
<p>Lorem ipsum dolor sit amet, scripta tibique indoctum sit ei, mel inani aeterno ad. Facer oratio ex per. At eam movet verear, in sea brute patrioque disputando, usu nonumes torquatos an. Ex his quaerendum intellegebat, ut vel homero accusam. Eum at debet tibique, in vocibus temporibus adversarium sed. Porro verear eu vix, ne usu tation vituperata.</p>
|
<p>Lorem ipsum dolor sit amet, scripta tibique indoctum sit ei, mel inani aeterno ad. Facer oratio ex per. At eam movet verear, in sea brute patrioque disputando, usu nonumes torquatos an. Ex his quaerendum intellegebat, ut vel homero accusam. Eum at debet tibique, in vocibus temporibus adversarium sed. Porro verear eu vix, ne usu tation vituperata.</p>
|
||||||
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
<p>Malis percipitur an pro. Pro aperiam persequeris at, at sonet sensibus mei, id mea postulant definiebas concludaturque. Id qui malis abhorreant, mazim melius quo et. At eam altera dolorum, case dicant lobortis ius te, ad vel affert oportere reprehendunt. Quo no verterem deseruisse, mea brute postea te, ne per tacimates suavitate vituperatoribus.</p>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
Scribbler is a free HTML template created exclusively for <a href="https://tympanus.net/codrops/" target="_blank" class="link link--light">Codrops</a>.<br>
|
Scribbler is a free HTML template created exclusively for <a href="https://tympanus.net/codrops/" target="_blank" class="link link--light">Codrops</a>.<br>
|
||||||
Edited by <a href="https://iiiypuk.me/" target="_blank" class="link link--light">author</a> for this project.
|
Edited by <a href="https://iiiypuk.me/" target="_blank" class="link link--light">author</a> for this project.
|
||||||
</footer>
|
</footer>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||||||
<script>hljs.initHighlightingOnLoad();</script>
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
<script src="scribbler.js"></script>
|
<script src="scribbler.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
310
index.html
310
index.html
|
|
@ -1,159 +1,159 @@
|
||||||
<!--
|
<!--
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
-->
|
-->
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Scribbler - a codding landing page template for codrops</title>
|
<title>Scribbler - a codding landing page template for codrops</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/railscasts.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/railscasts.min.css">
|
||||||
<link rel="stylesheet" href="scribbler-global.css">
|
<link rel="stylesheet" href="scribbler-global.css">
|
||||||
<link rel="stylesheet" href="scribbler-landing.css">
|
<link rel="stylesheet" href="scribbler-landing.css">
|
||||||
<link rel="author" href="humans.txt">
|
<link rel="author" href="humans.txt">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<nav>
|
<nav>
|
||||||
<div class="logo"></div>
|
<div class="logo"></div>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<div class="menu__item toggle"><span></span></div>
|
<div class="menu__item toggle"><span></span></div>
|
||||||
<li class="menu__item"><a href="doc.html" class="link link--dark"><i class="fa fa-book"></i> Documentation</a></li>
|
<li class="menu__item"><a href="doc.html" class="link link--dark"><i class="fa fa-book"></i> Documentation</a></li>
|
||||||
<li class="menu__item"><a href="" class="link link--dark"><i class="fa fa-code-fork"></i> Source Code</a></li>
|
<li class="menu__item"><a href="" class="link link--dark"><i class="fa fa-code-fork"></i> Source Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<h1 class="hero__title">Scribbler</h1>
|
<h1 class="hero__title">Scribbler</h1>
|
||||||
<p class="hero__description">Take your markdown notes in terminal</p>
|
<p class="hero__description">Take your markdown notes in terminal</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero__terminal">
|
<div class="hero__terminal">
|
||||||
<pre>
|
<pre>
|
||||||
<!-- Place your demo code here -->
|
<!-- Place your demo code here -->
|
||||||
<code class="shell-session demo">hyperyolo ~ $ </code>
|
<code class="shell-session demo">hyperyolo ~ $ </code>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="installation">
|
<div class="installation">
|
||||||
<h3 class="section__title">Installation</h3>
|
<h3 class="section__title">Installation</h3>
|
||||||
<div class="tab__container">
|
<div class="tab__container">
|
||||||
<ul class="tab__menu">
|
<ul class="tab__menu">
|
||||||
<li class="tab active" data-tab="linux">linux</li>
|
<li class="tab active" data-tab="linux">linux</li>
|
||||||
<li class="tab" data-tab="win">win</li>
|
<li class="tab" data-tab="win">win</li>
|
||||||
<li class="tab" data-tab="mac">mac</li>
|
<li class="tab" data-tab="mac">mac</li>
|
||||||
</ul>
|
</ul>
|
||||||
<pre class="nohighlight code">
|
<pre class="nohighlight code">
|
||||||
<code class="tab__pane active linux">$ apt-get install scribbler</code>
|
<code class="tab__pane active linux">$ apt-get install scribbler</code>
|
||||||
<code class="tab__pane win">$ gem install scribbler</code>
|
<code class="tab__pane win">$ gem install scribbler</code>
|
||||||
<code class="tab__pane mac">$ brew install scribbler</code>
|
<code class="tab__pane mac">$ brew install scribbler</code>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">Fast & Light</h3>
|
<h3 class="section__title">Fast & Light</h3>
|
||||||
<p>Start writing your notes immediately in any terminal! No more time wasted on navigating and opening your text editor.</p>
|
<p>Start writing your notes immediately in any terminal! No more time wasted on navigating and opening your text editor.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">File Syncing</h3>
|
<h3 class="section__title">File Syncing</h3>
|
||||||
<p>Save your file in Dropbox then you can access to it from anywhere.</p>
|
<p>Save your file in Dropbox then you can access to it from anywhere.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">Secure</h3>
|
<h3 class="section__title">Secure</h3>
|
||||||
<p>Encrypt your notes optionally. No one can get to your secrets! </p>
|
<p>Encrypt your notes optionally. No one can get to your secrets! </p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">Configuration</h3>
|
<h3 class="section__title">Configuration</h3>
|
||||||
<p>Maintain all your settings in a single <span class="code code--inline">config.json</span> file. Never need to redo the setting every single time jotting down a note.</p>
|
<p>Maintain all your settings in a single <span class="code code--inline">config.json</span> file. Never need to redo the setting every single time jotting down a note.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">Highlightings</h3>
|
<h3 class="section__title">Highlightings</h3>
|
||||||
<p>For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.</p>
|
<p>For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature__item">
|
<div class="feature__item">
|
||||||
<h3 class="section__title">Keybindings</h3>
|
<h3 class="section__title">Keybindings</h3>
|
||||||
<p>You can expect common keybindings for scribbler. Customize <span class="code code--inline">bindings.json</span> for your own liking! </p>
|
<p>You can expect common keybindings for scribbler. Customize <span class="code code--inline">bindings.json</span> for your own liking! </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="keybinding">
|
<div class="keybinding">
|
||||||
<ul class="keybinding__detail">
|
<ul class="keybinding__detail">
|
||||||
<h3 class="keybinding__title">Default Keybindings</h3>
|
<h3 class="keybinding__title">Default Keybindings</h3>
|
||||||
<li>Quit without saving <span class="keybinding__label">Ctrl+C</span></li>
|
<li>Quit without saving <span class="keybinding__label">Ctrl+C</span></li>
|
||||||
<li>Save <span class="keybinding__label">Cmd+S</span></li>
|
<li>Save <span class="keybinding__label">Cmd+S</span></li>
|
||||||
<li>Save and Quit <span class="keybinding__label">Ctrl+D</span></li>
|
<li>Save and Quit <span class="keybinding__label">Ctrl+D</span></li>
|
||||||
<li>Undo <span class="keybinding__label">Cmd+Z</span></li>
|
<li>Undo <span class="keybinding__label">Cmd+Z</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="keybinding__detail">
|
<ul class="keybinding__detail">
|
||||||
<h3 class="keybinding__title">Markdown Keybindings</h3>
|
<h3 class="keybinding__title">Markdown Keybindings</h3>
|
||||||
<li><span class="keybinding__label">Ctrl+A</span> Insert Link Markdown</li>
|
<li><span class="keybinding__label">Ctrl+A</span> Insert Link Markdown</li>
|
||||||
<li><span class="keybinding__label">Ctrl+I</span> Insert Image Markdown</li>
|
<li><span class="keybinding__label">Ctrl+I</span> Insert Image Markdown</li>
|
||||||
<li><span class="keybinding__label">Ctrl+V</span> Insert YouTube Video</li>
|
<li><span class="keybinding__label">Ctrl+V</span> Insert YouTube Video</li>
|
||||||
<li><span class="keybinding__label">Ctrl+T</span> Insert Table</li>
|
<li><span class="keybinding__label">Ctrl+T</span> Insert Table</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="callout">
|
<div class="callout">
|
||||||
<p>Read our documentation for advanced keybindings and customization</p>
|
<p>Read our documentation for advanced keybindings and customization</p>
|
||||||
<a href="doc.html" class="button--primary">Documentation</a>
|
<a href="doc.html" class="button--primary">Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog">
|
<div class="changelog">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h3 class="section__title">Changelog</h3>
|
<h3 class="section__title">Changelog</h3>
|
||||||
<div class="changelog__item">
|
<div class="changelog__item">
|
||||||
<div class="changelog__meta">
|
<div class="changelog__meta">
|
||||||
<h4 class="changelog__title">v0.7</h4>
|
<h4 class="changelog__title">v0.7</h4>
|
||||||
<small class="changelog__date">10/12/2017</small>
|
<small class="changelog__date">10/12/2017</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__detail">
|
<div class="changelog__detail">
|
||||||
<ul>
|
<ul>
|
||||||
<li>Improving the writing workflow with better key bindings</li>
|
<li>Improving the writing workflow with better key bindings</li>
|
||||||
<li>Design updates</li>
|
<li>Design updates</li>
|
||||||
<li>SSL Verification for web hooks</li>
|
<li>SSL Verification for web hooks</li>
|
||||||
<li>Render Emoji</li>
|
<li>Render Emoji</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__item">
|
<div class="changelog__item">
|
||||||
<div class="changelog__meta">
|
<div class="changelog__meta">
|
||||||
<h4 class="changelog__title">v0.6</h4>
|
<h4 class="changelog__title">v0.6</h4>
|
||||||
<small class="changelog__date">7/30/2017</small>
|
<small class="changelog__date">7/30/2017</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__detail">
|
<div class="changelog__detail">
|
||||||
<ul>
|
<ul>
|
||||||
<li>Adding Unicode support</li>
|
<li>Adding Unicode support</li>
|
||||||
<li>Basic text highlighting</li>
|
<li>Basic text highlighting</li>
|
||||||
<li>Fresh Design</li>
|
<li>Fresh Design</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__item">
|
<div class="changelog__item">
|
||||||
<div class="changelog__meta">
|
<div class="changelog__meta">
|
||||||
<h4 class="changelog__title">v0.5</h4>
|
<h4 class="changelog__title">v0.5</h4>
|
||||||
<small class="changelog__date">5/10/2017</small>
|
<small class="changelog__date">5/10/2017</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__detail">
|
<div class="changelog__detail">
|
||||||
<ul>
|
<ul>
|
||||||
<li>Save default md file in new folders</li>
|
<li>Save default md file in new folders</li>
|
||||||
<li>Ability to quick search on existing notes</li>
|
<li>Ability to quick search on existing notes</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog__callout">
|
<div class="changelog__callout">
|
||||||
<a href="#" class="button--secondary">Checkout Full Log</a>
|
<a href="#" class="button--secondary">Checkout Full Log</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
Scribbler is a free HTML template created exclusively for <a href="https://tympanus.net/codrops/" target="_blank" class="link link--light">Codrops</a>.<br>
|
Scribbler is a free HTML template created exclusively for <a href="https://tympanus.net/codrops/" target="_blank" class="link link--light">Codrops</a>.<br>
|
||||||
Edited by <a href="https://iiiypuk.me/" target="_blank" class="link link--light">author</a> for this project.
|
Edited by <a href="https://iiiypuk.me/" target="_blank" class="link link--light">author</a> for this project.
|
||||||
</footer>
|
</footer>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||||||
<script>hljs.initHighlightingOnLoad();</script>
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
<script src="scribbler.js"></script>
|
<script src="scribbler.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,119 @@
|
||||||
html, body {
|
html, body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layout */
|
/* layout */
|
||||||
.header {
|
.header {
|
||||||
border-bottom: 1px solid var(--code-bg-color);
|
border-bottom: 1px solid var(--code-bg-color);
|
||||||
grid-template-columns: 1fr 150px 60% 1fr;
|
grid-template-columns: 1fr 150px 60% 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* logo */
|
/* logo */
|
||||||
.logo {
|
.logo {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo__thin {
|
.logo__thin {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* menu */
|
/* menu */
|
||||||
.menu {
|
.menu {
|
||||||
grid-template-columns: 1fr 180px 60% 1fr;
|
grid-template-columns: 1fr 180px 60% 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item {
|
.menu__item {
|
||||||
padding: 1.5rem 1rem;
|
padding: 1.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* doc */
|
/* doc */
|
||||||
.doc__bg {
|
.doc__bg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 28%;
|
width: 28%;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav {
|
.doc__nav {
|
||||||
flex-basis: 20%;
|
flex-basis: 20%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav ul {
|
.doc__nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav ul.fixed {
|
.doc__nav ul.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav li:hover {
|
.doc__nav li:hover {
|
||||||
color: var(--primary-color-light);
|
color: var(--primary-color-light);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color .3s ease-in-out;
|
transition: color .3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav .selected {
|
.doc__nav .selected {
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__nav .selected:after {
|
.doc__nav .selected:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
left: -1.5rem;
|
left: -1.5rem;
|
||||||
top: 0.3rem;
|
top: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc__content {
|
.doc__content {
|
||||||
flex-basis: 80%;
|
flex-basis: 80%;
|
||||||
padding: 0 0 5rem 1rem;
|
padding: 0 0 5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 750px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.doc__content {
|
.doc__content {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.doc__nav ul {
|
.doc__nav ul {
|
||||||
border-bottom: 1px solid var(--code-bg-color);
|
border-bottom: 1px solid var(--code-bg-color);
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.doc__nav ul.fixed {
|
.doc__nav ul.fixed {
|
||||||
/* nutralized the fixed menu for mobile*/
|
/* nutralized the fixed menu for mobile*/
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.doc__nav li {
|
.doc__nav li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
.doc__nav .selected:after {
|
.doc__nav .selected:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,313 +1,313 @@
|
||||||
/* css variables*/
|
/* css variables*/
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #222f3e;
|
--primary-color: #222f3e;
|
||||||
--primary-color-light: #3d546f;
|
--primary-color-light: #3d546f;
|
||||||
--accent-color: #0abde3;
|
--accent-color: #0abde3;
|
||||||
--accent-color-light: #8ce7fa;
|
--accent-color-light: #8ce7fa;
|
||||||
--accent-color-dark: #0abde4;
|
--accent-color-dark: #0abde4;
|
||||||
--white-color: #FAFBFC;
|
--white-color: #FAFBFC;
|
||||||
--light-gray-color: #8395a7;
|
--light-gray-color: #8395a7;
|
||||||
--medium-gray-color: #5c6f82;
|
--medium-gray-color: #5c6f82;
|
||||||
--dark-gray-color: #3c4955;
|
--dark-gray-color: #3c4955;
|
||||||
--bg-color: #F8F8FA;
|
--bg-color: #F8F8FA;
|
||||||
--code-bg-color: #F0E8E8;
|
--code-bg-color: #F0E8E8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* normalized */
|
/* normalized */
|
||||||
html, body {
|
html, body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Ubuntu', sans-serif;
|
font-family: 'Ubuntu', sans-serif;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #4A4A4A;
|
color: #4A4A4A;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:hover {
|
a, a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid var(--bg-color);
|
border-bottom: 1px solid var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global components */
|
/* global components */
|
||||||
|
|
||||||
/* typography */
|
/* typography */
|
||||||
.section__title {
|
.section__title {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* tabs */
|
/* tabs */
|
||||||
.tab__container {
|
.tab__container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab__container > ul {
|
.tab__container > ul {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab__container .code {
|
.tab__container .code {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.3rem 0.5rem;
|
padding: 0.3rem 0.5rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab.active {
|
.tab.active {
|
||||||
border-bottom: 1px solid var(--primary-color);
|
border-bottom: 1px solid var(--primary-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab__pane {
|
.tab__pane {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab__pane.active {
|
.tab__pane.active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code */
|
/* code */
|
||||||
.code {
|
.code {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: Space Mono, SFMono-Regular, Menlo,Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
font-family: Space Mono, SFMono-Regular, Menlo,Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
border: 1px solid var(--code-bg-color);
|
border: 1px solid var(--code-bg-color);
|
||||||
color: var(--primary-color-light);
|
color: var(--primary-color-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.code--block {
|
.code--block {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code--inline {
|
.code--inline {
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* buttons */
|
/* buttons */
|
||||||
.button--primary {
|
.button--primary {
|
||||||
padding: 10px 22px;
|
padding: 10px 22px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
color: white;
|
color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
transition: all .3s ease-out;
|
transition: all .3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--primary:after {
|
.button--primary:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-color: var(--accent-color-light);
|
background-color: var(--accent-color-light);
|
||||||
right: -0.4rem;
|
right: -0.4rem;
|
||||||
top: -0.4rem;
|
top: -0.4rem;
|
||||||
transition: all 0.3s ease-out;
|
transition: all 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--primary:hover {
|
.button--primary:hover {
|
||||||
text-shadow: 0px 1px 1px var(--accent-color-dark);
|
text-shadow: 0px 1px 1px var(--accent-color-dark);
|
||||||
color: white;
|
color: white;
|
||||||
transform: translate3D(0, -3px, 0);
|
transform: translate3D(0, -3px, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--primary:hover::after {
|
.button--primary:hover::after {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--secondary {
|
.button--secondary {
|
||||||
padding: 10px 22px;
|
padding: 10px 22px;
|
||||||
border: 2px solid var(--primary-color);
|
border: 2px solid var(--primary-color);
|
||||||
transition: all 0.5s ease-out;
|
transition: all 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--secondary:hover {
|
.button--secondary:hover {
|
||||||
border-color: var(--accent-color);
|
border-color: var(--accent-color);
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* links */
|
/* links */
|
||||||
.link {
|
.link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.3s ease-out;
|
transition: all 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover {
|
.link:hover {
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link--dark {
|
.link--dark {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link--light {
|
.link--light {
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* menu */
|
/* menu */
|
||||||
nav {
|
nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 70px auto;
|
grid-template-columns: 70px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
display: none;
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle span,
|
.toggle span,
|
||||||
.toggle span:before,
|
.toggle span:before,
|
||||||
.toggle span:after {
|
.toggle span:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle span:before {
|
.toggle span:before {
|
||||||
top: -6px;
|
top: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle span:after {
|
.toggle span:after {
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle.open span{
|
.toggle.open span{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle.open span:before,
|
.toggle.open span:before,
|
||||||
.toggle.open span:after {
|
.toggle.open span:after {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle.open span:before {
|
.toggle.open span:before {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle.open span:after {
|
.toggle.open span:after {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item {
|
.menu__item {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item.toggle {
|
.menu__item.toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* table */
|
/* table */
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: color .3s ease-out;
|
transition: color .3s ease-out;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
table td, table th {
|
table td, table th {
|
||||||
border: 1px solid var(--code-bg-color);
|
border: 1px solid var(--code-bg-color);
|
||||||
padding: 0.8rem;
|
padding: 0.8rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
table th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-color: white;
|
border-color: white;
|
||||||
border-bottom-color: var(--code-bg-color);
|
border-bottom-color: var(--code-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
table td:first-child {
|
table td:first-child {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
nav {
|
nav {
|
||||||
grid-template-columns: 70px auto;
|
grid-template-columns: 70px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item{
|
.menu__item{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu__item.toggle {
|
.menu__item.toggle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu.responsive .menu__item:not(:first-child) {
|
.menu.responsive .menu__item:not(:first-child) {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 0 0.5rem 0;
|
padding: 0 0 0.5rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layout */
|
/* layout */
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeUp {
|
@keyframes fadeUp {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate3d(0,30px,0);
|
transform: translate3d(0,30px,0);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate3d(0,0,0);
|
transform: translate3d(0,0,0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,182 +1,182 @@
|
||||||
/* nav specialized to landing page */
|
/* nav specialized to landing page */
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* hero section */
|
/* hero section */
|
||||||
.hero {
|
.hero {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
padding: 2rem 0 10rem 0;
|
padding: 2rem 0 10rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__title {
|
.hero__title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__description {
|
.hero__description {
|
||||||
margin: -1rem auto 2rem auto;
|
margin: -1rem auto 2rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__terminal {
|
.hero__terminal {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: -11rem auto 3rem auto;
|
margin: -11rem auto 3rem auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #232323;
|
background-color: #232323;
|
||||||
min-height: 285px;
|
min-height: 285px;
|
||||||
animation: fadeUp 2s;
|
animation: fadeUp 2s;
|
||||||
box-shadow: 0px 12px 36.8px 9.2px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 12px 36.8px 9.2px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero__terminal pre {
|
.hero__terminal pre {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* changelog section */
|
/* changelog section */
|
||||||
|
|
||||||
.changelog__detail li {
|
.changelog__detail li {
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* feature section */
|
/* feature section */
|
||||||
.feature {
|
.feature {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature__item {
|
.feature__item {
|
||||||
max-width: calc(33% - 20px);
|
max-width: calc(33% - 20px);
|
||||||
margin: 0 20px 0 0;
|
margin: 0 20px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature__item .section__title {
|
.feature__item .section__title {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature__item p {
|
.feature__item p {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* keybinding section */
|
/* keybinding section */
|
||||||
.keybinding {
|
.keybinding {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__detail {
|
.keybinding__detail {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid var(--code-bg-color);
|
border: 1px solid var(--code-bg-color);
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
padding: 2rem 1rem 1rem 1rem;
|
padding: 2rem 1rem 1rem 1rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__detail:first-child {
|
.keybinding__detail:first-child {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__detail:last-child {
|
.keybinding__detail:last-child {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__detail:first-child .keybinding__title {
|
.keybinding__detail:first-child .keybinding__title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.5rem;
|
right: 0.5rem;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__detail:last-child .keybinding__title {
|
.keybinding__detail:last-child .keybinding__title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0.5rem;
|
left: 0.5rem;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keybinding__label {
|
.keybinding__label {
|
||||||
background: var(--white-color);
|
background: var(--white-color);
|
||||||
border: 1px solid var(--light-gray-color);
|
border: 1px solid var(--light-gray-color);
|
||||||
box-shadow: 0 1px 0 0 var(--medium-gray-color);
|
box-shadow: 0 1px 0 0 var(--medium-gray-color);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: Courier;
|
font-family: Courier;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--dark-gray-color);
|
color: var(--dark-gray-color);
|
||||||
padding: 3px 3px 1px 3px;
|
padding: 3px 3px 1px 3px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* callout section */
|
/* callout section */
|
||||||
.callout {
|
.callout {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1rem 0 3rem 0;
|
padding: 1rem 0 3rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.callout .button--primary {
|
.callout .button--primary {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* changelog section */
|
/* changelog section */
|
||||||
.changelog {
|
.changelog {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__item {
|
.changelog__item {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__meta {
|
.changelog__meta {
|
||||||
flex-basis: 25%;
|
flex-basis: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__meta small {
|
.changelog__meta small {
|
||||||
color: var(--primary-color-light);
|
color: var(--primary-color-light);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__title {
|
.changelog__title {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__callout {
|
.changelog__callout {
|
||||||
margin: 3rem auto 2rem auto;
|
margin: 3rem auto 2rem auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 750px) {
|
||||||
.hero__terminal {
|
.hero__terminal {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
.tab__container > ul {
|
.tab__container > ul {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.tab__container .code {
|
.tab__container .code {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
.feature, .keybinding, .changelog__item {
|
.feature, .keybinding, .changelog__item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.feature__item {
|
.feature__item {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.keybinding {
|
.keybinding {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue