a bunch of updates

src/frontend/styles/components/header.pcss

@@ -10,15 +10,14 @@ html {
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 18px;
   flex-wrap: wrap;
-  height: var(--layout-height-header);
   box-sizing: border-box;
   position: sticky;
   top: 0;
   background: white;
   z-index: 10;
 
-  @media (--mobile){
-    line-height: 40px;
+  @media (--not-mobile){
+    height: var(--layout-height-header);
   }
 
   &__menu-link,
@@ -36,11 +35,13 @@ html {
   }
 
   &__menu-link {
-    padding: 4px 10px;
     font-weight: 500;
     transition: background-color .13s;
 
-    @apply --squircle;
+    @media (--not-mobile) {
+      padding: 4px 10px;
+      @apply --squircle;
+    }
 
     &:hover {
       background-color: var(--color-link-hover);
@@ -55,8 +56,9 @@ html {
     font-size: 16px;
 
     @media (--mobile) {
+      margin-top: 6px;
       flex-basis: 100%;
-      font-size: 12px;
+      font-size: 14px;
     }
 
     li {
@@ -85,8 +87,8 @@ html {
         @media (--mobile) {
           display: block;
           position: absolute;
-          right: 15px;
-          top: 15px;
+          right: 0;
+          top: 13px;
           line-height: 1em;
         }
       }

src/frontend/styles/components/page.pcss

@@ -30,6 +30,10 @@
 
       svg {
         margin: 0 6px;
+
+        @media (--mobile) {
+          display: none;
+        }
       }
     }
 
@@ -65,7 +69,7 @@
     background: rgba(251,241,241,0.78);
     color: #C44545;
 
-    padding: 3px 6px 2px;
+    padding: 3px 4px 2px;
     margin: -1px 2px 0;
     font-family: Menlo, Monaco, Consolas, Courier New, monospace;
     font-size: 0.84em;
@@ -95,11 +99,11 @@
       .inline-code {
         font-size: 14px;
         margin: 0;
-        padding: 2px 6px 1px;
+        padding: 2px 5px;
         border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
         color: #1f6fd8;
         background-color: #daf1fe;
-        border-radius: 0 !important;
+        border-radius: 3px !important;
 
         &:hover {
           background-color: #c8edfe;

src/frontend/styles/components/sidebar.pcss

@@ -22,6 +22,10 @@
       padding-bottom: 0;
     }
 
+    @media (--mobile){
+      margin: 0 -8px;
+    }
+
     &--hidden {
       display: none;
     }
@@ -78,6 +82,11 @@
     font-size: 14px;
     line-height: 21px;
     height: 29px;
+
+    @media (--mobile){
+      font-size: 16px;
+      line-height: 21px;
+    }
   }
 
   &__section-title,
@@ -88,6 +97,7 @@
     padding: 0 8px;
     transition-property: background-color;
     transition-duration: 0.1s;
+
     @apply --squircle;
   }
 
@@ -173,8 +183,6 @@
 
 
   &__toggler {
-    font-size: 13px;
-    cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);

src/frontend/styles/components/table-of-content.pcss

@@ -1,10 +1,9 @@
 .table-of-content {
   border-left: 1px solid var(--color-line-gray);
-  padding-left: var(--layout-padding-horizontal);
-
-  height: 100%;
+  max-height: 100%;
   overflow: auto;
-  padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+  padding: 0 var(--layout-padding-horizontal);
+  margin: var(--layout-padding-vertical) 0;
   box-sizing: border-box;
 
   --padding-x: 8px;

src/frontend/styles/vars.pcss

@@ -135,5 +135,6 @@
 @custom-media --desktop all and (min-width: 1050px);
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
+@custom-media --not-mobile all and (min-width: 981px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
 @custom-media --can-hover all and (hover:hover);