Skip to content

Commit

Permalink
Redesign the blog (#256)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
mdo and XhmikosR committed May 13, 2022
1 parent f5fae5d commit 679fbd9
Show file tree
Hide file tree
Showing 31 changed files with 576 additions and 354 deletions.
13 changes: 6 additions & 7 deletions config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
45 changes: 45 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions src/assets/scss/_ads.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -35,5 +35,5 @@
.carbon-poweredby {
display: block;
margin-top: .75rem;
color: rgba(255, 255, 255, .5) !important;
color: var(--bs-gray-600) !important;
}
64 changes: 36 additions & 28 deletions src/assets/scss/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
101 changes: 70 additions & 31 deletions src/assets/scss/_navbar.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
4 changes: 0 additions & 4 deletions src/assets/scss/_subnav.scss

This file was deleted.

0 comments on commit 679fbd9

Please sign in to comment.