Skip to content

Typography Improvements #430

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

Merged
merged 12 commits into from
Nov 27, 2016
Merged

Typography Improvements #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b617d2b
Added font stack definitions to _vars
pastelsky Nov 25, 2016
6fd48ff
Simplifying font stack to source sans family of fonts
pastelsky Nov 25, 2016
cf44c33
Updated monospace font stack to work on more OSes
pastelsky Nov 25, 2016
0847217
Changing body color to elephant
pastelsky Nov 25, 2016
4cbfd8a
Adding back Geomanist for headings
pastelsky Nov 25, 2016
1754a8f
Adding Source Code Pro bold for code headings
pastelsky Nov 25, 2016
85bdf89
Use font subsetting to remove unneeded characters.
pastelsky Nov 25, 2016
df41e72
Removing Geomanist Regular — Not needed anymore.
pastelsky Nov 25, 2016
fd61d89
Use file loader for loading fonts : make fonts nonblocking and don't …
pastelsky Nov 25, 2016
c20a984
Moving common colors and fonts to _vars
pastelsky Nov 26, 2016
a435cdb
Don't forget to code inside a tags
pastelsky Nov 26, 2016
0c15aad
Revert "Use file loader for loading fonts : make fonts nonblocking an…
pastelsky Nov 27, 2016
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
Binary file modified assets/geomanist-medium.woff
View file
Open in desktop
Binary file not shown.
Binary file modified assets/geomanist-medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed assets/geomanist-regular.woff
View file
Open in desktop
Binary file not shown.
Binary file removed assets/geomanist-regular.woff2
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion components/navigation/navigation-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@

width:0;
font-size:14px;
font-family:'Cabin', 'Century Gothic', sans-serif;
text-indent:0.5em;
border-bottom:1px solid getColor(fiord);
margin-right:0;
Expand Down
4 changes: 2 additions & 2 deletions components/navigation/search-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@
color: getColor(dusty-grey);

.algolia-docsearch-suggestion--highlight {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
box-shadow: none;
font-weight: bold;
}
}

.algolia-docsearch-suggestion--highlight {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
background: rgba(getColor(malibu), 0.15);
}

Expand Down
4 changes: 2 additions & 2 deletions components/sidebar-item/sidebar-item-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
color: inherit;

&:hover {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
}
}

Expand Down Expand Up @@ -61,7 +61,7 @@
}

.sidebar-item__title {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
}

.sidebar-item__toggle {
Expand Down
15 changes: 2 additions & 13 deletions styles/fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(https://fonts.googleapis.com/css?family=Cabin:400,400i,600,600i);

@font-face {
font-family: 'Geomanist';
src: url('../assets/geomanist-medium.woff2') format('woff2'),
url('../assets/geomanist-medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Geomanist';
src: url('../assets/geomanist-regular.woff2') format('woff2'),
url('../assets/geomanist-regular.woff') format('woff');
font-weight: 400;
url('../assets/geomanist-medium.woff') format('woff');
font-weight: 600;
font-style: normal;
}
10 changes: 5 additions & 5 deletions styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
*/

@import 'vars';
@import 'fonts';
@import 'functions';

@import './reset';
@import './fonts';

* {
box-sizing: inherit;
Expand All @@ -20,12 +20,12 @@ html {
}

body {
font: 400 getFontSize(0) 'Cabin', 'Century Gothic', sans-serif;
color: getColor(emperor);
font: 400 getFontSize(0) $font-stack-body;
color: getColor(elephant);
}

a {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
text-decoration: none;
transition: color 250ms;

Expand All @@ -37,7 +37,7 @@ a {
color:lighten(getColor(dusty-grey), 10%);

&:hover {
color: lighten(getColor(denim), 5%);
color: $text-color-highlight;
}
}

Expand Down
15 changes: 10 additions & 5 deletions styles/markdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
h6 { font-size: getFontSize(-1); }

h1, h2, h3, h4, h5, h6 {
font-family:'Geomanist', 'Century Gothic', sans-serif;
font-weight:400;
font-family: $font-stack-heading;
font-weight:600;
line-height:1;
margin:1.5em 0 0.25em;
color:getColor(mine-shaft);
color:getColor(fiord);

&:first-child { margin-top:0; }
tt, code { font-size:inherit; }
tt, code { font-size: 90%; color: inherit }
}

p, blockquote, table, pre {
Expand Down Expand Up @@ -160,7 +160,8 @@
}

code, tt {
font-family:'Ubuntu Mono', monospace;
font-family: $font-stack-code;
font-size: 90%;
margin: 0 2px;
padding: 2px 6px;
white-space: nowrap;
Expand All @@ -170,6 +171,10 @@
color: getColor(elephant);
}

a code {
color: $text-color-highlight;
}

pre {
background-color:getColor(mine-shaft);
font-size: 13px;
Expand Down
7 changes: 7 additions & 0 deletions styles/partials/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,10 @@ $screens: (
large: 1024px,
medium: 768px
);

$font-stack-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
$font-stack-heading: Geomanist, sans-serif;
$font-stack-code: 'Source Code Pro', Consolas, "Liberation Mono", Menlo, Courier, monospace;

$text-color-highlight: lighten(map-get($colors, denim), 5%);

2 changes: 2 additions & 0 deletions template.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/assets/favicon.ico">

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,500i" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<% for (var file in webpackConfig.template.cssFiles) { %>
<link href="<%= webpackConfig.template.cssFiles[file] %>" rel="stylesheet">
Expand Down