change font size according to screen size

resource/styles/scss/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}

resource/styles/scss/_on-edit.scss

@@ -143,13 +143,17 @@ body.on-edit {
 
     background: none;
 
-    h1 {
-      font-size: 20px;
+    h1#revision-path {
+      @include variable-font-size(20px);
       line-height: 1em;
+
+      .d-flex {
+        flex-wrap: nowrap;  // nowrap even if the path is too long
+      }
     }
 
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs) {
       display: none;
     }
   }

resource/styles/scss/_page.scss

@@ -52,10 +52,19 @@
       }
     }
 
-    h1 {
-      font-size: 28px;
+    .url-line {
+      color: #999;
+      font-size: 1rem;
+    }
+
+    h1#revision-path {
+      @include variable-font-size(28px);
+
       margin-top: 0;
       margin-bottom: 0;
+      .d-flex {
+        flex-wrap: wrap;  // for long page path
+      }
 
       // crowi layout only
       a.last-path {
@@ -68,11 +77,6 @@
 
     }
 
-    .url-line {
-      color: #999;
-      font-size: 1rem;
-    }
-
     // affix
     &.affix {
       width: 100%;
@@ -82,8 +86,8 @@
       z-index: 15; // over the .sidebar
       box-shadow: 0 0px 2px #999;
 
-      h1 {
-        font-size: 1.8em;
+      h1#revision-path {
+        @include variable-font-size(20px);
       }
     }
 

resource/styles/scss/style.scss

@@ -4,6 +4,7 @@
 // import variables
 @import '../agile-admin/inverse/variables';
 @import 'variables';
+@import 'mixins';
 
 @import 'override-bootstrap-variables';