Add lang specific font stacks for CJK (#6007)

* Add lang specific font stacks

* Force font changes

Signed-off-by: Andrew Thornton <[email protected]>

* Fix icons

Signed-off-by: Andrew Thornton <[email protected]>

* Fix octicons and icons

Signed-off-by: Andrew Thornton <[email protected]>

* Just override the semantic ui fonts only

Signed-off-by: Andrew Thornton <[email protected]>

* Missed the headers... override them too

* Missed some more semantic ui stuff

* Fix PT Sans

Signed-off-by: Andrew Thornton <[email protected]>

* More changes

Signed-off-by: Andrew Thornton <[email protected]>

* Squashed commit of the following:

commit 7d1679e9079541359869c9e677ba7412bfcc59f3
Author: Mike L <[email protected]>
Date:   Wed Mar 13 13:53:49 2019 +0100

    Remove missed YaHei leftover from _home.less

commit 0079121ea91860a323ed4e5cc1a9c0d490d9cefd
Author: Mike L <[email protected]>
Date:   Wed Mar 13 12:03:54 2019 +0100

    Fix overdone fixes (inherit, :lang)

commit 62c919915928ec1db4731d547e95885f91a0618d
Author: Mike L <[email protected]>
Date:   Wed Mar 13 02:29:10 2019 +0100

    Fix elements w/ explicit lang (language chooser)

commit b3117587aa2eb8570d60bed583a11ee5565418be
Author: Mike L <[email protected]>
Date:   Tue Mar 12 20:17:26 2019 +0100

    Fix textarea also (to match body)

commit 81cedf2c3012c4dd05a7680782b4a98e1b947f67
Author: Mike L <[email protected]>
Date:   Tue Mar 12 19:41:39 2019 +0100

    Revert css temporarily to fix conflict

commit 80ff82797f3203cbeaf866f22e961334e137df89
Author: Mike L <[email protected]>
Date:   Tue Mar 12 19:15:30 2019 +0100

    Tweak CJK, fix Yu Gothic, more monospace inherits

commit 581dceb9a869646c2c486dabb925c88c2680d70c
Author: Mike L <[email protected]>
Date:   Mon Mar 11 13:09:26 2019 +0100

    Add Lato for latin extd. & cyrillic, improve CJK

* update stylesheet

Author: zeripath

modules/context/context.go

@@ -194,6 +194,7 @@ func Contexter() macaron.Handler {
 			},
 			Org: &Organization{},
 		}
+		ctx.Data["Language"] = ctx.Locale.Language()
 		c.Data["Link"] = ctx.Link
 		ctx.Data["PageStartTime"] = time.Now()
 		// Quick responses appropriate go-get meta with status 200

public/css/index.css

@@ -1,11 +1,133 @@
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-regular.eot');
+    src: url('../vendor/assets/lato-fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-regular.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-regular.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-italic.eot');
+    src: url('../vendor/assets/lato-fonts/lato-italic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-italic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-italic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-bold.eot');
+    src: url('../vendor/assets/lato-fonts/lato-bold.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bold.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bold.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot');
+    src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bolditalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Yu Gothic';
+    src: local('Yu Gothic Medium');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Yu Gothic';
+    src: local('Yu Gothic Bold');
+    font-weight: 700;
+}
+
+@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;
+@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
+
+.override-fonts(@fonts) {
+    textarea {
+        font-family: @fonts, sans-serif;
+    }
+
+    .markdown:not(code) {
+        font-family: @fonts, sans-serif;
+    }
+
+    /* We're going to just override the semantic fonts here */
+    h1, h2, h3, h4, h5 {
+        font-family: Lato, @fonts, sans-serif;
+    }
+
+    .home .hero h1, .home .hero h2 {
+        font-family: 'PT Sans Narrow', Lato, @fonts, sans-serif;
+    }
+
+    .ui.accordion .title:not(.ui),
+    .ui.button,
+    .ui.card > .content > .header.ui.card > .content > .header,
+    .ui.category.search > .results .category > .name,
+    .ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url],
+    .ui.header,
+    .ui.items > .item > .content > .header,
+    .ui.list .list > .item .header,
+    .ui.list > .item .header,
+    .ui.menu,
+    .ui.message .header,
+    .ui.modal > .header,
+    .ui.popup > .header,
+    .ui.search > .results .result .title,
+    .ui.search > .results > .message .header,
+    body,
+    .ui.input>input, .ui.input input,
+    .ui.statistics .statistic > .value,
+    .ui.statistic > .value,
+    .ui.statistics .statistic > .label,
+    .ui.statistic > .label,
+    .ui.steps .step .title,
+    .ui.text.container,
+    .ui.language > .menu > .item&
+    {
+        font-family: Lato, @fonts, sans-serif;
+    }
+}
+
+.override-fonts(@default-fonts);
+
 body {
-    font-family: "Lato", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
     background-color: #fff;
     overflow-y: auto;
     -webkit-font-smoothing: antialiased;
     display: flex;
     flex-direction: column;
 }
