Skip to content

fix: Accessible font sizing and default colours #1864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix: Accessible font sizing and default colours #1864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7072cc8
Accessible font sizing and colours
BenjaminWalsh Sep 17, 2019
96785ca
Revert brand colour change
BenjaminWalsh Oct 6, 2019
33d008a
Revert badge brand colour change
BenjaminWalsh Oct 6, 2019
3611ecd
Merge branch 'master' into Accessible-Fonts-and-Colors
BenjaminWalsh Oct 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/@vuepress/core/lib/client/components/OutboundLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<style>
.icon.outbound {
color: #aaa;
color: #767676;
display: inline-block;
vertical-align: middle;
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions packages/@vuepress/core/lib/client/style/config.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ $accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$arrowBgColor = #767676
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$sidebarWidth = 300px
$contentWidth = 740px

// responsive breakpoints
Expand Down
3 changes: 2 additions & 1 deletion packages/@vuepress/theme-default/components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ $navbar-horizontal-padding = 1.5rem
right $navbar-horizontal-padding
top $navbar-vertical-padding
display flex
overflow-x scroll
.search-box
flex: 0 0 auto
vertical-align top
Expand All @@ -124,7 +125,7 @@ $navbar-horizontal-padding = 1.5rem
.can-hide
display none
.links
padding-left 1.5rem
overflow-x hidden
.site-name
width calc(100vw - 9.4rem)
overflow hidden
Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/theme-default/components/PageEdit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default {
color lighten($textColor, 25%)
.time
font-weight 400
color #aaa
color #767676

@media (max-width: $MQMobile)
.page-edit
Expand Down
5 changes: 2 additions & 3 deletions packages/@vuepress/theme-default/styles/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ html, body
background-color #fff

body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
font-size 1rem
color $textColor

.page
Expand All @@ -41,7 +41,6 @@ body
display none

.sidebar
font-size 16px
background-color #fff
width $sidebarWidth
position fixed
Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/theme-default/styles/mobile.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
// narrow desktop / iPad
@media (max-width: $MQNarrow)
.sidebar
font-size 15px
font-size 0.9rem
width $mobileSidebarWidth
.page
padding-left $mobileSidebarWidth
Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/theme-vue/components/CarbonAds.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default {
img
display block
.carbon-poweredby
color #999
color #767676
display block
margin-top 0.5em

Expand Down