├── img ├── demo.PNG └── markdownify-macos.png ├── js ├── ie10-viewport-bug-workaround.js ├── jquery-canvas-sparkles.js ├── bootstrap.min.js ├── highlight.pack.js └── jquery.min.js ├── README.md ├── css ├── darcula.css └── style.css └── index.html /img/demo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amitmerchant1990/responsive-project-landing-page/HEAD/img/demo.PNG -------------------------------------------------------------------------------- /img/markdownify-macos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amitmerchant1990/responsive-project-landing-page/HEAD/img/markdownify-macos.png -------------------------------------------------------------------------------- /js/ie10-viewport-bug-workaround.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * IE10 viewport hack for Surface/desktop Windows 8 bug 3 | * Copyright 2014-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | // See the Getting Started docs for more information: 8 | // http://getbootstrap.com/getting-started/#support-ie10-width 9 | 10 | (function () { 11 | 'use strict'; 12 | 13 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 14 | var msViewportStyle = document.createElement('style') 15 | msViewportStyle.appendChild( 16 | document.createTextNode( 17 | '@-ms-viewport{width:auto!important}' 18 | ) 19 | ) 20 | document.querySelector('head').appendChild(msViewportStyle) 21 | } 22 | 23 | })(); 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Responsive Project Landing Page 2 | ========== 3 | 4 | :question: A responsive project landing page built upon [Bootstrap](http://getbootstrap.com/) which I have handcrafted for one of my projects [Markdownify](https://github.com/amitmerchant1990/electron-markdownify). 5 | 6 | :bulb: Perfect for the Open Source projects which can be described within a single page with a nice screenshot. Such as [GitHub Pages](https://pages.github.com/) and as it is built upon Bootstrap, it can be customizable pretty easily according to your liking. 7 | 8 | :computer: Take a look at the [demo](http://www.amitmerchant.com/responsive-project-landing-page/). 9 | 10 |  11 | 12 | :fork_and_knife: Fork it and play with it! :blush: 13 | 14 | > The "all device" screenshot you're seeing is made using [Am I Responsive?](http://ami.responsivedesign.is/). 15 | 16 | ## Licence 17 | 18 | MIT 19 | -------------------------------------------------------------------------------- /css/darcula.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Darcula color scheme from the JetBrains family of IDEs 4 | 5 | */ 6 | 7 | 8 | .hljs { 9 | display: block; 10 | overflow-x: auto; 11 | padding: 0.5em; 12 | background: #2b2b2b; 13 | } 14 | 15 | .hljs { 16 | color: #bababa; 17 | } 18 | 19 | .hljs-strong, 20 | .hljs-emphasis { 21 | color: #a8a8a2; 22 | } 23 | 24 | .hljs-bullet, 25 | .hljs-quote, 26 | .hljs-link, 27 | .hljs-number, 28 | .hljs-regexp, 29 | .hljs-literal { 30 | color: #6896ba; 31 | } 32 | 33 | .hljs-code, 34 | .hljs-selector-class { 35 | color: #a6e22e; 36 | } 37 | 38 | .hljs-emphasis { 39 | font-style: italic; 40 | } 41 | 42 | .hljs-keyword, 43 | .hljs-selector-tag, 44 | .hljs-section, 45 | .hljs-attribute, 46 | .hljs-name, 47 | .hljs-variable { 48 | color: #cb7832; 49 | } 50 | 51 | .hljs-params { 52 | color: #b9b9b9; 53 | } 54 | 55 | .hljs-string { 56 | color: #6a8759; 57 | } 58 | 59 | .hljs-subst, 60 | .hljs-type, 61 | .hljs-built_in, 62 | .hljs-builtin-name, 63 | .hljs-symbol, 64 | .hljs-selector-id, 65 | .hljs-selector-attr, 66 | .hljs-selector-pseudo, 67 | .hljs-template-tag, 68 | .hljs-template-variable, 69 | .hljs-addition { 70 | color: #e0c46c; 71 | } 72 | 73 | .hljs-comment, 74 | .hljs-deletion, 75 | .hljs-meta { 76 | color: #7f7f7f; 77 | } 78 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | /*text-shadow: #525252 0px 0px 20px;*/ 3 | font-weight: bold; 4 | } 5 | 6 | h4{ 7 | font-weight: bold; 8 | } 9 | 10 | pre { 11 | border: 0; 12 | background-color: transparent; 13 | white-space:nowrap; 14 | } 15 | 16 | .h3, h3 { 17 | font-size: 20px; 18 | font-weight: 600; 19 | } 20 | 21 | .col-md-4 p{ 22 | color: #555; 23 | } 24 | 25 | .credits p{ 26 | color: #555; 27 | } 28 | 29 | .row li{ 30 | color: #555; 31 | } 32 | 33 | .key_features{ 34 | text-shadow: none; 35 | font-weight: bold; 36 | } 37 | 38 | .tagline{ 39 | /*text-shadow: #525252 0px 0px 20px;*/ 40 | } 41 | 42 | .center{ 43 | width:300px; 44 | margin:0 auto; 45 | text-align:left; 46 | } 47 | 48 | .custom-image{ 49 | position: relative; 50 | bottom: -110px; 51 | padding: 40px; 52 | margin: 0 auto; 53 | margin-top: -120px; 54 | width: 900px; 55 | height: auto; 56 | } 57 | 58 | .logo-image{ 59 | width: 70px; 60 | height: auto; 61 | display: initial; 62 | } 63 | 64 | .jumbotron { 65 | padding-top: 0; 66 | color: #ffffff; 67 | background-image: url(https://raw.githubusercontent.com/amitmerchant1990/test/master/northern_lights_iceland_aurora_borealis.jpg); 68 | background-size: cover; 69 | } 70 | 71 | .navbar-fixed-bottom, .navbar-fixed-top { 72 | position: inherit; 73 | } 74 | 75 | .navbar-fixed-bottom, .navbar-fixed-top { 76 | position: inherit; 77 | } 78 | 79 | .navbar { 80 | margin-bottom: 0; 81 | } 82 | 83 | .navbar-inverse { 84 | background-color: #4CAF50; 85 | border-color: #4CAF50; 86 | } 87 | 88 | .navbar-inverse .navbar-brand { 89 | color: #ffffff; 90 | } 91 | 92 | .navbar-header{ 93 | width: 100%; 94 | } 95 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
39 | A minimal Markdown editor 40 |
41 |
49 | Make changes, See changes. Instantly see what your Markdown documents look like in HTML as you create them.
60 |While you type, LivePreview will automatically scroll to the current location you're editing.
64 |The good old GitHub Flavored-style Markdown. So, you don't feel out of the place.
68 |Syntax highlighting in fenced code blocks with language identifiers and Markup languages
74 |Change the color scheme of the editor based on your preferences. i.e to choose between Dark mode/Light mode
78 |Supports emojis in the preview mode for when you need to express yourself via one
82 |To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
120 |
123 |
124 | # Clone this repository
125 | $ git clone https://github.com/amitmerchant1990/electron-markdownify
126 |
127 | # Go into the repository
128 | $ cd electron-markdownify
129 |
130 | # Install dependencies
131 | $ npm install
132 |
133 | # Run the app
134 | $ npm start
135 |
136 |
137 |