Refactor container divs

joomla · Nov 18, 2017 · 2bc63c7 · 2bc63c7
1 parent 6e890f7
commit 2bc63c7
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 48 deletions.
diff --git a/templates/cassiopeia/css/template.css b/templates/cassiopeia/css/template.css
@@ -24,11 +24,11 @@
   .flying-focus_target::-moz-focus-inner {
     border: 0 !important; }
 
-/*!
- * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+/*!
+ * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 :root {
   --blue: #006898;
@@ -5903,11 +5903,11 @@ a.text-dark:focus, a.text-dark:hover {
 .invisible {
   visibility: hidden !important; }
 
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
-/* FONT PATH
+/* FONT PATH
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
@@ -6076,7 +6076,7 @@ a.text-dark:focus, a.text-dark:hover {
 .fa-inverse {
   color: #fff; }
 
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {
   content: ""; }
@@ -8661,20 +8661,21 @@ iframe {
 .modal iframe {
   width: 100%; }
 
-body {
+.site {
   background-color: #fafafa; }
-  body > div,
-  body header > nav,
-  body .container-banner,
-  body footer {
-    display: flex;
-    width: 100%;
-    max-width: 1140px;
-    margin-right: auto;
-    margin-left: auto; }
-  body > .full-width {
+  .site > .full-width {
     max-width: none; }
 
+[class^='container-'], > [class*=' container-'],
+header > nav,
+.container-banner,
+footer {
+  display: flex;
+  width: 100%;
+  max-width: 1140px;
+  margin-right: auto;
+  margin-left: auto; }
+
 header {
   margin-bottom: 10px; }
 
@@ -8701,14 +8702,15 @@ header {
     .container-bottom-b > div {
       flex: 0 1 auto; } }
 
-.container-main > div {
-  margin: 7.5px; }
-
-@media (max-width: 767px) {
-  .container-main {
-    flex-direction: column; }
-    .container-main > div {
-      flex: 0 1 auto; } }
+.container-main {
+  display: flex; }
+  .container-main > div {
+    margin: 7.5px; }
+  @media (max-width: 767px) {
+    .container-main {
+      flex-direction: column; }
+      .container-main > div {
+        flex: 0 1 auto; } }
 
 .container-component {
   flex: 1; }
@@ -8971,10 +8973,10 @@ joomla-alert {
 @supports (display: grid) {
   .site-grid {
     display: grid;
-    grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". main main main main ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug .";
+    grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". main main main main ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug .";
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 15px; }
-    .site-grid > div {
+    .site-grid > [class^='container-'], .site-grid > [class*=' container-'] {
       width: auto;
       max-width: none;
       margin: 0 0 15px; }
@@ -8989,7 +8991,7 @@ joomla-alert {
       grid-column: full-start / full-end; }
     @media (max-width: 575px) {
       .site-grid {
-        grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". main main main main ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug ."; } }
+        grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". main main main main ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug ."; } }
     .site-grid .container-header {
       margin-top: 0;
       margin-bottom: 20px; }

diff --git a/templates/cassiopeia/css/template.css.map b/templates/cassiopeia/css/template.css.map
diff --git a/templates/cassiopeia/css/template.min.css b/templates/cassiopeia/css/template.min.css
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
@@ -76,7 +76,7 @@
 	<jdoc:include type="scripts" />
 </head>
 
-<body class="site site-grid <?php echo $option
+<body class="site-grid site <?php echo $option
 	. ' view-' . $view
 	. ($layout ? ' layout-' . $layout : ' no-layout')
 	. ($task ? ' task-' . $task : ' no-task')

diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -4,7 +4,6 @@
 @supports (display: grid) {
   .site-grid {
     display: grid;
-
     grid-template-areas:
       ". head head head head ."
       ". banner banner banner banner ."
@@ -18,7 +17,7 @@
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 $cassiopeia-grid-gutter;
 
-    > div {
+    > [class^='container-'], > [class*=' container-'] {
       width: auto;
       max-width: none;
       margin: 0 0 $cassiopeia-grid-gutter;

diff --git a/templates/cassiopeia/scss/blocks/_layout.scss b/templates/cassiopeia/scss/blocks/_layout.scss
@@ -1,23 +1,24 @@
 // Layout
 
-body {
+.site {
   background-color: #fafafa;
-  > div,
-  header > nav,
-  .container-banner,
-  footer {
-    display: flex;
-    width: 100%;
-    max-width: 1080px + ($cassiopeia-grid-gutter * 4);
-    margin-right: auto;
-    margin-left: auto;
-  }
 
   > .full-width {
     max-width: none;
   }
 }
 
+[class^='container-'], > [class*=' container-'],
+header > nav,
+.container-banner,
+footer {
+  display: flex;
+  width: 100%;
+  max-width: 1080px + ($cassiopeia-grid-gutter * 4);
+  margin-right: auto;
+  margin-left: auto;
+}
+
 header {
   margin-bottom: 10px;
 }
@@ -46,6 +47,7 @@ header {
 }
 
 .container-main {
+  display: flex;
   > div {
     margin: ($cassiopeia-grid-gutter / 2);
   }