Improve tabs on small screens

static/css/main.css

@@ -615,6 +615,123 @@
  	font-weight: bold;
  }
 
+  /*== Pagination ==*/
+  .pagination {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.pagination > * {
+    padding: 2em;
+}
+
+/*== Flex boxes ==*/
+.flex {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.flex .grow {
+    flex: 1;
+}
+
+.left-icon {
+    align-self: center;
+    padding: 1em;
+    background: #DADADA;
+    border-radius: 50px;
+    margin: 1em;
+    margin-right: 2em;
+}
+
+/*== Footer ==*/
+body > footer {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    background: #ECECEC;
+    padding: 0 20%;
+    margin-top: 5em;
+}
+
+body > footer * {
+    margin: 5em 0;
+}
+
+/** Medias **/
+
+figure {
+    text-align: center;
+    margin: 2em;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
+
+figure > * {
+    max-width: 100%;
+}
+
+figcaption {
+    padding: 1em;
+}
+
+.preview {
+    display: block;
+    max-width: 100px;
+    max-height: 100px;
+    width: auto;
+    height: auto;
+    margin-right: 20px;
+}
+
+/** Avatars **/
+
+.avatar {
+    border-radius: 100%;
+}
+
+.avatar.small {
+    width: 50px;
+    height: 50px;
+}
+
+.avatar.medium {
+    width: 100px;
+    height: 100px;
+    margin: 20px;
+}
+
+.avatar.padded {
+    margin-right: 2rem;
+}
+
+/** Tabs **/
+
+.tabs {
+   border-bottom: 1px solid #DADADA;
+   padding: 0px;
+   margin: auto 20% 2em;
+   overflow: auto;
+   display: flex;
+}
+
+.tabs a {
+   display: inline-block;
+   color: #242424;
+   padding: 1em;
+}
+
+.tabs a.selected {
+   color: #7765E3;
+   border-bottom: 1px solid #7765E3;
+}
+
+.user-summary {
+   margin: 2em 0px;
+}
+
 /* ================= *
  *   Small Screens   *
  * ================= */
@@ -718,120 +835,9 @@
  	.card {
  		min-width: 80%;
  		min-height: 80%;
- 	}
- }
-
- /*== Pagination ==*/
- .pagination {
- 	display: flex;
- 	justify-content: space-evenly;
- }
+     }
 
- .pagination > * {
- 	padding: 2em;
+     .tabs {
+         margin: auto 0px 2em;
+     }
  }
-
- /*== Flex boxes ==*/
- .flex {
- 	display: flex;
- 	flex-direction: row;
- 	align-items: center;
- }
-
- .flex .grow {
- 	flex: 1;
- }
-
- .left-icon {
- 	align-self: center;
- 	padding: 1em;
- 	background: #DADADA;
- 	border-radius: 50px;
- 	margin: 1em;
- 	margin-right: 2em;
- }
-
- /*== Footer ==*/
- body > footer {
- 	display: flex;
- 	align-content: center;
- 	justify-content: space-between;
- 	background: #ECECEC;
- 	padding: 0 20%;
- 	margin-top: 5em;
- }
-
- body > footer * {
- 	margin: 5em 0;
- }
-
- /** Medias **/
-
- figure {
- 	text-align: center;
- 	margin: 2em;
- 	max-width: 100%;
- 	width: auto;
- 	height: auto;
- }
-
- figure > * {
- 	max-width: 100%;
- }
-
- figcaption {
- 	padding: 1em;
- }
-
- .preview {
- 	display: block;
- 	max-width: 100px;
- 	max-height: 100px;
- 	width: auto;
- 	height: auto;
- 	margin-right: 20px;
- }
-
- /** Avatars **/
-
- .avatar {
- 	border-radius: 100%;
- }
-
- .avatar.small {
- 	width: 50px;
- 	height: 50px;
- }
-
- .avatar.medium {
- 	width: 100px;
- 	height: 100px;
- 	margin: 20px;
- }
-
- .avatar.padded {
- 	margin-right: 2rem;
- }
-
-/** Tabs **/
-
-.tabs {
-    border-bottom: 1px solid #DADADA;
-    padding: 0px;
-    margin: auto 20% 2em;
-}
-
-.tabs a {
-    display: inline-block;
-    color: #242424;
-    padding: 1em;
-}
-
-.tabs a.selected {
-    color: #7765E3;
-    border-bottom: 1px solid #7765E3;
-}
-
-.user-summary {
-    margin: 2em 0px;
-}