added contrib theme basic

2017-12-21 22:15:52 +01:00
parent fc8365264d
commit 9c6a1ce9a9
83 changed files with 4035 additions and 0 deletions
@@ -0,0 +1,101 @@
+// Layout
+// ------
+// Using a negative margin technique, made possible with Bourbon Neat, the page
+// is loaded in this order:
+
+// 1. Header
+// 2. Content
+// 3. Navigation menus
+// 4. Sidebar Left
+// 5. Sideabr Right
+//
+// Layout rules.
+// (Disclaimer: do not change if you're not sure you know what you're doing.)
+
+.container
+  @include outer-container
+  width: auto
+
+#content
+  .no-sidebar &
+    // 100% width for small screens. No definitions required.
+    // Same logic for medium screens. No definitions required.
+    // Same logic for large screens. No definitions required.
+
+  .one-sidebar.sidebar-second &
+    // 100% width for small screens. No definitions required.
+    // Span this div 6 columns wide for medium screens.
+    @include media($medium-screen-up)
+      @include span-columns(6)
+    // Span this div 8 columns wide for large screens.
+    @include media($large-screen-up)
+      @include span-columns(8)
+
+  .one-sidebar.sidebar-first &
+    // 100% width for small screens. No definitions required.
+    // Span this div 6 columns wide for medium screens.
+    @include media($medium-screen-up)
+      @include span-columns(6)
+      @include shift(2)
+    // Span this div 9 columns wide for large screens.
+    @include media($large-screen-up)
+      @include span-columns(9)
+      @include shift(3)
+
+  .two-sidebars &
+    // 100% width for small screens. No definitions required.
+    // Span this div 4 columns wide for medium screens.
+    @include media($medium-screen-up)
+      @include span-columns(4)
+      @include shift(2)
+    // Span this div 5 columns wide for large screens.
+    @include media($large-screen-up)
+      @include span-columns(5)
+      @include shift(3)
+
+#sidebar-first
+  // 100% width for small screens. No definitions required.
+  // Span this div 2 columns wide for medium screens.
+  @include media($medium-screen-up)
+    @include span-columns(2)
+    // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
+    @include shift(-6)
+    .one-sidebar.sidebar-first &
+      @include shift(-8)
+  @include media($large-screen-up)
+    // Span this div 3 columns wide for large screens.
+    @include span-columns(3)
+    // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
+    @include shift(-8)
+    .one-sidebar.sidebar-first &
+      @include shift(-12)
+
+#sidebar-second
+  // 100% width for small screens. No definitions required.
+  // Span this div 2 columns wide for medium screens.
+  @include media($medium-screen-up)
+    @include span-columns(2)
+    @include shift(0)
+  @include media($large-screen-up)
+    // Span this div 4 columns wide for large screens.
+    @include span-columns(4)
+    @include shift(0)
+
+#footer
+  float: none
+  clear: both
+
+// Region Colors. Delete when starting a new theme.
+#header, #footer,
+#sidebar-first,
+#sidebar-second,
+#navigation
+  background: rgba(#aaa, 0.2)
+
+// Layout Helpers
+#header,
+#footer,
+.mission,
+.breadcrumb,
+.node
+  clear: both
@@ -0,0 +1,8 @@
+@import "../config/config"
+
+// LAYOUT: Macro arrangement of a web page, including any grid systems.
+// Read more about SMACSS categorization for Drupal Themes: https://www.drupal.org/node/1887922
+
+// This file is complied separately so we can pull in config dependencies above
+// while also maintaining Drupals SMACSS structure.
+@import "layout--grid"