Made profile design responsive. Closes #71

assets/less/classes/profile/guidelines.less

@@ -5,6 +5,10 @@
     padding: 2px;
     margin-bottom: 2px;
 
+    @media (max-width: @site-mobile-width) {
+        flex-direction: column;
+    }
+
     &__section {
         width: 100%;
         list-style: none;

assets/less/classes/profile/header.less

@@ -27,6 +27,11 @@
             &--edit {
                 cursor: pointer;
             }
+
+            @media (max-width: @site-mobile-width) {
+                width: 80px;
+                height: 80px;
+            }
         }
 
         &__check {
@@ -85,6 +90,10 @@
         &__content {
             margin: 5px 10px;
             flex: 1 1 auto;
+
+            @media (max-width: @site-mobile-width) {
+                text-align: center;
+            }
         }
 
         &__relation {
@@ -95,6 +104,11 @@
             padding: 1px 5px 4px;
             cursor: default;
         }
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+            align-items: center;
+        }
     }
 
     &__options {
@@ -103,19 +117,38 @@
         padding: 0 20px;
         display: flex;
         justify-content: space-between;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+        }
     }
 
     &__actions {
         display: flex;
         align-items: center;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+        }
     }
 
     &__action {
         margin-right: 5px;
+
+        @media (max-width: @site-mobile-width) {
+            margin-right: 0;
+            margin-bottom: 5px;
+            width: 100%;
+        }
     }
 
     &__stats {
         display: flex;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
     }
 
     &__stat {

assets/less/classes/profile/profile.less

@@ -14,6 +14,14 @@
             width: 100%;
             max-width: 300px;
             margin-right: 2px;
+
+            @media (max-width: @site-mobile-width) {
+                max-width: 100%;
+            }
+        }
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
         }
     }