Merge pull request #84 from joomla/development-spaces

More space on fluid layout. Change several paddings and margins in containers. Increase grid-gap in fluid layout to have more space right and left.
bembelimen · Sep 16, 2020 · 0b46068 · 0b46068
2 parents 94ceb30 + b0ecf60
commit 0b46068
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -60,9 +60,15 @@
 
     &.wrapper-fluid {
       grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
+      grid-gap: 0 ($cassiopeia-grid-gutter*2);
       .grid-child {
         max-width: none;
       }
+      header > .grid-child,
+      footer > .grid-child {
+        padding-right: $cassiopeia-grid-gutter*2;
+        padding-left: $cassiopeia-grid-gutter*2;
+      }
     }
   }
 }

diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss
@@ -1,12 +1,15 @@
 // Footer
 
 .footer {
-  padding: 2.5rem ($cassiopeia-grid-gutter / 2);
   margin-top: $cassiopeia-grid-gutter;
   color: $white;
   background-color: var(--cassiopeia-color-primary);
   background-image: $cassiopeia-header-grad;
 
+  .grid-child {
+    padding: 2.5rem ($cassiopeia-grid-gutter/2);
+  }
+
   a {
     color: $white;
   }
@@ -19,7 +22,6 @@
     background: $white;
     border-radius: $border-radius;
 
-    @include margin("right", 5px);
     @include margin("left", auto);
   }
 }
diff --git a/templates/cassiopeia/scss/blocks/_header.scss b/templates/cassiopeia/scss/blocks/_header.scss
@@ -11,16 +11,12 @@
     position: relative !important;
   }
 
-  header {
-    width: 100%;
-    max-width: 72.1875rem;
-    padding: 0 ($cassiopeia-grid-gutter / 2);
-    margin: 0 auto;
-
+  .grid-child {
+    padding: ($cassiopeia-grid-gutter / 2);
   }
 
   nav {
-    padding: ($cassiopeia-grid-gutter / 2) ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
+    padding: ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
   }
 
   .site-description {
@@ -31,7 +27,6 @@
   .navbar-brand {
     position: relative;
     display: inline-block;
-    padding: $cassiopeia-grid-gutter / 2;
     margin-right: auto;
     font-size: 2rem;
     color: $white;

diff --git a/templates/cassiopeia/scss/vendor/metismenu/_metismenu.scss b/templates/cassiopeia/scss/vendor/metismenu/_metismenu.scss
@@ -3,8 +3,8 @@
     &.mod-menu {
       .metismenu-item {
         display: flex;
-        padding: $cassiopeia-grid-gutter/2;
-        font-size: 1.1em;
+        padding: $cassiopeia-grid-gutter/2 0;
+        font-size: 1.1rem;
         line-height: 1.5;
 
         &.parent {