Language selector in header; Japanese fonts.

2026-08-23 19:20:54 +00:00 · 2019-10-25 17:18:03 -07:00
parent 8523aff6fe
commit 0a7da4f3c7
7 changed files with 113 additions and 19 deletions
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
--- a/assets/css/fonts-ja.css
+++ b/assets/css/fonts-ja.css
@@ -0,0 +1,58 @@
+/* TODO: trim this down to just the font(s) we want to use for Japanese. */
+
+/*
+"Makinas" free font by Mojiwaku Kenkyuu.
+もじワク研究からの「マキナス」フォント
+https://moji-waku.com/makinas/index.html
+*/
+@font-face {
+  font-family: 'Makinas-4-Flat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../font/Makinas-4-Flat.otf") format('opentype');
+  unicode-range: U+20, U+3001-303f, U+30A0-30fe, U+4e00-9faf, U+ff00-ffef; /* omit hiragana */
+}
+
+@font-face {
+  font-family: 'Makinas-4-Square';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../font/Makinas-4-Square.otf") format('opentype');
+  unicode-range: U+3040-309F; /* hiragana only */
+}
+
+
+/*
+851ゴチカクット フォント (http://pm85122.onamae.jp/851Gkktt.html　から)
+作成者の8:51:22pmさんに感謝
+*/
+@font-face {
+  font-family: '851Gkktt';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../font/851Gkktt_005.ttf") format('truetype');
+  unicode-range: U+20, U+3001-30fe, U+4e00-9faf, U+ff00-ffef;
+}
+
+
+/* M+ 1p from Google Fonts (unicode range simplified a bit) */
+@font-face {
+  font-family: 'M PLUS 1p';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('M PLUS 1p'), local('MPLUS1p-Regular'), url(https://fonts.gstatic.com/s/mplus1p/v19/e3tjeuShHdiFyPFzBRro_VYUcXm4y4YtjOJGYMp5iAw4B3f5iUc.0.woff2) format('woff2');
+  unicode-range: U+20, U+3001-30fe, U+4e00-9faf, U+ff00-ffef;
+}
+
+@font-face {
+  font-family: 'M PLUS 1p';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('M PLUS 1p Bold'), local('MPLUS1p-Bold'), url(https://fonts.gstatic.com/s/mplus1p/v19/e3tmeuShHdiFyPFzBRrQRBEgfivGoOYmg_dUa_BuiDU9F33s7CtHVU4.0.woff2) format('woff2');
+  unicode-range: U+20, U+3001-30fe, U+4e00-9faf, U+ff00-ffef;
+}
--- a/assets/font/Makinas-4-Flat.otf
+++ b/assets/font/Makinas-4-Flat.otf
--- a/assets/font/Makinas-4-Square.otf
+++ b/assets/font/Makinas-4-Square.otf
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -21,6 +21,9 @@
    <script src="assets/vendor/jquery-1.11.1.min.js"></script>

    <!-- Stylesheet -->
+    {% if target.lang=="ja" %}
+    <link href="assets/css/fonts-ja.css" rel="stylesheet" />
+    {% endif %}
    <link href="assets/css/devportal.css" rel="stylesheet" />

    <!-- Google Analytics -->
@@ -38,7 +41,7 @@

 </head>

-<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}{% block bodyclasses %}{% endblock %}">
+<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">

  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-black.svg" class="logo"  height="44" alt="XRP Ledger Dev Portal" /></a>
@@ -70,7 +73,19 @@
          <button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
        </div>
      </form>
-    </div>
+      <div class="nav navbar-nav language-selector">
+        <div class="dropdown">
+          <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="language_selector_header_btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
+          </button>
+          <div class="dropdown-menu" aria-labelledby="language_selector_header_btn">
+            {% for lang in config.languages %}
+            <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
+            {% endfor %}
+          </div><!--/.dropdown-menu-->
+        </div><!--/.dropdown-->
+      </div><!--/.language-selector-->
+    </div><!--/#navbarHolder-->
    <div class="menu-overlay"></div>
  </nav>

--- a/tool/template-footer.html
+++ b/tool/template-footer.html
@@ -41,7 +41,7 @@

  <section class="container-fluid p-5 pl-sm-0">

-    <nav role="navigation" id="language_selector" class="d-flex mb-3">
+    <nav role="navigation" class="d-flex mb-3 language-selector">
      <img class="language_selector_icon" src="assets/img/icon-language-selector.svg" width="32" height="40" alt="language selection icon" />
      <ul class="nav">
        {% for lang in config.languages %}
--- a/tool/xrpl.scss
+++ b/tool/xrpl.scss
@@ -82,7 +82,6 @@ h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: $black;
 }
