diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-05-13 20:38:14 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-13 20:38:14 +0300 |
| commit | 679fbd9e086c3e01f68de0ef824c13ebcc92bfb3 (patch) | |
| tree | 5cf639972d51e507de2bea444c2434d8fdbe7704 | |
| parent | f5fae5d1028261481b78474a1e2144a365fc576f (diff) | |
Redesign the blog (#256)
* Redesign the blog
* tweaks
* typo
* unused var
* load async
* Remove subnav, update sidebar to match docs sidebar
* Update hero.html
* Fine-tune some things, pull in Bootstrap via npm
* fix markup
* Remove commented out CSS
* Fix layout
* Drop old .embed-responsive for .ratio
* Sync syntax changes
* remove code comment
* Fixes again
* add fathom
* Update to latest Bootstrap release
* fix error
* remove unused vars
* one check
* Config version
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
31 files changed, 576 insertions, 354 deletions
@@ -74,17 +74,16 @@ module: target: static/apple-touch-icon.png - source: src/static/assets/img/favicons/favicon.ico target: static/favicon.ico + - source: node_modules/bootstrap/scss + target: assets/scss/bootstrap + - source: node_modules/bootstrap/dist/js/bootstrap.min.js + target: assets/js/bootstrap.min.js params: - current_version: "5.1.3" - docs_version: "5.1" + current_version: "5.2.0-beta1" + docs_version: "5.2" description: "Official blog for the Bootstrap framework." author: "Mark Otto" - assets: - css: - # Use https://www.srihash.org to generate the hash, or use the hash from upstream - uri: "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" - sri: "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" main: "https://getbootstrap.com" github_org: "https://github.com/twbs" repo: "https://github.com/twbs/blog" diff --git a/package-lock.json b/package-lock.json index ee042396..faa6bb36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "devDependencies": { "autoprefixer": "^10.4.7", + "bootstrap": "5.2.0-beta1", "cross-env": "^7.0.3", "find-unused-sass-variables": "^4.0.4", "hugo-bin": "^0.86.0", @@ -138,6 +139,17 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -566,6 +578,25 @@ "safe-buffer": "^5.1.1" } }, + "node_modules/bootstrap": { + "version": "5.2.0-beta1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz", + "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.5" + } + }, "node_modules/boxen": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz", @@ -6710,6 +6741,13 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "dev": true, + "peer": true + }, "@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -7016,6 +7054,13 @@ "safe-buffer": "^5.1.1" } }, + "bootstrap": { + "version": "5.2.0-beta1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz", + "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==", + "dev": true, + "requires": {} + }, "boxen": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz", diff --git a/package.json b/package.json index ce147e21..55325763 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "devDependencies": { "autoprefixer": "^10.4.7", + "bootstrap": "5.2.0-beta1", "cross-env": "^7.0.3", "find-unused-sass-variables": "^4.0.4", "hugo-bin": "^0.86.0", diff --git a/src/assets/scss/_ads.scss b/src/assets/scss/_ads.scss index b460acd9..b9321c37 100644 --- a/src/assets/scss/_ads.scss +++ b/src/assets/scss/_ads.scss @@ -8,24 +8,24 @@ position: static; display: block; max-width: 400px; - padding: 15px 15px 15px 160px; - margin: 2rem auto 0; + padding: 12px 12px 12px 154px; + margin: 1.5rem auto 0; overflow: hidden; font-size: .875rem; line-height: 1.4; text-align: left; - background-color: rgba(0, 0, 0, .05); + background-color: var(--bs-gray-100); border-radius: .5rem; a { - color: rgba(255, 255, 255, .75); + color: var(--bs-gray-600); text-decoration: none; } } .carbon-img { float: left; - margin-left: -145px; + margin-left: -140px; > img { margin-bottom: 0; @@ -35,5 +35,5 @@ .carbon-poweredby { display: block; margin-top: .75rem; - color: rgba(255, 255, 255, .5) !important; + color: var(--bs-gray-600) !important; } diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss index 25bcbbd4..13bd6e48 100644 --- a/src/assets/scss/_buttons.scss +++ b/src/assets/scss/_buttons.scss @@ -2,36 +2,44 @@ // // Custom buttons for the docs. +// scss-docs-start btn-css-vars-example .btn-bd-primary { - font-weight: 600; - color: $bd-purple-bright; - border-color: $bd-purple-bright; - - &:hover, - &:active { - color: $white; - background-color: $bd-purple-bright; - border-color: $bd-purple-bright; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet); + --bs-btn-border-color: var(--bd-violet); + --bs-btn-border-radius: .5rem; + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)}; } +// scss-docs-end btn-css-vars-example -.btn-bd-download { - font-weight: 600; - color: $bd-download; - border-color: $bd-download; - - &:hover, - &:active { - color: $bd-dark; - background-color: $bd-download; - border-color: $bd-download; - } +.btn-bd-accent { + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bd-accent); + --bs-btn-border-color: var(--bd-accent); + --bs-btn-hover-color: var(--bd-dark); + --bs-btn-hover-bg: var(--bd-accent); + --bs-btn-hover-border-color: var(--bd-accent); + --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--bs-btn-hover-border-color); +} - &:focus { - box-shadow: 0 0 0 3px rgba($bd-download, .25); - } +.btn-bd-light { + --bs-btn-color: var(--bs-gray-600); + --bs-btn-border-color: var(--bs-gray-400); + --bs-btn-hover-color: var(--bd-violet); + --bs-btn-hover-border-color: var(--bd-violet); + --bs-btn-active-color: var(--bd-violet); + --bs-btn-active-bg: var(--bs-white); + --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-border-color: var(--bd-violet); + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss index a5ac281c..9e023aaa 100644 --- a/src/assets/scss/_navbar.scss +++ b/src/assets/scss/_navbar.scss @@ -1,46 +1,85 @@ .bd-navbar { - min-height: 4rem; - background-color: $bd-purple-bright; + padding: .75rem 0; + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); - @media (max-width: 991.98px) { - .navbar-nav-scroll { - width: 100%; - height: 2.5rem; - margin-top: .25rem; - overflow: hidden; + .navbar-toggler { + padding: 0; + margin-right: -.5rem; + border: 0; - .navbar-nav { - padding-bottom: 2rem; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - } + &:first-child { + margin-left: -.5rem; + } + + .bi { + width: 1.5rem; + height: 1.5rem; + } + + &:focus { + box-shadow: none; + } + } + + .navbar-brand { + transition: .2s ease-in-out transform; + + &:hover { + transform: rotate(-5deg) scale(1.1); } } - .navbar-nav { - .nav-link { - padding-right: .5rem; - padding-left: .5rem; - color: rgba($white, .85); + .navbar-toggler, + .nav-link { + padding-right: $spacer * .25; + padding-left: $spacer * .25; + color: rgba($white, .85); - &.active, - &:hover, - &:focus { - color: $white; - background-color: transparent; - } + &:hover, + &:focus { + color: $white; + } - &.active { - font-weight: 600; - } + &.active { + font-weight: 600; + color: $white; } } .navbar-nav-svg { display: inline-block; - width: 1rem; - height: 1rem; - vertical-align: text-top; + vertical-align: -.125rem; + } + + .offcanvas-lg { + background-color: var(--bd-violet); + border-left: 0; + + @media (max-width: 992px) { + box-shadow: $box-shadow-lg; + } + } + + .dropdown-toggle { + &:focus { + outline: 0; + } + } + + .dropdown-menu { + --bs-dropdown-min-width: 12rem; + --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + --bs-dropdown-font-size: .875rem; + box-shadow: $dropdown-box-shadow; + } + + .dropdown-item.current { + font-weight: 600; + background-image: escape-svg($dropdown-active-icon); + background-repeat: no-repeat; + background-position: right $dropdown-item-padding-x top .6rem; + background-size: .75rem .75rem; } } diff --git a/src/assets/scss/_subnav.scss b/src/assets/scss/_subnav.scss deleted file mode 100644 index 0c261437..00000000 --- a/src/assets/scss/_subnav.scss +++ /dev/null @@ -1,4 +0,0 @@ -.bd-subnavbar { - background-color: rgba(#fff, .75); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); -} diff --git a/src/assets/scss/_syntax.scss b/src/assets/scss/_syntax.scss index 89c81d13..487550bf 100644 --- a/src/assets/scss/_syntax.scss +++ b/src/assets/scss/_syntax.scss @@ -1,94 +1,107 @@ -// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations +:root { + --base00: #fff; + --base01: #f5f5f5; + --base02: #c8c8fa; + --base03: #565c64; + --base04: #030303; + --base05: #333; + --base06: #fff; + --base07: #9a6700; + --base08: #bc4c00; + --base09: #087990; + --base0A: #795da3; + --base0B: #183691; + --base0C: #183691; + --base0D: #795da3; + --base0E: #a71d5d; + --base0F: #333; +} + +.hl { background-color: var(--base02); } +.c { color: var(--base03); } +.err { color: var(--base08); } +.k { color: var(--base0E); } +.l { color: var(----base09); } +.n { color: var(--base08); } +.o { color: var(--base05); } +.p { color: var(--base05); } +.cm { color: var(--base04); } +.cp { color: var(--base08); } +.c1 { color: var(--base03); } +.cs { color: var(--base04); } +.gd { color: var(--base08); } +.ge { font-style: italic; } +.gh { + font-weight: 600; + color: #fff; +} +.gi { color: var(--bs-success); } +.gp { + font-weight: 600; + color: var(--base04); +} +.gs { font-weight: 600; } +.gu { + font-weight: 600; + color: var(--base0C); +} +.kc { color: var(--base0E); } +.kd { color: var(--base0E); } +.kn { color: var(--base0C); } +.kp { color: var(--base0E); } +.kr { color: var(--base0E); } +.kt { color: var(--base0A); } +.ld { color: var(--base0C); } +.m { color: var(--base09); } +.s { color: var(--base0C); } +.na { color: var(--base0A); } +.nb { color: var(--base05); } +.nc { color: var(--base07); } +.no { color: var(--base08); } +.nd { color: var(--base07); } +.ni { color: var(--base08); } +.ne { color: var(--base08); } +.nf { color: var(--base0B); } +.nl { color: var(--base05); } +.nn { color: var(--base0A); } +.nx { color: var(--base0A); } +.py { color: var(--base08); } +.nt { color: var(--base08); } +.nv { color: var(--base08); } +.ow { color: var(--base0C); } +.w { color: #fff; } +.mf { color: var(--base09); } +.mh { color: var(--base09); } +.mi { color: var(--base09); } +.mo { color: var(--base09); } +.sb { color: var(--base0C); } +.sc { color: #fff; } +.sd { color: var(--base04); } +.s2 { color: var(--base0C); } +.se { color: var(--base09); } +.sh { color: var(--base0C); } +.si { color: var(--base09); } +.sx { color: var(--base0C); } +.sr { color: var(--base0C); } +.s1 { color: var(--base0C); } +.ss { color: var(--base0C); } +.bp { color: var(--base05); } +.vc { color: var(--base08); } +.vg { color: var(--base08); } +.vi { color: var(--base08); } +.il { color: var(--base09); } -/* Background .chroma { background-color: #f0f0f0; } */ -/* Other .chroma .x { } */ -/* Error .chroma .err { } */ -/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ -/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */ -/* LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */ -/* LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */ -/* LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */ +// Color commas in rgba() values +.m + .o { color: var(--base03); } -/* Comment */ .chroma .c { color: #727272; } -/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; } -/* CommentMultiline */ .chroma .cm { color: #727272; } -/* CommentPreproc */ .chroma .cp { color: #008085; } -/* CommentPreprocFile */ .chroma .cpf { color: #007020; } -/* CommentSingle */ .chroma .c1 { color: #727272; } -/* CommentSpecial */ .chroma .cs { color: #727272; } -/* Generic .chroma .g { } */ -/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; } -/* GenericEmph */ .chroma .ge { font-style: italic; } -/* GenericError */ .chroma .gr { color: #f00; } -/* GenericHeading */ .chroma .gh { color: #030; } -/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; } -/* GenericOutput */ .chroma .go { color: #aaa; } -/* GenericPrompt */ .chroma .gp { color: #009; } -/* GenericStrong */ .chroma .gs { font-weight: 700; } -/* GenericSubheading */ .chroma .gu { color: #030; } -/* GenericTraceback */ .chroma .gt { color: #9c6; } -/* GenericUnderline */ .chroma .gl { text-decoration: underline; } -/* Keyword */ .chroma .k { color: #069; } -/* KeywordConstant */ .chroma .kc { color: #069; } -/* KeywordDeclaration */ .chroma .kd { color: #069; } -/* KeywordNamespace */ .chroma .kn { color: #069; } -/* KeywordPseudo */ .chroma .kp { color: #069; } -/* KeywordReserved */ .chroma .kr { color: #069; } -/* KeywordType */ .chroma .kt { color: #078; } -/* Literal .chroma .l { } */ -/* LiteralDate .chroma .ld { color: #c24f19 } */ -/* LiteralNumber */ .chroma .m { color: #c24f19; } -/* LiteralNumberBin */ .chroma .mb { color: #40a070; } -/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; } -/* LiteralNumberHex */ .chroma .mh { color: #c24f19; } -/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; } -/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; } -/* LiteralNumberOct */ .chroma .mo { color: #c24f19; } -/* LiteralString */ .chroma .s { color: #d73038; } -/* LiteralStringAffix */ .chroma .sa { color: #4070a0; } -/* LiteralStringBacktick */ .chroma .sb { color: #c30; } -/* LiteralStringChar */ .chroma .sc { color: #c30; } -/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; } -/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; } -/* LiteralStringDouble */ .chroma .s2 { color: #c30; } -/* LiteralStringEscape */ .chroma .se { color: #c30; } -/* LiteralStringHeredoc */ .chroma .sh { color: #c30; } -/* LiteralStringInterpol */ .chroma .si { color: #a00; } -/* LiteralStringOther */ .chroma .sx { color: #c30; } -/* LiteralStringRegex */ .chroma .sr { color: #337e7e; } -/* LiteralStringSingle */ .chroma .s1 { color: #c30; } -/* LiteralStringSymbol */ .chroma .ss { color: #fc3; } -/* Name .chroma .n { } */ -/* NameAttribute */ .chroma .na { color: #006ee0; } -/* NameBuiltin */ .chroma .nb { color: #366; } -/* NameBuiltinPseudo .chroma .bp { } */ -/* NameClass */ .chroma .nc { color: #168174; } -/* NameConstant */ .chroma .no { color: #360; } -/* NameDecorator */ .chroma .nd { color: #6b62de; } -/* NameEntity */ .chroma .ni { color: #727272; } -/* NameException */ .chroma .ne { color: #c00; } -/* NameFunction */ .chroma .nf { color: #b715f4; } -/* NameFunctionMagic .chroma .fm { } */ -/* NameLabel */ .chroma .nl { color: #6b62de; } -/* NameNamespace */ .chroma .nn { color: #007ca5; } -/* NameOther .chroma .nx { } */ -/* NameProperty .chroma .py { } */ -/* NameTag */ .chroma .nt { color: #2f6f9f; } -/* NameVariable */ .chroma .nv { color: #033; } -/* NameVariableClass .chroma .vc { } */ -/* NameVariableGlobal .chroma .vg { } */ -/* NameVariableInstance .chroma .vi { } */ -/* NameVariableMagic .chroma .vm { } */ -/* Operator */ .chroma .o { color: #555; } -/* OperatorWord */ .chroma .ow { color: #000; } -/* Punctuation .chroma .p { } */ -/* TextWhitespace */ .chroma .w { color: #bbb; } +// Fix bash +.language-sh .c { color: var(--base03); } .chroma { .language-bash, .language-sh { &::before { - color: #009; + color: #777; content: "$ "; user-select: none; } diff --git a/src/assets/scss/_theme.scss b/src/assets/scss/_theme.scss index 96d1f408..cae5539b 100644 --- a/src/assets/scss/_theme.scss +++ b/src/assets/scss/_theme.scss @@ -2,59 +2,75 @@ // Resets // -.embed-responsive { +a { + text-decoration-color: rgba(var(--bs-primary-rgb), .25); + text-underline-offset: .25rem; + + &:hover, + &:focus { + text-decoration-color: rgba(var(--bs-primary-rgb), .5); + } +} + +.bi { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -.125em; + fill: currentColor; // stylelint-disable-line value-keyword-case +} + +.sidebar-nav { + .nav-link { + padding-inline: .75rem; + border-radius: .5rem; + + &:not(.active):hover, + &:not(.active):focus { + background-color: rgba(var(--bd-violet-rgb), .05); + } + + &.active { + color: var(--bs-body-color); + background-color: rgba(var(--bd-violet-rgb), .1); + } + } +} + +.ratio { margin-bottom: 1rem; + overflow: hidden; background-color: #000; + border-radius: .5rem; .page-videos & { margin-top: .5rem; } } -.post li { - margin-bottom: .25rem; -} - // // Header // .masthead { - position: relative; - padding: 2rem 1.25rem; - font-weight: 300; - color: #cdbfe3; - text-align: center; - text-shadow: 0 1px 0 rgba(0, 0, 0, .1); - background-image: linear-gradient(to bottom, darken($bd-purple-bright, 10%), $bd-purple-bright); - - @media (min-width: 40em) { - padding: 3rem 0 4rem; - } - - a, - h1 { - font-weight: 400; - color: #fff; - } + overflow: hidden; - h1 { - margin-bottom: .25rem; - } - - p { - max-width: 640px; - margin: 0 auto; + @media (min-width: 768px) { + position: -webkit-sticky; // stylelint-disable-line value-no-vendor-prefix + position: sticky; + top: 4rem; } } -.bs-docs-booticon { - filter: - drop-shadow(0 .25em .25em rgba(0, 0, 0, .05)) - drop-shadow(0 .5em 1em rgba(0, 0, 0, .1)) - drop-shadow(0 .75em 1.5em rgba(0, 0, 0, .15)); +.bd-booticon { + margin-left: -.75rem; transform: rotate(-5deg); + + @media (max-width: 1024px) { + width: 128px; + height: auto; + } } @@ -66,10 +82,10 @@ display: inline-block; padding: .6rem 1.2rem; margin-right: .25rem; - font-weight: 700; + font-weight: 600; color: #fff; - background-color: #08c; - border-radius: .2rem; + background-color: var(--bs-primary); + border-radius: .5rem; transition: all .2s linear; &:hover { @@ -94,12 +110,13 @@ .list { padding-left: 0; list-style: none; -} -.list li { - display: block; - margin-bottom: 5px; -} -.list span { - float: right; - color: #767676; + + li { + display: block; + margin-bottom: .5rem; + } + span { + float: right; + color: #var(--bs-gray-600); + } } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index bb80af3e..cd6f8b99 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -1,9 +1,17 @@ -$white: #fff; -$blue-500: #007bff; -$gray-700: #495057; - // Local docs variables -$bd-purple: #563d7c; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); -$bd-dark: #2a2730; -$bd-download: #ffe484; +$bd-purple: #4c0bce; +$bd-violet: lighten(saturate($bd-purple, 5%), 15%); +$bd-accent: #ffe484; +$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"); + +$bd-gutter-x: 3rem; + +:root { + --bd-purple: #{$bd-purple}; + --bd-violet: #{$bd-violet}; + --bd-accent: #{$bd-accent}; + --bd-violet-rgb: #{to-rgb($bd-violet)}; + --bd-accent-rgb: #{to-rgb($bd-accent)}; + --bd-pink-rgb: #{to-rgb($pink-500)}; + --bd-teal-rgb: #{to-rgb($teal-500)}; +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 42916dc0..76d2ca87 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -1,14 +1,48 @@ -// stylelint-disable selector-max-type, selector-no-qualifying-type - -// Body resets -// -// Update the foundational and global aspects of the page. +// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-id + +@import "bootstrap/functions"; +@import "bootstrap/variables"; +@import "bootstrap/maps"; +@import "bootstrap/mixins"; +@import "bootstrap/utilities"; +@import "bootstrap/root"; +@import "bootstrap/reboot"; +@import "bootstrap/type"; +@import "bootstrap/images"; +@import "bootstrap/containers"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +// @import "bootstrap/forms"; +@import "bootstrap/buttons"; +@import "bootstrap/transitions"; +@import "bootstrap/dropdown"; +// @import "bootstrap/button-group"; +@import "bootstrap/nav"; +@import "bootstrap/navbar"; +// @import "bootstrap/card"; +// @import "bootstrap/accordion"; +// @import "bootstrap/breadcrumb"; +// @import "bootstrap/pagination"; +// @import "bootstrap/badge"; +// @import "bootstrap/alert"; +// @import "bootstrap/progress"; +// @import "bootstrap/list-group"; +@import "bootstrap/close"; +// @import "bootstrap/toasts"; +// @import "bootstrap/modal"; +// @import "bootstrap/tooltip"; +// @import "bootstrap/popover"; +// @import "bootstrap/carousel"; +// @import "bootstrap/spinners"; +@import "bootstrap/offcanvas"; +// @import "bootstrap/placeholders"; +@import "bootstrap/helpers"; +@import "bootstrap/utilities/api"; @import "variables"; @import "syntax"; @import "buttons"; @import "navbar"; -@import "subnav"; @import "footer"; @import "theme"; @import "ads"; @@ -16,15 +50,17 @@ .f0 { font-size: 3rem; } .f2 { font-size: 2rem; } .f3 { font-size: 1.75rem; } +.f4 { font-size: 1.5rem; } .f5 { font-size: 1.25rem; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .highlight pre.chroma { - padding: 1rem; + padding: 1.25rem; margin: 0 0 1rem; - background-color: #f5f5f5; - border-radius: .25rem; + font-size: .875rem; + background-color: var(--bs-gray-100); + border-radius: var(--bs-border-radius); code { word-wrap: normal; @@ -65,19 +101,32 @@ tbody tr:nth-child(odd) th { background-color: #f9f9f9; } +.s-32 { + width: 32px; + height: 32px; +} // Container // // Center the page content. +#content { + grid-template-columns: 1.15fr 3fr; + gap: 3rem; +} + .posts-container { max-width: 760px; - @media (min-width: 40em) { + @media (min-width: 1024px) { font-size: 18px; } } +.bd-gutter { + --bs-gutter-x: #{$bd-gutter-x}; +} + // Posts and pages // @@ -104,9 +153,14 @@ tbody tr:nth-child(odd) th { color: #767676; } -// Break long links -.post a { - word-break: break-word; +.post { + a { + word-break: break-word; + } + + li { + margin-bottom: .25rem; + } } // Related posts @@ -135,7 +189,7 @@ tbody tr:nth-child(odd) th { color: $gray-700; } -.post .embed-responsive { +.post .ratio { margin-bottom: 2rem; } @@ -149,7 +203,7 @@ tbody tr:nth-child(odd) th { margin-right: -1rem; margin-left: -1rem; overflow: hidden; // clearfix - color: #767676; + color: var(--bs-gray-600); text-align: center; } @@ -158,7 +212,8 @@ tbody tr:nth-child(odd) th { position: relative; display: block; padding: 1rem; - border: 1px solid #eee; + text-decoration: none; + border: 1px solid var(--bs-gray-200); } .pagination-item:first-child { margin-bottom: -1px; @@ -168,9 +223,8 @@ tbody tr:nth-child(odd) th { a.pagination-item:hover { z-index: 2; color: #fff; - text-decoration: none; - background-color: $blue-500; - border-color: $blue-500; + background-color: var(--bs-primary); + border-color: var(--bs-primary); } @media (min-width: 30em) { @@ -183,43 +237,13 @@ a.pagination-item:hover { } .pagination-item:first-child { margin-bottom: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; } .pagination-item:last-child { margin-left: -1px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } -} - -.embed-responsive { - position: relative; - display: block; - height: 0; - padding: 0; - overflow: hidden; - - .no-js & { - display: none; - } - - .embed-responsive-item, - iframe, - embed, - object, - video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - } - - &.embed-responsive-16by9 { - padding-bottom: 56.25%; + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; } } @@ -234,3 +258,7 @@ iframe[data-url^="https://jsbin.com"] { margin-left: -226px; } } + +.bd-text-purple { + color: var(--bd-violet); +} diff --git a/src/layouts/_default/baseof.html b/src/layouts/_default/baseof.html index 5a380707..9beb7502 100644 --- a/src/layouts/_default/baseof.html +++ b/src/layouts/_default/baseof.html @@ -4,17 +4,23 @@ {{ partial "head" . }} </head> <body> + {{ partial "icons" . }} {{ partial "navbar" . }} - {{ partial "hero" . }} - {{ partial "subnav" . }} - <div class="container"> - {{ block "main" . }} - {{ end }} + <div class="container-xxl px-4 px-xxl-2"> + <div class="d-lg-grid" id="content"> + <div class="sidebar"> + {{ partial "hero" . }} + </div> + <div class="main"> + {{ block "main" . }} + {{ end }} + </div> + </div> </div> {{ partial "footer" . }} - {{ partial "lazyload" . }} + {{ partial "scripts" . }} </body> </html> diff --git a/src/layouts/_default/home.html b/src/layouts/_default/home.html index d5d9e55a..39cc6778 100644 --- a/src/layouts/_default/home.html +++ b/src/layouts/_default/home.html @@ -1,5 +1,5 @@ {{ define "main" }} -<div class="posts-container mx-auto px-3 my-5"> +<div class="posts-container mx-auto my-5"> <div class="posts"> {{ $paginator := .Paginate (where site.RegularPages "Type" "posts") }} {{- range $i, $page := $paginator.Pages -}} @@ -7,8 +7,8 @@ {{- $lazyload := cond (eq $i 0) false true -}} <div class="post"> - <h1 class="post-title fw-500"> - <a href="{{ .RelPermalink }}"> + <h1 class="post-title fw-600"> + <a href="{{ .RelPermalink }}" class="text-decoration-none"> {{ .Title }} </a> </h1> diff --git a/src/layouts/partials/analytics.html b/src/layouts/partials/analytics.html index ab6e9e57..be4e9be9 100644 --- a/src/layouts/partials/analytics.html +++ b/src/layouts/partials/analytics.html @@ -1,3 +1,4 @@ +<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-146052-12', 'getbootstrap.com'); diff --git a/src/layouts/partials/author-info.html b/src/layouts/partials/author-info.html index 0ef3940d..650c5e4c 100644 --- a/src/layouts/partials/author-info.html +++ b/src/layouts/partials/author-info.html @@ -6,13 +6,13 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/{{ $author }}" target="_blank" rel="noopener"> {{ $avatar_width := 32 -}} {{- $avatar_width_2x := mul $avatar_width 2 -}} - <img class="mb-0 mr-2" srcset="https://github.com/{{ $author }}.png?size={{ $avatar_width }}, https://github.com/{{ $author }}.png?size={{ $avatar_width_2x }} 2x" + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/{{ $author }}.png?size={{ $avatar_width }}, https://github.com/{{ $author }}.png?size={{ $avatar_width_2x }} 2x" src="https://github.com/{{ $author }}.png?size={{ $avatar_width }}" alt="" width="{{ $avatar_width }}" height="{{ $avatar_width }}"{{ if eq .lazyload true }} loading="lazy"{{ end }}> <span>@{{ $author }}</span> </a> - <span class="d-flex align-items-center ml-3" title="{{ $date | dateFormat "Mon, 02 Jan 2006 15:04:00 -0700" }}"> - {{ partial "icons/calendar-event.svg" (dict "class" "mr-2" "width" "24" "height" "24") }} + <span class="d-flex align-items-center ms-3" title="{{ $date | dateFormat "Mon, 02 Jan 2006 15:04:00 -0700" }}"> + {{ partial "icons/calendar-event.svg" (dict "class" "me-2" "width" "24" "height" "24") }} {{ $date | dateFormat "January 02, 2006" }} </span> </div> diff --git a/src/layouts/partials/favicons.html b/src/layouts/partials/favicons.html index 420c3805..520b61a1 100644 --- a/src/layouts/partials/favicons.html +++ b/src/layouts/partials/favicons.html @@ -3,6 +3,6 @@ <link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/assets/img/favicons/manifest.json"> -<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> +<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/assets/img/favicons/favicon.ico"> -<meta name="theme-color" content="#7952b3"> +<meta name="theme-color" content="#712cf9"> diff --git a/src/layouts/partials/hero.html b/src/layouts/partials/hero.html index 26591f70..da4118c5 100644 --- a/src/layouts/partials/hero.html +++ b/src/layouts/partials/hero.html @@ -1,13 +1,36 @@ -<div class="masthead bg-light"> - <div class="container"> - <a href="/" aria-label="Bootstrap"> - {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "bs-docs-booticon mb-3" "width" "90" "height" "72") }} - <h1 class="f2">The Bootstrap Blog</h1> - </a> - <p class="f5"> - News and announcements for all things <a href="{{ .Site.Params.main }}/" title="Visit the Bootstrap docs">Bootstrap</a>, including new releases, <a href="{{ .Site.Params.themes }}" title="Browse the official Bootstrap themes">Bootstrap Themes</a>, and <a href="{{ .Site.Params.icons }}" title="Official open source Bootstrap Icons">Bootstrap Icons</a>. - </p> - - {{ partial "carbonads" }} +<div class="masthead py-5"> + <div class="mb-4 text-center text-lg-start"> + <a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> + <img src="/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="bd-booticon d-block mx-auto mb-3 mx-lg-0"> + </a> + <div class="ms-3 ms-lg-0"> + <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1> + <p class="col-sm-8 col-lg-12 mx-auto mb-0 mb-lg-4"> + News and announcements for all things <a href="{{ .Site.Params.main }}/" title="Visit the Bootstrap docs">Bootstrap</a>, + including new releases, <a href="{{ .Site.Params.themes }}" title="Browse the official Bootstrap themes">Bootstrap Themes</a>, + and <a href="{{ .Site.Params.icons }}" title="Official open source Bootstrap Icons">Bootstrap Icons</a>. + </p> + </div> </div> + + <nav class="nav nav-pills justify-content-center flex-lg-column justify-content-lg-start gap-1 sidebar-nav"> + <a class="nav-link d-flex align-items-center{{ if .IsHome }} active fw-600{{ else }} text-dark{{ end }}" href="/"> + <svg class="bi me-2 f5 bd-text-purple"><use xlink:href="#file-earmark-richtext"></use></svg> + All posts + </a> + <a class="nav-link d-flex align-items-center{{ if eq .Page.Title "Archive" }} active fw-600{{ else }} text-dark{{ end }}" href="/archive/"> + <svg class="bi me-2 f5 text-primary"><use xlink:href="#archive"></use></svg> + Archive + </a> + <a class="nav-link d-flex align-items-center{{ if eq .Page.Title "Videos" }} active fw-600{{ else }} text-dark{{ end }}" href="/videos/"> + <svg class="bi me-2 f5 text-info"><use xlink:href="#film"></use></svg> + Videos + </a> + <a class="nav-link d-flex align-items-center text-dark" href="{{ absURL "/feed.xml" }}"> + <svg class="bi me-2 f5 text-warning"><use xlink:href="#rss"></use></svg> + Subscribe + </a> + </nav> + + {{ partial "carbonads" }} </div> diff --git a/src/layouts/partials/icons.html b/src/layouts/partials/icons.html new file mode 100644 index 00000000..722a8ab8 --- /dev/null +++ b/src/layouts/partials/icons.html @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="archive" viewBox="0 0 16 16"> + <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/> + </symbol> + <symbol id="file-earmark-richtext" viewBox="0 0 16 16"> + <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/> + <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/> + </symbol> + <symbol id="film" viewBox="0 0 16 16"> + <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> + </symbol> + <symbol id="rss" viewBox="0 0 16 16"> + <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/> + <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z"/> + </symbol> + <symbol id="three-dots" viewBox="0 0 16 16"> + <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/> + </symbol> +</svg> diff --git a/src/layouts/partials/icons/hamburger.svg b/src/layouts/partials/icons/hamburger.svg new file mode 100644 index 00000000..955d8a65 --- /dev/null +++ b/src/layouts/partials/icons/hamburger.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> +</svg> diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html index 179e2e03..5b67a20c 100644 --- a/src/layouts/partials/navbar.html +++ b/src/layouts/partials/navbar.html @@ -1,58 +1,70 @@ -<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0"> - <div class="container flex-wrap flex-md-nowrap py-0 px-3"> - <a class="navbar-brand py-0 mr-0 mr-md-2" href="/" aria-label="Bootstrap"> - {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block" "width" "40" "height" "32") }} +<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top"> + <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> + <div class="d-lg-none" style="width: 2.25rem;"></div> + + <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> + {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }} </a> - <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start"> - <ul class="navbar-nav bd-navbar-nav flex-row"> - <li class="nav-item"> - <a class="nav-link " href="{{ .Site.Params.main }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');" target="_blank" rel="noopener">Docs</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');" target="_blank" rel="noopener">Examples</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="{{ .Site.Params.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> - </li> - <li class="nav-item"> - <a class="nav-link active" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> - </li> - </ul> - </div> + <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg> + </button> + + <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel"> + <div class="offcanvas-header px-4 pb-0"> + <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> + </div> - <ul class="navbar-nav ml-sm-auto"> - <li class="nav-item"> - <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener" aria-label="GitHub"> - {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} - </a> - </li> - <li class="nav-item"> - <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Social.twitter }}" target="_blank" rel="noopener" aria-label="Twitter"> - {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} - </a> - </li> - <li class="nav-item"> - <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener" aria-label="Slack"> - {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} - </a> - </li> - <li class="nav-item"> - <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" aria-label="Open Collective"> - {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} - </a> - </li> - </ul> + <div class="offcanvas-body p-4 pt-0 p-lg-0"> + <hr class="d-lg-none text-white-50"> + <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2 active" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" rel="noopener">Blog</a> + </li> + </ul> - <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a> - </div> + <hr class="d-lg-none text-white-50"> + + <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener"> + {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} + <small class="d-lg-none ms-2">GitHub</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener"> + {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} + <small class="d-lg-none ms-2">Twitter</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener"> + {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} + <small class="d-lg-none ms-2">Slack</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener"> + {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} + <small class="d-lg-none ms-2">Open Collective</small> + </a> + </li> + </ul> + </div> + </div> + </nav> </header> diff --git a/src/layouts/partials/lazyload.html b/src/layouts/partials/scripts.html index 306a2881..1a2ae702 100644 --- a/src/layouts/partials/lazyload.html +++ b/src/layouts/partials/scripts.html @@ -1,3 +1,6 @@ +{{ $bootstrapJs := resources.Get "/js/bootstrap.min.js" }} +<script src="{{ $bootstrapJs.Permalink | relURL }}"></script> + <script> (function(w, d) { var b = d.getElementsByTagName('body')[0]; diff --git a/src/layouts/partials/stylesheet.html b/src/layouts/partials/stylesheet.html index 1dbfd152..3fe0eea9 100644 --- a/src/layouts/partials/stylesheet.html +++ b/src/layouts/partials/stylesheet.html @@ -1,5 +1,3 @@ -<link href="{{ .Site.Params.assets.css.uri }}" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.assets.css.sri | safeHTMLAttr }} crossorigin="anonymous"> - {{- $targetDocsCssPath := "/assets/css/style.css" -}} {{- $sassOptions := dict "targetPath" $targetDocsCssPath "outputStyle" "expanded" "precision" 6 -}} {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}} diff --git a/src/layouts/partials/subnav.html b/src/layouts/partials/subnav.html index c5b51f3f..e824c27f 100644 --- a/src/layouts/partials/subnav.html +++ b/src/layouts/partials/subnav.html @@ -1,10 +1,10 @@ <nav class="bd-subnavbar pt-2 pb-3 pb-md-2"> <div class="container d-flex align-items-md-center py-2"> <nav class="nav mx-auto"> - <a class="text-dark py-1 mr-3{{ if .IsHome }} fw-600 text-decoration-none{{ end }}" href="/">All posts</a> - <a class="text-dark py-1 mr-3{{ if eq .Page.Title "Archive" }} fw-600 text-decoration-none{{ end }}" href="/archive/">Archive</a> - <a class="text-dark py-1 mr-3{{ if eq .Page.Title "Videos" }} fw-600 text-decoration-none{{ end }}" href="/videos/">Videos</a> - <a class="text-dark py-1" href="{{ absURL "/feed.xml" }}">Subscribe</a> + <a class="nav-link text-dark py-1{{ if .IsHome }} fw-600{{ end }}" href="/">All posts</a> + <a class="nav-link text-dark py-1{{ if eq .Page.Title "Archive" }} fw-600{{ end }}" href="/archive/">Archive</a> + <a class="nav-link text-dark py-1{{ if eq .Page.Title "Videos" }} fw-600{{ end }}" href="/videos/">Videos</a> + <a class="nav-link text-dark py-1" href="{{ absURL "/feed.xml" }}">Subscribe</a> </nav> </div> </nav> diff --git a/src/layouts/partials/video.html b/src/layouts/partials/video.html index bfc2b1cc..b1a053e4 100644 --- a/src/layouts/partials/video.html +++ b/src/layouts/partials/video.html @@ -4,6 +4,6 @@ {{- $video := .context.Params.video -}} {{- $video_start := .context.Params.video_start -}} -<div class="embed-responsive embed-responsive-16by9"> - <iframe class="embed-responsive-item{{ if eq $lazyload true }} lazy{{ end }}" {{ if eq $lazyload true }}data-src{{ else }}src{{ end }}="https://www.youtube-nocookie.com/embed/{{ $video }}?rel=0{{ with $video_start }}&start={{ . }}{{ end }}" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +<div class="ratio ratio-16x9"> + <iframe {{ if eq $lazyload true }}class="lazy" data-src{{ else }}src{{ end }}="https://www.youtube-nocookie.com/embed/{{ $video }}?rel=0{{ with $video_start }}&start={{ . }}{{ end }}" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> diff --git a/src/layouts/posts/single.html b/src/layouts/posts/single.html index bdf93030..cc47a3fc 100644 --- a/src/layouts/posts/single.html +++ b/src/layouts/posts/single.html @@ -1,7 +1,7 @@ {{ define "main" }} -<div class="posts-container px-3 mx-auto my-5"> +<div class="posts-container mx-auto my-5"> <div class="post"> - <h1 class="post-title fw-500">{{ .Page.Title }}</h1> + <h1 class="post-title fw-600">{{ .Page.Title }}</h1> {{ partial "author-info" (dict "context" .) -}} {{- if .Page.Params.video -}} diff --git a/src/static/assets/brand/bootstrap-logo-black.svg b/src/static/assets/brand/bootstrap-logo-black.svg new file mode 100644 index 00000000..31e66e1e --- /dev/null +++ b/src/static/assets/brand/bootstrap-logo-black.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
\ No newline at end of file diff --git a/src/static/assets/brand/bootstrap-logo-shadow.png b/src/static/assets/brand/bootstrap-logo-shadow.png Binary files differnew file mode 100644 index 00000000..3643b912 --- /dev/null +++ b/src/static/assets/brand/bootstrap-logo-shadow.png diff --git a/src/static/assets/brand/bootstrap-logo-white.svg b/src/static/assets/brand/bootstrap-logo-white.svg new file mode 100644 index 00000000..f73d7ca2 --- /dev/null +++ b/src/static/assets/brand/bootstrap-logo-white.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408" fill="#fff"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
\ No newline at end of file diff --git a/src/static/assets/brand/bootstrap-logo.svg b/src/static/assets/brand/bootstrap-logo.svg new file mode 100644 index 00000000..f0189652 --- /dev/null +++ b/src/static/assets/brand/bootstrap-logo.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg> diff --git a/src/static/assets/brand/bootstrap-social-logo.png b/src/static/assets/brand/bootstrap-social-logo.png Binary files differnew file mode 100644 index 00000000..9dbb732a --- /dev/null +++ b/src/static/assets/brand/bootstrap-social-logo.png diff --git a/src/static/assets/brand/bootstrap-social.png b/src/static/assets/brand/bootstrap-social.png Binary files differnew file mode 100644 index 00000000..c7adc6f8 --- /dev/null +++ b/src/static/assets/brand/bootstrap-social.png |
