Visitar URL original
minor fixes · javascript-tutorial/server@cb37545 · GitHub
Skip to content

Commit cb37545

Browse files
iliakaniliakan
committed
minor fixes
1 parent e786652 commit cb37545

9 files changed

Lines changed: 620 additions & 82 deletions

File tree

‎modules/styles/blocks/00-variables/icons.styl‎

100755100644
Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,4 +417,12 @@ $font-buy-ebook
417417

418418
$font-qr-code
419419
@extend $font-icon
420-
content '\E865'
420+
content '\E865'
421+
422+
$font-down-dir
423+
@extend $font-icon
424+
content '\E808'
425+
426+
$font-up-dir
427+
@extend $font-icon
428+
content '\E83C'

‎modules/styles/blocks/00-variables/theme-variables.styl‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
:root {
2+
--white: #fff
3+
4+
--grey-120: #313130
5+
--grey-46: #716f6e
6+
--grey-30: #908e8d
7+
--grey-16: #c6c4c2
8+
--grey-10: #f7f4f3
9+
--grey-11: #e9e6e4
10+
--grey-13: #d9d6d5
11+
12+
--redBrand-46: #c4433a
13+
--redBrand-30: #df6c5d
14+
--redBrand-12: #fcd5ce
15+
16+
--blueAction-30: #748dcd
17+
--blueAction-46: #436ebd
18+
19+
--green-46: #407b5a
20+
--green-30: #4f9e72
21+
--green-16: #91c2a3
22+
--green-12: #cde3d5
23+
--green-10: #f0f7f2
24+
25+
--orange-30: #df6e41
26+
27+
--red-10: #feeeed
28+
--red-12: #fad5d2
29+
--red-30: #dc6968
30+
--red-46: #c73943
31+
32+
--yellow-46: #a15d00
33+
--yellow-30: #d07a00
34+
--yellow-10: #fff4e4
35+
--yellow-11: #fee3d4
36+
37+
--blue-46: #0d75a1
38+
--blue-30: #4b94be
39+
--blue-12: #d0e0ed
40+
--blue-10: #ecf2f8
41+
42+
--foregroundInverted: var(--grey-10)
43+
--foregroundDefault: var(--grey-120)
44+
--foregroundAlt: var(--grey-46)
45+
--foregroundSubtle: var(--grey-30)
46+
--foregroundAccent: var(--redBrand-46)
47+
--foregroundAccentHover: var(--redBrand-30)
48+
--foregroundAction: var(--blueAction-46)
49+
--foregroundConstructive: var(--green-46)
50+
--foregroundConstructiveAlt: var(--green-30)
51+
--foregroundCallout: var(--orange-30)
52+
--foregroundCalloutAlt: var(--yellow-30)
53+
--foregroundInformation: var(--blue-30)
54+
--foregroundPrimaryCTA: var(--white)
55+
56+
// borders
57+
--borderPrimary: var(--grey-11)
58+
--borderSecondary: var(--grey-10)
59+
--borderAlt: var(--yellow-10)
60+
--borderConstructive: var(--green-10)
61+
--borderAccent: var(--redBrand-12)
62+
--borderAccentHover: var(--redBrand-30)
63+
--borderAction: var(--blueAction-30)
64+
--borderImportant: var(--grey-10)
65+
66+
// backgrounds
67+
--backgroundBase: var(--white)
68+
--backgroundAlt: var(--grey-10)
69+
--backgroundAltHover: var(--grey-11)
70+
--backgroundInverted: var(--grey-120)
71+
--backgroundElevated1: var(--white)
72+
--backgroundElevated2: var(--white)
73+
74+
--backgroundConstructive: var(--green-46)
75+
--backgroundConstructiveAlt: var(--green-30)
76+
77+
--backgroundCalloutAlt: var(--yellow-10)
78+
79+
--backgroundTextWarningBanner: var(--backgroundCalloutAlt)
80+
81+
--backgroundTextHighlight: var(--yellow-11)
82+
83+
--backgroundProgressBar: var(--grey-13);
84+
--backgroundProgressBarValue: var(--green-16);
85+
86+
--foregroundSidebarLink: var(--foregroundDefault)
87+
--lessonsListBorder: var(--borderSecondary)
88+
--iframeBg: var(--white)
89+
90+
--backgroundPrismLineHighlight: #f5e7c6
91+
--prismBlockBg: var(--grey-10)
92+
--prismLineNumbersBg: #e7e5e3
93+
--prismColor: var(--foregroundDefault)
94+
95+
--prismTokenComment: #708090
96+
--prismTokenConstant: var(--foregroundDefault)
97+
--prismTokenPunctuation: #708090
98+
--prismTokenSymbols: #905
99+
--prismTokenSymbolsAlt: #690
100+
--prismTokenOperator: #a67f59
101+
--prismTokenAtRule: #07a
102+
--prismTokenKeywordControl: #07a
103+
--prismTokenFunctionAndClassname: #DD4A68
104+
--prismTokenError: #DD4A68
105+
--prismTokenRegex: #e90
106+
--prismTokenClassname: #DD4A68
107+
--prismTokenVariable: #e90
108+
--prismTokenKeyword: #07a
109+
--prismTokenImportant: #e90
110+
--prismTokenTagPunctuation: #999
111+
--prismTokenCdata: #708090
112+
--prismTokenAttrvalue: #07a
113+
114+
--gradientFadeOutLight: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,1) 80%)
115+
--gradientFadeOutDark: linear-gradient(to bottom, rgba(35,37,41,0) 0, rgba(35,37,41,1) 80%)
116+
--gradientFadeOut: var(--gradientFadeOutLight)
117+
}
118+
119+
html[data-theme="dark"] {
120+
--grey-120: #e2e3e7
121+
--grey-66: #c4c7cf
122+
--grey-46: #868d9a
123+
--grey-30: #696e79
124+
--grey-16: #41454c
125+
--grey-13: #35383f
126+
--grey-11: #292c31
127+
--grey-10: #232529
128+
129+
--redBrand-46: #e3796a
130+
--redBrand-30: #d2483e
131+
--redBrand-12: #602620
132+
133+
--blueAction-46: #84a0ef
134+
--blueAction-30: #427ae7
135+
136+
--green-46: #5fa67d
137+
--green-30: #448460
138+
--green-16: #315841
139+
--green-12: #253e2f
140+
--green-10: #1f3428
141+
142+
--orange-30: #ba5d38
143+
144+
--yellow-46: #cf9a69
145+
--yellow-30: #b2722a
146+
--yellow-10: #38230b
147+
--yellow-11: #462b0d
148+
149+
--blue-46: #78aacd
150+
--blue-30: #2a88b7
151+
--blue-12: #193c50
152+
--blue-10: #162936
153+
154+
155+
--red-10: #441b1b
156+
--red-12: #632425
157+
--red-30: #d55759
158+
--red-46: #e88b88
159+
160+
161+
// Semantics
162+
163+
// backgrounds
164+
--backgroundBase: var(--grey-10)
165+
--backgroundAlt: var(--grey-11)
166+
--backgroundAltHover: var(--grey-13)
167+
--backgroundElevated1: var(--grey-13)
168+
--backgroundElevated2: var(--grey-16)
169+
170+
--foregroundInverted: var(--grey-120)
171+
--foregroundAccent: var(--redBrand-46)
172+
--foregroundAccentHover: var(--redBrand-30)
173+
--foregroundSidebarLink: var(--foregroundDefault)
174+
--foregroundPrimaryCTA: var(--grey-10)
175+
--lessonsListBorder: var(--borderPrimary)
176+
177+
// borders
178+
--borderImportant: var(--grey-13)
179+
--borderPrimary: var(--grey-13)
180+
--borderAccent: var(--redBrand-12)
181+
182+
--backgroundProgressBar: var(--grey-13)
183+
--backgroundProgressBarValue: var(--grey-30)
184+
--iframeBg: var(--grey-66)
185+
--backgroundPrismLineHighlight: #44475A
186+
--prismBlockBg: #282a36
187+
--prismLineNumbersBg: var(--prismBlockBg)
188+
--prismColor: #F8F8F2
189+
190+
--backgroundCalloutAlt: #462900
191+
192+
--backgroundTextHighlight: var(--backgroundAlt)
193+
194+
--prismTokenComment: #6272a4
195+
--prismTokenConstant: #9876aa
196+
--prismTokenPunctuation: #F8F8F2
197+
--prismTokenSymbols: #BD93F9
198+
--prismTokenSymbolsAlt: #F1FA8C
199+
--prismTokenOperator: #FF79C6
200+
--prismTokenAtRule: #ce9178
201+
--prismTokenKeywordControl: #c586c0
202+
--prismTokenFunctionAndClassname: #8BE9FD
203+
--prismTokenRegex: #d16969
204+
--prismTokenClassname: #8BE9FD
205+
--prismTokenVariable: #9cdcfe
206+
--prismTokenKeyword: #FF79C6
207+
--prismTokenImportant: #FF79C6
208+
--prismTokenInterpolation: #F8F8F2
209+
--prismTokenTagPunctuation: #808080
210+
--prismTokenCdata: #808080
211+
--prismTokenAttrvalue: #ce9178
212+
213+
--gradientFadeOut: var(--gradientFadeOutDark)
214+
}

