Merge pull request #10 from bangkokrb/release/0.2.0

Release - 0.2.0

_data/social_platforms.yml

@@ -0,0 +1,6 @@
+- name: Facebook
+  icon: facebook
+  url: https://www.facebook.com/Rubyconfth-294423114523650
+- name: Twitter
+  icon: twitter
+  url: https://twitter.com/rubyconfth

_includes/footer.html

@@ -1,11 +1,3 @@
 <footer class="app-footer">
-  <nav class='secondary-navigation'>
-    <ul class="secondary-navigation__list">
-    {% for section in site.data.menu.footer %}
-      <li class="secondary-navigation__list-item{% if section_url == page.url %} secondary-navigation__list-item--active{% endif %}">
-        <a href="{{ section.permalink }}">{{ section.title }}</a>
-      </li>
-    {% endfor %}
-    </ul>
-  </nav>
+  <small>This work by <a href="https://nimblehq.co/" target="_blank">Nimble</a> is licenced under a Creative Commons Attribution 3.0 Unported Licence</small>
 </footer>

_includes/head.html

@@ -25,7 +25,7 @@
 <meta name="apple-touch-fullscreen" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="#1b79ea"/>
 
-<meta name="theme-color" content="#ea1017"/>
+<meta name="theme-color" content="#f83548"/>
 
 <meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)">
 <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)">

_includes/header.html

@@ -1,23 +1,18 @@
 <header class="app-header">
-  {% include logo.html %}
+  <div class="app-header__organizer">
+    <a href="https://www.meetup.com/bangkok-rb/" target="_blank" class="app-header__link">Bangkok.rb</a>
+  </div>
 
-  <nav class='app-navigation'>
-    <ul class="app-navigation__list">
-    {% for section in site.data.menu.header %}
-      <li class="app-navigation__list-item{% if section_url == page.url %} app-navigation__list-item--active{% endif %}">
-        <a href="{{ section.permalink }}">{{ section.title }}</a>
-        {% if section.sub_pages %}
-        <ul class="app-navigation__sub-list">
-        {% for sub_page in section.sub_pages %}
-          {% assign sub_page_url = section.permalink | append: sub_page.permalink %}
-          <li class="app-navigation__sub-list-item{% if sub_page_url == page.url %} app-navigation__sub-list-item--active{% endif %}">
-            <a href="{{ sub_page_url }}">{{ sub_page.title }}</a>
-          </li>
-        {% endfor %}
-        </ul>
-        {% endif %}
-      </li>
+  <ul class="list-social-plaftorm list--unstyled">
+    {% for social_platform in site.data.social_platforms %}
+    <li class="list-social-plaftorm__item">
+      <a href="{{ social_platform.url }}" target="_blank" class="list-social-plaftorm__link app-header__link">
+        {% capture socialIcon %}{{ social_platform.icon | prepend: 'icon-' }}{% endcapture %}
+        {% capture className %}{{ social_platform.icon | prepend: 'list-social-plaftorm__icon--' | prepend: ' ' | prepend: 'list-social-plaftorm__icon' | append: ' ' | append: 'icon--xs' }}{% endcapture %}
+        {% include icon.svg icon=socialIcon class=className %}
+        <span class="sr-only">{{ social_platform.name }}</span>
+      </a>
+    </li>
     {% endfor %}
-    </ul>
-  </nav>
+  </ul>
 </header>

_layouts/default.html

@@ -20,8 +20,5 @@
 </main>
 
 {% include footer.html %}
-
-<script src="/assets/javascript/vendor.js"></script>
-<script src="/assets/javascript/application.js"></script>
 </body>
-</html>
+</html>

_sass/_variables.scss

@@ -1,13 +1,57 @@
 // Base
 
+$color-brand: (
+  primary: #f83548
+);
+
 $color-gray: (
-  primary: #ededed,
-  dark: #b3b3b3,
-  darkest: #8f8f8f
+  primary: #2c2d30,
+  dark: #211f21,
+  light: #c0c0c0,
+  lightest: #f0f0f
 );
 
 // Typography
-$base-font-size: 1rem;
-$base-font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
+
+$font-sizes: (
+  default: 1rem,
+  sm: 0.875rem,
+  lg: 1.125rem,
+  xl: 1.375rem
+);
+
+$base-font-size: map-get($font-sizes, 'default');
+$base-font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
 $base-line-height: 1.7;
