Switch to Bootstrap 4.5.2 and sync repo with CNCF template project (#6)

.gitignore

@@ -4,3 +4,7 @@ resources/
 
 # npm assets
 node_modules/
+
+# files
+package-lock.json
+yarn.lock

Makefile

@@ -1,7 +1,8 @@
 yarn:
 	yarn
 
-serve: yarn
+serve: 
+	yarn
 	hugo server \
 		--buildDrafts \
 		--buildFuture \

README.md

@@ -4,7 +4,7 @@ This repository contains a boilerplate static site generator setup for creating
 
 The starter uses the following:
 * **[Hugo](https://gohugo.io/)** as a static site generator
-* **[Bulma](https://bulma.io/)** as a CSS framework
+* **[Bootstrap 4.5.x](https://getbootstrap.com/docs/4.5/getting-started/introduction/)** as a CSS framework
 * **[Netlify](https://www.netlify.com/)** for building, hosting, and DNS management
 
 ## Running locally
@@ -43,4 +43,4 @@ This repository has two layouts with minimal styling, all stored under `/layouts
   * The `single.html` file and partials in the `/partials/docs` directory
   * Classes in the `/assets/sass/helpers.sass` and `/assets/sass/_docs.sass` files
 
-Both use default components and styling from the Bulma CSS framework. No menus are structured, because menu structure is highly dependant on the nature of the project.
+Both use default components and styling from the Bootstrap CSS framework. No menus are structured, because menu structure is highly dependent on the nature of the project.

assets/sass/custom.sass

@@ -0,0 +1,100 @@
+// Custom.scss
+@charset "utf-8"
+
+{{ $extraColors := site.Params.colors.extra }}
+{{ $fontAwesomeVersion := site.Params.font_awesome_version }}
+{{ $fonts := site.Params.fonts }}
+
+{{ with $fontAwesomeVersion }}
+{{ $fontAwesomeUrl := printf "https://use.fontawesome.com/releases/v%s/css/all.css" . }}
+@import url("{{ $fontAwesomeUrl }}")
+{{ end }}
+
+{{ if $fonts }}
+{{ $fontSlice := (slice) }}
+{{ range $fonts }}
+{{ $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }}
+{{ end }}
+{{ $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
+@import url("{{ $fontsUrl }}")
+{{ end }}
+
+
+// Required
+@import "bootstrap/scss/functions" 
+@import "bootstrap/scss/variables" 
+@import "bootstrap/scss/mixins" 
+@import "bootstrap/scss/root" 
+
+//Optional
+@import "bootstrap/scss/reboot" 
+@import "bootstrap/scss/type" 
+@import "bootstrap/scss/images" 
+@import "bootstrap/scss/code" 
+@import "bootstrap/scss/grid" 
+@import "bootstrap/scss/tables" 
+@import "bootstrap/scss/forms" 
+@import "bootstrap/scss/buttons" 
+@import "bootstrap/scss/transitions" 
+@import "bootstrap/scss/dropdown" 
+//@import "bootstrap/scss/button-group" 
+//@import "bootstrap/scss/input-group" 
+//@import "bootstrap/scss/custom-forms" 
+@import "bootstrap/scss/nav" 
+@import "bootstrap/scss/navbar" 
+//@import "bootstrap/scss/card" 
+//@import "bootstrap/scss/breadcrumb" 
+//@import "bootstrap/scss/pagination" 
+//@import "bootstrap/scss/badge" 
+@import "bootstrap/scss/jumbotron" 
+//@import "bootstrap/scss/alert" 
+//@import "bootstrap/scss/progress" 
+//@import "bootstrap/scss/media" 
+//@import "bootstrap/scss/list-group" 
+//@import "bootstrap/scss/close" 
+//@import "bootstrap/scss/toasts" 
+//@import "bootstrap/scss/modal" 
+//@import "bootstrap/scss/tooltip" 
+//@import "bootstrap/scss/popover" 
+//@import "bootstrap/scss/carousel" 
+//@import "bootstrap/scss/spinners" 
+@import "bootstrap/scss/utilities" 
+//@import "bootstrap/scss/print" 
+
+
+// Custom
+
+$font-family-headers: "Fira Sans" 
+
+.breadcrumb 
+  li
+    list-style: none
+    display: inline
+  ul
+    padding-left: 0
+
+.hashlink 
+  font-size: smaller !important
+
+.highlight pre 
+  padding: 0.5rem
+  border-radius: 5px 
+
+.content 
+  table 
+    @extend .table
+
+  img 
+    @extend .img-fluid
+
+h1, h2, h3, h4, h5, h6 
+  font-family: $font-family-headers
+  scroll-margin-top: 5rem
+  margin-top: 1.8rem
+
+nav 
+  ul 
+    list-style-type: none
+    padding-left: 0
+    ul
+      padding-left: 1.5rem

config.toml

@@ -17,14 +17,10 @@ contentDir = "/content/"
 [params.logos]
 navbar = "cncf-color.png"
 
-[[params.colors.extra]]
-name = "twitter-blue"
-hex = "#00aced"
-
 [[params.social]]
 name = "Twitter"
-color = "twitter-blue"
-url = "https://twitter.com/dexidp"
+color = "#00aced"
+url = "https://twitter.com/CloudNativeFdn"
 icon = "fab fa-twitter"
 
 [[params.fonts]]

content/_index.md

@@ -8,7 +8,7 @@ This is *not* a full-fledged Hugo theme! It's just a convenient way to get start
 
 * A [Netlify](https://netlify.com) configuration for easy deployment, plus deploy previews
 * Some baseline [Hugo](https://gohugo.io) scaffolding
-* The [Bulma](https://bulma.io) CSS framework
+* The [Bootstrap 4.5.x](https://getbootstrap.com/docs/4.5/getting-started/introduction/) CSS framework
 * An example Hugo configuration with:
   * A main menu
   * Specified sans-serif and monospace fonts

content/test-content/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Docs Index"
+description: "index of the docs section"
+date: 2020-01-07T14:59:38+01:00
+toc: true
+---
+
+This is index content

content/test-content/docs-section-1/_index.md

@@ -0,0 +1,37 @@
+---
+title: "Section 1 index"
+description: "Example description text, lorem ipsum dolor sit amet make it look good"
+date: 2020-01-07T14:59:38+01:00
+draft: true
+toc: true
+weight: 1
+---
+
+## Section 1 {#section-1}
+
+Meow
+
+## Section 2
+
+Meow Meow
+
+- this
+- is
+- a
+- list
+
+### Subsection 1
+
+Mmeow
+
+### Subsection 2 1 with a very very long title  1 with a very very long title  1 with a very very long title
+
+Mmmeow
+
+#### Subsubsection 1 with a very very long title
+
+Hello world `code`
+
+```shell
+codeblock
+```

content/test-content/docs-section-1/subsection-page-2.md

@@ -0,0 +1,37 @@
+---
+title: "Section 1 Child Page 2"
+description: "Example description text, lorem ipsum dolor sit amet make it look good"
+date: 2020-01-07T14:59:38+01:00
+draft: true
+toc: true
+weight: 3
+---
+
+## Section 1 {#section-1}
+
+Meow
+
+## Section 2
+
+Meow Meow
+
+- this
+- is
+- a
+- list
+
+### Subsection 1
+
+Mmeow
+
+### Subsection 2 1 with a very very long title  1 with a very very long title  1 with a very very long title
+
+Mmmeow
+
+#### Subsubsection 1 with a very very long title
+
+Hello world `code`
+
+```shell
+codeblock
+```

content/test-content/docs-section-1/subsection-page.md

@@ -0,0 +1,37 @@
+---
+title: "Section 1 Child Page 1"
+description: "Example description text, lorem ipsum dolor sit amet make it look good"
+date: 2020-01-07T14:59:38+01:00
+draft: true
+toc: true
+weight: 2
+---
+
+## Section 1 {#section-1}
+
+Meow
+
+## Section 2
+
+Meow Meow
+
+- this
+- is
+- a
+- list
+
+### Subsection 1
+
+Mmeow
+
+### Subsection 2 1 with a very very long title  1 with a very very long title  1 with a very very long title
+
+Mmmeow
+
+#### Subsubsection 1 with a very very long title
+
+Hello world `code`
+
+```shell
+codeblock
+```

content/test-content/docs-section-2/_index.md

@@ -0,0 +1,4 @@
+---
+Title: "Section 2 index"
+weight: 20
+---

content/test-content/docs-section-3/_index.md

@@ -0,0 +1,3 @@
+---
+Title: "Section 3 index"
+---

content/test-content/my-docs.md

@@ -0,0 +1,37 @@
+---
+title: "Content page in `/docs`"
+description: "Example description text, lorem ipsum dolor sit amet make it look good"
+date: 2020-01-07T14:59:38+01:00
+draft: true
+toc: true
+weight: 20
+---
+
+## Section 1 {#section-1}
+
+Meow
+
+## Section 2
+
+Meow Meow
+
+- this
+- is
+- a
+- list
+
+### Subsection 1
+
+Mmeow
+
+### Subsection 2 1 with a very very long title  1 with a very very long title  1 with a very very long title
+
+Mmmeow
+
+#### Subsubsection 1 with a very very long title
+
+Hello world `code`
+
+```shell
+codeblock
+```