├── .gitignore ├── LICENSE ├── README.md ├── dist ├── assets │ └── favicon.ico ├── css │ └── styles.css ├── index.html └── js │ └── scripts.js ├── package-lock.json ├── package.json ├── scripts ├── build-assets.js ├── build-pug.js ├── build-scripts.js ├── build-scss.js ├── clean.js ├── render-assets.js ├── render-pug.js ├── render-scripts.js ├── render-scss.js ├── sb-watch.js ├── start-debug.js └── start.js └── src ├── assets └── favicon.ico ├── js └── scripts.js ├── pug └── index.pug └── scss └── styles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2023 Start Bootstrap LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Start Bootstrap - Blog Post](https://startbootstrap.com/template/blog-post/) 2 | 3 | [Blog Post](https://startbootstrap.com/template/blog-post/) is a basic blog post HTML starter template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). 4 | 5 | ## Preview 6 | 7 | [![Blog Post Preview](https://assets.startbootstrap.com/img/screenshots/templates/blog-post.png)](https://startbootstrap.github.io/startbootstrap-blog-post/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-blog-post/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-blog-post/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-blog-post.svg)](https://www.npmjs.com/package/startbootstrap-blog-post) 15 | 16 | ## Download and Installation 17 | 18 | To begin using this template, choose one of the following options to get started: 19 | 20 | * [Download the latest release on Start Bootstrap](https://startbootstrap.com/template/blog-post/) 21 | * Install via npm: `npm i startbootstrap-blog-post` 22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-blog-post.git` 23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-blog-post) 24 | 25 | ## Usage 26 | 27 | ### Basic Usage 28 | 29 | After downloading, simply edit the HTML and CSS files included with `dist` directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser. 30 | 31 | ### Advanced Usage 32 | 33 | Clone the source files of the theme and navigate into the theme's root directory. Run `npm install` and then run `npm start` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `package.json` file to see which scripts are included. 34 | 35 | #### npm Scripts 36 | 37 | * `npm run build` builds the project - this builds assets, HTML, JS, and CSS into `dist` 38 | * `npm run build:assets` copies the files in the `src/assets/` directory into `dist` 39 | * `npm run build:pug` compiles the Pug located in the `src/pug/` directory into `dist` 40 | * `npm run build:scripts` brings the `src/js/scripts.js` file into `dist` 41 | * `npm run build:scss` compiles the SCSS files located in the `src/scss/` directory into `dist` 42 | * `npm run clean` deletes the `dist` directory to prepare for rebuilding the project 43 | * `npm run start:debug` runs the project in debug mode 44 | * `npm start` or `npm run start` runs the project, launches a live preview in your default browser, and watches for changes made to files in `src` 45 | 46 | You must have npm installed in order to use this build environment. 47 | 48 | ## Bugs and Issues 49 | 50 | Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-blog-post/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/template/blog-post/). 51 | 52 | ## About 53 | 54 | Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects. 55 | 56 | * 57 | * 58 | 59 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**. 60 | 61 | * 62 | * 63 | * 64 | 65 | Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat). 66 | 67 | ## Copyright and License 68 | 69 | Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-blog-post/blob/master/LICENSE) license. 70 | -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-blog-post/85c4c8d10116d67b8c8af8c11970bb0cafd93be4/dist/assets/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Blog Post - Start Bootstrap Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 30 | 31 |
32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 |

Welcome to Blog Post!

40 | 41 |
Posted on January 1, 2023 by Start Bootstrap
42 | 43 | Web Design 44 | Freebies 45 |
46 | 47 |
...
48 | 49 |
50 |

Science is an enterprise that should be cherished as an activity of the free human mind. Because it transforms who we are, how we live, and it gives us an understanding of our place in the universe.

51 |

The universe is large and old, and the ingredients for life as we know it are everywhere, so there's no reason to think that Earth would be unique in that regard. Whether of not the life became intelligent is a different question, and we'll see if we find that.

52 |

If you get asteroids about a kilometer in size, those are large enough and carry enough energy into our system to disrupt transportation, communication, the food chains, and that can be a really bad day on Earth.

53 |

I have odd cosmic thoughts every day

54 |

For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested.

55 |

Venus has a runaway greenhouse effect. I kind of want to know what happened there because we're twirling knobs here on Earth without knowing the consequences of it. Mars once had running water. It's bone dry today. Something bad happened there as well.

56 |
57 |
58 | 59 |
60 |
61 |
62 | 63 |
64 | 65 |
66 | 67 |
...
68 |
69 |
Commenter Name
70 | If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks. 71 | 72 |
73 |
...
74 |
75 |
Commenter Name
76 | And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors. 77 |
78 |
79 | 80 |
81 |
...
82 |
83 |
Commenter Name
84 | When you put money directly to a problem, it makes a good headline. 85 |
86 |
87 |
88 |
89 | 90 |
91 |
...
92 |
93 |
Commenter Name
94 | When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence. 95 |
96 |
97 |
98 |
99 |
100 |
101 | 102 |
103 | 104 |
105 |
Search
106 |
107 |
108 | 109 | 110 |
111 |
112 |
113 | 114 |
115 |
Categories
116 |
117 |
118 |
119 | 124 |
125 |
126 | 131 |
132 |
133 |
134 |
135 | 136 |
137 |
Side Widget
138 |
You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!
139 |
140 |
141 |
142 |
143 | 144 |
145 |

Copyright © Your Website 2023

146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Blog Post v5.0.9 (https://startbootstrap.com/template/blog-post) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-blog-post/blob/master/LICENSE) 5 | */ 6 | // This file is intentionally blank 7 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Blog Post", 3 | "name": "startbootstrap-blog-post", 4 | "version": "5.0.9", 5 | "scripts": { 6 | "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets", 7 | "build:assets": "node scripts/build-assets.js", 8 | "build:pug": "node scripts/build-pug.js", 9 | "build:scripts": "node scripts/build-scripts.js", 10 | "build:scss": "node scripts/build-scss.js", 11 | "clean": "node scripts/clean.js", 12 | "start": "npm run build && node scripts/start.js", 13 | "start:debug": "npm run build && node scripts/start-debug.js" 14 | }, 15 | "description": "A basic blog post HTML template built with Bootstrap", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template" 23 | ], 24 | "homepage": "https://startbootstrap.com/template/blog-post", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-blog-post/issues", 27 | "email": "feedback@startbootstrap.com" 28 | }, 29 | "license": "MIT", 30 | "author": "Start Bootstrap", 31 | "contributors": [ 32 | "David Miller (https://davidmiller.io/)" 33 | ], 34 | "repository": { 35 | "type": "git", 36 | "url": "https://github.com/StartBootstrap/startbootstrap-blog-post.git" 37 | }, 38 | "dependencies": { 39 | "bootstrap": "5.2.3" 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "10.4.14", 43 | "browser-sync": "2.29.1", 44 | "chokidar": "3.5.3", 45 | "concurrently": "6.3.0", 46 | "postcss": "8.4.21", 47 | "prettier": "2.8.6", 48 | "pug": "3.0.2", 49 | "sass": "1.60.0", 50 | "shelljs": "0.8.5", 51 | "upath": "2.0.1" 52 | } 53 | } -------------------------------------------------------------------------------- /scripts/build-assets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderAssets = require('./render-assets'); 4 | 5 | renderAssets(); -------------------------------------------------------------------------------- /scripts/build-pug.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const upath = require('upath'); 3 | const sh = require('shelljs'); 4 | const renderPug = require('./render-pug'); 5 | 6 | const srcPath = upath.resolve(upath.dirname(__filename), '../src'); 7 | 8 | sh.find(srcPath).forEach(_processFile); 9 | 10 | function _processFile(filePath) { 11 | if ( 12 | filePath.match(/\.pug$/) 13 | && !filePath.match(/include/) 14 | && !filePath.match(/mixin/) 15 | && !filePath.match(/\/pug\/layouts\//) 16 | ) { 17 | renderPug(filePath); 18 | } 19 | } -------------------------------------------------------------------------------- /scripts/build-scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderScripts = require('./render-scripts'); 4 | 5 | renderScripts(); -------------------------------------------------------------------------------- /scripts/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderSCSS = require('./render-scss'); 4 | 5 | renderSCSS(); 6 | -------------------------------------------------------------------------------- /scripts/clean.js: -------------------------------------------------------------------------------- 1 | const sh = require('shelljs'); 2 | const upath = require('upath'); 3 | 4 | const destPath = upath.resolve(upath.dirname(__filename), '../dist'); 5 | 6 | sh.rm('-rf', `${destPath}/*`) 7 | 8 | -------------------------------------------------------------------------------- /scripts/render-assets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const upath = require('upath'); 4 | const sh = require('shelljs'); 5 | 6 | module.exports = function renderAssets() { 7 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/assets'); 8 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.'); 9 | 10 | sh.cp('-R', sourcePath, destPath) 11 | }; -------------------------------------------------------------------------------- /scripts/render-pug.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const upath = require('upath'); 4 | const pug = require('pug'); 5 | const sh = require('shelljs'); 6 | const prettier = require('prettier'); 7 | 8 | module.exports = function renderPug(filePath) { 9 | const destPath = filePath.replace(/src\/pug\//, 'dist/').replace(/\.pug$/, '.html'); 10 | const srcPath = upath.resolve(upath.dirname(__filename), '../src'); 11 | 12 | console.log(`### INFO: Rendering ${filePath} to ${destPath}`); 13 | const html = pug.renderFile(filePath, { 14 | doctype: 'html', 15 | filename: filePath, 16 | basedir: srcPath 17 | }); 18 | 19 | const destPathDirname = upath.dirname(destPath); 20 | if (!sh.test('-e', destPathDirname)) { 21 | sh.mkdir('-p', destPathDirname); 22 | } 23 | 24 | const prettified = prettier.format(html, { 25 | printWidth: 1000, 26 | tabWidth: 4, 27 | singleQuote: true, 28 | proseWrap: 'preserve', 29 | endOfLine: 'lf', 30 | parser: 'html', 31 | htmlWhitespaceSensitivity: 'ignore' 32 | }); 33 | 34 | fs.writeFileSync(destPath, prettified); 35 | }; 36 | -------------------------------------------------------------------------------- /scripts/render-scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const packageJSON = require('../package.json'); 4 | const upath = require('upath'); 5 | const sh = require('shelljs'); 6 | 7 | module.exports = function renderScripts() { 8 | 9 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/js'); 10 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.'); 11 | 12 | sh.cp('-R', sourcePath, destPath) 13 | 14 | const sourcePathScriptsJS = upath.resolve(upath.dirname(__filename), '../src/js/scripts.js'); 15 | const destPathScriptsJS = upath.resolve(upath.dirname(__filename), '../dist/js/scripts.js'); 16 | 17 | const copyright = `/*! 18 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage}) 19 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author} 20 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE) 21 | */ 22 | ` 23 | const scriptsJS = fs.readFileSync(sourcePathScriptsJS); 24 | 25 | fs.writeFileSync(destPathScriptsJS, copyright + scriptsJS); 26 | }; -------------------------------------------------------------------------------- /scripts/render-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const autoprefixer = require('autoprefixer') 3 | const fs = require('fs'); 4 | const packageJSON = require('../package.json'); 5 | const upath = require('upath'); 6 | const postcss = require('postcss') 7 | const sass = require('sass'); 8 | const sh = require('shelljs'); 9 | 10 | const stylesPath = '../src/scss/styles.scss'; 11 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/css/styles.css'); 12 | 13 | module.exports = function renderSCSS() { 14 | 15 | const results = sass.renderSync({ 16 | data: entryPoint, 17 | includePaths: [ 18 | upath.resolve(upath.dirname(__filename), '../node_modules') 19 | ], 20 | }); 21 | 22 | const destPathDirname = upath.dirname(destPath); 23 | if (!sh.test('-e', destPathDirname)) { 24 | sh.mkdir('-p', destPathDirname); 25 | } 26 | 27 | postcss([ autoprefixer ]).process(results.css, {from: 'styles.css', to: 'styles.css'}).then(result => { 28 | result.warnings().forEach(warn => { 29 | console.warn(warn.toString()) 30 | }) 31 | fs.writeFileSync(destPath, result.css.toString()); 32 | }) 33 | 34 | }; 35 | 36 | const entryPoint = `/*! 37 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage}) 38 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author} 39 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE) 40 | */ 41 | @import "${stylesPath}" 42 | ` -------------------------------------------------------------------------------- /scripts/sb-watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const _ = require('lodash'); 4 | const chokidar = require('chokidar'); 5 | const upath = require('upath'); 6 | const renderAssets = require('./render-assets'); 7 | const renderPug = require('./render-pug'); 8 | const renderScripts = require('./render-scripts'); 9 | const renderSCSS = require('./render-scss'); 10 | 11 | const watcher = chokidar.watch('src', { 12 | persistent: true, 13 | }); 14 | 15 | let READY = false; 16 | 17 | process.title = 'pug-watch'; 18 | process.stdout.write('Loading'); 19 | let allPugFiles = {}; 20 | 21 | watcher.on('add', filePath => _processFile(upath.normalize(filePath), 'add')); 22 | watcher.on('change', filePath => _processFile(upath.normalize(filePath), 'change')); 23 | watcher.on('ready', () => { 24 | READY = true; 25 | console.log(' READY TO ROLL!'); 26 | }); 27 | 28 | _handleSCSS(); 29 | 30 | function _processFile(filePath, watchEvent) { 31 | 32 | if (!READY) { 33 | if (filePath.match(/\.pug$/)) { 34 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) { 35 | allPugFiles[filePath] = true; 36 | } 37 | } 38 | process.stdout.write('.'); 39 | return; 40 | } 41 | 42 | console.log(`### INFO: File event: ${watchEvent}: ${filePath}`); 43 | 44 | if (filePath.match(/\.pug$/)) { 45 | return _handlePug(filePath, watchEvent); 46 | } 47 | 48 | if (filePath.match(/\.scss$/)) { 49 | if (watchEvent === 'change') { 50 | return _handleSCSS(filePath, watchEvent); 51 | } 52 | return; 53 | } 54 | 55 | if (filePath.match(/src\/js\//)) { 56 | return renderScripts(); 57 | } 58 | 59 | if (filePath.match(/src\/assets\//)) { 60 | return renderAssets(); 61 | } 62 | 63 | } 64 | 65 | function _handlePug(filePath, watchEvent) { 66 | if (watchEvent === 'change') { 67 | if (filePath.match(/includes/) || filePath.match(/mixins/) || filePath.match(/\/pug\/layouts\//)) { 68 | return _renderAllPug(); 69 | } 70 | return renderPug(filePath); 71 | } 72 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) { 73 | return renderPug(filePath); 74 | } 75 | } 76 | 77 | function _renderAllPug() { 78 | console.log('### INFO: Rendering All'); 79 | _.each(allPugFiles, (value, filePath) => { 80 | renderPug(filePath); 81 | }); 82 | } 83 | 84 | function _handleSCSS() { 85 | renderSCSS(); 86 | } -------------------------------------------------------------------------------- /scripts/start-debug.js: -------------------------------------------------------------------------------- 1 | const concurrently = require('concurrently'); 2 | const upath = require('upath'); 3 | 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync'); 5 | 6 | concurrently([ 7 | { command: 'node --inspect scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' }, 8 | { 9 | command: `${browserSyncPath} dist -w --no-online`, 10 | name: 'SB_BROWSER_SYNC', 11 | prefixColor: 'bgBlue.bold', 12 | } 13 | ], { 14 | prefix: 'name', 15 | killOthers: ['failure', 'success'], 16 | }).then(success, failure); 17 | 18 | function success() { 19 | console.log('Success'); 20 | } 21 | 22 | function failure() { 23 | console.log('Failure'); 24 | } -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | const concurrently = require('concurrently'); 2 | const upath = require('upath'); 3 | 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync'); 5 | 6 | concurrently([ 7 | { command: 'node scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' }, 8 | { 9 | command: `"${browserSyncPath}" --reload-delay 2000 --reload-debounce 2000 dist -w --no-online`, 10 | name: 'SB_BROWSER_SYNC', 11 | prefixColor: 'bgGreen.bold', 12 | } 13 | ], { 14 | prefix: 'name', 15 | killOthers: ['failure', 'success'], 16 | }).then(success, failure); 17 | 18 | function success() { 19 | console.log('Success'); 20 | } 21 | 22 | function failure() { 23 | console.log('Failure'); 24 | } -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-blog-post/85c4c8d10116d67b8c8af8c11970bb0cafd93be4/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | // This file is intentionally blank 2 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /src/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | 4 | head 5 | 6 | meta(charset='utf-8') 7 | meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') 8 | meta(name='description', content='') 9 | meta(name='author', content='') 10 | 11 | title Blog Post - Start Bootstrap Template 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | // Core theme CSS (includes Bootstrap) 17 | link(href='css/styles.css', rel='stylesheet') 18 | 19 | body 20 | 21 | // Responsive navbar 22 | nav.navbar.navbar-expand-lg.navbar-dark.bg-dark 23 | .container 24 | a.navbar-brand(href='#!') Start Bootstrap 25 | button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarSupportedContent', aria-controls='navbarSupportedContent', aria-expanded='false', aria-label='Toggle navigation') 26 | span.navbar-toggler-icon 27 | #navbarSupportedContent.collapse.navbar-collapse 28 | ul.navbar-nav.ms-auto.mb-2.mb-lg-0 29 | li.nav-item 30 | a.nav-link(href='#') Home 31 | li.nav-item 32 | a.nav-link(href='#!') About 33 | li.nav-item 34 | a.nav-link(href='#!') Contact 35 | li.nav-item 36 | a.nav-link.active(aria-current='page', href='#') Blog 37 | 38 | // Page content 39 | .container.mt-5 40 | .row 41 | 42 | .col-lg-8 43 | 44 | // Post content 45 | article 46 | 47 | // Post header 48 | header.mb-4 49 | 50 | // Post title 51 | h1.fw-bolder.mb-1 Welcome to Blog Post! 52 | 53 | // Post meta content 54 | .text-muted.fst-italic.mb-2 Posted on January 1, 2023 by Start Bootstrap 55 | 56 | // Post categories 57 | a.badge.bg-secondary.text-decoration-none.link-light(href='#!') Web Design 58 | a.badge.bg-secondary.text-decoration-none.link-light(href='#!') Freebies 59 | 60 | // Preview image figure 61 | figure.mb-4 62 | img.img-fluid.rounded(src='https://dummyimage.com/900x400/ced4da/6c757d.jpg', alt='...') 63 | 64 | // Post content 65 | section.mb-5 66 | 67 | p.fs-5.mb-4 Science is an enterprise that should be cherished as an activity of the free human mind. Because it transforms who we are, how we live, and it gives us an understanding of our place in the universe. 68 | p.fs-5.mb-4 The universe is large and old, and the ingredients for life as we know it are everywhere, so there's no reason to think that Earth would be unique in that regard. Whether of not the life became intelligent is a different question, and we'll see if we find that. 69 | p.fs-5.mb-4 If you get asteroids about a kilometer in size, those are large enough and carry enough energy into our system to disrupt transportation, communication, the food chains, and that can be a really bad day on Earth. 70 | h2.fw-bolder.mb-4.mt-5 I have odd cosmic thoughts every day 71 | p.fs-5.mb-4 For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested. 72 | p.fs-5.mb-4 Venus has a runaway greenhouse effect. I kind of want to know what happened there because we're twirling knobs here on Earth without knowing the consequences of it. Mars once had running water. It's bone dry today. Something bad happened there as well. 73 | 74 | // Comments section 75 | section.mb-5 76 | .card.bg-light 77 | .card-body 78 | 79 | // Comment form 80 | form.mb-4 81 | textarea.form-control(rows='3', placeholder='Join the discussion and leave a comment!') 82 | 83 | // Comment with nested comments 84 | .d-flex.mb-4 85 | 86 | // Parent comment 87 | .flex-shrink-0 88 | img.rounded-circle(src='https://dummyimage.com/50x50/ced4da/6c757d.jpg', alt='...') 89 | .ms-3 90 | .fw-bold Commenter Name 91 | | If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks. 92 | 93 | // Child comment 1 94 | .d-flex.mt-4 95 | .flex-shrink-0 96 | img.rounded-circle(src='https://dummyimage.com/50x50/ced4da/6c757d.jpg', alt='...') 97 | .ms-3 98 | .fw-bold Commenter Name 99 | | And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors. 100 | 101 | // Child comment 2 102 | .d-flex.mt-4 103 | .flex-shrink-0 104 | img.rounded-circle(src='https://dummyimage.com/50x50/ced4da/6c757d.jpg', alt='...') 105 | .ms-3 106 | .fw-bold Commenter Name 107 | | When you put money directly to a problem, it makes a good headline. 108 | 109 | // Single comment 110 | .d-flex 111 | .flex-shrink-0 112 | img.rounded-circle(src='https://dummyimage.com/50x50/ced4da/6c757d.jpg', alt='...') 113 | .ms-3 114 | .fw-bold Commenter Name 115 | | When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence. 116 | 117 | // Side widgets 118 | .col-lg-4 119 | 120 | // Search widget 121 | .card.mb-4 122 | .card-header Search 123 | .card-body 124 | .input-group 125 | input.form-control(type='text', placeholder='Enter search term...', aria-label='Enter search term...', aria-describedby='button-search') 126 | button#button-search.btn.btn-primary(type='button') Go! 127 | 128 | // Categories widget 129 | .card.mb-4 130 | .card-header Categories 131 | .card-body 132 | .row 133 | .col-sm-6 134 | ul.list-unstyled.mb-0 135 | li 136 | a(href='#!') Web Design 137 | li 138 | a(href='#!') HTML 139 | li 140 | a(href='#!') Freebies 141 | .col-sm-6 142 | ul.list-unstyled.mb-0 143 | li 144 | a(href='#!') JavaScript 145 | li 146 | a(href='#!') CSS 147 | li 148 | a(href='#!') Tutorials 149 | 150 | // Side widget 151 | .card.mb-4 152 | .card-header Side Widget 153 | .card-body 154 | | You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component! 155 | 156 | // Footer 157 | footer.py-5.bg-dark 158 | .container 159 | p.m-0.text-center.text-white Copyright © Your Website 2023 160 | 161 | // Bootstrap core JS 162 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') 163 | 164 | // Core theme JS 165 | script(src='js/scripts.js') 166 | -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // Import Bootstrap 2 | @import "bootstrap/scss/bootstrap.scss"; --------------------------------------------------------------------------------