Skip to content

Add dark theme & refactor #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
relliv wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add dark theme & refactor #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ce00eb
Add dark theme & refactor
relliv Jan 16, 2022
6474938
Add demo page
relliv Mar 12, 2022
578ebcd
Add github repo link
relliv Mar 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
277 changes: 191 additions & 86 deletions doc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,84 @@
<!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>
<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="scribbler-global.css">
<link rel="stylesheet" href="scribbler-doc.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div class="doc__bg"></div>
<nav class="header">
<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>

<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>

<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://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>

<ul class="menu">
<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>
<li class="js-btn">Configuration</li>
<li class="js-btn">Keybindings</li>
<li class="js-btn">Issues</li>
</ul>
</nav>
<div class="wrapper">
<aside class="doc__nav">
<ul>
<li class="js-btn selected">Get Started</li>
<li class="js-btn">Configuration</li>
<li class="js-btn">Keybindings</li>
<li class="js-btn">Issues</li>
</ul>
</aside>
<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>
<div class="code__block code__block--notabs">
<pre class="code code--block">
</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>

<div class="code__block code__block--notabs">
<pre class="code code--block">
<code>
$ scribbler ——config
{
Expand All @@ -48,54 +90,117 @@ <h3 class="section__title">Installation</h3>
}
</code>
</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>
<table id="customers">
<tr>
<th>Options</th>
<th>Value</th>
<th>Default</th>
</tr>
<tr>
<td>encryption</td>
<td>encrypt all notes before saving. If turned on, it requires password to open the file.</td>
<td>false</td>
</tr>
<tr>
<td>highlighting</td>
<td>Show syntax highlight on markdown text.</td>
<td>true</td>
</tr>
<tr>
<td>prettyTable</td>
<td>Render table with Scribbler’s pretty table style.</td>
<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>
<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>
<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>
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="scribbler.js"></script>
</body>
</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>

<table id="customers">
<tr>
<th>Options</th>
<th>Value</th>
<th>Default</th>
</tr>
<tr>
<td>encryption</td>
<td>encrypt all notes before saving. If turned on, it requires password to open the file.</td>
<td>false</td>
</tr>
<tr>
<td>highlighting</td>
<td>Show syntax highlight on markdown text.</td>
<td>true</td>
</tr>
<tr>
<td>prettyTable</td>
<td>Render table with Scribbler’s pretty table style.</td>
<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>

<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>

<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>
</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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<script>
hljs.initHighlightingOnLoad();
</script>

<script src="scribbler.js"></script>
</body>

</html>
Loading