Skip to content

Commit 9e63b41

Browse files
brsoffbrsoff
committed
[PYT-100] Update Article styles as per redlined doc
1 parent 744c5eb commit 9e63b41

18 files changed

+314
-181
lines changed

‎_includes/footer_scripts.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<script src="{{ site.baseurl }}/assets/mobile-menu.js"></script>
2+
<script src="{{ site.baseurl }}/assets/scroll-to-anchor.js"></script>
23

34
<script type="text/javascript">
45
mobileMenu.bind();
5-
anchors.options = {icon: "#"};
66
anchors.add('article h2, article h3, article h4, article h5');
7+
8+
// Add class to links that have code blocks, since we cannot create links in code blocks
9+
$("a code.highlighter-rouge").each(function(e) {
10+
$(this).closest("a").addClass("has-code");
11+
});
12+
13+
scrollToAnchor.bind();
714
</script>

‎_layouts/blog_detail.html

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,18 @@ <h1>
2323
<div class="main-content-wrapper">
2424
<div class="main-content">
2525
<div class="container">
26-
27-
<div class="col-md-12">
28-
<img src="{{ site.baseurl }}/assets/images/logo-icon.svg" class="img-fluid author-icon">
29-
<article>
30-
<p class="author">
31-
by
32-
{% if page.author %}
33-
{{ page.author }}
34-
{% else %}
35-
{{ site.default_author }}
36-
{% endif %}
37-
</p>
38-
{{ content }}
39-
</article>
40-
</div>
26+
<img src="{{ site.baseurl }}/assets/images/logo-icon.svg" class="img-fluid author-icon">
27+
<article class="pytorch-article">
28+
<p class="author">
29+
by
30+
{% if page.author %}
31+
{{ page.author }}
32+
{% else %}
33+
{{ site.default_author }}
34+
{% endif %}
35+
</p>
36+
{{ content }}
37+
</article>
4138
</div>
4239
</div>
4340
</div>
@@ -47,4 +44,4 @@ <h1>
4744

4845
</body>
4946

50-
</html>
47+
</html>

‎_layouts/ecosystem_detail.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h1>{{ page.title }}</h1>
2323
<div class="main-content-wrapper">
2424
<div class="main-content">
2525
<div class="container">
26-
<article>
26+
<article class="pytorch-article">
2727
{{ content }}
2828
</article>
2929
</div>