-
 .landing section,
 .xrpl-footer .card-grid,
 #main_content_wrapper {
@@ -472,8 +471,8 @@ aside a.active-parent {
 /* Edit on GitHub link ------------------------------------------------------ */
 .github-edit-wrap {
  border: 1px solid $gray-400;
-  margin-right: 10px;
-  margin-left: 10px;
+  margin-right: 5px;
+  margin-left: 5px;
 }
 .github-edit-wrap:hover {
  border-color: $black;
@@ -562,7 +561,7 @@ td:nth-child(1) {
  margin: 0 48px;
 }

-@media (max-width: 1090px) {
+@media (max-width: 1105px) {
  .navbar.fixed-top {
    margin: 0 20px;
  }
@@ -581,12 +580,6 @@ td:nth-child(1) {
  opacity: 0.5;
 }

-@media (max-width: 1010px) {
-  .navbar-brand {
-    margin-right: 5px;
-  }
-}
-
 .navbar .navbar-nav .nav-link {
  font-size: 1rem;
  line-height: 52px;
@@ -1138,7 +1131,6 @@ a.current {
  list-style-type: square;
 }

-
@media (max-width: 991px) {
  .landing .card {
    padding-left: 0px;
@@ -1495,7 +1487,7 @@ a.current {
  padding-left: 14px;
 }

-.btn:not(.external-link)::after,
+.btn:not(.external-link):not(.dropdown-toggle)::after,
 .landing .card .level-1 a::after,
 .landing .card .level-2 a::after,
 .landing .card .curated-links li a::after,
@@ -1511,7 +1503,7 @@ a.current {
  content: " ↑"
 }

-.btn:not(.external-link):hover::after,
+.btn:not(.external-link):not(.dropdown-toggle):hover::after,
 .landing .card .level-1 a:hover::after,
 .landing .card .level-2 a:hover::after,
 .landing .card .curated-links li a:hover::after,
@@ -1649,19 +1641,48 @@ a.current {

 /* Language selector -------------------------------------------------------- */

-#language_selector {
+.language-selector {
  .nav-link {
    font-size: 16px;
  }
-  
+
  .nav-link.active {
    color: $black;
    font-weight: bold;
  }
 }

+#navbarHolder .language-selector .btn {
+  font-size: 0.875rem;
+  padding: .375rem .75rem;
+}
+
+/* Japanese language font override ------------------------------------------ */
+
+.lang-ja {
+  h1, h2, h3, h4, h5,
+  .github-edit-wrap .github-edit,
+  .navbar .navbar-nav .nav-link,
+  .content .children-display li a,
+  .right-sidebar .level-1 a,
+  .right-sidebar .separator,
+  .use-case-step-num {
+    //font-family: 'M PLUS 1p', 'Space Mono', sans-serif;
+    //font-family: '851Gkktt', 'Space Mono', sans-serif;
+    font-family: 'Makinas-4-Flat', 'Makinas-4-Square', 'Space Mono', sans-serif;
+  }
+}
+
 /* Responsive design for different viewscreens ------------------------------ */

+@media (max-width: 1010px) {
+  .navbar-brand,
+  .github-edit-wrap,
+  #navbar-search {
+    margin-right: 3px;
+  }
+}
+
@media (max-width: 991px) {

 #main_content_wrapper {