‎modules/styles/blocks/00-variables/variables.styl‎

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,52 @@
1+
@import "./theme-variables";
2+
3+
:root {
4+
--color_red: #b80000;
5+
--color_green: #469269;
6+
--color_black: #000;
7+
--color_orange: #f8ab47;
8+
--color_orange_light: #fdc073;
9+
--color-red-accent: #d44242;
10+
11+
--link_color: #0059b2;
12+
--light_link_color: #3b86c4;
13+
--alternate_link_color: #2974bb;
14+
--link_color_new: #3a8aed;
15+
--link_hover_color: #ba1000;
16+
--link_visited_color: #551a8b;
17+
--navigation_link_color: #696664;
18+
19+
--color-grey-25: #3b3b3b;
20+
--color-grey-60: #919191;
21+
--color-grey-80: #c6c6c6;
22+
--color-grey-90: #e2e2e2;
23+
24+
--text_yellow: #fffed7;
25+
--text_grey_dark: #373636;
26+
--text_courses_dark: #404040;
27+
28+
--color: #333;
29+
--code_color: #333;
30+
--gray_color: #666;
31+
--light_gray_color: #999;
32+
--ultralight_gray_color: #e1e1e1;
33+
--separator_color: #dfdfd0;
34+
--secondary_color: #b20600;
35+
--hover_color_correction: 25%;
36+
37+
--background: #fff;
38+
--background_light: #eee;
39+
--background_blocks: #f5f2f0;
40+
--background_yellow_light: #f6f4eb;
41+
--background_yellow_dark: #ede9d8;
42+
43+
--errorColor: #cc5b4d;
44+
}
45+
46+
html[data-theme="dark"] img {
47+
filter: brightness(0.8) contrast(1.2);
48+
}
49+
150
@import 'nib/border'
251
@import 'nib/clearfix'
352
@import 'nib/color-image'
@@ -17,6 +66,7 @@ color_green = #469269
1766
color_black = #000
1867
color_orange = #F8AB47
1968
color_orange_light = #FDC073
69+
color-red-accent = #D44242
2070

