Skip to content

Commit b82578a

Browse files
rogerogersrogerogers
committed
feat: Upgrade Bootstrap to version 5 and update related SCSS and HTML layouts
Signed-off-by: rogerogers <rogers@rogerogers.com>
1 parent ce65333 commit b82578a

35 files changed

Lines changed: 113 additions & 96 deletions

‎assets/scss/_boxes.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
// box-variant creates the main style for a colored section used on the site.
55
@mixin box-variant($parent, $color-name, $color-value) {
6-
$text-color: color-yiq($color-value);
7-
$link-color: mix($blue, $text-color, lightness($color-value));
6+
$text-color: color-contrast($color-value);
7+
$link-color: mix($blue, $text-color);
88
$link-hover-color: rgba($link-color, 0.5) !default;
99

1010
#{$parent} {
@@ -27,12 +27,18 @@
2727
content: "";
2828
}
2929
}
30+
31+
p > a {
32+
color: $link-color;
33+
34+
&:hover,
35+
&:focus {
36+
color: $link-hover-color;
37+
}
38+
}
3039
}
3140
}
3241

33-
// Improve contrast for the links in paragraphs.
34-
@include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
35-
3642
@if $enable-gradients {
3743
@include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value,true);
3844
}

‎assets/scss/_colors.scss‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
// Add some local palette classes so you can do -bg-warning -text-warning etc. Even -bg-1 if you want to paint by numbers.
22
@mixin palette-variant($color-name, $color-value) {
3-
$text-color: color-yiq($color-value);
4-
$link-color: mix($blue, $text-color, lightness($color-value));
3+
$text-color: color-contrast($color-value);
4+
$link-color: mix($blue, $text-color);
55

66
$link-hover-color: rgba($link-color, .5) !default;
77

88
.-bg-#{$color-name} {
99
color: $text-color;
1010
background-color: $color-value;
11-
}
1211

13-
// Make links in paragraphs stand out more.
14-
@include link-variant(".-bg-#{$color-name} p > a", $link-color, $link-hover-color, false);
15-
12+
p > a {
13+
color: $link-color;
14+
15+
&:hover,
16+
&:focus {
17+
color: $link-hover-color;
18+
}
19+
}
20+
}
1621

1722
.-text-#{$color-name} {
1823
color: $color-value;
@@ -35,7 +40,7 @@
3540
@for $i from 1 through length($td-box-colors) {
3641
$value: nth($td-box-colors, $i);
3742
$name: $i - 1;
38-
$text-color: color-yiq($value);
43+
$text-color: color-contrast($value);
3944

4045
@include palette-variant($name, $value);
4146
}

‎assets/scss/_nav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
min-width: 100px;
8080
}
8181

82-
@include media-breakpoint-down(md) {
82+
@include media-breakpoint-down(lg) {
8383
padding-right: 0.5rem;
8484
padding-left: 0.75rem;
8585

‎assets/scss/_sidebar-tree.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@
157157
#content-desktop {display: block;}
158158
#content-mobile {display: none;}
159159

160-
@include media-breakpoint-down(md) {
160+
@include media-breakpoint-down(lg) {
161161

162162
#content-desktop {display: none;}
163163
#content-mobile {display: block;}

‎assets/scss/_variables.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ See https://github.com/twbs/bootstrap/pull/23260
66

77
@fa-font-path : "../webfonts";
88

9-
// Bootstrap flags. For more, see https://getbootstrap.com/docs/4.0/getting-started/theming/
9+
// Bootstrap flags. For more, see https://getbootstrap.com/docs/5.3/customize/options/
1010
$enable-gradients: true !default;
1111
$enable-rounded: true !default;
1212
$enable-shadows: true !default;
@@ -100,14 +100,15 @@ $h6-font-size: $font-size-base !default;
100100

101101
// Display styles
102102

103-
$display1-weight: $font-weight-bold !default;
104-
$display2-weight: $font-weight-bold !default;
105-
$display3-weight: $font-weight-bold !default;
106-
$display4-weight: $font-weight-bold !default;
107-
$display1-size: 3rem !default;
108-
$display2-size: 2.5rem !default;
109-
$display3-size: 2rem !default;
110-
$display4-size: 1.75rem !default;
103+
$display-font-weight: $font-weight-bold !default;
104+
$display-font-sizes: (
105+
1: 3rem,
106+
2: 2.5rem,
107+
3: 2rem,
108+
4: 1.75rem,
109+
5: 1.5rem,
110+
6: 1.25rem
111+
) !default;
111112

112113
// Space
113114

@@ -129,5 +130,5 @@ $navbar-dark-hover-color: rgba($white, 0.5) !default;
129130
$navbar-dark-active-color: $white !default;
130131
$navbar-dark-disabled-color: rgba($white, 0.25) !default;
131132

132-
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light".
133-
$yiq-contrasted-threshold: 200 !default;
133+
// The minimum contrast ratio for text readability.
134+
$min-contrast-ratio: 3 !default;

‎assets/scss/home.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@
152152
.home-used-by-wrapper {
153153
padding: 0 15vw !important;
154154
display: flex;
155-
flex-direction: column;
155+
flex-direction: row;
156156
flex-wrap: wrap;
157157
justify-content: center;
158158
align-items: center;

‎assets/scss/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ html {
4545
footer {
4646
min-height: 150px;
4747

48-
@include media-breakpoint-down(md) {
48+
@include media-breakpoint-down(lg) {
4949
min-height: 200px;
5050
}
5151
}

‎content/en/_index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ <h2>And more!</h2>
129129

130130
{{< blocks/section color="white" type="home-logo-warp">}}
131131
<h2 class="home-section-title">Created by</h2>
132-
<div class="row home-used-by-wrapper home-used-by-created">
132+
<div class="home-used-by-wrapper home-used-by-created">
133133
<a class="home-used-by-item" href="/" target="_blank" rel="noopener">
134134
<img class="used-by-logo" src="/img/usedby/ByteDance-en.png" alt="bytedance logo">
135135
</a>

‎content/zh/_index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,13 @@ <h2>其它</h2>
129129

130130
{{< blocks/section color="white" type="home-logo-warp">}}
131131
<h2 class="home-section-title">出品方</h2>
132-
<div class="row home-used-by-wrapper home-used-by-created">
132+
<div class="home-used-by-wrapper home-used-by-created">
133133
<a class="home-used-by-item" href="/" target="_blank" rel="noopener">
134134
<img class="used-by-logo" src="/img/usedby/bytedance.png" alt="bytedance logo">
135135
</a>
136136
</div>
137137
<h2 class="home-section-title">谁在用</h2>
138-
<div class="row home-used-by-wrapper">
138+
<div class="home-used-by-wrapper">
139139
<a class="home-used-by-item" href="https://www.douyin.com/" target="_blank" rel="noopener">
140140
<img class="used-by-logo" src="/img/usedby/douyin.png" alt="douyin logo">
141141
</a>

‎content/zh/css/docs.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
.home-used-by-wrapper {
9797
padding: 0 15vw !important;
9898
display: flex;
99-
flex-direction: column;
99+
flex-direction: row;
100100
flex-wrap: wrap;
101101
justify-content: center;
102102
align-items: center;

0 commit comments

Comments
 (0)