iiiypuk
/
codrops-scribbler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge 578ebcdaa7 into 2bf453dd85

This commit is contained in:
Yıldıray Eyüp Erdoğan 2022-03-12 23:25:22 +08:00 committed by GitHub
parent 2bf453dd85 578ebcdaa7
commit 2c17a55612
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 551 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -6,7 +6,13 @@ Scribbler is a responsive HTML/CSS/Javascript template designed for developers w
Check out the details on [Codrops](https://tympanus.net/codrops/2018/01/12/freebie-scribbler-website-template-html-sketch/)
## Live Demo
✅ And this template supports dark mode. (*based on `@media (prefers-color-scheme: dark)`*)
## Live Demo (new)
👋 [Scribbler Live Demo](https://egoistdeveloper.github.io/codrops-scribbler/)
## Live Demo (original)
👋 [Scribbler Live Demo](https://tympanus.net/Freebies/scribbler/)
## Credits
@ -15,6 +21,7 @@ Check out the details on [Codrops](https://tympanus.net/codrops/2018/01/12/freeb
* [Font Awesome v4](http://fontawesome.io/)
## License
Use it freely but please do not republish, distribute or sell "as-is". [Read more about our license.](http://tympanus.net/codrops/licensing/)
## Misc

147
doc.html
View File

@ -1,27 +1,57 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<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 href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900">
<link rel="stylesheet" href="scribbler-global.css">
<link rel="stylesheet" href="scribbler-doc.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div class="doc__bg"></div>
<!-- Navbar -->
<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">
<div class="menu__item toggle"><span></span></div>
<li class="menu__item"><a href="" class="link link--dark"><i class="fa fa-github"></i> Github</a></li>
<li class="menu__item"><a href="index.html" class="link link--dark"><i class="fa fa-home"></i> Home</a></li>
<div class="menu__item toggle">
<span></span>
</div>
<li class="menu__item">
<a href="https://github.com/EgoistDeveloper/codrops-scribbler" class="link link--dark">
<i class="fa fa-github"></i>
Github
</a>
</li>
<li class="menu__item">
<a href="index.html" class="link link--dark">
<i class="fa fa-home"></i>
Home
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<!-- Sidebar -->
<aside class="doc__nav">
<ul>
<li class="js-btn selected">Get Started</li>
@ -30,11 +60,23 @@
<li class="js-btn">Issues</li>
</ul>
</aside>
<!-- Contents -->
<article class="doc__content">
<section class="js-section">
<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>
<h3 class="section__title">Installation</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>
<h3 class="section__title">
Installation
</h3>
<div class="code__block code__block--notabs">
<pre class="code code--block">
<code>
@ -50,9 +92,17 @@
</pre>
</div>
</section>
<section class="js-section">
<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>
<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>
<table id="customers">
<tr>
<th>Options</th>
@ -75,27 +125,82 @@
<td>true</td>
</tr>
</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 />
</section>
<section class="js-section">
<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>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>
<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>
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 />
</section>
<section class="js-section">
<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>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>
<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>
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>
</article>
</div>
<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>.</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>.
</footer>
<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>
</body>
</html>

219
index.html
View File

@ -1,45 +1,87 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<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 href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900">
<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-landing.css">
<link rel="author" href="humans.txt">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="logo"></div>
<ul class="menu">
<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="" class="link link--dark"><i class="fa fa-github"></i> Github</a></li>
<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="https://github.com/EgoistDeveloper/codrops-scribbler" class="link link--dark">
<i class="fa fa-github"></i>
Github
</a>
</li>
</ul>
</nav>
<!-- Hero -->
<div class="hero">
<h1 class="hero__title">Scribbler</h1>
<p class="hero__description">Take your markdown notes in terminal</p>
<h1 class="hero__title">
Scribbler
</h1>
<p class="hero__description">
Take your markdown notes in terminal
</p>
</div>
<!-- Hero Terminal -->
<div class="hero__terminal">
<pre>
<!-- Place your demo code here -->
<code class="shell-session demo">hyperyolo ~ $ </code>
<code class="shell-session demo">
hyperyolo ~ $
</code>
</pre>
</div>
<div class="wrapper">
<!-- Installation -->
<div class="installation">
<h3 class="section__title">Installation</h3>
<h3 class="section__title">
Installation
</h3>
<div class="tab__container">
<!-- Tab Menu -->
<ul class="tab__menu">
<li class="tab active" data-tab="mac">mac</li>
<li class="tab" data-tab="linux">linux</li>
<li class="tab" data-tab="win">win</li>
</ul>
<!-- Commands -->
<pre class="nohighlight code">
<code class="tab__pane active mac">$ brew install scribbler</code>
<code class="tab__pane linux">$ apt-get install scribbler</code>
@ -47,61 +89,136 @@
</pre>
</div>
</div>
<!-- Features -->
<div class="feature">
<!-- Feature -->
<div class="feature__item">
<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>
<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>
</div>
<!-- Feature -->
<div class="feature__item">
<h3 class="section__title">File Syncing</h3>
<p>Save your file in Dropbox then you can access to it from anywhere.</p>
<h3 class="section__title">
File Syncing
</h3>
<p>
Save your file in Dropbox then you can access to it from anywhere.
</p>
</div>
<!-- Feature -->
<div class="feature__item">
<h3 class="section__title">Secure</h3>
<p>Encrypt your notes optionally. No one can get to your secrets! </p>
<h3 class="section__title">
Secure
</h3>
<p>
Encrypt your notes optionally. No one can get to your secrets!
</p>
</div>
<!-- Feature -->
<div class="feature__item">
<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>
<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>
</div>
<!-- Feature -->
<div class="feature__item">
<h3 class="section__title">Highlightings</h3>
<p>For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.</p>
<h3 class="section__title">
Highlightings
</h3>
<p>
For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.
</p>
</div>
<!-- Feature -->
<div class="feature__item">
<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>
<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>
</div>
</div>
<!-- Keybindings -->
<div class="keybinding">
<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>Save <span class="keybinding__label">Cmd+S</span></li>
<li>Save and Quit <span class="keybinding__label">Ctrl+D</span></li>
<li>Undo <span class="keybinding__label">Cmd+Z</span></li>
</ul>
<!-- Keybinding Details -->
<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+I</span> Insert Image Markdown</li>
<li><span class="keybinding__label">Ctrl+V</span> Insert YouTube Video</li>
<li><span class="keybinding__label">Ctrl+T</span> Insert Table</li>
</ul>
</div>
<!-- Callout -->
<div class="callout">
<p>Read our documentation for advanced keybindings and customization</p>
<a href="doc.html" class="button--primary">Documentation</a>
<p>
Read our documentation for advanced keybindings and customization
</p>
<a href="doc.html" class="button--primary">
Documentation
</a>
</div>
</div>
<!-- Changelog -->
<div class="changelog">
<div class="wrapper">
<h3 class="section__title">Changelog</h3>
<h3 class="section__title">
Changelog
</h3>
<!-- Changelog Item -->
<div class="changelog__item">
<div class="changelog__meta">
<h4 class="changelog__title">v0.7</h4>
<small class="changelog__date">10/12/2017</small>
<h4 class="changelog__title">
v0.7
</h4>
<small class="changelog__date">
10/12/2017
</small>
</div>
<div class="changelog__detail">
<ul>
<li>Improving the writing workflow with better key bindings</li>
@ -111,11 +228,19 @@
</ul>
</div>
</div>
<!-- Changelog Item -->
<div class="changelog__item">
<div class="changelog__meta">
<h4 class="changelog__title">v0.6</h4>
<small class="changelog__date">7/30/2017</small>
<h4 class="changelog__title">
v0.6
</h4>
<small class="changelog__date">
7/30/2017
</small>
</div>
<div class="changelog__detail">
<ul>
<li>Adding Unicode support</li>
@ -124,11 +249,19 @@
</ul>
</div>
</div>
<!-- Changelog Item -->
<div class="changelog__item">
<div class="changelog__meta">
<h4 class="changelog__title">v0.5</h4>
<small class="changelog__date">5/10/2017</small>
<h4 class="changelog__title">
v0.5
</h4>
<small class="changelog__date">
5/10/2017
</small>
</div>
<div class="changelog__detail">
<ul>
<li>Save default md file in new folders</li>
@ -136,14 +269,30 @@
</ul>
</div>
</div>
<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>
<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>.</footer>
<!-- 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>.
</footer>
<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>
</body>
</html>

17
scribbler-doc.css
View File

@ -1,13 +1,16 @@
html, body {
html,
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--bg-body-color);
}
/* layout */
.header {
border-bottom: 1px solid var(--code-bg-color);
grid-template-columns: 1fr 150px 60% 1fr;
z-index: 2;
}
.wrapper {
@ -44,12 +47,13 @@ html, body {
bottom: 0;
width: 28%;
background-color: var(--bg-color);
z-index: -1;
z-index: 1;
}
.doc__nav {
flex-basis: 20%;
font-weight: 200;
z-index: 2;
}
.doc__nav ul {
@ -58,6 +62,10 @@ html, body {
line-height: 1.8;
}
.doc__nav ul li{
color: var(--primary-color-light);
}
.doc__nav ul.fixed {
position: fixed;
top: 2rem;
@ -93,22 +101,27 @@ html, body {
.wrapper {
flex-direction: column;
}
.doc__content {
padding-left: 0;
}
.doc__nav ul {
border-bottom: 1px solid var(--code-bg-color);
padding-bottom: 0.5rem;
}
.doc__nav ul.fixed {
/* nutralized the fixed menu for mobile*/
position: relative;
top: 0;
}
.doc__nav li {
display: inline-block;
padding-right: 1rem;
}
.doc__nav .selected:after {
display: none;
}

40
scribbler-global.css
View File

@ -13,20 +13,39 @@
--code-bg-color: #F0E8E8;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #acbfc5;
--primary-color-light: #b9b0b0;
--accent-color: #FE6A6B;
--accent-color-light: #FFE4E4;
--accent-color-dark: #B94B4C;
--white-color: #FAFBFC;
--light-gray-color: #C6CBD1;
--medium-gray-color: #959DA5;
--dark-gray-color: #444D56;
--bg-color: #2a2f32;
--bg-body-color: #1e1e1e;
--code-bg-color: #304554;
}
}
/* normalized */
html, body {
html,
body {
padding: 0;
margin: 0;
font-family: 'Nunito Sans', sans-serif;
background-color: white;
background-color: var(--bg-body-color);
}
p {
font-weight: 300;
color: #4A4A4A;
color: var(--primary-color-light);
}
a, a:hover {
a,
a:hover {
text-decoration: none;
color: var(--primary-color);
}
@ -72,6 +91,7 @@ hr {
padding: 0.3rem 0.5rem;
font-weight: 200;
cursor: pointer;
color: var(--primary-color-light);
}
.tab.active {
@ -241,9 +261,11 @@ table {
width: 100%;
transition: color .3s ease-out;
margin-bottom: 2rem;
color: var(--primary-color-light);
}
table td, table th {
table td,
table th {
border: 1px solid var(--code-bg-color);
padding: 0.8rem;
font-weight: 300;
@ -251,8 +273,8 @@ table td, table th {
table th {
text-align: left;
background-color: white;
border-color: white;
background-color: var(--bg-color);
border-color: var(--code-bg-color);
border-bottom-color: var(--code-bg-color);
}
@ -299,7 +321,8 @@ table td:first-child {
text-align: center;
background-color: var(--primary-color);
padding: 2rem;
color: white;
color: var(--primary-color);
background-color: var(--bg-body-color);
}
@keyframes fadeUp {
@ -307,6 +330,7 @@ table td:first-child {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}

14
scribbler-landing.css
View File

@ -87,6 +87,10 @@ nav {
margin-left: -1px;
}
.keybinding__detail li {
color: var(--primary-color-light);
}
.keybinding__detail:first-child .keybinding__title {
position: absolute;
right: 0.5rem;
@ -130,6 +134,7 @@ nav {
.changelog {
background-color: var(--bg-color);
padding: 2rem 0;
color: var(--primary-color-light);
}
.changelog__item {
@ -159,21 +164,28 @@ nav {
.hero__terminal {
width: 70%;
}
.tab__container>ul {
right: auto;
left: 0;
padding-left: 0;
}
.tab__container .code {
margin-top: 2rem;
}
.feature, .keybinding, .changelog__item {
.feature,
.keybinding,
.changelog__item {
flex-direction: column;
}
.feature__item {
max-width: 100%;
margin: 0;
}
.keybinding {
font-size: 0.8rem;
}