2171
link_color = #0059B2
2272
light_link_color = #3B86C4
@@ -26,6 +76,11 @@ link_hover_color = #BA1000
2676
link_visited_color = #551A8B
2777
navigation_link_color = #696664
2878

79+
color-grey-25 = #3b3b3b
80+
color-grey-60 = #919191
81+
color-grey-80 = #c6c6c6
82+
color-grey-90 = #e2e2e2
83+
2984
text_yellow = #FFFED7
3085
text_grey_dark = #373636
3186
text_courses_dark = #404040
@@ -45,16 +100,33 @@ background_blocks = #F5F2F0
45100
background_yellow_light = #F6F4EB
46101
background_yellow_dark = #EDE9D8
47102

103+
$errorColor = #CC5B4D
104+
48105
size = 14px
49106
lineheight = 20px
50107

51108
// System variables
52109

53110
// Typefaces
54-
font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
55-
secondary_font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
56-
fixed_width_font = 'Consolas', 'Lucida Console', 'Menlo', 'Monaco', monospace
57-
font_en = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
111+
if env=='ebook'
112+
if lang=='ko'
113+
font = 'Nanum Gothic'
114+
secondary_font = 'Nanum Gothic'
115+
fixed_width_font = 'Nanum Gothic Coding'
116+
else
117+
font = sans-serif
118+
secondary_font = sans-serif
119+
fixed_width_font = 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace
120+
121+
else
122+
if lang=='ja'
123+
font = BlinkMacSystemFont, -apple-system, "Hiragino Kaku Gothic ProN","メイリオ", sans-serif
124+
secondary_font = BlinkMacSystemFont, -apple-system, "Hiragino Kaku Gothic ProN","メイリオ", sans-serif
125+
else
126+
font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
127+
secondary_font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
128+
129+
fixed_width_font = 'Consolas', 'Lucida Console', 'Menlo', 'Monaco', monospace
58130

59131
// Font sizes
60132
font_size_xs = 12px
@@ -128,6 +200,7 @@ media_step_2 = 1170px
128200
media_step_3 = 1220px
129201
largescreen = 1420px
130202

203+
tablet_large = '(max-width: 1024px)'
131204
tablet_medium = '(max-width: 890px)'
132205
tablet = '(max-width: 840px)'
133206
phone = '(max-width: 568px)'
@@ -141,7 +214,7 @@ sitetoolbar_secondary_bg = #F5F2F0
141214
sitetoolbar_secondary_link = #498CBE
142215

143216
$yellow-border
144-
border-radius 10px
145-
border 3px solid #F2E7B3
217+
border-radius 10px
218+
border 3px solid #F2E7B3
146219

147220
@require "../mixins/*"

‎modules/styles/blocks/05-flex-column/flex-column.styl‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.flex-column
2+
display flex
3+
flex-direction column
4+
/*
5+
&_width-limit-wide
6+
max-width 940px
7+
margin 0 auto
8+
9+
&_course-detail
10+
position relative
11+
max-width 940px
12+
margin 0 auto
13+
box-sizing border-box
14+
padding-top 24px
15+
padding-right 323px
16+
17+
@media screen and (max-width 767px)
18+
padding-right 0
19+
padding-top 0
20+
*/

0 commit comments

Comments
 (0)