‎_posts/2018-04-22-pytorch-0_4_0-migration-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ In this release, we introduce [`torch.dtype`](http://pytorch.org/docs/0.4.0/tens
192192

193193
Below is a complete list of available [`torch.dtype`](http://pytorch.org/docs/0.4.0/tensor_attributes.html#torch.torch.dtype)s (data types) and their corresponding tensor types.
194194

195-
| Data | type torch.dtype | Tensor types |
195+
| Data | `type torch.dtype` | Tensor types |
196196
|------|------------------|--------------|
197197
| 32-bit floating point | `torch.float32` or `torch.float` | `torch.*.FloatTensor`
198198
| 64-bit floating point | `torch.float64` or `torch.double` | `torch.*.DoubleTensor`

‎_sass/_variables.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ $black: #000000;
33
$white: #ffffff;
44
$dark_grey: #8b8a8b;
55
$light_grey: #f3f4f7;
6-
$orange: #e44c2c;
7-
$red_orange: #ee4c2c;
6+
$orange: #ee4c2c;
87
$medium_grey: #f1f5f8;
98
$not_quite_black: #262626;
109
$slate: #252627;
1110
$very_light_grey: #f9fafc;
1211
$very_dark_grey: #939393;
13-
$content_text_color: #767676;
12+
$content_text_color: #545454;
1413
$code_background_color: #f7f7f9;
1514
$dark_blue: #3d5a97;
1615
$quick_start_grey: #8c8c8c;
1716
$command_block_black: #4a4a4a;
1817
$smoky_grey: #bfbfc1;
1918
$medium_smoky_grey: #a5a5a5;
19+
$code_link_color: #4974D1;
2020

2121
$desktop_header_height: 90px;
2222
$mobile_header_height: 68px;
@@ -45,6 +45,10 @@ $site_horizontal_padding: 30px;
4545
@return ($px / 16px) * 1rem;
4646
}
4747

48+
@mixin code_font_family {
49+
font-family: IBMPlexMono,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
50+
}
51+
4852
@mixin clearfix {
4953
&:before,
5054
&:after {

‎_sass/article.scss

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
article.pytorch-article {
2+
max-width: 920px;
3+
margin: 0 auto;
4+
5+
h2,
6+
h3,
7+
h4,
8+
h5,
9+
h6 {
10+
margin-top: rem(30px);
11+
margin-bottom: rem(24px);
12+
color: $not_quite_black;
13+
}
14+
15+
h2 {
16+
font-size: rem(24px);
17+
letter-spacing: 1.33px;
18+
line-height: rem(32px);
19+
margin-top: rem(50px);
20+
text-transform: uppercase;
21+
}
22+
23+
h3 {
24+
font-size: rem(24px);
25+
letter-spacing: -0.25px;
26+
line-height: rem(30px);
27+
text-transform: none;
28+
}
29+
30+
h4,
31+
h5,
32+
h6 {
33+
font-size: rem(18px);
34+
letter-spacing: -0.19px;
35+
line-height: rem(30px);
36+
}
37+
38+
p {
39+
margin-bottom: rem(18px);
40+
}
41+
42+
p,
43+
ul li,
44+
ol li,
45+
dl dt,
46+
dl dd,
47+
blockquote {
48+
font-size: rem(18px);
49+
line-height: rem(30px);
50+
color: $content_text_color;
51+
}
52+
53+
table {
54+
margin-bottom: rem(40px);
55+
width: 100%;
56+
}
57+
58+
table thead {
59+
border-bottom: 1px solid #cacaca;
60+
}
61+
62+
table th,
63+
table tr,
64+
table td {
65+
color: $content_text_color;
66+
font-size: rem(16px);
67+
line-height: rem(36px);
68+
letter-spacing: -0.17px;
69+
}
70+
71+
table th {
72+
padding: rem(10px);
73+
color: $not_quite_black;
74+
}
75+
76+
77+
table td {
78+
padding: rem(5px);
79+
}
80+
81+
table tr th:first-of-type,
82+
table tr td:first-of-type {
83+
padding-left: 0;
84+
}
85+
86+
ul,
87+
ol{
88+
margin: rem(24px) 0 rem(50px) 0;
89+
90+
@include desktop {
91+
padding-left: rem(100px);
92+
}
93+
94+
li {
95+
margin-bottom: rem(10px);
96+
}
97+
}
98+
99+
dl {
100+
margin-bottom: rem(40px);
101+
}
102+
103+
dl dt {
104+
margin-bottom: rem(12px);
105+
font-weight: 400;
106+
}
107+
108+
pre {
109+
margin-bottom: rem(40px);
110+
}
111+
112+
hr {
113+
margin-top: rem(75px);
114+
margin-bottom: rem(75px);
115+
}
116+
117+
blockquote {
118+
font-size: rem(18px);
119+
margin: 0 auto;
120+
margin-bottom: rem(40px);
121+
width: 65%;
122+
}
123+
124+
img {
125+
width: 100%;
126+
}
127+
}

‎_sass/base_styles.scss

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ a, em, i, b, strong, u, span {
1515
font-size: inherit;
1616
}
1717

18-
1918
a:link,
2019
a:visited,
2120
a:hover {
@@ -130,18 +129,6 @@ a, .btn {
130129
color: $dark_grey;
131130
}
132131

133-
pre {
134-
padding: rem(36px);
135-
background-color: $code_background_color;
136-
span {
137-
font-family: inherit;
138-
}
139-
}
140-
141-
.highlight {
142-
background-color: $code_background_color;
143-
}
144-
145132
.sidebar-links .top-section {
146133
color: $black;
147134
}
@@ -308,10 +295,12 @@ pre {
308295
}
309296

310297
.anchorjs-link {
311-
color: $slate;
312-
&:hover {
313-
color: inherit;
314-
text-decoration: none;
298+
color: $quick_start_grey !important;
299+
@include desktop {
300+
&:hover {
301+
color: inherit;
302+
text-decoration: none !important;
303+
}
315304
}
316305
}
317306

‎_sass/blog.scss

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
text-transform: capitalize;
99

1010
&.selected {
11-
color: $red_orange !important;
11+
color: $orange !important;
1212
text-decoration: underline;
13-
text-decoration-color: $red_orange;
13+
text-decoration-color: $orange;
1414
opacity: 0.75 !important;
1515
}
1616
}
@@ -62,19 +62,12 @@
6262
}
6363
}
6464

65-
p {
66-
opacity: 0.8;
67-
font-size: rem(18px);
68-
color: #545454;
69-
letter-spacing: 0;
70-
line-height: rem(28px);
71-
}
72-
7365
.author {
74-
color: $red_orange;
66+
color: $orange;
7567
font-size: rem(20px);
76-
letter-spacing: 0;
68+
letter-spacing: -0.6px;
7769
line-height: rem(30px);
70+
margin-bottom: rem(30px);
7871
}
7972

8073
.author-icon {
@@ -132,7 +125,7 @@
132125
font-size: rem(20px);
133126
letter-spacing: 0;
134127
line-height: rem(34px);
135-
color: $red_orange;
128+
color: $orange;
136129
}
137130

138131
@media (max-width: 1067px) {

‎_sass/bootstrap-overrides.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,3 @@
1313
padding-left: 0;
1414
padding-right: 0;
1515
}
16-
17-
code, kbd, pre, samp {
18-
font-family: IBMPlexMono,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
19-
}

‎_sass/code.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
code, kbd, pre, samp {
2+
@include code_font_family;
3+
span {
4+
@include code_font_family;
5+
}
6+
}
7+
8+
pre {
9+
padding: rem(18px);
10+
background-color: $code_background_color;
11+
12+
code {
13+
font-size: rem(14px);
14+
}
15+
16+
&.highlight {
17+
background-color: $code_background_color;
18+
line-height: rem(21px);
19+
}
20+
}
21+
22+
code.highlighter-rouge {
23+
color: $content_text_color;
24+
background-color: $light_grey;
25+
padding: 2px 6px;
26+
}
27+
28+
a:link,
29+
a:visited,
30+
a:hover {
31+
code.highlighter-rouge {
32+
color: $code_link_color;
33+
}
34+
35+
&.has-code {
36+
color: $code_link_color;
37+
}
38+
}
39+
40+
p,
41+
h1,
42+
h2,
43+
h3,
44+
h4,
45+
h5,
46+
h6 {
47+
code {
48+
font-size: 78.5%;
49+
}
50+
}

0 commit comments

Comments
 (0)