Initial theming

web/themes/dcb2017/css/style.css

@@ -0,0 +1,93 @@
+html {
+  font-family: 'Poppins', sans-serif;
+  font-size: 16px; }
+
+body {
+  background: white; }
+
+.region-header {
+  margin: 0 auto;
+  max-width: 72rem;
+  overflow: hidden; }
+
+.region-featured {
+  position: relative; }
+  .region-featured:after {
+    background-image: url("../images/dcb-bg.jpg");
+    background-size: cover;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1; }
+
+.featured-footer {
+  background: black;
+  color: white;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 1rem;
+  text-align: center; }
+
+.region-content {
+  margin: 0 auto;
+  max-width: 72rem; }
+
+.region-footer {
+  margin: 0 auto;
+  max-width: 72rem; }
+
+ul.menu {
+  margin: 0;
+  padding: 0; }
+  ul.menu li.menu-item {
+    display: inline-block;
+    padding: 1rem 1.5rem;
+    text-transform: uppercase; }
+    ul.menu li.menu-item a {
+      color: black;
+      text-decoration: none; }
+      ul.menu li.menu-item a:hover, ul.menu li.menu-item a:focus, ul.menu li.menu-item a.is-active {
+        color: #44efb9; }
+
+nav.menu--main {
+  float: right;
+  font-weight: bold;
+  margin: 0.8rem; }
+
+.block-system-branding-block {
+  float: left;
+  margin: 0.5em 2em; }
+
+.site-logo img {
+  display: block;
+  width: 11rem; }
+
+#block-homepagehero {
+  font-size: 1.8rem;
+  line-height: 1.2;
+  margin: auto;
+  max-width: 30rem;
+  padding: 10rem 1rem;
+  text-align: center; }
+
+.form-item > label {
+  display: block;
+  font-weight: bold; }
+  .form-item > label.option {
+    display: inline;
+    font-weight: normal; }
+
+.form-submit {
+  background: #b33ee9;
+  border: 0;
+  color: white;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  text-transform: uppercase; }
+  .form-submit:hover, .form-submit:focus {
+    background: #44efb9; }
+
+/*# sourceMappingURL=style.css.map */

web/themes/dcb2017/css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["_global.scss","layout/_header.scss","layout/_featured.scss","layout/_content.scss","layout/_footer.scss","components/_menus.scss","base/_variables.scss","components/_blocks.scss","components/_forms.scss","base/_mixins.scss"],"names":[],"mappings":"AAAA;EACE,mCAAmC;EACnC,gBAAgB,EACjB;;AAED;EACE,kBAAkB,EACnB;;ACPD;EACE,eAAe;EACf,iBAAiB;EACjB,iBAAiB,EAClB;;ACJD;EACE,mBAAmB,EAapB;EAdD;IAII,8CAAqB;IACrB,uBAAuB;IACvB,YAAY;IACZ,mBAAmB;IACnB,OAAO;IACP,QAAQ;IACR,SAAS;IACT,UAAU;IACV,YAAY,EACb;;AAGH;EACE,kBAAkB;EAClB,aAAa;EACb,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,mBAAmB,EACpB;;ACvBD;EACE,eAAe;EACf,iBAAiB,EAClB;;ACHD;EACE,eAAe;EACf,iBAAiB,EAClB;;ACHD;EACE,UAAU;EACV,WAAW,EAkBZ;EAhBG;IACA,sBAAsB;IACtB,qBAAqB;IACrB,0BAA0B,EAY3B;IAnBH;MAUM,aAAa;MACb,sBAAsB,EAOvB;MAlBL;QAgBQ,eCdW,EDeZ;;AAKJ;EACD,aAAa;EACb,kBAAkB;EAClB,eAAe,EAChB;;AE1BD;EACE,YAAY;EACZ,kBAAkB,EACnB;;AAED;EACE,eAAe;EACf,aAAa,EACd;;AAED;EACE,kBAAkB;EAClB,iBAAiB;EACjB,aAAa;EACb,iBAAiB;EACjB,oBAAoB;EACpB,mBAAmB,EACpB;;ACjBY;EACX,eAAe;EACf,kBAAkB,EAMnB;EARY;IAKT,gBAAgB;IAChB,oBAAoB,EACrB;;AAGH;ECTE,oBHEgB;EGDhB,UAAU;EACV,aAAa;EACb,kBAAkB;EAClB,qBAAqB;EACrB,0BAA0B,EDM3B;EAFD;ICAI,oBHRe,EGShB","file":"style.css","sourcesContent":["html {\n  font-family: 'Poppins', sans-serif;\n  font-size: 16px;\n}\n\nbody {\n  background: white;\n}\n\n",".region-header {\n  margin: 0 auto;\n  max-width: 72rem;\n  overflow: hidden;\n}\n",".region-featured {\n  position: relative;\n\n  &:after {\n    background-image: url('../images/dcb-bg.jpg');\n    background-size: cover;\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: -1;\n  }\n}\n\n.featured-footer {\n  background: black;\n  color: white;\n  font-size: 1.2rem;\n  font-weight: bold;\n  padding: 1rem;\n  text-align: center;\n}\n",".region-content {\n  margin: 0 auto;\n  max-width: 72rem;\n}\n",".region-footer {\n  margin: 0 auto;\n  max-width: 72rem;\n}\n","ul.menu {\n  margin: 0;\n  padding: 0;\n\n  li.menu-item {\n    display: inline-block;\n    padding: 1rem 1.5rem;\n    text-transform: uppercase;\n\n    a {\n      color: black;\n      text-decoration: none;\n\n      &:hover,\n      &:focus,\n      &.is-active {\n        color: $dcb-green;\n      }\n    }\n  }\n}\n\nnav.menu--main {\n  float: right;\n  font-weight: bold;\n  margin: 0.8rem;\n}\n","// Custom variables, colours etc.\n\n$dcb-green: #44efb9;\n$dcb-blue: #b33ee9;\n$dcb-purple: #ec16a8;\n",".block-system-branding-block {\n  float: left;\n  margin: 0.5em 2em;\n}\n\n.site-logo img {\n  display: block;\n  width: 11rem;\n}\n\n#block-homepagehero {\n  font-size: 1.8rem;\n  line-height: 1.2;\n  margin: auto;\n  max-width: 30rem;\n  padding: 10rem 1rem;\n  text-align: center;\n}\n",".form-item > label {\n  display: block;\n  font-weight: bold;\n\n  &.option {\n    display: inline;\n    font-weight: normal;\n  }\n}\n\n.form-submit {\n  @include button;\n}\n","@mixin button {\n  background: $dcb-blue;\n  border: 0;\n  color: white;\n  font-weight: bold;\n  padding: 0.5rem 1rem;\n  text-transform: uppercase;\n\n  &:hover,\n  &:focus {\n    background: $dcb-green;\n  }\n}\n"]}

