Smaller padding in menu and sections on small resolutions

front/src/App.vue

@@ -40,6 +40,7 @@ export default {
 // and we end up with CSS rules not applied,
 // see https://github.com/webpack/webpack/issues/215
 @import 'semantic/semantic.css';
+@import 'style/vendor/media';
 
 
 #app {
@@ -56,11 +57,11 @@ export default {
 .main-pusher {
   padding: 1.5rem 0;
 }
-#footer {
-  padding: 4em;
-}
-.ui.stripe.segment {
-  padding: 4em;
+.ui.stripe.segment, #footer {
+  padding: 2em;
+  @include media(">tablet") {
+    padding: 4em;
+  }
 }
 
 .ui.small.text.container {

front/src/components/library/Library.vue

@@ -22,8 +22,12 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
+@import '../../style/vendor/media';
+
 .library.pusher > .ui.secondary.menu {
-  margin: 0 2.5rem;
+  @include media(">tablet") {
+    margin: 0 2.5rem;
+  }
   .item {
     padding-top: 1.5em;
     padding-bottom: 1.5em;
@@ -37,7 +41,10 @@ export default {
     padding: 0;
     .segment-content {
       margin: 0 auto;
-      padding: 4em;
+      padding: 2em;
+      @include media(">tablet") {
+        padding: 4em;
+      }
     }
     &.with-background {
       .header {