From 960f7b1b0d2e8e958aa4547d489f9b0d1fedbf63 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Mon, 14 Nov 2022 19:54:45 +0300 Subject: [PATCH] editorConfig --- .editorconfig | 20 +++ doc.html | 208 ++++++++++++++-------------- index.html | 310 +++++++++++++++++++++--------------------- scribbler-doc.css | 132 +++++++++--------- scribbler-global.css | 308 ++++++++++++++++++++--------------------- scribbler-landing.css | 188 ++++++++++++------------- 6 files changed, 593 insertions(+), 573 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b470842 --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/doc.html b/doc.html index d28f7c9..b56eea2 100755 --- a/doc.html +++ b/doc.html @@ -1,109 +1,109 @@ - - - - - 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

-
- 
-              
-                $ scribbler  ——config
-                  {
-                    “encryption”: true, 
-                    “highlighting“: true,
-                    “prettyTable”: false,
-                    “font”: [“Helvetica”, “sans-serif”],
-                    “folder”: “~/Desktop“
-                  }
-              
-
-
-
-
-

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.

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

+
+ 
+							
+								$ scribbler  ——config
+									{
+										“encryption”: true,
+										“highlighting“: true,
+										“prettyTable”: false,
+										“font”: [“Helvetica”, “sans-serif”],
+										“folder”: “~/Desktop“
+									}
+							
+
+
+
+
+

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 1433c3a..113380e 100755 --- a/index.html +++ b/index.html @@ -1,159 +1,159 @@ - - - - - Scribbler - a codding landing page template for codrops - - - - - - - - - - -
- -
-
-

Scribbler

-

Take your markdown notes in terminal

-
-
- 
-        
-        hyperyolo ~ $ 
-
-
-
-
-

Installation

-
-
    -
  • linux
    • -
  • win
    • -
  • mac
    • -
- 
-            $  apt-get install scribbler
-            $  gem install scribbler
-            $  brew 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 -
-
-
- - - - - - \ No newline at end of file + + + + + Scribbler - a codding landing page template for codrops + + + + + + + + + + +
+ +
+
+

Scribbler

+

Take your markdown notes in terminal

+
+
+ 
+				
+				hyperyolo ~ $ 
+
+
+
+
+

Installation

+
+
    +
  • linux
    • +
  • win
    • +
  • mac
    • +
