From acee53900495a30cdb6a3f5d1c5247c98a20fc5c Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Wed, 30 Aug 2017 18:24:20 +0800 Subject: [PATCH] Add link to home --- _includes/2017/related-posts.html | 60 ++++++--- _sass/2017/components/push-button.scss | 19 ++- _sass/2017/components/related-post-item.scss | 80 ++++++++++++ .../components/related-posts-callout.scss | 60 +++++++++ .../2017/components/related-posts-group.scss | 17 +++ .../components/related-posts-section.scss | 67 ++++++++++ _sass/2017/components/related-posts.scss | 114 ++---------------- _sass/2017/style.scss | 4 + _sass/2017/variables.scss | 9 ++ assets/2017/script.js | 11 +- jekyll.md | 6 +- lol | 2 + 12 files changed, 321 insertions(+), 128 deletions(-) create mode 100644 _sass/2017/components/related-post-item.scss create mode 100644 _sass/2017/components/related-posts-callout.scss create mode 100644 _sass/2017/components/related-posts-group.scss create mode 100644 _sass/2017/components/related-posts-section.scss create mode 100644 lol diff --git a/_includes/2017/related-posts.html b/_includes/2017/related-posts.html index 1b5fcd20c..41bb77a67 100644 --- a/_includes/2017/related-posts.html +++ b/_includes/2017/related-posts.html @@ -11,26 +11,52 @@ | where_exp: "page", "page.deprecated != true" | sort: "weight", "last" %} -
+ diff --git a/_sass/2017/components/push-button.scss b/_sass/2017/components/push-button.scss index afc5abf6f..cf9d89383 100644 --- a/_sass/2017/components/push-button.scss +++ b/_sass/2017/components/push-button.scss @@ -7,10 +7,7 @@ &, &:visited { background-color: $base-a; - background: linear-gradient( - to right, - $base-a, - adjust-color($base-a, $lightness: 2%, $hue: 16deg)); + background: $base-a-gradient; color: white; } @@ -21,3 +18,17 @@ color: white; } } + +.push-button.-dark { + &, + &:visited { + background: darken($base-a, 16%); + color: white; + } + + &:hover, + &:focus { + background: darken($base-a, 24%); + color: white; + } +} diff --git a/_sass/2017/components/related-post-item.scss b/_sass/2017/components/related-post-item.scss new file mode 100644 index 000000000..4e86b04d8 --- /dev/null +++ b/_sass/2017/components/related-post-item.scss @@ -0,0 +1,80 @@ +.related-post-item { + & { + display: flex; + text-align: left; + line-height: 1.4; + } + + // Layout + & > a { + flex: 1 1 100%; + display: block; + border-radius: 2px; + box-shadow: $shadow2; + padding: 16px; + text-decoration: none; + } + + // Color + & > a, + & > a:visited { + background: white; + color: $base-mute; + + & > strong { + color: $base-a; + } + + &:hover, + &:focus { + color: $base-a; + } + + &:hover > strong, + &:focus > strong { + color: darken($base-a, 16%); + } + } + + &:first-of-type > a, + &:first-of-type > a:visited { + background: $base-a; + color: rgba(white, 0.5); + + & > strong { + color: white; + } + + &:hover, + &:focus { + color: white; + } + + &:hover > strong, + &:focus > strong { + color: white; + } + + &:hover, + &:focus { + background: darken($base-a, 8%); + } + } + + // Two lines when bigger + @media (min-width: 481px) { + & > a > strong, + & > a > span { + display: block; + } + } + + & > a > strong { + @include font-size(1); + font-weight: normal; + } + + & > a > span { + @include font-size(-1); + } +} diff --git a/_sass/2017/components/related-posts-callout.scss b/_sass/2017/components/related-posts-callout.scss new file mode 100644 index 000000000..561bb9df1 --- /dev/null +++ b/_sass/2017/components/related-posts-callout.scss @@ -0,0 +1,60 @@ +/* + * Callout + */ + +.related-posts-callout { + & { + display: flex; + text-decoration: none; + background: $base-a-gradient; + padding: 32px; + align-items: center; + justify-content: center; + color: white; + border-radius: 2px; + box-shadow: $shadow2; + text-shadow: 0 1px 1px rgba(black, 0.2); + } + + &, + &:visited { + color: white; + } + + &:hover, + &:focus { + background: darken($base-a, 8%); + } + + & > .text { + margin: auto; + text-align: center; + } + + & > .text > .icon { + margin-bottom: 16px; + display: block; + color: adjust-color($base-a, $lightness: 16%, $hue: 20deg); + } + + & > .text > .icon::before { + @include ion-icon('ios-arrow-back'); + font-size: 48px; + height: 64px; + width: 64px; + line-height: 64px - 4px; + text-align: center; + border: solid 2px adjust-color($base-a, $lightness: 16%, $hue: 20deg); + border-radius: 50%; + text-indent: -2px; + text-shadow: none; + } + + & > .text > .description { + @include font-size(1); + line-height: 1.4; + font-weight: 300; + display: block; + margin-bottom: 16px; + } +} diff --git a/_sass/2017/components/related-posts-group.scss b/_sass/2017/components/related-posts-group.scss new file mode 100644 index 000000000..a91a57431 --- /dev/null +++ b/_sass/2017/components/related-posts-group.scss @@ -0,0 +1,17 @@ +/* + * Group + */ + +.related-posts-group { + & > h3 { + @include font-size(1); + color: $base-a; + margin: 0; + padding: 0; + margin-bottom: 16px; + padding-bottom: 16px; + border-bottom: solid 1px $dark-line-color; + line-height: 1.2; + font-weight: 400; + } +} diff --git a/_sass/2017/components/related-posts-section.scss b/_sass/2017/components/related-posts-section.scss new file mode 100644 index 000000000..a6d09ff09 --- /dev/null +++ b/_sass/2017/components/related-posts-section.scss @@ -0,0 +1,67 @@ +/* + * Section + * has callout and group + */ + +.related-posts-section { + & { + display: flex; + margin-left: -16px; + margin-right: -16px; + } + + & > .callout, + & > .group { + margin: 0 16px; + } + + & > .callout { + flex: 1 1 33%; + } + + & > .group { + flex: 1 1 50%; + } + + & > .callout { + display: flex; + + & > * { + flex: 1 0 100%; + } + } + + // Mobile + @media (max-width: 480px) { + & { + flex-wrap: wrap; + } + + & > .callout, + & > .group { + margin-top: 16px; + margin-bottom: 16px; + flex: 1 1 100%; + } + } + + // Tablet + @media (min-width: 481px) { + @media (max-width: 768px) { + & { + flex-wrap: wrap; + } + + & > .callout, + & > .group { + margin-top: 16px; + margin-bottom: 16px; + flex: 1 1 100%; + } + + & > .group { + flex: 1 1 40%; + } + } + } +} diff --git a/_sass/2017/components/related-posts.scss b/_sass/2017/components/related-posts.scss index 199bada9d..4d9d2dc74 100644 --- a/_sass/2017/components/related-posts.scss +++ b/_sass/2017/components/related-posts.scss @@ -1,33 +1,22 @@ .related-posts { & { - @include gutter(padding-top, $multiplier: 4); - @include gutter(padding-bottom, $multiplier: 4); @include gutter(margin-top, $multiplier: 4); + padding-top: 16px; + padding-bottom: 16px; background: $gray-bg; } + @media (min-width: 481px) { + padding-top: 64px; + padding-bottom: 64px; + } + & > .container { @include gutter(padding-left); @include gutter(padding-right); max-width: $area-width; margin: 0 auto; } - - & > .container > h3 { - @include font-size(1); - font-weight: normal; - color: $base-head; - margin: 16px 0; - padding: 0; - } - - & > .container > :first-child { - margin-top: 0; - } - - & > .container > :last-child { - margin-bottom: 0; - } } .related-post-list { @@ -41,6 +30,7 @@ & { display: flex; margin: -4px; + flex-wrap: wrap; } @media (max-width: 768px) { @@ -48,96 +38,12 @@ } & > .item { - flex: 1 1 (100% / 2); + flex: 1 1 auto; margin: 4px; @media (min-width: 481px) { - flex: 1 1 (100% / 4); - } - - @media (min-width: 769px) { - flex: 1 1 (100% / 8); + flex: 1 1 40%; } } } - -.related-post-item.related-post-item { - & { - display: flex; - text-align: left; - line-height: 1.4; - } - - // Layout - & > a { - flex: 1 1 100%; - display: block; - border-radius: 2px; - box-shadow: $shadow2; - padding: 16px; - text-decoration: none; - } - - // Color - & > a, - & > a:visited { - background: white; - color: $base-mute; - - & > strong { - color: $base-a; - } - - &:hover, - &:focus { - color: $base-a; - } - - &:hover > strong, - &:focus > strong { - color: darken($base-a, 16%); - } - } - - &:first-of-type > a, - &:first-of-type > a:visited { - background: $base-a; - color: rgba(white, 0.5); - - & > strong { - color: white; - } - - &:hover, - &:focus { - color: white; - } - - &:hover > strong, - &:focus > strong { - color: white; - } - - &:hover, - &:focus { - background: darken($base-a, 8%); - } - } - - @media (min-width: 481px) { - & > a > strong, - & > a > span { - display: block; - } - } - - & > a > strong { - @include font-size(1); - font-weight: normal; - } - - & > a > span { - @include font-size(-1); - } -} diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 0740d3f6a..1dee5536c 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -25,6 +25,10 @@ @import './components/pages-list'; @import './components/push-button'; @import './components/related-posts'; +@import './components/related-posts-callout'; +@import './components/related-posts-group'; +@import './components/related-posts-section'; +@import './components/related-post-item'; @import './components/search-box'; @import './components/side-ad'; @import './components/site-header'; diff --git a/_sass/2017/variables.scss b/_sass/2017/variables.scss index c489105bc..bb2067efd 100644 --- a/_sass/2017/variables.scss +++ b/_sass/2017/variables.scss @@ -45,6 +45,15 @@ $gray-text: $base-mute; $line-color: rgba($base-mute, 0.05); $dark-line-color: rgba($base-mute, 0.2); +// +// Variants +// + +$base-a-gradient: linear-gradient( + 5deg, + $base-a, + adjust-color($base-a, $lightness: 2%, $hue: 16deg)); + // // Shadows // diff --git a/assets/2017/script.js b/assets/2017/script.js index 9db566f76..ef891adcd 100644 --- a/assets/2017/script.js +++ b/assets/2017/script.js @@ -82,7 +82,11 @@ $(function () { */ function splitwords (str) { - return str.toLowerCase().split(/[ \/\-_]/) + const words = str.toLowerCase() + .split(/[ \/\-_]/) + .filter(k => k && k.length !== 0) + + return words } /* @@ -96,6 +100,9 @@ const Search = { show (val) { const keywords = splitwords(val) + + if (!keywords.length) return Search.showAll() + const selectors = keywords .map(k => `[data-search-index~=${JSON.stringify(k)}]`) .join('') @@ -123,9 +130,11 @@ function permutate (data) { function permutateString (str) { let words = [] let inputs = splitwords(str) + inputs.forEach(word => { words = words.concat(permutateWord(word)) }) + return words } diff --git a/jekyll.md b/jekyll.md index 8513dab68..5473dc17c 100644 --- a/jekyll.md +++ b/jekyll.md @@ -37,8 +37,10 @@ gem install bundler ```bash # Build the Gemfile -echo "source 'https://rubygems.org'" > Gemfile -echo "gem 'github-pages', group: :jekyll_plugins" >> Gemfile +cat > Gemfile <<-END + source 'https://rubygems.org' + gem 'github-pages', group: :jekyll_plugins +END ``` ```bash diff --git a/lol b/lol new file mode 100644 index 000000000..e2d3190dc --- /dev/null +++ b/lol @@ -0,0 +1,2 @@ +lol +-EOF