From 9ce00ebd25fc94a883774a0cd1e88194b3c3ca01 Mon Sep 17 00:00:00 2001 From: Egoist Date: Sun, 16 Jan 2022 22:42:46 +0300 Subject: [PATCH 1/3] Add dark theme & refactor --- doc.html | 275 ++++++++++++++++++--------- index.html | 421 ++++++++++++++++++++++++++++-------------- scribbler-doc.css | 17 +- scribbler-global.css | 54 ++++-- scribbler-landing.css | 16 +- 5 files changed, 543 insertions(+), 240 deletions(-) diff --git a/doc.html b/doc.html index 9c8c96b..8527f6e 100755 --- a/doc.html +++ b/doc.html @@ -1,42 +1,84 @@ - - - - - Scribbler Documentation - a code documentation page template for codrops - - - - - - - -
- -
- -
-
-

Get Started

-

Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.

-

Installation

-
- 
+    
+
+    
+    

+      

+        

+          Get Started
+        

+
+        

+          Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default
+          saving folder location.
+        

+
+        

+          Installation
+        

+
+        

+          
               
                 $ scribbler  ——config
                   {
@@ -48,54 +90,117 @@
                   }
               
             

-          

-        

-        

-          
Configuration

-          
Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default saving folder location.

-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
OptionsValueDefault
encryptionencrypt all notes before saving. If turned on, it requires password to open the file.false
highlightingShow syntax highlight on markdown text.true
prettyTableRender table with Scribbler’s pretty table style.true

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

-          

-        

-        

-          
Keybindings

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

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

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

-          

-        

-        

-          
Issues

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

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

-        

-      

-
+
+ + +
+

+ Configuration +

+ +

+ Learn how to configure settings for Scribbler, such as your syntax highlighting preference and the default + saving folder location. +

+ + + + + + + + + + + + + + + + + + + + + + +
OptionsValueDefault
encryptionencrypt all notes before saving. If turned on, it requires password to open the file.false
highlightingShow syntax highlight on markdown text.true
prettyTableRender table with Scribbler’s pretty table style.true
+ +

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

+ +
+
+ +
+

+ Keybindings +

+ +

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

+ +

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

+ +

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

+ +
+
+ +
+

+ Issues +

+ +

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

+ +

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

+
+ + + + + + + + + + + - - - - - \ No newline at end of file diff --git a/index.html b/index.html index a0b1c74..48e202d 100755 --- a/index.html +++ b/index.html @@ -1,149 +1,298 @@ - - - - - Scribbler - a codding landing page template for codrops - - - - - - - - - -
-

Scribbler

-

Take your markdown notes in terminal

-
-
- 
+
+
+  
+  
+  
+
+  
+    Scribbler - a codding landing page template for codrops
+  
+  
+  
+  
+  
+
+  
+  
+  
+
+
+
+  
+  
+
+  
+  

+    

+      Scribbler
+    

+
+    

+      Take your markdown notes in terminal
+    

+  

+
+  
+  

+    
         
-        hyperyolo ~ $ 
+        
+          hyperyolo ~ $ 
+        
       

-    

-    

-      

-        
Installation

-        

-          
    
-            
  • mac
    • 
-            
  • linux
    • 
-            
  • win
    • 
-          

-          
+  

+
+  

+    
+    

+      

+        Installation
+      

+
+      

+        
+        
    
+          
  • mac
    • 
+          
  • linux
    • 
+          
  • win
    • 
+        

+
+        
+        
             $  brew install scribbler
             $  apt-get install scribbler
             $  gem install scribbler
           

-        

-      

-      

-        

-          
Fast & Light

-          
Start writing your notes immediately in any terminal! No more time wasted on navigating and opening your text editor.

-        

-        

-          
File Syncing

-          
Save your file in Dropbox then you can access to it from anywhere.

-        

-        

-          
Secure

-          
Encrypt your notes optionally. No one can get to your secrets! 

-        

-        

-          
Configuration

-          
Maintain all your settings in a single config.json file. Never need to redo the setting every single time jotting down a note.

-        

