Landing + mobile adoptation (#38)

* Landing + mobile adoptation

* replace svg

* small updates

* use landing as iframe

* Delete .codexdocsrc

* remove unused

* updates

* Delete _index.twig

* update header shrink in chrome

* Delete .codexdocsrc

* remove focus

src/frontend/styles/components/aside.pcss

@@ -2,6 +2,16 @@
   font-size: 15px;
   color: var(--color-text-second);
 
+  @media (--mobile) {
+    font-size: 13px;
+    display: none;
+    margin-top: 20px;
+  }
+
+  &--toggled {
+    display: block !important;
+  }
+
   a {
     text-decoration: none;
   }
@@ -9,9 +19,21 @@
   &__section {
     margin-bottom: 30px;
 
+    @media (--mobile) {
+      margin-bottom: 20px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
     &-title {
       margin-bottom: 15px;
       color: var(--color-link-active);
+
+      @media (--mobile) {
+        margin-bottom: 10px;
+      }
     }
 
     &-list {
@@ -26,3 +48,18 @@
     }
   }
 }
+
+.docs-aside-toggler {
+  display: none;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--color-text-second);
+
+  @media (--mobile) {
+    display: block;
+  }
+
+  svg {
+    margin-right: 10px;
+  }
+}

src/frontend/styles/components/header.pcss

@@ -1,9 +1,12 @@
 .docs-header {
   display: flex;
+  flex-shrink: 0;
   padding: 0 var(--layout-padding-horisontal);
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 15.8px;
   line-height: 50px;
+  flex-wrap: wrap;
+  position: relative;
 
   a {
     display: inline-block;
@@ -18,10 +21,40 @@
   &__menu {
     display: flex;
     margin: 0 0 0 auto;
+    padding-left: 0;
+
+    @media (--mobile) {
+      flex-basis: 100%;
+      font-size: 12px;
+    }
 
     li {
+      display: inline-flex;
+      align-items: center;
       list-style: none;
       margin-left: 20px;
+
+      @media (--mobile) {
+        margin-left: 0;
+        margin-right: 15px;
+      }
+    }
+
+    &-add {
+      @media (--mobile) {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        line-height: 1em;
+        margin: 0 !important;
+      }
+      a {
+        @media (--mobile) {
+          font-size: 0;
+          padding: 8px;
+          margin-right: 0;
+        }
+      }
     }
 
     a:not(.docs-header__button) {

src/frontend/styles/components/landing.pcss

@@ -0,0 +1,30 @@
+/**
+ * Index page landing iframe
+ */
+.landing-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.landing-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+  transform: translate(-50%, -50%);
+
+  & > svg {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.landing-frame {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 500ms ease;
+  will-change: opacity;
+}

src/frontend/styles/components/page.pcss

@@ -6,10 +6,18 @@
     display: flex;
     color: var(--color-text-second);
 
+    @media (--mobile) {
+      font-size: 13px;
+    }
+
     &-nav {
       color: inherit;
       text-decoration: none;
 
+      @media (--mobile) {
+        display: none;
+      }
+
       &:hover {
         color: var(--color-link-active);
       }
@@ -24,6 +32,10 @@
 
     &-time {
       margin-left: auto;
+
+      @media (--mobile) {
+        margin-left: 0;
+      }
     }
 
     &-button {

src/frontend/styles/layout.pcss

@@ -2,14 +2,31 @@
   display: flex;
   padding: 0 var(--layout-padding-horisontal);
 
+  @media (--mobile) {
+    flex-wrap: wrap;
+  }
+
   &__aside {
     width: var(--layout-width-aside);
+
+    @media (--mobile) {
+      width: 100%;
+      flex-basis: 100%;
+      padding: 20px var(--layout-padding-horisontal) !important;
+      margin: 0 calc(-1 * var(--layout-padding-horisontal));
+      border-bottom: 1px solid var(--color-line-gray);
+    }
   }
 
   &__content {
     flex-grow: 2;
     word-wrap: break-word;
 
+    @media (--mobile) {
+      width: 100%;
+      flex-basis: 100%;
+    }
+
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
@@ -19,5 +36,9 @@
   &__aside,
   &__content {
     padding: var(--layout-padding-vertical) 0;
+
+    @media (--mobile) {
+      padding: 20px 0;
+    }
   }
 }

src/frontend/styles/main.pcss

@@ -5,6 +5,7 @@
 @import url('components/aside.pcss');
 @import url('components/writing.pcss');
 @import url('components/page.pcss');
+@import url('components/landing.pcss');
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;

src/frontend/styles/vars.pcss

@@ -14,6 +14,11 @@
   --layout-width-aside: 200px;
   --layout-width-main-col: 650px;
 
+  @media (--mobile) {
+    --layout-padding-horisontal: 15px;
+    --layout-padding-vertical: 15px;
+  }
+
   --button {
     display: inline-block;
     padding: 9px 15px;
@@ -25,6 +30,7 @@
     line-height: 1em;
     text-decoration: none;
     cursor: pointer;
+    white-space: nowrap;
 
     svg {
       margin: 0 0.3em 0 -0.05em;
@@ -51,3 +57,11 @@
     }
   }
 }
+
+/**
+* Custom media queries
+*/
+@custom-media --desktop all and (min-width: 1050px);
+@custom-media --tablet all and (max-width: 1050px);
+@custom-media --mobile all and (max-width: 980px);
+@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);