From 3487b67c4b77a901bdbde6ae990bfdcffa5c382c Mon Sep 17 00:00:00 2001 From: Olivier Robert Date: Wed, 6 Mar 2019 21:27:52 +0700 Subject: [PATCH 01/13] Remove content of the landing page --- assets/images/shared/2019.svg | 12 --------- assets/images/shared/bangkok-strip.svg | 11 -------- assets/images/shared/icons/icon-jekyll.svg | 15 ----------- assets/images/shared/ruby.svg | 23 ----------------- assets/images/shared/rubyconfth.svg | 4 --- index.md | 29 ---------------------- 6 files changed, 94 deletions(-) delete mode 100644 assets/images/shared/2019.svg delete mode 100644 assets/images/shared/bangkok-strip.svg delete mode 100644 assets/images/shared/icons/icon-jekyll.svg delete mode 100644 assets/images/shared/ruby.svg delete mode 100644 assets/images/shared/rubyconfth.svg diff --git a/assets/images/shared/2019.svg b/assets/images/shared/2019.svg deleted file mode 100644 index f387a2d..0000000 --- a/assets/images/shared/2019.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/shared/bangkok-strip.svg b/assets/images/shared/bangkok-strip.svg deleted file mode 100644 index 5382981..0000000 --- a/assets/images/shared/bangkok-strip.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/shared/icons/icon-jekyll.svg b/assets/images/shared/icons/icon-jekyll.svg deleted file mode 100644 index d67bdf0..0000000 --- a/assets/images/shared/icons/icon-jekyll.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/shared/ruby.svg b/assets/images/shared/ruby.svg deleted file mode 100644 index 9227348..0000000 --- a/assets/images/shared/ruby.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/shared/rubyconfth.svg b/assets/images/shared/rubyconfth.svg deleted file mode 100644 index 0a5919d..0000000 --- a/assets/images/shared/rubyconfth.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/index.md b/index.md index 9928392..869fc1f 100755 --- a/index.md +++ b/index.md @@ -3,32 +3,3 @@ id: home title: Home permalink: / --- - -
-
- -
-
-September 6-7, 2019 -
-
-Venue: Pullman Bangkok King Power (map) -
-
- -
-

-RubyConfTH -

-

-2019 -