-        

-          
Highlightings

-          
For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.

-        

-        

-          
Keybindings

-          
You can expect common keybindings for scribbler. Customize bindings.json for your own liking! 

-        

-      

-      

-        
    
-          
    Default Keybindings
    
-          
  • Quit without saving Ctrl+C
    • 
-          
  • Save Cmd+S
    • 
-          
  • Save and Quit Ctrl+D
    • 
-          
  • Undo Cmd+Z
    • 
-        

-        
    
-          
    Markdown Keybindings
    
-          
  • Ctrl+A Insert Link Markdown
    • 
-          
  • Ctrl+I Insert Image Markdown
    • 
-          
  • Ctrl+V Insert YouTube Video
    • 
-          
  • Ctrl+T Insert Table
    • 
-        

-      

-      

-        
Read our documentation for advanced keybindings and customization

-        Documentation
       

     

-    

-      

-        
Changelog

-        

-          

-            
v0.7

-            10/12/2017
-          

-          

-            
    
-              
  • Improving the writing workflow with better key bindings
    • 
-              
  • Design updates
    • 
-              
  • SSL Verification for web hooks
    • 
-              
  • Render Emoji
    • 
-            

-          

-        

-        

-          

-            
v0.6

-            7/30/2017
-          

-          

-            
    
-              
  • Adding Unicode support
    • 
-              
  • Basic text highlighting
    • 
-              
  • Fresh Design
    • 
-            

-          

-        

-        

-          

-            
v0.5

-            5/10/2017
-          

-          

-            
    
-              
  • Save default md file in new folders
    • 
-              
  • Ability to quick search on existing notes
    • 
-            

-          

-        

-        

-          Checkout Full Log
-        

+
+    
+    

+      
+      

+        

+          Fast & Light
+        

+
+        

+          Start writing your notes immediately in any terminal! No more time wasted on navigating and opening your text
+          editor.
+        

+      

+
+      
+      

+        

+          File Syncing
+        

+
+        

+          Save your file in Dropbox then you can access to it from anywhere.
+        

+      

+
+      
+      

+        

+          Secure
+        

+
+        

+          Encrypt your notes optionally. No one can get to your secrets!
+        

+      

+
+      
+      

+        

+          Configuration
+        

+
+        

+          Maintain all your settings in a single config.json file.
+          Never need to redo the setting every single time jotting down a note.
+        

+      

+
+      
+      

+        

+          Highlightings
+        

+
+        

+          For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.
+        

+      

+
+      
+      

+        

+          Keybindings
+        

+
+        

+          You can expect common keybindings for scribbler. Customize
+          bindings.json for your own liking!
+        

       

     

-    
Scribbler is a free HTML template created exclusively for Codrops.

-    
-    
-    
-  
+
+    
+    

+      
    
+        
    
+          Default Keybindings
+        
    
+
+        
  • Quit without saving Ctrl+C
    • 
+        
  • Save Cmd+S
    • 
+        
  • Save and Quit Ctrl+D
    • 
+        
  • Undo Cmd+Z
    • 
+      

+
+      
+      
    
+        
    
+          Markdown Keybindings
+        
    
+
+        
  • Ctrl+A Insert Link Markdown
    • 
+        
  • Ctrl+I Insert Image Markdown
    • 
+        
  • Ctrl+V Insert YouTube Video
    • 
+        
  • Ctrl+T Insert Table
    • 
+      

+    

+
+    
+    

+      

+        Read our documentation for advanced keybindings and customization
+      

+
+      
+        Documentation
+      
+    

+  

+
+  
+  

+    

+      

+        Changelog
+      

+
+      
+      

+        

+          

+            v0.7
+          

+
+          
+            10/12/2017
+          
+        

+
+        

+          
    
+            
  • Improving the writing workflow with better key bindings
    • 
+            
  • Design updates
    • 
+            
  • SSL Verification for web hooks
    • 
+            
  • Render Emoji
    • 
+          

+        

+      

+
+      
+      

+        

+          

+            v0.6
+          

+
+          
+            7/30/2017
+          
+        