web/themes/dcb2017/dcb2017.info.yml

@@ -0,0 +1,15 @@
+name: Drupalcamp Bristol 2017
+type: theme
+description: Theme for the new Drupalcamp Bristol 2017 site based on classy.
+core: 8.x
+base theme: classy
+libraries:
+  - dcb2017/global-styling
+  - dcb2017/fonts
+
+# Regions
+regions:
+  header: Header
+  featured: Featured
+  content: Content
+  footer: Footer

web/themes/dcb2017/dcb2017.libraries.yml

@@ -0,0 +1,9 @@
+global-styling:
+  css:
+    component:
+      css/style.css: {}
+
+fonts:
+  css:
+    theme:
+      //fonts.googleapis.com/css?family=Poppins: { type: external }

web/themes/dcb2017/dcb2017.theme

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Theming stuff goes here!
+ */
+
+/**
+ * Implements template_preprocess_html().
+ */
+function dcb2017_preprocess_html(&$variables) {
+  if (\Drupal::service('path.matcher')->isFrontPage()) {
+    $site_config = \Drupal::config('system.site');
+    $variables['head_title'] = $site_config->get('name');
+  }
+}

web/themes/dcb2017/gulpfile.js

@@ -0,0 +1,46 @@
+/**
+ * @file gulpfile.js
+ *
+ * Provides gulp tasks for building theme components.
+ */
+
+'use strict';
+
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    prefix = require('gulp-autoprefixer'),
+    sourcemaps = require('gulp-sourcemaps');
+
+/**
+ * @task sass
+ *
+ * Compile css from scss.
+ */
+gulp.task('sass', function () {
+  return gulp.src('sass/**/*.scss')
+    .pipe(sourcemaps.init())
+    .pipe(sass({
+      // Include the bootstrap library.
+      //includePaths: ['./node_modules/bootstrap-sass/assets/stylesheets']
+    }))
+    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
+    .pipe(sourcemaps.write(''))
+    .pipe(gulp.dest('css'));
+});
+
+/**
+ * @task watch
+ *
+ * Watch scss files for changes & recompile.
+ */
+gulp.task('watch', function () {
+  gulp.watch(['sass/*.scss', 'sass/**/*.scss'], ['sass']);
+});
+
+/**
+ * @task default
+ *
+ * Default task, running just `gulp` will
+ * compile & watch files.
+ */
+gulp.task('default', ['sass', 'watch']);

