deps: update to bootstrap 5

gethyas · Dec 18, 2020 · 1393d10 · 1393d10
1 parent 684b272
commit 1393d10
Show file tree

Hide file tree

Showing 21 changed files with 4,582 additions and 1,377 deletions.
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -13,7 +13,7 @@
 @import "components/alerts";
 @import "components/buttons";
 @import "components/code";
-@import "components/syntax";
+// @import "components/syntax";
 @import "components/comments";
 @import "components/forms";
 @import "components/images";

diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss
@@ -69,3 +69,7 @@ h6,
   height: 2rem;
   vertical-align: text-top;
 }
+
+.monospace {
+  font-family: $font-family-code;
+}
diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
@@ -1,8 +1,16 @@
 // Color system
 
-$purple:  #3c48d5;
-
-$primary:   $purple;
+$blue:        #0366d6;
+$white:       #fff;
+$black:       #333;
+$gray-darker: #586069;
+$gray-dark:   #6a737d;
+$gray:        #dfe2e5;
+$gray-200: #f6f8fa;
+$gray-light:  #fafbfc;
+$blue-dark:   #038;
+
+$primary:   $blue;
 
 /** Bootstrap navbar fix (https://git.io/fADqW) */
 $navbar-dark-toggler-icon-bg: none;
@@ -22,15 +30,20 @@ $grid-columns:                12;
 $grid-gutter-width:           48px;
 $grid-row-columns:            6;
 
+// Prefix for :root CSS variables
+
+$variable-prefix:             bs-;
+
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-family-base:            $font-family-sans-serif;
 // stylelint-enable value-keyword-case
+$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
+$font-family-code:            var(--#{$variable-prefix}font-monospace);
 
 $font-size-base:              1rem; // Assumes the browser default, typically `16px`
 $font-size-xl:                $font-size-base * 1.375;
@@ -40,8 +53,9 @@ $font-size-sm:                $font-size-base * 0.875;
 
 $line-height-base:            1.5;
 
-$headings-font-family:        null;
+$headings-font-family:        "Inter", $font-family-sans-serif;
 $headings-font-weight:        500;
+$headings-line-height:        1.3;
 
 // Spacing
 //
@@ -54,7 +68,7 @@ $spacer: 1rem;
 // Navbar
 
 $navbar-padding-y:                  $spacer * 1.5;
-$navbar-padding-x:                  $spacer * 1.5;
+$navbar-padding-x:                  $spacer;
 
 // Alerts
 //
@@ -70,3 +84,16 @@ $alert-border-width:                0;
 $alert-bg-level:                    0;
 $alert-border-level:                0;
 $alert-color-level:                 0;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              $primary;
+$link-decoration:                         none;
+$link-shade-percentage:                   20%;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage);
+$link-hover-decoration:                   underline;
+
+$stretched-link-pseudo-element:           after;
+$stretched-link-z-index:                  1;
diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss
@@ -1,8 +1,3 @@
-.highlight {
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-}
-
 pre,
 code,
 kbd,
@@ -12,8 +7,8 @@ samp {
 }
 
 pre {
-  background: $gray-900;
-  color: $white;
+  background: $gray-200;
+  color: $gray-900;
   line-height: $line-height-lg;
   margin: 2rem 0;
   overflow: auto;
@@ -34,5 +29,5 @@ pre code {
 }
 
 code a {
-  border-bottom-color: $gray-900;
+  border-bottom-color: $gray-200;
 }
diff --git a/assets/scss/components/_comments.scss b/assets/scss/components/_comments.scss
@@ -7,7 +7,7 @@
 }
 
 .comment-form p {
-  @extend .form-group;
+  @extend .form-group !optional;
 }
 
 .comment-form input[type="text"],

