moving css from header.css to specific partials

lauriii · Jan 11, 2018 · bf8f368 · bf8f368
1 parent 51b84d5
commit bf8f368
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 91 deletions.
diff --git a/css/components/blocks/branding/branding.css b/css/components/blocks/branding/branding.css
@@ -3,6 +3,20 @@
  * This file is used to style the branding block.
  */
 
+.block-system-branding-block {
+  flex: 0 1 40%;
+  order: 2;
+  text-align: center;
+}
+
+@media screen and (min-width: 48em) {
+  .block-system-branding-block {
+    flex: 0 1 220px;
+    order: 3;
+    margin: 2.5rem 0;
+    text-align: left;
+  }
+}
 .site-logo {
   display: inline-block;
   width: 100%;

diff --git a/css/components/blocks/page-title/page-title.css b/css/components/blocks/page-title/page-title.css
@@ -8,10 +8,10 @@
  */
 
 .is-front .block-page-title-block {
-  margin: 3rem 0 1rem;
+  margin: 1rem 0;
 }
 
 .block-page-title-block {
-  margin: 3rem 0;
+  margin: 1rem 0 3rem;
   text-align: center;
 }
diff --git a/css/components/blocks/search/search.css b/css/components/blocks/search/search.css
@@ -3,11 +3,38 @@
  * This file is used to style the search block.
  */
 
+.search-block-form {
+  display: none;
+}
+
+@media screen and (min-width: 48em) {
+  .search-block-form {
+    flex: 0 1 50%;
+    order: 1;
+    display: block;
+    border-bottom: 1px solid #E6EEE0;
+  }
+}
+
 .search-block-form form {
   display: flex;
   align-items: center;
 }
 
+.search__iconwrap {
+  flex: 0 1 30%;
+  order: 3;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+  .search__iconwrap {
+    display: none;
+  }
+}
+
 /* Search icon for mobile */
 .search__link {
   width: 40px;

diff --git a/css/components/navigation/menu-account/menu-account.css b/css/components/navigation/menu-account/menu-account.css
@@ -3,6 +3,20 @@
  * This file is used to style the account menu.
  */
 
+.menu--account {
+  display: none;
+}
+
+@media screen and (min-width: 48em) {
+  .menu--account {
+    flex: 0 1 50%;
+    order: 2;
+    display: block;
+    border-bottom: 1px solid #E6EEE0;
+    text-align: right;
+  }
+}
+
 .menu-account {
   display: inline-flex;
   margin: 1.6em 0;

diff --git a/css/components/navigation/menu-main/menu-main.css b/css/components/navigation/menu-main/menu-main.css
@@ -89,3 +89,36 @@
     margin-left: 2.5em;
   }
 }
+
+.menu-main__togglewrap {
+  flex: 0 1 30%;
+  order: 1;
+  padding-left: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main__togglewrap {
+    display: none;
+  }
+}
+
+.menu-main__wrapper {
+  order: 4;
+  flex: 0 1 100%;
+  text-align: center;
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main__wrapper {
+    order: 4;
+    flex: 0 1 calc(100% - 220px);
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
diff --git a/css/components/regions/header/header.css b/css/components/regions/header/header.css
@@ -30,92 +30,3 @@
     padding: 0;
   }
 }
-
-.block-system-branding-block {
-  flex: 0 1 40%;
-  order: 2;
-  text-align: center;
-}
-
-@media screen and (min-width: 48em) {
-  .block-system-branding-block {
-    flex: 0 1 220px;
-    order: 3;
-    margin: 2.5rem 0;
-    text-align: left;
-  }
-}
-
-.menu-main__togglewrap {
-  flex: 0 1 30%;
-  order: 1;
-  padding-left: 1rem;
-}
-
-@media screen and (min-width: 48em) {
-  .menu-main__togglewrap {
-    display: none;
-  }
-}
-
-.menu-main__wrapper {
-  order: 4;
-  flex: 0 1 100%;
-  text-align: center;
-}
-
-@media screen and (min-width: 48em) {
-  .menu-main__wrapper {
-    order: 4;
-    flex: 0 1 calc(100% - 220px);
-    text-align: right;
-  }
-}
-
-@media screen and (min-width: 48em) {
-  .menu-main {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-.search__iconwrap {
-  flex: 0 1 30%;
-  order: 3;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 1rem;
-}
-
-@media screen and (min-width: 48em) {
-  .search__iconwrap {
-    display: none;
-  }
-}
-
-.search-block-form {
-  display: none;
-}
-
-@media screen and (min-width: 48em) {
-  .search-block-form {
-    flex: 0 1 50%;
-    order: 1;
-    display: block;
-    border-bottom: 1px solid #E6EEE0;
-  }
-}
-
-.menu--account {
-  display: none;
-}
-
-@media screen and (min-width: 48em) {
-  .menu--account {
-    flex: 0 1 50%;
-    order: 2;
-    display: block;
-    border-bottom: 1px solid #E6EEE0;
-    text-align: right;
-  }
-}