From 2c318a2678466fb1cd873f3fb60164ee88c6d436 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 29 Aug 2017 01:25:55 +0800 Subject: [PATCH] Update --- _config.yml | 1 + _includes/2017/pages-list-item.html | 5 ++ _includes/2017/top-nav.html | 4 ++ _sass/2017/components/attribute-peg.scss | 17 ++++++ _sass/2017/components/top-nav.scss | 67 +++++++++++++++++++++--- _sass/2017/style.scss | 1 + _sass/2017/utils/heading-style.scss | 14 ++++- _sass/2017/variables.scss | 2 +- elixir.md | 2 +- gh-pages.md | 2 +- homebrew.md | 1 + html-meta.md | 48 +++++++++++++---- html.md | 5 +- jekyll-github.md | 2 +- jekyll.md | 1 + pass.md | 11 +++- 16 files changed, 155 insertions(+), 28 deletions(-) create mode 100644 _sass/2017/components/attribute-peg.scss diff --git a/_config.yml b/_config.yml index 16e76c3ac..84b497860 100644 --- a/_config.yml +++ b/_config.yml @@ -52,6 +52,7 @@ category_names: - HTML - JavaScript - JavaScript libraries + - Jekyll - Ledger - Markup - Node.js diff --git a/_includes/2017/pages-list-item.html b/_includes/2017/pages-list-item.html index e530b6644..f3dc49723 100644 --- a/_includes/2017/pages-list-item.html +++ b/_includes/2017/pages-list-item.html @@ -1,5 +1,10 @@ {{ include.page.url | remove: '.html' | remove: '/' }} + + {% if include.page.layout == '2017/sheet' %} + + {% endif %} + {% if include.page.title | downcase != include.page.url | remove: '.html' | remove: '/' %} {{ include.page.title }} {% endif %} diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html index 8cc799eb0..b0d463ff8 100644 --- a/_includes/2017/top-nav.html +++ b/_includes/2017/top-nav.html @@ -1,5 +1,9 @@
+
+ +
+ Rico's cheatsheets diff --git a/_sass/2017/components/attribute-peg.scss b/_sass/2017/components/attribute-peg.scss new file mode 100644 index 000000000..5a2bcf700 --- /dev/null +++ b/_sass/2017/components/attribute-peg.scss @@ -0,0 +1,17 @@ +.attribute-peg { + & { + display: inline-block; + height: 12px; + width: 20px; + background: rgba(white, 0.1); + text-align: center; + } + + & > span { + display: inline-block; + width: 8px; + height: 8px; + background: saturate(lighten(#5a8, 16%), 24%); + border-radius: 50%; + } +} diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss index bb109520f..8d0a1779d 100644 --- a/_sass/2017/components/top-nav.scss +++ b/_sass/2017/components/top-nav.scss @@ -1,13 +1,29 @@ .top-nav { & { - border-bottom: solid 1px $dark-line-color; - height: 48px; - line-height: 48px; + height: 64px; + line-height: 64px; text-align: center; - overflow: hidden; + position: relative; } - >.container { + // Horiz line + &::after { + content: ''; + display: block; + position: absolute; + left: 40%; + right: 40%; + bottom: 0; + height: 1px; + background: $dark-line-color; + + @media (max-width: 480px) { + left: 0; + right: 0; + } + } + + > .container { @include gutter(padding-left); @include gutter(padding-right); max-width: $area-width; @@ -19,6 +35,12 @@ & { display: flex; align-items: center; + position: relative; + } + + & > .left { + flex: 0 0 auto; + line-height: 32px; } & > .brand { @@ -48,8 +70,37 @@ } } - & > .actions > .social { + @media (min-width: 481px) { + & > .actions { + position: absolute; + @include gutter(right); + top: (64px - 32px) / 2; + } + + & > .left { + position: absolute; + @include gutter(left); + top: (64px - 32px) / 2; + } + } + + // Home link + & > .left > .home { + text-decoration: none; + + &, + &:visited { + color: $base-mute; + } + + &:hover, + &:focus { + color: $base-a; + } + } + + & > .left > .home::before { + @include ion-icon('md-arrow-back'); + font-size: 16px; } } - -// page-actions.scss diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 8e0d5b1d6..81b6d2526 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -21,3 +21,4 @@ @import './components/page-actions'; @import './components/pages-list'; @import './components/top-nav'; +@import './components/attribute-peg'; diff --git a/_sass/2017/utils/heading-style.scss b/_sass/2017/utils/heading-style.scss index 2bc233d6e..12570b0e3 100644 --- a/_sass/2017/utils/heading-style.scss +++ b/_sass/2017/utils/heading-style.scss @@ -4,7 +4,19 @@ margin-bottom: 16px + 8px; padding-bottom: 16px + 8px; margin-top: 64px; - border-bottom: solid 1px $dark-line-color; + position: relative; + + // Line + &::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, $dark-line-color 50%, transparent); + } @media (max-width: 768px) { margin-bottom: 8px; diff --git a/_sass/2017/variables.scss b/_sass/2017/variables.scss index 86a6cb1ff..7301b936c 100644 --- a/_sass/2017/variables.scss +++ b/_sass/2017/variables.scss @@ -43,7 +43,7 @@ $gray-bg: mix($base-body, $base-panel, 50%); $gray-text: $base-mute; $line-color: rgba($base-mute, 0.05); -$dark-line-color: rgba($base-mute, 0.14); +$dark-line-color: rgba($base-mute, 0.2); // // Shadows diff --git a/elixir.md b/elixir.md index fe99f7cd7..d833c7520 100644 --- a/elixir.md +++ b/elixir.md @@ -1,6 +1,6 @@ --- title: Elixir -category: Development +category: Elixir layout: 2017/sheet --- diff --git a/gh-pages.md b/gh-pages.md index e41c7fc57..4121a7256 100644 --- a/gh-pages.md +++ b/gh-pages.md @@ -1,6 +1,6 @@ --- title: GitHub pages -category: Git +category: Jekyll --- $ echo "foobar.com" > CNAME diff --git a/homebrew.md b/homebrew.md index 219d99609..151f618d7 100644 --- a/homebrew.md +++ b/homebrew.md @@ -1,6 +1,7 @@ --- title: Homebrew layout: 2017/sheet +tags: [Featured] --- ### Commands diff --git a/html-meta.md b/html-meta.md index 443cac75e..7757f094e 100644 --- a/html-meta.md +++ b/html-meta.md @@ -1,33 +1,48 @@ --- title: Meta tags category: HTML +layout: 2017/sheet --- +### Meta tags + ```html +``` +```html ... +``` +```html +``` +```html +``` +```html +``` +```html +``` +```html @@ -38,24 +53,26 @@ category: HTML ```html +``` +```html +``` +```html ``` ### Opengraph for articles -```html -article:published_time -article:modified_time -article:expiration_time -article:author -article:section -article:tag -``` +- `article:published_time` +- `article:modified_time` +- `article:expiration_time` +- `article:author` +- `article:section` +- `article:tag` ### Apple-only @@ -79,13 +96,15 @@ article:tag ``` -### [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) +### Manifest ```html ``` -### [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/) +See: [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) + +### Icons ```html @@ -93,13 +112,17 @@ article:tag +``` +```html +``` +```html @@ -107,8 +130,11 @@ article:tag ``` Chrome on Android recommends [192x192](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android). +See: [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/) -### Reference +## Reference +{: .-one-column} * * +{: .-also-see} diff --git a/html.md b/html.md index 7c9b32161..365020fe3 100644 --- a/html.md +++ b/html.md @@ -1,6 +1,7 @@ --- title: HTML category: HTML +layout: 2017/sheet --- ### Head stuff @@ -61,8 +62,6 @@ category: HTML ### Icons -Only do this if you're not placing the site in the root! - @@ -70,6 +69,8 @@ Only do this if you're not placing the site in the root! +Only do this if you're not placing the site in the root! + ### H5BP HTML tag diff --git a/jekyll-github.md b/jekyll-github.md index 6b869aa63..4a4e20f43 100644 --- a/jekyll-github.md +++ b/jekyll-github.md @@ -1,7 +1,7 @@ --- title: Jekyll for GitHub pages -jekyll_escape: true layout: 2017/sheet +category: Jekyll tags: [WIP] --- diff --git a/jekyll.md b/jekyll.md index 4c1ab61b7..bda42bb92 100644 --- a/jekyll.md +++ b/jekyll.md @@ -3,6 +3,7 @@ title: Jekyll jekyll_escape: true layout: 2017/sheet tags: [Featured] +category: Jekyll --- {% raw %} diff --git a/pass.md b/pass.md index c316d3e55..94f6c152f 100644 --- a/pass.md +++ b/pass.md @@ -1,7 +1,12 @@ --- title: Pass +layout: 2017/sheet --- +Reference +--------- +{: .-three-column} + ### Store and retrieve $ pass insert twitter.com/rsc @@ -19,6 +24,8 @@ title: Pass $ pass edit twitter.com/rsc -### References +## References +{: .-one-column} - * http://passwordstore.org +* +{: .-also-see}