+
+@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
+:lang(ja) {
+    .override-fonts(@default-fonts, @ja-fonts;);
+}
+
+@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
+:lang(zh-CN) {
+    .override-fonts(@default-fonts, @zh-CN-fonts;);
+}
+
+@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
+:lang(zh-TW) {
+    .override-fonts(@default-fonts, @zh-TW-fonts;);
+}
+
+@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
+:lang(zh-HK) {
+    .override-fonts(@default-fonts, @zh-HK-fonts;);
+}
+
+@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
+:lang(ko) {
+    .override-fonts(@default-fonts, @ko-fonts;);
+}
+
 img {
     border-radius: 3px;
 }
@@ -19,7 +141,7 @@ a {
     border-radius: .28571429rem !important;
 }
 pre, code {
-    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font: 12px @monospaced-fonts, monospace;
     &.raw {
         padding: 7px 12px;
         margin: 10px 0;
@@ -337,7 +459,7 @@ pre, code {
     }
 
     .sha.label {
-        font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
+        font-family: @monospaced-fonts, monospace;
         font-size: 13px;
         padding: 6px 10px 4px 10px;
         font-weight: normal;
@@ -391,7 +513,7 @@ pre, code {
 }
 
 .file-comment {
-    font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    font: 12px @monospaced-fonts, monospace;
     color: rgba(0,0,0,.87);
 
 }

public/less/_base.less

@@ -99,7 +99,7 @@
             }
         }
         .commit-id {
-            font-family: Consolas, monospace;
+            font-family: @monospaced-fonts, monospace;
         }
         code {
             padding: 1px;

public/less/_dashboard.less

@@ -1,5 +1,5 @@
 .CodeMirror {
-    font: 14px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font: 14px @monospaced-fonts, monospace;
     &.cm-s-default {
           border-radius: 3px;
           padding: 0 !important;

public/less/_editor.less

@@ -192,7 +192,7 @@
 
 .githook {
     textarea {
-        font-family: monospace;
+        font-family: @monospaced-fonts, monospace;
     }
 }
 

public/less/_form.less

@@ -3,9 +3,6 @@
 		max-width: 220px;
 	}
 	.hero {
-		h1, h2 {
-			font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
-		}
 		@media only screen and (max-width: 767px) {
 			h1 {
 				font-size: 3.5em;

public/less/_home.less

@@ -1,6 +1,5 @@
 .markdown:not(code) {
     overflow: hidden;
-    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
     font-size: 16px;
     line-height: 1.6 !important;
     word-wrap: break-word;

public/less/_markdown.less

@@ -330,7 +330,7 @@
             .code-view {
                 * {
                     font-size: 12px;
-                    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+                    font-family: @monospaced-fonts, monospace;
                     line-height: 20px;
                 }
 
@@ -430,7 +430,7 @@
                     .branch-name {
                         display: inline-block;
                         padding: 3px 6px;
-                        font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+                        font: 12px @monospaced-fonts, monospace;
                         color: rgba(0,0,0,0.65);
                         background-color: rgba(209,227,237,0.45);
                         border-radius: 3px;
@@ -699,7 +699,7 @@
                     }
                     textarea {
                         height: 200px;
-                        font-family: "Consolas", monospace;
+                        font-family: @monospaced-fonts, monospace;
                     }
                 }
 
@@ -802,7 +802,7 @@
             }
             textarea {
                 height: 200px;
-                                font-family: "Consolas", monospace;
+                                font-family: @monospaced-fonts, monospace;
             }
         }
     }
@@ -1346,7 +1346,7 @@
         &.new {
             .CodeMirror {
                 .CodeMirror-code {
-                    font-family: "Consolas", monospace;
+                    font-family: @monospaced-fonts, monospace;
                     .cm-comment {
                         background: inherit;
                     }

public/less/_repository.less

@@ -109,6 +109,6 @@
 }
 
 .file-comment {
-    font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    font: 12px @monospaced-fonts, monospace;
     color: rgba(0,0,0,.87);
 }

public/less/_review.less

@@ -12,7 +12,7 @@
 				<div class="text">{{.LangName}}</div>
 				<div class="menu">
 					{{range .AllLangs}}
-						<a class="item {{if eq $.Lang .Lang}}active selected{{end}}" href="{{if eq $.Lang .Lang}}#{{else}}{{$.Link}}?lang={{.Lang}}{{end}}">{{.Name}}</a>
+						<a lang="{{.Lang}}" class="item {{if eq $.Lang .Lang}}active selected{{end}}" href="{{if eq $.Lang .Lang}}#{{else}}{{$.Link}}?lang={{.Lang}}{{end}}">{{.Name}}</a>
 					{{end}}
 				</div>
 			</div>

public/vendor/assets/lato-fonts/lato-bold.eot

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{.Language}}">
 <head data-suburl="{{AppSubUrl}}">
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">