page header nav fix, inline code style fix, table, navigator

src/backend/views/pages/page.twig

@@ -3,19 +3,21 @@
 {% block body %}
   <article class="page" data-module="page">
     <header class="page__header">
-      <a href="/" class="page__header-nav">
-        Documentation
-      </a>
-      {% if page._parent %}
-        <a class="page__header-nav"
-          {% if pageParent.uri %}
-            href="/{{ pageParent.uri }}"
-          {% else %}
-            href="/page/{{ pageParent._id }}"
-          {% endif %}>
-          {{ pageParent.title }}
+      <div class="page__header-nav">
+        <a href="/" class="page__header-nav-item">
+          Documentation
         </a>
-      {% endif %}
+        {% if page._parent %}
+          <a class="page__header-nav-item"
+            {% if pageParent.uri %}
+              href="/{{ pageParent.uri }}"
+            {% else %}
+              href="/page/{{ pageParent._id }}"
+            {% endif %}>
+            {{ pageParent.title }}
+          </a>
+        {% endif %}
+      </div>
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
       </time>

src/frontend/styles/components/navigator.pcss

@@ -10,13 +10,13 @@
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-link-hover);
-  border-radius: 10px;
   padding: 12px 16px 12px 16px;
   color: black;
   width: max-content;
-  font-weight: 500;
   font-size: 14px;
 
+  @apply --squircle;
+
   &--previous {
     align-items: flex-start;
     margin-left: 0;
@@ -31,11 +31,13 @@
     text-transform: capitalize;
     color: var(--color-direction-navigation);
     font-size: 12px;
-    font-weight: 400;
+    line-height: 140%;
+    margin-bottom: 2px;
   }
 
   &-label {
     width: 100%;
+    font-weight: 500;
   }
 }
 

src/frontend/styles/components/page.pcss

@@ -12,21 +12,23 @@
     }
 
     &-nav {
-      color: inherit;
-      text-decoration: none;
+      &-item {
+        color: inherit;
+        text-decoration: none;
 
-      @media (--mobile) {
-        display: none;
-      }
+        @media (--mobile) {
+          display: none;
+        }
 
-      &:hover {
-        color: var(--color-link-active);
-      }
+        &:hover {
+          color: var(--color-link-active);
+        }
 
-      &:not(:last-of-type) {
-        &::after {
-          content: '»';
-          margin: 0 0.7em 0 0.45em;
+        &:not(:last-of-type) {
+          &::after {
+            content: '»';
+            margin: 0 0.7em 0 0.45em;
+          }
         }
       }
     }
@@ -58,15 +60,12 @@
 
   .inline-code,
   .block-header a .inline-code {
-    @apply --squircle;
-
     font-size: 14px;
     display: inline-block;
     background: rgba(251,241,241,0.78);
     color: #C44545;
 
     padding: 3px 6px 2px;
-    border-radius: 2px;
     margin: -1px 2px 0;
     font-family: Menlo, Monaco, Consolas, Courier New, monospace;
     font-size: 0.84em;
@@ -100,7 +99,7 @@
         border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
         color: #1f6fd8;
         background-color: #daf1fe;
-        @apply --squircle;
+        border-radius: 0 !important;
 
         &:hover {
           background-color: #c8edfe;
@@ -301,6 +300,10 @@
     color: var(--color-code-comment);
   }
 
+  .hljs-regexp {
+    color: var(--color-code-tag);
+  }
+
 
 }
 
@@ -390,7 +393,6 @@
  * ==================
  */
 .block-table {
-  margin: 20px 0;
   table-layout: fixed;
   width: 100%;
   border-radius: 3px;
@@ -398,7 +400,7 @@
   border: 1px solid var(--color-line-gray);
 
   td {
-    padding: 8px 10px;
+    padding: 6px 8px;
     border: 1px solid var(--color-line-gray);
   }
 }
@@ -410,10 +412,9 @@
 .block-warning {
   display: flex;
   padding: 20px;
-  margin: 30px 0;
-  border-radius: 7px;
-  background: #fff9ef;
-  color: #392e2f;
+  background: #fffad0;
+
+  @apply --squircle;
 
   &__icon {
     margin-right: 15px;

src/frontend/styles/vars.pcss

@@ -1,5 +1,5 @@
 :root {
-  --color-text-main: #313649;
+  --color-text-main: #060C26;
   --color-text-second: #5d6068;
   --color-direction-navigation: #717682;
   --color-line-gray: #E8E8EB;