web/themes/dcb2017/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "dcb2017_theme",
+  "version": "1.0.0",
+  "description": "A theme for new Drupalcamp Bristol site.",
+  "main": "gulpfile.js",
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^2.3.1",
+    "gulp-sass": "^2.0.4",
+    "gulp-sourcemaps": "^1.5.2"
+  },
+  "scripts": {
+    "postinstall": "find node_modules/ -name '*.info' -type f -delete"
+  }
+}

web/themes/dcb2017/sass/_global.scss

@@ -0,0 +1,9 @@
+html {
+  font-family: 'Poppins', sans-serif;
+  font-size: 16px;
+}
+
+body {
+  background: white;
+}
+

web/themes/dcb2017/sass/base/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin button {
+  background: $dcb-blue;
+  border: 0;
+  color: white;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  text-transform: uppercase;
+
+  &:hover,
+  &:focus {
+    background: $dcb-green;
+  }
+}

web/themes/dcb2017/sass/base/_variables.scss

@@ -0,0 +1,5 @@
+// Custom variables, colours etc.
+
+$dcb-green: #44efb9;
+$dcb-blue: #b33ee9;
+$dcb-purple: #ec16a8;

web/themes/dcb2017/sass/components/_blocks.scss

@@ -0,0 +1,18 @@
+.block-system-branding-block {
+  float: left;
+  margin: 0.5em 2em;
+}
+
+.site-logo img {
+  display: block;
+  width: 11rem;
+}
+
+#block-homepagehero {
+  font-size: 1.8rem;
+  line-height: 1.2;
+  margin: auto;
+  max-width: 30rem;
+  padding: 10rem 1rem;
+  text-align: center;
+}

web/themes/dcb2017/sass/components/_forms.scss

@@ -0,0 +1,13 @@
+.form-item > label {
+  display: block;
+  font-weight: bold;
+
+  &.option {
+    display: inline;
+    font-weight: normal;
+  }
+}
+
+.form-submit {
+  @include button;
+}

web/themes/dcb2017/sass/components/_menus.scss

@@ -0,0 +1,27 @@
+ul.menu {
+  margin: 0;
+  padding: 0;
+
+  li.menu-item {
+    display: inline-block;
+    padding: 1rem 1.5rem;
+    text-transform: uppercase;
+
+    a {
+      color: black;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &.is-active {
+        color: $dcb-green;
+      }
+    }
+  }
+}
+
+nav.menu--main {
+  float: right;
+  font-weight: bold;
+  margin: 0.8rem;
+}

web/themes/dcb2017/sass/layout/_content.scss

@@ -0,0 +1,4 @@
+.region-content {
+  margin: 0 auto;
+  max-width: 72rem;
+}

web/themes/dcb2017/sass/layout/_featured.scss

@@ -0,0 +1,24 @@
+.region-featured {
+  position: relative;
+
+  &:after {
+    background-image: url('../images/dcb-bg.jpg');
+    background-size: cover;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+}
+
+.featured-footer {
+  background: black;
+  color: white;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 1rem;
+  text-align: center;
+}

web/themes/dcb2017/sass/layout/_footer.scss

@@ -0,0 +1,4 @@
+.region-footer {
+  margin: 0 auto;
+  max-width: 72rem;
+}

web/themes/dcb2017/sass/layout/_header.scss

@@ -0,0 +1,5 @@
+.region-header {
+  margin: 0 auto;
+  max-width: 72rem;
+  overflow: hidden;
+}

web/themes/dcb2017/sass/style.scss

@@ -0,0 +1,15 @@
+// External libraries.
+
+
+@import 'base/variables';
+@import 'base/mixins';
+
+@import 'global';  // Global Theme Customizations.
+@import 'layout/header';
+@import 'layout/featured';
+@import 'layout/content';
+@import 'layout/footer';
+
+@import 'components/menus';
+@import 'components/blocks';
+@import 'components/forms';

web/themes/dcb2017/templates/blocks/block--homepagehero.html.twig

@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+
+  {{ title_suffix }}
+
+  <img src="{{ base_path ~ directory }}/images/logo-with-dates.svg" alt="Drupalcamp Bristol 30th June - 2nd July" />
+
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/dcb2017/templates/layout/page.html.twig

@@ -0,0 +1,72 @@
+{#
+/**
+ * @file
+ * Theme override to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {% if page.featured %}
+    <div class="layout-featured">
+      {{ page.featured }}
+    </div>
+  {% endif %}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+  </main>
+
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+
+</div>{# /.layout-container #}

web/themes/dcb2017/templates/layout/region--featured.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region-' ~ region|clean_class,
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+
+    <div class="featured-footer">
+      {{ 'For early bird tickets'|t|upper }}
+    </div>
+  </div>
+
+{% endif %}