diff --git a/assets/scss/components/_forms.scss b/assets/scss/components/_forms.scss
@@ -1,6 +1,6 @@
 /** Search form */
 .search-form {
-  @extend .form-inline;
+  @extend .form-inline !optional;
 }
 
 .search-form label {

diff --git a/config/_default/config.toml b/config/_default/config.toml
@@ -82,3 +82,6 @@ toLower = false
   [[module.mounts]]
     source = "node_modules/instant.page"
     target = "assets/js/vendor/instant.page"
+  [[module.mounts]]
+    source = "node_modules/bootstrap"
+    target = "assets/js/vendor/bootstrap"
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -28,7 +28,8 @@ landscapePhotoWidths = [1000, 800, 700, 600, 500]
 portraitPhotoWidths = [800, 700, 600, 500]
 lqipWidth = "20x"
 
-footer = "© 2020 Henk Verlinde - MIT License"
+# Footer
+footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\"https://gohugo.io/\">Hugo</a>, and <a href=\"https://gethyas.com/\">Hyas</a>"
 
 alert = false
-alertText = "Deliver web projects 10x faster. <a class=\"alert-link\" href=\"https://www.netlify.com/whitepaper/\" target=\"_blank\" rel=\"noopener\">Get the free enterprise paper →</a>" 
+alertText = "Deliver web projects 10x faster. <a class=\"alert-link\" href=\"https://www.netlify.com/whitepaper/\" target=\"_blank\" rel=\"noopener\">Get the free enterprise paper →</a>"
diff --git a/content/_index.md b/content/_index.md
@@ -1,7 +1,7 @@
 ---
-title : "Hyas"
+title : "Modern Hugo Starter"
 description: "Hugo starter helping you build modern websites."
-lead: "Hugo starter helping you build modern websites."
+lead: "Hyas is a Hugo starter helping you build modern websites that are secure, fast, and SEO-ready — by default."
 date: 2020-04-17T12:18:10+00:00
 lastmod: 2020-04-17T12:18:10+00:00
 draft: false

diff --git a/content/quick-start/index.md b/content/quick-start/index.md
@@ -7,25 +7,57 @@ draft: false
 images: []
 ---
 
+How to start a new Hyas project — one pager.
+
+## Requirements
+
+Make sure all dependencies have been installed:
+
+- [Hugo](https://gohugo.io/getting-started/installing/) >= 0.75.0/extended
+- [Node.js](https://nodejs.org/) >= 14.15.0
+
+## Start a new Hyas project
+
+Create a new site, change directories, install npm packages, and start development server.
+
+### Create a new site
+
+```bash
+git clone https://github.com/h-enk/hyas.git my-hyas-site
+```
+
+### Change directories
+
+```bash
+cd my-hyas-site
+```
+
+### Install npm packages
+
 ```bash
-# Create a new Hyas project
-$ git clone git@github.com:h-enk/hyas.git my-hyas-site
+npm install
+```
 
-# Development theme build with live reloading and injection
-$ yarn start
+### Start development server
 
-# Production theme build
-$ yarn build
+```bash
+npm run start
 ```
 
+Hyas will start the Hugo development webserver accessible by default at `http://localhost:1313`. Saved changes will live reload in the browser.
+
 ## Other commands
 
-- `yarn lint:styles` - Check your Sass for errors
-- `yarn lint:scripts` -  Check your JavaScript for errors
-- `yarn clean` -  Delete temporary directories
+Hyas comes with commands for common tasks. [Commands →](https://gethyas.com/docs/prologue/commands/)
 
 ## Documentation
 
 - [Netlify](https://docs.netlify.com/)
 - [Hugo](https://gohugo.io/documentation/)
 - [Hyas](https://gethyas.com/)
+
+## Communities
+
+- [Netlify Community](https://community.netlify.com/)
+- [Hugo Forums](https://discourse.gohugo.io/)
+- [Hyas Discussions](https://github.com/h-enk/hyas/discussions)
diff --git a/images/screenshot.png b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
diff --git a/layouts/index.html b/layouts/index.html
@@ -2,7 +2,7 @@
 <div class="row justify-content-center">
   <div class="col-lg-7 pb-5 text-center">
     <h1>{{ .Title }}</h1>
-    <p class="lead">{{ .Params.Lead | safeHTML }}</p>
+    <p>{{ .Params.Lead | safeHTML }}</p>
     <a class="btn btn-primary px-3" href="{{ "quick-start/" | absURL }}" role="button">Quick Start</a>
     <a class="btn btn-outline-primary px-3" href="https://gethyas.com/" role="button">View Docs</a>
   </div>

diff --git a/layouts/partials/head/resource-hints.html b/layouts/partials/head/resource-hints.html
@@ -1 +1 @@
-<!-- <link rel="preload" href="https://gohugo.io/fonts/muli-latin-200.woff2" as="font" type="font/woff2" crossorigin> -->
+<link rel="preload" as="font" href="{{ "fonts/vendor/inter/inter-v2-latin-500.woff2" | absURL }}" type="font/woff2" crossorigin>
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -1,9 +1,7 @@
-<header class="navbar navbar-expand-sm navbar-light">
+<header class="navbar navbar-light">
   <div class="container">
-    {{ if not .IsHome -}}
-    <a class="navbar-brand" href="{{ "/" | absURL }}">← {{ .Site.Params.Title }}</a>
-    {{ end -}}
-    <div class="ml-auto">
+    <a class="navbar-brand monospace" href="{{ "/" | absURL }}">{{ .Site.Params.Title }}</a>
+    <div class="ms-auto">
     {{ range .Site.Menus.main }}
       <span class="navbar-text">
         <a href="{{ .URL }}">{{- .Name -}}</a>

diff --git a/layouts/shortcodes/email.html b/layouts/shortcodes/email.html
@@ -0,0 +1 @@
+<script type="text/javascript" nonce="dXNlcj0iaGVsbG8iLGRvbWFpbj0iaGVua3ZlcmxpbmRlLmNvbSIsZG9jdW1lbnQud3JpdGUodXNlcisiQCIrZG9tYWluKTs=">user="{{ with .Get "user" }}{{.}}{{ end }}",domain="{{ with .Get "domain" }}{{.}}{{ end }}",document.write(user+"@"+domain);</script><noscript>{{ with .Get "user" }}{{.}}{{ end }} at {{ with .Get "domain" }}{{.}}{{ end }}</noscript>
diff --git a/layouts/shortcodes/img-simple.html b/layouts/shortcodes/img-simple.html
@@ -0,0 +1,3 @@
+{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}
+{{ $lqip := $image.Resize $.Site.Params.lqipWidth -}}
+<img class="img-simple border rounded p-1 img-fluid lazyload blur-up{{ with .Get "class" }} {{ . | safeHTML }}{{ end }}" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>