mirror of
https://github.com/onkelbeh/cheatsheets.git
synced 2025-06-16 23:27:46 +02:00
Add link to home
This commit is contained in:
Rico Sta. Cruz
parent
8061026ff6
commit
acee539004
@ -11,26 +11,52 @@
|
||||
| where_exp: "page", "page.deprecated != true"
|
||||
| sort: "weight", "last"
|
||||
%}
|
||||
<div class='related-posts'>
|
||||
<div class='related-posts' id='related'>
|
||||
<div class='container'>
|
||||
{% if include.page.category == 'Others' %}
|
||||
<h3>Other cheatsheets</h3>
|
||||
{% else %}
|
||||
<h3>Other {{ include.page.category }} cheatsheets</h3>
|
||||
{% endif %}
|
||||
<div class='related-posts-section'>
|
||||
<div class='callout'>
|
||||
<a class='related-posts-callout' href='{{ base }}'>
|
||||
<div class='text'>
|
||||
<i class='icon'></i>
|
||||
|
||||
<ul class='related-post-list'>
|
||||
{% for page in category_pages limit: 6 %}
|
||||
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<span class='description'>
|
||||
Over {{ site.pages | size }} curated cheatsheets, by developers for developers.
|
||||
</span>
|
||||
|
||||
<h3>Top cheatsheets</h3>
|
||||
<span class='push-button -dark'>
|
||||
Cheatsheets home
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class='related-post-list'>
|
||||
{% for page in top_pages limit: 6 %}
|
||||
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class='group'>
|
||||
<div class='related-posts-group'>
|
||||
{% if include.page.category == 'Others' %}
|
||||
<h3>Other cheatsheets</h3>
|
||||
{% else %}
|
||||
<h3>Other {{ include.page.category }} cheatsheets</h3>
|
||||
{% endif %}
|
||||
|
||||
<ul class='related-post-list'>
|
||||
{% for page in category_pages limit: 6 %}
|
||||
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='group'>
|
||||
<div class='related-posts-group'>
|
||||
<h3>Top cheatsheets</h3>
|
||||
|
||||
<ul class='related-post-list'>
|
||||
{% for page in top_pages limit: 6 %}
|
||||
{% include 2017/related-posts-item.html page=page class='item related-post-item' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
80
_sass/2017/components/related-post-item.scss
Normal file
80
_sass/2017/components/related-post-item.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
60
_sass/2017/components/related-posts-callout.scss
Normal file
60
_sass/2017/components/related-posts-callout.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
17
_sass/2017/components/related-posts-group.scss
Normal file
17
_sass/2017/components/related-posts-group.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
67
_sass/2017/components/related-posts-section.scss
Normal file
67
_sass/2017/components/related-posts-section.scss
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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
|
||||
//
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user