From 28c0121c89909bc0c805dee413401f2e1ce12cac Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 15 Feb 2018 22:34:14 +0100
Subject: [PATCH] Smaller padding in menu and sections on small resolutions
---
front/src/App.vue | 11 ++++++-----
front/src/components/library/Library.vue | 11 +++++++++--
2 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/front/src/App.vue b/front/src/App.vue
index fb1c27a899..d310c3ca9d 100644
--- a/front/src/App.vue
+++ b/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 {
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index c27313dc36..5fe192022c 100644
--- a/front/src/components/library/Library.vue
+++ b/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 {
--
GitLab