+
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