Add styles for mobile overview page

js/components/PageOverview.js

@@ -89,7 +89,7 @@ class PageOverview extends React.Component {
           <HeroHeadline>Technologies Overview</HeroHeadline>
         </HeadlineGroup>
         <div className="filter">
-          <div className="split">
+          <div className="split split--filter">
             <div className="split__left">
               <Search onChange={this.handleSearchTermChange} value={this.state.search} />
             </div>
@@ -133,7 +133,7 @@ class PageOverview extends React.Component {
                                 <div className="item__title">{item.title}</div>
                               </div>
                               <div className="split__right">
-                                <div className="nav">
+                                <div className="nav nav--relations">
                                   <div className="nav__item">{translate(item.quadrant)}</div>
                                   <div className="nav__item">
                                     <Badge type={item.ring}>{item.ring}</Badge>

styles/components/filter.css

@@ -1,3 +1,8 @@
 .filter {
   margin-bottom: 40px;
+
+  /* @todo: re-enable filter for mobile */
+  @media (--until-sm) {
+    display: none;
+  }
 }

styles/components/item-page.css

@@ -45,6 +45,7 @@
   background: #fff;
   margin: 0 -15px;
   padding: 15px;
+  min-height: 300px;
 
   &__aside {
     padding: 20px 0

styles/components/letter-index.css

@@ -5,7 +5,11 @@
     position: relative;
     padding: 0 0 0 200px;
     min-height: 80px;
+    @media (--until-md) {
+      padding:  0 0 0 50px;
+    }
   }
+
   &__letter {
     font-size: 50px;
     line-height: 80px;
@@ -13,5 +17,8 @@
     position: absolute;
     left: 50px;
     top: 0;
+    @media (--until-md) {
+      left: 0;
+    }
   }
 }

styles/components/nav.css

@@ -30,4 +30,13 @@
       transition-delay: 0s;
     }
   }
+
+  &--relations {
+    @media (--until-md) {
+      .nav__item {
+        display: block;
+        margin: 5px 0 0;
+      }
+    }
+  }
 }