-$base-font-color: map-get($color-gray, 'darkest');
+$base-font-color: map-get($color-gray, 'primary');
+
+// Z-index
+
+$zIndex: (
+  default: 1,
+  behind: -1,
+  high: 5,
+  higher: 100,
+  highest: 1000,
+  sky: 10000
+);
+
+// Animations
+
+$base-animation-duration: 300ms;
+$base-animation-timing: linear;
+
+/////////////////////////////
+// Bootstrap Customization //
+/////////////////////////////
+
+$primary: map-get($color-brand, 'primary');
+$secondary: map-get($color-gray, 'light');
+
+$body-color: $base-font-color;
+
+// Buttons
+
+$btn-border-radius: 0;
+$btn-border-radius-lg: 0;
+$btn-border-radius-sm: 0;

_sass/base/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,700');

_sass/base/_root.scss

@@ -0,0 +1,18 @@
+:root {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $color-gray {
+    --color-gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $color-brand {
+    --color-brand-#{$color}: #{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}: #{$value};
+  }
+
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --font-family-sans-serif: #{inspect($base-font-family)};
+}

_sass/components/_app-footer.scss

@@ -0,0 +1,6 @@
+.app-footer {
+  display: flex;
+  align-items: center;
+
+  line-height: 1.2;
+}

_sass/components/_app-header.scss

@@ -0,0 +1,23 @@
+.app-header {
+  display: flex;
+  justify-content: space-between;
+
+  &__organizer {
+    line-height: 2rem;
+    font-size: rem(23px);
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  &__link {
+    @include transition(color $base-animation-duration);
+
+    color: $base-font-color;
+
+    &:hover,
+    &:active {
+      color: map-get($color-gray, 'light');
+      text-decoration: none;
+    }
+  }
+}

_sass/components/_list-social-platform.scss

@@ -0,0 +1,8 @@
+.list-social-plaftorm {
+  display: flex;
+  margin: 0;
+
+  &__item + &__item {
+    margin-left: $spacer;
+  }
+}

_sass/components/_list.scss

@@ -0,0 +1,13 @@
+.list {
+  margin-left: rem(-25px);
+
+  &__item {
+    margin-bottom: 1rem;
+  }
+}
+
+.list--unstyled {
+  @include list-unstyled();
+
+  margin-bottom: 0;
+}

_sass/functions/_sizing.scss

@@ -0,0 +1,29 @@
+@function em($values, $base-font-size: 16px) {
+  $list: ();
+
+  @each $value in $values {
+    @if ($value == 0 or $value == auto) {
+      $list: append($list, $value);
+    } @else {
+      $em-value: ($value / $base-font-size)+em;
+      $list: append($list, $em-value);
+    }
+  }
+
+  @return $list;
+}
+
+@function rem($values, $base-font-size: 16px) {
+  $list: ();
+
+  @each $value in $values {
+    @if ($value == 0 or $value == auto) {
+      $list: append($list, $value);
+    } @else {
+      $rem-value: ($value / $base-font-size)+rem;
+      $list: append($list, $rem-value);
+    }
+  }
+
+  @return $list;
+}

_sass/layouts/default.scss

@@ -1,11 +1,33 @@
 .layout-default body {
   display: grid;
-  grid-template-rows: 8.5rem 1fr 5rem;
+  grid-template-rows: rem(92px) 1fr rem(40px);
 
   min-height: 100vh;
-  padding: 0 5vw;
+
+  background: {
+    image: image-url('shared/bangkok-strip.svg');
+    repeat: no-repeat;
+    size: 250% auto;
+    position: center bottom;
+  }
+
+  @include media-breakpoint-up('sm') {
+    background-size: 100% auto;
+  }
+}
+
+.layout-default .app-header,
+.layout-default .app-content,
+.layout-default .app-footer {
+  @include make-container();
+
+  @include media-breakpoint-up('lg') {
+    padding-right: $grid-gutter-width;
+    padding-left: $grid-gutter-width;
+  }
 }
 
 .layout-default .app-header {
-  width: 100%;
+  padding-top: rem(30px);
+  padding-bottom: rem(30px);
 }