+ 
+						$  apt-get install scribbler
+						$  gem install scribbler
+						$  brew 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 +
+
+
+ + + + + + diff --git a/scribbler-doc.css b/scribbler-doc.css index fa65336..4c3a3c9 100755 --- a/scribbler-doc.css +++ b/scribbler-doc.css @@ -1,119 +1,119 @@ html, body { - display: flex; - flex-direction: column; - min-height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; } p { - line-height: 1.5rem; + line-height: 1.5rem; } /* layout */ .header { - border-bottom: 1px solid var(--code-bg-color); - grid-template-columns: 1fr 150px 60% 1fr; + border-bottom: 1px solid var(--code-bg-color); + grid-template-columns: 1fr 150px 60% 1fr; } .wrapper { - display: flex; - flex-grow: 1; + display: flex; + flex-grow: 1; } /* logo */ .logo { - font-weight: 700; - color: var(--primary-color); - font-size: 1.4em; - grid-column: 2; + font-weight: 700; + color: var(--primary-color); + font-size: 1.4em; + grid-column: 2; } .logo__thin { - font-weight: 300; + font-weight: 300; } /* menu */ .menu { - grid-template-columns: 1fr 180px 60% 1fr; + grid-template-columns: 1fr 180px 60% 1fr; } .menu__item { - padding: 1.5rem 1rem; + padding: 1.5rem 1rem; } /* doc */ .doc__bg { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 28%; - background-color: var(--bg-color); - z-index: -1; + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 28%; + background-color: var(--bg-color); + z-index: -1; } .doc__nav { - flex-basis: 20%; - font-weight: 400; + flex-basis: 20%; + font-weight: 400; } .doc__nav ul { - list-style: none; - padding-left: 0; - line-height: 1.8; + list-style: none; + padding-left: 0; + line-height: 1.8; } .doc__nav ul.fixed { - position: fixed; - top: 2rem; + position: fixed; + top: 2rem; } .doc__nav li:hover { - color: var(--primary-color-light); - cursor: pointer; - transition: color .3s ease-in-out; + color: var(--primary-color-light); + cursor: pointer; + transition: color .3s ease-in-out; } .doc__nav .selected { - color: var(--accent-color); - position: relative; + color: var(--accent-color); + position: relative; } .doc__nav .selected:after { - position: absolute; - content: ""; - width: 1rem; - height: 1rem; - background-color: var(--accent-color); - left: -1.5rem; - top: 0.3rem; + position: absolute; + content: ""; + width: 1rem; + height: 1rem; + background-color: var(--accent-color); + left: -1.5rem; + top: 0.3rem; } .doc__content { - flex-basis: 80%; - padding: 0 0 5rem 1rem; + flex-basis: 80%; + padding: 0 0 5rem 1rem; } @media (max-width: 750px) { - .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; - } -} \ No newline at end of file + .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 b5dffb9..05837c7 100755 --- a/scribbler-global.css +++ b/scribbler-global.css @@ -1,313 +1,313 @@ /* css variables*/ :root { - --primary-color: #222f3e; - --primary-color-light: #3d546f; - --accent-color: #0abde3; - --accent-color-light: #8ce7fa; - --accent-color-dark: #0abde4; - --white-color: #FAFBFC; - --light-gray-color: #8395a7; - --medium-gray-color: #5c6f82; - --dark-gray-color: #3c4955; - --bg-color: #F8F8FA; - --code-bg-color: #F0E8E8; + --primary-color: #222f3e; + --primary-color-light: #3d546f; + --accent-color: #0abde3; + --accent-color-light: #8ce7fa; + --accent-color-dark: #0abde4; + --white-color: #FAFBFC; + --light-gray-color: #8395a7; + --medium-gray-color: #5c6f82; + --dark-gray-color: #3c4955; + --bg-color: #F8F8FA; + --code-bg-color: #F0E8E8; } /* normalized */ html, body { - padding: 0; - margin: 0; - font-family: 'Ubuntu', sans-serif; - background-color: white; + padding: 0; + margin: 0; + font-family: 'Ubuntu', sans-serif; + background-color: white; } p { - font-weight: 400; - color: #4A4A4A; + font-weight: 400; + color: #4A4A4A; } a, a:hover { - text-decoration: none; - color: var(--primary-color); + text-decoration: none; + color: var(--primary-color); } hr { - padding: 1rem 0; - border: 0; - border-bottom: 1px solid var(--bg-color); + padding: 1rem 0; + border: 0; + border-bottom: 1px solid var(--bg-color); } * { - box-sizing: border-box; + box-sizing: border-box; } /* global components */ /* typography */ .section__title { - color: var(--primary-color); + color: var(--primary-color); } /* tabs */ .tab__container { - position: relative; + position: relative; } .tab__container > ul { - position: absolute; - list-style: none; - margin: 0; - right: 1rem; - top: -2rem; - padding-left: 0; + position: absolute; + list-style: none; + margin: 0; + right: 1rem; + top: -2rem; + padding-left: 0; } .tab__container .code { - white-space: normal; - padding: 1rem 1.5rem; + white-space: normal; + padding: 1rem 1.5rem; } .tab { - display: inline-block; - padding: 0.3rem 0.5rem; - font-weight: 400; - cursor: pointer; + display: inline-block; + padding: 0.3rem 0.5rem; + font-weight: 400; + cursor: pointer; } .tab.active { - border-bottom: 1px solid var(--primary-color); - font-weight: 700; - display: inline-block; + border-bottom: 1px solid var(--primary-color); + font-weight: 700; + display: inline-block; } .tab__pane { - display: none; + display: none; } .tab__pane.active { - display: block; + display: block; } /* code */ .code { - border-radius: 3px; - 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); + border-radius: 3px; + 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); } .code--block { - white-space: pre-line; - padding: 0 1.5rem; + white-space: pre-line; + padding: 0 1.5rem; } .code--inline { - padding: 3px 6px; - font-size: 80%; + padding: 3px 6px; + font-size: 80%; } /* buttons */ .button--primary { - padding: 10px 22px; - background-color: var(--accent-color); - color: white; - position: relative; - text-decoration: none; - border: 0; - transition: all .3s ease-out; + padding: 10px 22px; + background-color: var(--accent-color); + color: white; + position: relative; + text-decoration: none; + border: 0; + transition: all .3s ease-out; } .button--primary:after { - position: absolute; - content: ""; - width: 1rem; - height: 1rem; - background-color: var(--accent-color-light); - right: -0.4rem; - top: -0.4rem; - transition: all 0.3s ease-out; + position: absolute; + content: ""; + width: 1rem; + height: 1rem; + background-color: var(--accent-color-light); + right: -0.4rem; + top: -0.4rem; + transition: all 0.3s ease-out; } .button--primary:hover { - text-shadow: 0px 1px 1px var(--accent-color-dark); - color: white; - transform: translate3D(0, -3px, 0); + text-shadow: 0px 1px 1px var(--accent-color-dark); + color: white; + transform: translate3D(0, -3px, 0); } .button--primary:hover::after { - transform: rotate(90deg); + transform: rotate(90deg); } .button--secondary { - padding: 10px 22px; - border: 2px solid var(--primary-color); - transition: all 0.5s ease-out; + padding: 10px 22px; + border: 2px solid var(--primary-color); + transition: all 0.5s ease-out; } .button--secondary:hover { - border-color: var(--accent-color); - color: var(--accent-color); + border-color: var(--accent-color); + color: var(--accent-color); } /* links */ .link { - text-decoration: none; - transition: all 0.3s ease-out; + text-decoration: none; + transition: all 0.3s ease-out; } .link:hover { - color: var(--accent-color); + color: var(--accent-color); } .link--dark { - color: var(--primary-color); + color: var(--primary-color); } .link--light { - color: var(--accent-color); + color: var(--accent-color); } /* menu */ nav { - display: grid; - grid-template-columns: 70px auto; + display: grid; + grid-template-columns: 70px auto; } .menu { - margin: 0; - text-align: right; - overflow: hidden; - list-style: none; + margin: 0; + text-align: right; + overflow: hidden; + list-style: none; } .toggle { - display: none; - position: relative; + display: none; + position: relative; } .toggle span, .toggle span:before, .toggle span:after { - content: ''; - position: absolute; - height: 2px; - width: 18px; - border-radius: 2px; - background: var(--primary-color); - display: block; - cursor: pointer; - transition: all 0.3s ease-in-out; - right: 0; + content: ''; + position: absolute; + height: 2px; + width: 18px; + border-radius: 2px; + background: var(--primary-color); + display: block; + cursor: pointer; + transition: all 0.3s ease-in-out; + right: 0; } .toggle span:before { - top: -6px; + top: -6px; } .toggle span:after { - bottom: -6px; + bottom: -6px; } .toggle.open span{ - background-color: transparent; + background-color: transparent; } .toggle.open span:before, .toggle.open span:after { - top: 0; + top: 0; } .toggle.open span:before { - transform: rotate(45deg); + transform: rotate(45deg); } .toggle.open span:after { - transform: rotate(-45deg); + transform: rotate(-45deg); } .menu__item { - padding: 1rem; - display: inline-block; + padding: 1rem; + display: inline-block; } .menu__item.toggle { - display: none; + display: none; } /* table */ table { - border-collapse: collapse; - width: 100%; - transition: color .3s ease-out; - margin-bottom: 2rem; + border-collapse: collapse; + width: 100%; + transition: color .3s ease-out; + margin-bottom: 2rem; } table td, table th { - border: 1px solid var(--code-bg-color); - padding: 0.8rem; - font-weight: 400; + border: 1px solid var(--code-bg-color); + padding: 0.8rem; + font-weight: 400; } table th { - text-align: left; - background-color: white; - border-color: white; - border-bottom-color: var(--code-bg-color); + text-align: left; + background-color: white; + border-color: white; + border-bottom-color: var(--code-bg-color); } table td:first-child { - background-color: var(--bg-color); - font-weight: 700; + background-color: var(--bg-color); + font-weight: 700; } @media screen and (max-width: 600px) { - nav { - grid-template-columns: 70px auto; - } + nav { + grid-template-columns: 70px auto; + } - .menu__item{ - display: none; - } + .menu__item{ + display: none; + } - .menu__item.toggle { - display: inline-block; - } + .menu__item.toggle { + display: inline-block; + } - .menu { - text-align: right; - padding: 0.5rem 1rem; - } + .menu { + text-align: right; + padding: 0.5rem 1rem; + } - .toggle { - display: block; - } + .toggle { + display: block; + } - .menu.responsive .menu__item:not(:first-child) { - display: block; - padding: 0 0 0.5rem 0; - } + .menu.responsive .menu__item:not(:first-child) { + display: block; + padding: 0 0 0.5rem 0; + } } /* layout */ .wrapper { - margin: 0 auto; - width: 70%; + margin: 0 auto; + width: 70%; } .footer { - text-align: center; - background-color: var(--primary-color); - padding: 2rem; - color: white; + text-align: center; + background-color: var(--primary-color); + padding: 2rem; + color: white; } @keyframes fadeUp { - 0% { - opacity: 0; - transform: translate3d(0,30px,0); - } - 100% { - transform: translate3d(0,0,0); - } -} \ No newline at end of file + 0% { + opacity: 0; + transform: translate3d(0,30px,0); + } + 100% { + transform: translate3d(0,0,0); + } +} diff --git a/scribbler-landing.css b/scribbler-landing.css index c3719fd..8eb1601 100755 --- a/scribbler-landing.css +++ b/scribbler-landing.css @@ -1,182 +1,182 @@ /* nav specialized to landing page */ nav { - background-color: var(--bg-color); + background-color: var(--bg-color); } /* hero section */ .hero { - text-align: center; - background-color: var(--bg-color); - padding: 2rem 0 10rem 0; + text-align: center; + background-color: var(--bg-color); + padding: 2rem 0 10rem 0; } .hero__title { - font-weight: 700; - color: var(--primary-color); + font-weight: 700; + color: var(--primary-color); } .hero__description { - margin: -1rem auto 2rem auto; + margin: -1rem auto 2rem auto; } .hero__terminal { - width: 60%; - margin: -11rem auto 3rem auto; - text-align: left; - color: white; - padding: 0 1rem; - border-radius: 4px; - background-color: #232323; - min-height: 285px; - animation: fadeUp 2s; - box-shadow: 0px 12px 36.8px 9.2px rgba(0, 0, 0, 0.1); + width: 60%; + margin: -11rem auto 3rem auto; + text-align: left; + color: white; + padding: 0 1rem; + border-radius: 4px; + background-color: #232323; + min-height: 285px; + animation: fadeUp 2s; + box-shadow: 0px 12px 36.8px 9.2px rgba(0, 0, 0, 0.1); } .hero__terminal pre { - white-space: pre-line; - padding-top: 1rem; + white-space: pre-line; + padding-top: 1rem; } /* changelog section */ .changelog__detail li { - line-height: 1.5rem; + line-height: 1.5rem; } /* feature section */ .feature { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .feature__item { - max-width: calc(33% - 20px); - margin: 0 20px 0 0; + max-width: calc(33% - 20px); + margin: 0 20px 0 0; } .feature__item .section__title { - margin-bottom: 0; + margin-bottom: 0; } .feature__item p { - margin-top: 0.5rem; - line-height: 1.5rem; + margin-top: 0.5rem; + line-height: 1.5rem; } /* keybinding section */ .keybinding { - margin-top: 3rem; - display: flex; + margin-top: 3rem; + display: flex; } .keybinding__detail { - position: relative; - border: 1px solid var(--code-bg-color); - flex-basis: 50%; - padding: 2rem 1rem 1rem 1rem; - list-style: none; - line-height: 2rem; + position: relative; + border: 1px solid var(--code-bg-color); + flex-basis: 50%; + padding: 2rem 1rem 1rem 1rem; + list-style: none; + line-height: 2rem; } .keybinding__detail:first-child { - text-align: right; - padding-right: 1rem; + text-align: right; + padding-right: 1rem; } .keybinding__detail:last-child { - padding-left: 1rem; - margin-left: -1px; + padding-left: 1rem; + margin-left: -1px; } .keybinding__detail:first-child .keybinding__title { - position: absolute; - right: 0.5rem; - top: -2rem; - background-color: white; - padding: 0 0.5rem; + position: absolute; + right: 0.5rem; + top: -2rem; + background-color: white; + padding: 0 0.5rem; } .keybinding__detail:last-child .keybinding__title { - position: absolute; - left: 0.5rem; - top: -2rem; - background-color: white; - padding: 0 0.5rem; + position: absolute; + left: 0.5rem; + top: -2rem; + background-color: white; + padding: 0 0.5rem; } .keybinding__label { - background: var(--white-color); - border: 1px solid var(--light-gray-color); - box-shadow: 0 1px 0 0 var(--medium-gray-color); - border-radius: 3px; - font-family: Courier; - font-size: 0.7rem; - color: var(--dark-gray-color); - padding: 3px 3px 1px 3px; - vertical-align: middle; + background: var(--white-color); + border: 1px solid var(--light-gray-color); + box-shadow: 0 1px 0 0 var(--medium-gray-color); + border-radius: 3px; + font-family: Courier; + font-size: 0.7rem; + color: var(--dark-gray-color); + padding: 3px 3px 1px 3px; + vertical-align: middle; } /* callout section */ .callout { - text-align: center; - padding: 1rem 0 3rem 0; + text-align: center; + padding: 1rem 0 3rem 0; } .callout .button--primary { - display: inline-block; - margin-top: 0.5rem; + display: inline-block; + margin-top: 0.5rem; } /* changelog section */ .changelog { - background-color: var(--bg-color); - padding: 2rem 0; + background-color: var(--bg-color); + padding: 2rem 0; } .changelog__item { - display: flex; + display: flex; } .changelog__meta { - flex-basis: 25%; + flex-basis: 25%; } .changelog__meta small { - color: var(--primary-color-light); - font-weight: 400; - letter-spacing: 1px; + color: var(--primary-color-light); + font-weight: 400; + letter-spacing: 1px; } .changelog__title { - margin-bottom: 0; + margin-bottom: 0; } .changelog__callout { - margin: 3rem auto 2rem auto; - text-align: center; + margin: 3rem auto 2rem auto; + text-align: center; } @media (max-width: 750px) { - .hero__terminal { - width: 70%; - } - .tab__container > ul { - right: auto; - left: 0; - padding-left: 0; - } - .tab__container .code { - margin-top: 2rem; - } - .feature, .keybinding, .changelog__item { - flex-direction: column; - } - .feature__item { - max-width: 100%; - margin: 0; - } - .keybinding { - font-size: 0.8rem; - } -} \ No newline at end of file + .hero__terminal { + width: 70%; + } + .tab__container > ul { + right: auto; + left: 0; + padding-left: 0; + } + .tab__container .code { + margin-top: 2rem; + } + .feature, .keybinding, .changelog__item { + flex-direction: column; + } + .feature__item { + max-width: 100%; + margin: 0; + } + .keybinding { + font-size: 0.8rem; + } +}