-
- -
- -We know you want to be part of the very first Ruby conference in Thailand. We are still mining the raw gems. - -Keep Me Updated - -
\ No newline at end of file From af2e6c2dd0c6c5f1585cda9fe24d591188fb4c1a Mon Sep 17 00:00:00 2001 From: Olivier Robert Date: Wed, 6 Mar 2019 21:28:35 +0700 Subject: [PATCH 02/13] Implement layout with spacing left for the side navigation --- _layouts/default.html | 4 +++- _sass/layouts/default.scss | 42 ++++++++++++++++---------------------- 2 files changed, 21 insertions(+), 25 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 8f958fc..7dba717 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,7 +16,9 @@ {% include header.html %}
- {{ content }} +
+ {{ content }} +
{% include footer.html %} diff --git a/_sass/layouts/default.scss b/_sass/layouts/default.scss index d87b2c9..72663e9 100755 --- a/_sass/layouts/default.scss +++ b/_sass/layouts/default.scss @@ -1,33 +1,27 @@ -.layout-default body { - display: grid; - grid-template-rows: rem(92px) 1fr rem(40px); - - min-height: 100vh; - - 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(); + > .container { + @include make-container(); + @include make-container-max-widths(); + } +} - @include media-breakpoint-up('lg') { - padding-right: $grid-gutter-width; - padding-left: $grid-gutter-width; +.layout-default .app-header, +.layout-default .app-content { + > .container { + @include media-breakpoint-up('lg') { + padding-left: $app-navigation-lg-width; + } } } .layout-default .app-header { - padding-top: rem(30px); - padding-bottom: rem(30px); + padding-top: rem(24px); + padding-bottom: rem(24px); + + @include media-breakpoint-up('lg') { + padding-top: rem(30px); + padding-bottom: rem(30px); + } } From 223b8dc1cf958b1cb7e4acfae016bf146ba84d07 Mon Sep 17 00:00:00 2001 From: Olivier Robert Date: Wed, 6 Mar 2019 21:29:27 +0700 Subject: [PATCH 03/13] Implement the application header --- _includes/footer.html | 4 +- _includes/header.html | 42 ++++-- _sass/_variables.scss | 5 +- _sass/components/_app-footer.scss | 2 + _sass/components/_app-header.scss | 74 +++++++-- _sass/components/_list-social-platform.scss | 14 +- _sass/components/_logo.scss | 19 +++ _sass/screens/_home.scss | 159 +------------------- assets/images/shared/logo/logo-text.svg | 17 +++ assets/stylesheets/application.scss | 1 + 10 files changed, 147 insertions(+), 190 deletions(-) create mode 100644 _sass/components/_logo.scss create mode 100644 assets/images/shared/logo/logo-text.svg diff --git a/_includes/footer.html b/_includes/footer.html index f6736eb..41d9287 100755 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,3 +1,5 @@
- This work by Nimble is licensed under a Creative Commons Attribution 3.0 Unported Licence +
+ This work by Nimble is licensed under a Creative Commons Attribution 3.0 Unported Licence +
diff --git a/_includes/header.html b/_includes/header.html index eedf1ca..e2bde73 100755 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,18 +1,30 @@
-
- Bangkok.rb -
+
+
+ +
+
+ September 6-7, 2019 +
+
+ Venue: Pullman Bangkok King Power +
+
+
- + +
diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 8adb0f5..3f5407b 100755 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -41,6 +41,10 @@ $zIndex: ( $base-animation-duration: 300ms; $base-animation-timing: linear; +// Layout + +$app-navigation-lg-width: 154px; + ///////////////////////////// // Bootstrap Customization // ///////////////////////////// @@ -54,4 +58,3 @@ $body-color: $base-font-color; $btn-border-radius: 0; $btn-border-radius-lg: 0; -$btn-border-radius-sm: 0; \ No newline at end of file diff --git a/_sass/components/_app-footer.scss b/_sass/components/_app-footer.scss index 8814223..00a59ff 100644 --- a/_sass/components/_app-footer.scss +++ b/_sass/components/_app-footer.scss @@ -3,4 +3,6 @@ align-items: center; line-height: 1.2; + + text-align: center; } diff --git a/_sass/components/_app-header.scss b/_sass/components/_app-header.scss index e5c67f8..9ef5d55 100644 --- a/_sass/components/_app-header.scss +++ b/_sass/components/_app-header.scss @@ -1,23 +1,69 @@ .app-header { - display: flex; - justify-content: space-between; - &__organizer { - line-height: 2rem; - font-size: rem(23px); - font-weight: bold; - text-transform: uppercase; + .container { + display: flex; + justify-content: space-between; + align-items: center; } - &__link { - @include transition(color $base-animation-duration); + &__event { + display: flex; + flex-direction: column; + } + + &__social { + display: none; + + @include media-breakpoint-up('lg') { + display: initial; + } + } + +} + +.app-header__logistic { + margin-top: rem(20px); + + font-size: map-get($font-sizes, 'sm'); + text-transform: uppercase; + + @include media-breakpoint-up('sm') { + display: flex; + + margin-top: rem(6px); + + font-size: map-get($font-sizes, 'lg'); + } + + @include media-breakpoint-up('sm') { + + } + + p { + margin: 0; + } + + a { + color: inherit; + } + + .app-header__venue { + position: relative; + + @include media-breakpoint-up('sm') { + margin-left: rem(40px); + } + } - color: $base-font-color; + .app-header__venue:before { + @include media-breakpoint-up('sm') { + content: '·'; + position: absolute; + left: -24px; + top: 0; - &:hover, - &:active { - color: map-get($color-gray, 'light'); - text-decoration: none; + line-height: rem(32px); + font-size: rem(40px); } } } diff --git a/_sass/components/_list-social-platform.scss b/_sass/components/_list-social-platform.scss index c5492ca..fca1fc0 100644 --- a/_sass/components/_list-social-platform.scss +++ b/_sass/components/_list-social-platform.scss @@ -1,8 +1,20 @@ -.list-social-plaftorm { +.list-social-platform { display: flex; margin: 0; &__item + &__item { margin-left: $spacer; } + + &__link { + @include transition(color $base-animation-duration); + + color: $base-font-color; + + &:hover, + &:active { + color: map-get($color-gray, 'light'); + text-decoration: none; + } + } } diff --git a/_sass/components/_logo.scss b/_sass/components/_logo.scss new file mode 100644 index 0000000..d1f6c20 --- /dev/null +++ b/_sass/components/_logo.scss @@ -0,0 +1,19 @@ +.logo { + @include text-hide(); + + display: block; + + background: { + repeat: no-repeat; + size: contain; + } + + &--text { + width: rem(223px); + height: rem(26px); + + background: { + image: image-url('shared/logo/logo-text.svg') + }; + } +} \ No newline at end of file diff --git a/_sass/screens/_home.scss b/_sass/screens/_home.scss index 602bcd5..e008833 100644 --- a/_sass/screens/_home.scss +++ b/_sass/screens/_home.scss @@ -1,160 +1,3 @@ -body.home .app-content { - padding-top: rem(30px); +body.home { - @include media-breakpoint-up('sm') { - display: flex; - align-items: center; - - // Compensate for the app-header to be the same height as the app-header - // to achieve visual centering - margin-top: rem(-52px); - padding: 0; - } -} - -body.home .announcement { - @include make-container-max-widths(); - - margin: 0 auto; - - // Main text shown below the lead text - > p { - margin-bottom: 0; - - @include media-breakpoint-up('sm') { - font-size: map-get($font-sizes, 'xl'); - } - - @include media-breakpoint-up('lg') { - width: 62%; - } - } - - // Mailing list subscription - &__btn { - margin-top: rem(30px); - - font-weight: 600; - text-transform: uppercase; - - @include media-breakpoint-up('lg') { - margin-top: rem(40px); - padding: rem(30px) rem(52px); - } - } -} - -body.home .announcement__logistic { - font-size: map-get($font-sizes, 'sm'); - text-transform: uppercase; - - @include media-breakpoint-up('sm') { - display: flex; - font-size: map-get($font-sizes, 'lg'); - } - - p { - margin: 0; - } - - a { - color: inherit; - } - - .announcement__venue { - position: relative; - - @include media-breakpoint-up('sm') { - margin-left: rem(40px); - } - } - - .announcement__venue:before { - @include media-breakpoint-up('sm') { - content: '·'; - position: absolute; - left: -24px; - top: 0; - - line-height: rem(32px); - font-size: rem(40px); - } - } -} - -body.home .announcement__lead { - position: relative; - padding: rem(26px) 0; - - &:after { - content: ''; - - position: absolute; - top: rem(76px); - left: rem(164px); - z-index: map-get($zIndex, 'behind'); - - width: rem(70px); - height: rem(70px); - - background: { - image: image-url('shared/ruby.svg'); - repeat: no-repeat; - size: contain; - }; - - @include media-breakpoint-up('sm') { - top: rem(116px); - left: rem(310px); - - width: rem(125px); - height: rem(125px); - } - - @include media-breakpoint-up('lg') { - // Full size image - width: rem(408px); - height: rem(333px); - - top: rem(135px); - right: 0; - left: initial; - transform: rotate(15deg); - } - } - - .announcement__title { - height: rem(47px); - - background: { - image: image-url('shared/rubyconfth.svg'); - repeat: no-repeat; - size: contain; - } - - @include media-breakpoint-up('sm') { - height: rem(87px); - } - } - - .announcement__year { - margin: rem(10px) 0 0; - height: rem(46px); - - background: { - image: image-url('shared/2019.svg'); - repeat: no-repeat; - size: contain; - } - - @include media-breakpoint-up('sm') { - height: rem(88px); - } - - @include media-breakpoint-up('lg') { - margin-top: rem(30px); - - height: rem(105px); - } - } } diff --git a/assets/images/shared/logo/logo-text.svg b/assets/images/shared/logo/logo-text.svg new file mode 100644 index 0000000..d8b9318 --- /dev/null +++ b/assets/images/shared/logo/logo-text.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/stylesheets/application.scss b/assets/stylesheets/application.scss index 9f225aa..1f92448 100755 --- a/assets/stylesheets/application.scss +++ b/assets/stylesheets/application.scss @@ -25,6 +25,7 @@ @import 'components/app-header'; @import 'components/icon'; @import 'components/list'; +@import 'components/logo'; @import 'components/list-social-platform'; @import 'screens/home'; From 728f2186e7ed7ef7a125a383aec770cdf808f9b5 Mon Sep 17 00:00:00 2001 From: Olivier Robert Date: Thu, 7 Mar 2019 12:24:38 +0700 Subject: [PATCH 04/13] Implement the application footer --- _includes/footer.html | 11 ++++++- _sass/components/_app-footer.scss | 39 ++++++++++++++++++++++--- _sass/components/_logo.scss | 9 ++++++ _sass/layouts/default.scss | 6 ++++ assets/images/shared/logo/logo-icon.svg | 10 +++++++ 5 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 assets/images/shared/logo/logo-icon.svg diff --git a/_includes/footer.html b/_includes/footer.html index 41d9287..b9d99c5 100755 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,5 +1,14 @@
- This work by Nimble is licensed under a Creative Commons Attribution 3.0 Unported Licence +
+ + © 2019 Bangkok.rb +
+ +
diff --git a/_sass/components/_app-footer.scss b/_sass/components/_app-footer.scss index 00a59ff..3e1b1fd 100644 --- a/_sass/components/_app-footer.scss +++ b/_sass/components/_app-footer.scss @@ -1,8 +1,39 @@ .app-footer { - display: flex; - align-items: center; - line-height: 1.2; + .container { + display: flex; + justify-content: center; + align-items: center; - text-align: center; + @include media-breakpoint-up('lg') { + justify-content: space-between; + } + } + + &__brand { + display: flex; + align-items: center; + } + + &__copy { + margin-left: 1.25rem; + + font-size: map-get($font-sizes, 'sm'); + } + + &__list-link { + display: none; + + @include media-breakpoint-up('lg') { + display: initial; + } + } + + &__link { + font-size: map-get($font-sizes, 'lg'); + + &, &:hover { + color: $body-color; + } + } } diff --git a/_sass/components/_logo.scss b/_sass/components/_logo.scss index d1f6c20..bd61f58 100644 --- a/_sass/components/_logo.scss +++ b/_sass/components/_logo.scss @@ -8,6 +8,15 @@ size: contain; } + &--icon { + width: rem(71px); + height: rem(50px); + + background: { + image: image-url('shared/logo/logo-icon.svg') + }; + } + &--text { width: rem(223px); height: rem(26px); diff --git a/_sass/layouts/default.scss b/_sass/layouts/default.scss index 72663e9..01fe723 100755 --- a/_sass/layouts/default.scss +++ b/_sass/layouts/default.scss @@ -25,3 +25,9 @@ padding-bottom: rem(30px); } } + + +.layout-default .app-footer { + padding-top: rem(40px); + padding-bottom: rem(40px); +} \ No newline at end of file diff --git a/assets/images/shared/logo/logo-icon.svg b/assets/images/shared/logo/logo-icon.svg new file mode 100644 index 0000000..f5a0885 --- /dev/null +++ b/assets/images/shared/logo/logo-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 7e0098837c0feaee5ab47710502b55722327389d Mon Sep 17 00:00:00 2001 From: Olivier Robert Date: Thu, 7 Mar 2019 21:49:16 +0700 Subject: [PATCH 05/13] As a user, I can see the application navigation (#35) Closes #23 ## What happened Implement the navigation menu with DIFFERENT behaviors on large and small screens. ## Insight * I used the Scrollspy component [Bootstrap native](http://thednp.github.io/bootstrap.native/) * I added some extra resize event binding to make sure the navigation is reset each time. The common use case is when switching from portrait to landscape modes. ## Proof Of Work ![2562-03-07 21 43 52](https://user-images.githubusercontent.com/696529/53964581-324b4d00-4122-11e9-9830-328490cf72d5.gif) ![2562-03-07 21 45 34](https://user-images.githubusercontent.com/696529/53964677-60309180-4122-11e9-9d08-965f8b7439d6.gif) --- _data/social_platforms.yml | 2 +- _includes/footer.html | 4 +- _includes/header.html | 55 +- _includes/icon-sprite.svg | 2 +- _includes/list-social-platform.html | 12 + _js/application.js | 1 + _js/components/AppNavigation/index.js | 222 ++ _js/initializers/index.js | 2 + _js/initializers/navigation.js | 5 + _js/polyfills/smoothscroll.js | 9 + _layouts/default.html | 3 + _sass/_variables.scss | 11 +- _sass/base/_typography.scss | 5 + _sass/components/_app-footer.scss | 2 +- _sass/components/_app-navigation.scss | 193 ++ _sass/components/_btn.scss | 25 + _sass/components/_icon-hamburger.scss | 60 + _sass/components/_logo.scss | 11 +- _sass/layouts/default.scss | 11 +- _sass/screens/_home.scss | 4 +- assets/images/icon-sprite.svg | 2 +- assets/images/shared/logo/logo-text-icon.svg | 17 + assets/images/shared/logo/logo-text.svg | 26 +- assets/javascript/.keep | 0 assets/stylesheets/application.scss | 3 + config/webpack/shared.js | 13 +- index.md | 12 + package-lock.json | 2901 +++++++++--------- package.json | 3 + vendor/javascript/bootstrap/index.js | 13 + 30 files changed, 2150 insertions(+), 1479 deletions(-) create mode 100644 _includes/list-social-platform.html create mode 100644 _js/components/AppNavigation/index.js create mode 100644 _js/initializers/index.js create mode 100644 _js/initializers/navigation.js create mode 100644 _js/polyfills/smoothscroll.js create mode 100644 _sass/components/_app-navigation.scss create mode 100644 _sass/components/_btn.scss create mode 100644 _sass/components/_icon-hamburger.scss create mode 100644 assets/images/shared/logo/logo-text-icon.svg delete mode 100755 assets/javascript/.keep create mode 100644 vendor/javascript/bootstrap/index.js diff --git a/_data/social_platforms.yml b/_data/social_platforms.yml index cfc9f10..832829a 100644 --- a/_data/social_platforms.yml +++ b/_data/social_platforms.yml @@ -1,6 +1,6 @@ - name: Facebook icon: facebook - url: https://www.facebook.com/Rubyconfth-294423114523650 + url: https://www.facebook.com/rubyconfth - name: Twitter icon: twitter url: https://twitter.com/rubyconfth diff --git a/_includes/footer.html b/_includes/footer.html index b9d99c5..3ed60db 100755 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,7 +1,9 @@