+
+        

+          
    
+            
  • Adding Unicode support
    • 
+            
  • Basic text highlighting
    • 
+            
  • Fresh Design
    • 
+          

+        

+      

+
+      
+      

+        

+          

+            v0.5
+          

+
+          
+            5/10/2017
+          
+        

+
+        

+          
    
+            
  • Save default md file in new folders
    • 
+            
  • Ability to quick search on existing notes
    • 
+          

+        

+      

+
+      

+        
+          Checkout Full Log
+        
+      

+    

+  

+
+  
+  

+    Scribbler is a free HTML template created exclusively for
+    
+      Codrops
+    .
+  

+
+  
+
+  
+
+  
+
+
 
\ No newline at end of file
diff --git a/scribbler-doc.css b/scribbler-doc.css
index a3f8c96..1d92136 100755
--- a/scribbler-doc.css
+++ b/scribbler-doc.css
@@ -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;
   }
diff --git a/scribbler-global.css b/scribbler-global.css
index f7dca94..8cbd165 100755
--- a/scribbler-global.css
+++ b/scribbler-global.css
@@ -8,25 +8,44 @@
   --white-color: #FAFBFC;
   --light-gray-color: #C6CBD1;
   --medium-gray-color: #959DA5;
-  --dark-gray-color: #444D56; 
+  --dark-gray-color: #444D56;
   --bg-color: #F8F8FA;
   --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);
 }
@@ -53,7 +72,7 @@ hr {
   position: relative;
 }
 
-.tab__container > ul {
+.tab__container>ul {
   position: absolute;
   list-style: none;
   margin: 0;
@@ -72,6 +91,7 @@ hr {
   padding: 0.3rem 0.5rem;
   font-weight: 200;
   cursor: pointer;
+  color: var(--primary-color-light);
 }
 
 .tab.active {
@@ -91,7 +111,7 @@ hr {
 /* code */
 .code {
   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);
   border: 1px solid var(--code-bg-color);
   color: var(--primary-color-light);
@@ -209,7 +229,7 @@ nav {
   bottom: -6px;
 }
 
-.toggle.open span{
+.toggle.open span {
   background-color: transparent;
 }
 
@@ -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);
 }
 
@@ -266,7 +288,7 @@ table td:first-child {
     grid-template-columns: 70px auto;
   }
 
-  .menu__item{
+  .menu__item {
     display: none;
   }
 
@@ -299,15 +321,17 @@ 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 {
   0% {
     opacity: 0;
-    transform: translate3d(0,30px,0);
+    transform: translate3d(0, 30px, 0);
   }
+
   100% {
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
   }
 }
\ No newline at end of file
diff --git a/scribbler-landing.css b/scribbler-landing.css
index fc10a90..11eb0c9 100755
--- a/scribbler-landing.css
+++ b/scribbler-landing.css
@@ -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 {
+
+  .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;
   }

From 64749382677af399dd9c202feb3e9dd8b85213db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Y=C4=B1ld=C4=B1ray=20Ey=C3=BCp=20Erdo=C4=9Fan?=
 
Date: Sat, 12 Mar 2022 18:15:49 +0300
Subject: [PATCH 2/3] Add demo page

---
 README.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 87fbf1a..f13d0b0 100755
--- a/README.md
+++ b/README.md
@@ -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

From 578ebcdaa779866c51eb9aa6eac620135cc3fc24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Y=C4=B1ld=C4=B1ray=20Ey=C3=BCp=20Erdo=C4=9Fan?=
 
Date: Sat, 12 Mar 2022 18:18:00 +0300
Subject: [PATCH 3/3] Add github repo link

---
 doc.html   | 2 +-
 index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc.html b/doc.html
index 8527f6e..948aa39 100755
--- a/doc.html
+++ b/doc.html
@@ -36,7 +36,7 @@
       

 
       
  • 
-        
+        
           
           Github
         
diff --git a/index.html b/index.html
index 48e202d..b68ff4e 100755
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
       
    • 
 
       
  • 
-        
+        
           
           Github